/* ============================================
   TEMA BARBERÍA - ESTILOS PERSONALIZADOS
   Colores: Negro, Dorado, Rojo, Blanco
   ============================================ */

:root {
    /* Colores principales de barbería */
    --barberia-negro: #1a1a1a;
    --barberia-negro-oscuro: #0d0d0d;
    --barberia-dorado: #D4AF37;
    --barberia-dorado-claro: #F4D03F;
    --barberia-dorado-oscuro: #B8860B;
    --barberia-rojo: #C41E3A;
    --barberia-rojo-oscuro: #8B0000;
    --barberia-blanco: #FFFFFF;
    --barberia-gris: #2C2C2C;
    --barberia-gris-claro: #3C3C3C;
}

/* ============================================
   ESTILOS GENERALES
   ============================================ */

body {
    background: linear-gradient(135deg, #1a1a1a 0%, #2C2C2C 100%) !important;
    font-family: 'Source Sans Pro', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #f5f5f5 !important;
    min-height: 100vh;
}

.content-wrapper {
    background: transparent !important;
}

.content {
    background: transparent !important;
}

.wrapper {
    background: linear-gradient(135deg, #1a1a1a 0%, #2C2C2C 100%) !important;
}

/* ============================================
   SIDEBAR (Menú lateral)
   ============================================ */

.main-sidebar {
    background: linear-gradient(180deg, var(--barberia-negro) 0%, var(--barberia-negro-oscuro) 100%) !important;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5);
}

.main-sidebar .brand-link {
    background: var(--barberia-negro-oscuro) !important;
    border-bottom: 3px solid var(--barberia-dorado) !important;
}

.main-sidebar .brand-link .brand-text {
    color: var(--barberia-dorado) !important;
    font-weight: 700;
    font-size: 1.3rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    letter-spacing: 1px;
}

.main-sidebar .user-panel {
    border-bottom: 1px solid var(--barberia-gris-claro) !important;
}

.main-sidebar .user-panel .info a {
    color: var(--barberia-dorado) !important;
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link {
    color: #c0c0c0 !important;
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link:hover {
    background: var(--barberia-gris) !important;
    color: var(--barberia-dorado) !important;
    border-left-color: var(--barberia-dorado);
    transform: translateX(5px);
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link.active {
    background: linear-gradient(90deg, var(--barberia-gris) 0%, var(--barberia-gris-claro) 100%) !important;
    color: var(--barberia-dorado) !important;
    border-left-color: var(--barberia-dorado);
    font-weight: 600;
    box-shadow: inset 0 0 10px rgba(212, 175, 55, 0.2);
}

.main-sidebar .nav-sidebar .nav-icon {
    color: var(--barberia-dorado) !important;
}

/* ============================================
   NAVBAR (Barra superior)
   ============================================ */

.main-header {
    background: linear-gradient(90deg, var(--barberia-negro) 0%, var(--barberia-gris) 100%) !important;
    border-bottom: 3px solid var(--barberia-dorado) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.navbar-nav .nav-link {
    color: #e0e0e0 !important;
}

.navbar-nav .nav-link:hover {
    color: var(--barberia-dorado) !important;
}

/* ============================================
   CARDS (Tarjetas)
   ============================================ */

.card {
    background: var(--barberia-gris) !important;
    border: 1px solid var(--barberia-gris-claro) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3) !important;
}

.card-header {
    background: linear-gradient(135deg, var(--barberia-negro) 0%, var(--barberia-gris) 100%) !important;
    border-bottom: 2px solid var(--barberia-dorado) !important;
    color: var(--barberia-dorado) !important;
    font-weight: 600;
    padding: 15px 20px;
}

.card-outline.card-primary {
    border-top: 3px solid var(--barberia-dorado) !important;
}

.card-outline.card-success {
    border-top: 3px solid #28a745 !important;
}

.card-outline.card-info {
    border-top: 3px solid #17a2b8 !important;
}

.card-outline.card-warning {
    border-top: 3px solid var(--barberia-dorado) !important;
}

.card-outline.card-danger {
    border-top: 3px solid var(--barberia-rojo) !important;
}

/* ============================================
   BOTONES
   ============================================ */

.btn-primary {
    background: linear-gradient(135deg, var(--barberia-dorado) 0%, var(--barberia-dorado-oscuro) 100%) !important;
    border: none !important;
    color: var(--barberia-negro) !important;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(212, 175, 55, 0.3);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--barberia-dorado-claro) 0%, var(--barberia-dorado) 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(212, 175, 55, 0.5);
    color: var(--barberia-negro) !important;
}

.btn-success {
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%) !important;
    border: none !important;
    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.3);
}

.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(40, 167, 69, 0.5);
}

.btn-danger {
    background: linear-gradient(135deg, var(--barberia-rojo) 0%, var(--barberia-rojo-oscuro) 100%) !important;
    border: none !important;
    box-shadow: 0 4px 10px rgba(196, 30, 58, 0.3);
}

.btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(196, 30, 58, 0.5);
}

.btn-info {
    background: linear-gradient(135deg, #17a2b8 0%, #117a8b 100%) !important;
    border: none !important;
    box-shadow: 0 4px 10px rgba(23, 162, 184, 0.3);
}

.btn-info:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(23, 162, 184, 0.5);
}

.btn-warning {
    background: linear-gradient(135deg, var(--barberia-dorado) 0%, var(--barberia-dorado-oscuro) 100%) !important;
    border: none !important;
    color: var(--barberia-negro) !important;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(212, 175, 55, 0.3);
}

.btn-warning:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(212, 175, 55, 0.5);
    color: var(--barberia-negro) !important;
}

/* ============================================
   TABLAS
   ============================================ */

.table {
    background: var(--barberia-gris) !important;
    color: #f5f5f5 !important;
}

.table thead th {
    background: linear-gradient(135deg, var(--barberia-negro) 0%, var(--barberia-gris) 100%) !important;
    color: var(--barberia-dorado) !important;
    border-bottom: 2px solid var(--barberia-dorado) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table tbody tr {
    border-bottom: 1px solid var(--barberia-gris-claro) !important;
    transition: background 0.3s ease;
}

.table tbody tr:hover {
    background: var(--barberia-gris-claro) !important;
}

.table tbody td {
    color: #e0e0e0 !important;
    border-color: var(--barberia-gris-claro) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background: rgba(44, 44, 44, 0.5) !important;
}

.table-success {
    background: rgba(40, 167, 69, 0.1) !important;
}

.table-success thead th {
    background: rgba(40, 167, 69, 0.3) !important;
}

/* ============================================
   FORMULARIOS
   ============================================ */

.form-control {
    background: var(--barberia-gris) !important;
    border: 1px solid var(--barberia-gris-claro) !important;
    color: #f5f5f5 !important;
    border-radius: 5px;
}

.form-control:focus {
    background: var(--barberia-gris-claro) !important;
    border-color: var(--barberia-dorado) !important;
    color: #f5f5f5 !important;
    box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.25) !important;
}

.form-control::placeholder {
    color: #999 !important;
}

label {
    color: var(--barberia-dorado) !important;
    font-weight: 500;
}

.input-group-text {
    background: var(--barberia-negro) !important;
    border: 1px solid var(--barberia-gris-claro) !important;
    color: var(--barberia-dorado) !important;
}

/* ============================================
   INFO BOXES (Cajas de información)
   ============================================ */

.info-box {
    background: var(--barberia-gris) !important;
    border: 1px solid var(--barberia-gris-claro) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.info-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3) !important;
}

.info-box-icon {
    background: linear-gradient(135deg, var(--barberia-dorado) 0%, var(--barberia-dorado-oscuro) 100%) !important;
}

.info-box-icon.bg-success {
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%) !important;
}

.info-box-icon.bg-primary {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
}

.info-box-icon.bg-info {
    background: linear-gradient(135deg, #17a2b8 0%, #117a8b 100%) !important;
}

.info-box-icon.bg-warning {
    background: linear-gradient(135deg, var(--barberia-dorado) 0%, var(--barberia-dorado-oscuro) 100%) !important;
}

.info-box-icon.bg-danger {
    background: linear-gradient(135deg, var(--barberia-rojo) 0%, var(--barberia-rojo-oscuro) 100%) !important;
}

.info-box-text {
    color: #c0c0c0 !important;
}

.info-box-number {
    color: var(--barberia-dorado) !important;
    font-weight: 700;
    font-size: 1.5rem;
}

/* ============================================
   BADGES
   ============================================ */

.badge-primary {
    background: var(--barberia-dorado) !important;
    color: var(--barberia-negro) !important;
}

.badge-success {
    background: #28a745 !important;
}

.badge-danger {
    background: var(--barberia-rojo) !important;
}

.badge-warning {
    background: var(--barberia-dorado) !important;
    color: var(--barberia-negro) !important;
}

.badge-info {
    background: #17a2b8 !important;
}

/* ============================================
   ALERTAS
   ============================================ */

.alert-primary {
    background: rgba(212, 175, 55, 0.2) !important;
    border-color: var(--barberia-dorado) !important;
    color: var(--barberia-dorado) !important;
}

.alert-success {
    background: rgba(40, 167, 69, 0.2) !important;
    border-color: #28a745 !important;
    color: #28a745 !important;
}

.alert-danger {
    background: rgba(196, 30, 58, 0.2) !important;
    border-color: var(--barberia-rojo) !important;
    color: var(--barberia-rojo) !important;
}

.alert-warning {
    background: rgba(212, 175, 55, 0.2) !important;
    border-color: var(--barberia-dorado) !important;
    color: var(--barberia-dorado) !important;
}

/* ============================================
   MODALES
   ============================================ */

.modal-content {
    background: var(--barberia-gris) !important;
    border: 2px solid var(--barberia-dorado) !important;
    border-radius: 8px;
}

.modal-header {
    background: linear-gradient(135deg, var(--barberia-negro) 0%, var(--barberia-gris) 100%) !important;
    border-bottom: 2px solid var(--barberia-dorado) !important;
    color: var(--barberia-dorado) !important;
}

.modal-title {
    color: var(--barberia-dorado) !important;
    font-weight: 600;
}

.modal-body {
    background: var(--barberia-gris) !important;
    color: #f5f5f5 !important;
}

.modal-footer {
    background: var(--barberia-gris) !important;
    border-top: 1px solid var(--barberia-gris-claro) !important;
}

/* ============================================
   CONTENT HEADER
   ============================================ */

.content-header h1 {
    color: var(--barberia-dorado) !important;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.content-header hr {
    border-top: 2px solid var(--barberia-dorado) !important;
    opacity: 0.5;
}

/* ============================================
   PAGINACIÓN
   ============================================ */

.pagination .page-link {
    background: var(--barberia-gris) !important;
    border-color: var(--barberia-gris-claro) !important;
    color: var(--barberia-dorado) !important;
}

.pagination .page-link:hover {
    background: var(--barberia-gris-claro) !important;
    border-color: var(--barberia-dorado) !important;
    color: var(--barberia-dorado-claro) !important;
}

.pagination .page-item.active .page-link {
    background: var(--barberia-dorado) !important;
    border-color: var(--barberia-dorado) !important;
    color: var(--barberia-negro) !important;
}

/* ============================================
   SWITCHES Y TOGGLES
   ============================================ */

.switch input:checked + .slider {
    background-color: var(--barberia-dorado) !important;
}

.switch .slider:before {
    background-color: var(--barberia-blanco) !important;
}

/* ============================================
   SCROLLBAR PERSONALIZADO
   ============================================ */

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--barberia-negro);
}

::-webkit-scrollbar-thumb {
    background: var(--barberia-dorado);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--barberia-dorado-claro);
}

/* ============================================
   EFECTOS ESPECIALES
   ============================================ */

.zoomP {
    transition: transform 0.3s ease;
}

.zoomP:hover {
    transform: scale(1.05);
}

/* Efecto de brillo en elementos dorados */
.glow-gold {
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

/* Líneas decorativas */
.decorative-line {
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--barberia-dorado), transparent);
    margin: 20px 0;
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* ============================================
   ELEMENTOS ESPECÍFICOS DE VENTAS
   ============================================ */

.teclado {
    background: linear-gradient(135deg, var(--barberia-negro) 0%, var(--barberia-gris) 100%) !important;
}

.bg-success {
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%) !important;
}

.bg-gradient-success {
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%) !important;
}

.table-success {
    background: rgba(40, 167, 69, 0.1) !important;
}

.table-success thead th {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.3) 0%, rgba(30, 126, 52, 0.3) 100%) !important;
    color: #fff !important;
}

/* Selects y dropdowns */
.select2-container--default .select2-selection--single {
    background: var(--barberia-gris) !important;
    border: 1px solid var(--barberia-gris-claro) !important;
    color: #f5f5f5 !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #f5f5f5 !important;
}

.select2-dropdown {
    background: var(--barberia-gris) !important;
    border: 1px solid var(--barberia-dorado) !important;
}

.select2-results__option {
    color: #f5f5f5 !important;
}

.select2-results__option--highlighted {
    background: var(--barberia-dorado) !important;
    color: var(--barberia-negro) !important;
}

/* DataTables */
.dataTables_wrapper .dataTables_filter input {
    background: var(--barberia-gris) !important;
    border: 1px solid var(--barberia-gris-claro) !important;
    color: #f5f5f5 !important;
}

.dataTables_wrapper .dataTables_length select {
    background: var(--barberia-gris) !important;
    border: 1px solid var(--barberia-gris-claro) !important;
    color: #f5f5f5 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--barberia-dorado) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--barberia-dorado) !important;
    color: var(--barberia-negro) !important;
    border: 1px solid var(--barberia-dorado) !important;
}

/* Footer */
.main-footer {
    background: var(--barberia-negro) !important;
    border-top: 2px solid var(--barberia-dorado) !important;
    color: #c0c0c0 !important;
}

/* Breadcrumbs */
.breadcrumb {
    background: var(--barberia-gris) !important;
}

.breadcrumb-item a {
    color: var(--barberia-dorado) !important;
}

.breadcrumb-item.active {
    color: #c0c0c0 !important;
}

/* Textos especiales */
.text-muted {
    color: #999 !important;
}

.text-white {
    color: #fff !important;
}

/* Inputs readonly y disabled */
.form-control[readonly],
.form-control[disabled] {
    background: var(--barberia-negro) !important;
    opacity: 0.7;
}

/* ============================================
   PÁGINA DE LOGIN
   ============================================ */

.login-page {
    background: linear-gradient(135deg, #1a1a1a 0%, #2C2C2C 100%) !important;
    min-height: 100vh;
}

.login-box {
    background: transparent !important;
}

.login-logo {
    color: var(--barberia-dorado) !important;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    font-size: 2rem;
}

.login-card-body {
    background: var(--barberia-gris) !important;
    border: 2px solid var(--barberia-dorado) !important;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.login-card-body .card-title {
    color: var(--barberia-dorado) !important;
    font-weight: 600;
}

/* ============================================
   PRELOADER
   ============================================ */

.preloader {
    background: var(--barberia-negro) !important;
}

.preloader .fa-spinner {
    color: var(--barberia-dorado) !important;
}

/* ============================================
   ELEMENTOS ESPECÍFICOS DE VISTAS
   ============================================ */

/* Cliente minimalista */
#nombre-cliente-minimalista {
    background-color: var(--barberia-gris) !important;
    border: 1px solid var(--barberia-gris-claro) !important;
    color: var(--barberia-dorado) !important;
}

/* Precios editables */
.precio-editable {
    background-color: rgba(212, 175, 55, 0.2) !important;
    border: 1px solid var(--barberia-dorado) !important;
    color: var(--barberia-dorado) !important;
}

.precio-readonly {
    background-color: var(--barberia-negro) !important;
    color: #999 !important;
}

/* Filas de productos */
.product-row:hover,
.servicio-row:hover {
    background-color: rgba(212, 175, 55, 0.1) !important;
}

/* Tablas de productos y clientes */
#tabla_productos tbody tr:hover,
#tabla_clientes tbody tr:hover {
    background-color: rgba(212, 175, 55, 0.15) !important;
    cursor: pointer;
}

/* Input groups */
.input-group-text {
    background: var(--barberia-negro) !important;
    border: 1px solid var(--barberia-gris-claro) !important;
    color: var(--barberia-dorado) !important;
}

/* Small text */
small.text-muted {
    color: #999 !important;
}

/* Links */
a {
    color: var(--barberia-dorado) !important;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--barberia-dorado-claro) !important;
    text-decoration: none;
}

/* Dropdown menus */
.dropdown-menu {
    background: var(--barberia-gris) !important;
    border: 1px solid var(--barberia-dorado) !important;
}

.dropdown-item {
    color: #f5f5f5 !important;
}

.dropdown-item:hover {
    background: var(--barberia-gris-claro) !important;
    color: var(--barberia-dorado) !important;
}

/* Progress bars */
.progress {
    background: var(--barberia-negro) !important;
}

.progress-bar {
    background: var(--barberia-dorado) !important;
}

/* Tooltips */
.tooltip-inner {
    background: var(--barberia-dorado) !important;
    color: var(--barberia-negro) !important;
}

.tooltip.bs-tooltip-top .arrow::before {
    border-top-color: var(--barberia-dorado) !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .main-sidebar {
        transform: translateX(-100%);
    }
    
    .card {
        margin-bottom: 15px;
    }
}