/* Deep Theme Engine - v5.0 (Profile Fixed) */
:root {
    --deep-yellow: #f2a654;
    --deep-lead: #37474f;     /* Panel BG Dark */
    --deep-bg: #263238;       /* Body BG Dark */
    --deep-text: #eceff1;     /* Text Color Dark */
    --deep-input: #455a64;    /* Input BG Dark */
    --deep-error: #f96868;    /* Rojo Error */
    --deep-gray: #e4eaec;     /* Gris líneas/bordes claro */
}

/* =========================================
   1. ESTILOS BASE (TEMA CLARO - DEFAULT)
   ========================================= */
body {
    font-family: Arial, Helvetica, sans-serif !important;
    background-color: #f3f7f9 !important; /* Fondo claro forzado */
    color: #37474f !important; /* Texto oscuro forzado */
    transition: background-color 0.3s, color 0.3s;
}

/* Logo */
.logo-container {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    text-align: center;
}
.logo-container img {
    height: 160px !important;
    width: auto;
    display: inline-block;
}

/* Tarjeta / Panel (Estilo Claro Base) */
.panel {
    background-color: #ffffff !important;
    border: 1px solid #e4eaec !important;
    border-radius: 0.286rem;
    box-shadow: 0 1px 1px rgba(0,0,0,0.05);
    margin-bottom: 30px;
    position: relative;
}

.panel-body {
    padding: 15px !important;
}

/* Títulos en Claro */
.panel-title, h1, h2, h3, h4 {
    color: #37474f !important;
}

/* =========================================
   2. TEMA OBSCURO (OVERRIDES)
   ========================================= */
body.theme-dark {
    background-color: var(--deep-bg) !important;
    color: var(--deep-text) !important;
}

body.theme-dark .panel {
    background-color: var(--deep-lead) !important;
    border: 1px solid #455a64 !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.25);
}

body.theme-dark .panel-heading {
    background-color: rgba(0,0,0,0.1);
    border-bottom: 1px solid #455a64;
}

/* Títulos en Oscuro */
body.theme-dark .panel-title,
body.theme-dark h1, body.theme-dark h2, body.theme-dark h3, 
body.theme-dark h4.example-title {
    color: var(--deep-yellow) !important;
}
body.theme-dark label, 
body.theme-dark .form-control-label {
    color: #eceff1 !important;
}

/* Inputs en Modo Oscuro */
body.theme-dark .form-control {
    background-color: rgba(0,0,0,0.2) !important;
    border-color: #546e7a !important;
    color: #fff !important;
    height: 40px;
}
body.theme-dark .form-control:focus {
    border-color: var(--deep-yellow) !important;
}

/* =========================================
   3. DROPDOWNS (Select2 Fixes)
   ========================================= */
body.theme-dark .select2-container--default .select2-selection--single {
    background-color: rgba(0,0,0,0.2) !important;
    border-color: #546e7a !important;
    height: 40px;
}
body.theme-dark .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #ffffff !important; /* Texto blanco puro al seleccionar */
    line-height: 38px;
    font-weight: 500;
}
body.theme-dark .select2-dropdown {
    background-color: var(--deep-lead) !important;
    border-color: #546e7a;
}
body.theme-dark .select2-results__option { color: #fff; }
body.theme-dark .select2-results__option--highlighted[aria-selected] {
    background-color: var(--deep-yellow) !important;
    color: #000 !important;
}

/* =========================================
   4. PERLAS (WIZARD STEPS)
   ========================================= */
.pearls {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin-top: 30px;
    margin-bottom: 40px;
    padding: 0 15px;
}

.pearl {
    position: relative;
    width: 25%;
    text-align: center;
    z-index: 1;
}

/* Icono (Círculo) */
.pearl-icon {
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 50%;
    background-color: #fff;
    color: #333;
    border: 2px solid var(--deep-gray);
    font-size: 24px;
    font-weight: 700;
    margin: 0 auto;
    position: relative;
    z-index: 10;
    transition: all 0.3s ease;
}

/* Líneas Conectoras */
.pearl::before, .pearl::after {
    content: "";
    position: absolute;
    top: 30px;
    height: 4px;
    background-color: var(--deep-gray);
    width: 50%;
    z-index: 0;
}
.pearl::before { left: 0; }
.pearl::after { right: 0; }
.pearl:first-child::before { display: none; }
.pearl:last-child::after { display: none; }

/* Títulos */
.pearl-title {
    display: block;
    margin-top: 15px;
    font-size: 13px;
    color: #a3afb7;
    font-weight: 600;
    text-transform: uppercase;
}

/* --- Estados de Perlas (Tema Claro) --- */
.pearl.current .pearl-icon {
    border-color: var(--deep-yellow);
    color: var(--deep-yellow);
}
.pearl.current .pearl-title { color: var(--deep-yellow); }
.pearl.current::before { background-color: var(--deep-yellow); }

.pearl.done .pearl-icon {
    background-color: var(--deep-yellow);
    border-color: var(--deep-yellow);
    color: #fff;
}
.pearl.done::before, .pearl.done::after {
    background-color: var(--deep-yellow);
}

.pearl.error .pearl-icon {
    border-color: var(--deep-error);
    color: var(--deep-error);
    animation: shake 0.4s;
}
.pearl.error .pearl-title { color: var(--deep-error); }

/* --- Estados de Perlas (Tema Obscuro) --- */
body.theme-dark .pearl-icon {
    background-color: #37474f;
    border-color: #546e7a;
    color: #90a4ae;
}
body.theme-dark .pearl::before, body.theme-dark .pearl::after {
    background-color: #546e7a;
}
/* Current Dark */
body.theme-dark .pearl.current .pearl-icon {
    background-color: var(--deep-yellow) !important;
    border-color: var(--deep-yellow) !important;
    color: #222 !important;
}
body.theme-dark .pearl.current::before { background-color: var(--deep-yellow); }

/* Done Dark */
body.theme-dark .pearl.done .pearl-icon {
    background-color: transparent;
    border-color: var(--deep-yellow);
    color: var(--deep-yellow);
}

/* =========================================
   5. BOTONES DE NAVEGACIÓN
   ========================================= */
.wizard-buttons {
    padding-top: 20px;
    border-top: 1px solid #e4eaec; /* Línea clara por defecto */
    margin-top: 20px;
}
body.theme-dark .wizard-buttons {
    border-top-color: #455a64;
}

/* Botón Siguiente / Finalizar (Siempre Amarillo) */
.btn-deep, .btn-success {
    background-color: var(--deep-yellow) !important;
    border-color: var(--deep-yellow) !important;
    color: #111 !important;
    font-weight: 700;
}
.btn-deep:hover, .btn-success:hover {
    background-color: #e0953f !important;
    border-color: #e0953f !important;
}

/* Botón Regresar (TEMA CLARO) */
#btnPrev {
    background-color: #e4eaec !important;
    color: #76838f !important;
    border: 1px solid #e4eaec !important;
    font-weight: 500;
    opacity: 1;
}
#btnPrev:hover {
    background-color: #dbe3e6 !important;
}
#btnPrev:disabled {
    background-color: #f3f7f9 !important;
    color: #a3afb7 !important;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Botón Regresar (TEMA OBSCURO) */
body.theme-dark #btnPrev {
    background-color: #546e7a !important;
    color: #fff !important;
    border-color: #546e7a !important;
}
body.theme-dark #btnPrev:hover {
    background-color: #455a64 !important;
    border-color: #455a64 !important;
}
body.theme-dark #btnPrev:disabled {
    background-color: #263238 !important;
    border-color: #333 !important;
    color: #555 !important;
    opacity: 1;
}

/* =========================================
   6. EXTRAS & TOGGLES
   ========================================= */
.raty-help {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    color: #999;
    font-style: italic;
}

/* Toggle Theme Button */
.theme-toggle-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2000;
    background: rgba(0,0,0,0.5);
    border: 1px solid var(--deep-yellow);
    color: var(--deep-yellow);
    border-radius: 30px;
    padding: 5px 15px;
    cursor: pointer;
    font-size: 14px;
}
.theme-toggle-btn:hover {
    background: var(--deep-yellow);
    color: #000;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* =========================================
   7. DATATABLES THEME (Dark Mode Support)
   ========================================= */
body.theme-dark .dataTables_wrapper { color: #eceff1; }
body.theme-dark table.dataTable tbody tr { background-color: transparent !important; }
body.theme-dark .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(0,0,0,0.15) !important; }
body.theme-dark .table-hover tbody tr:hover { background-color: rgba(242, 166, 84, 0.1) !important; }

body.theme-dark .table td, 
body.theme-dark .table th {
    border-top: 1px solid #455a64;
    border-bottom: 1px solid #455a64;
    color: #eceff1;
    vertical-align: middle;
}

body.theme-dark .dataTables_filter input,
body.theme-dark .dataTables_length select {
    background-color: rgba(0,0,0,0.2);
    border: 1px solid #546e7a;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
}

body.theme-dark .page-item.disabled .page-link { background-color: #37474f; border-color: #455a64; color: #78909c; }
body.theme-dark .page-item .page-link { background-color: #37474f; border-color: #455a64; color: #eceff1; }
body.theme-dark .page-item.active .page-link { background-color: var(--deep-yellow); border-color: var(--deep-yellow); color: #111; font-weight: bold; }
body.theme-dark .dataTables_info { color: #90a4ae !important; }

/* Link de WhatsApp en tabla */
.text-deep { color: var(--deep-yellow) !important; text-decoration: none; font-weight: 500; }
.text-deep:hover { color: #fff; text-decoration: underline; }


/* =========================================
   8. BOTONES DE ACCIÓN (TABLA)
   ========================================= */
/* Claro */
.table .btn-group .btn {
    background-color: #ffffff; 
    border: 1px solid #ccd5db;
    color: #526069;
    margin: 0 2px;
    border-radius: 4px !important;
    transition: all 0.3s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.table .btn-group .btn:hover { background-color: #f3f7f9; border-color: #a3afb7; color: #37474f; transform: translateY(-1px); }
.table .btn-group .delete-btn:hover { background-color: #ffeaea; border-color: #ff4c52; color: #ff4c52; }
.table .btn-group .edit-btn:hover { background-color: #fff8ea; border-color: var(--deep-yellow); color: #e69500; }

/* Obscuro */
body.theme-dark .table .btn-group .btn {
    background-color: #455a64 !important;
    border: 1px solid #546e7a !important;
    color: #eceff1 !important;
    box-shadow: none;
}
body.theme-dark .table .btn-group .btn:hover { background-color: #546e7a !important; border-color: #78909c !important; color: #fff !important; transform: translateY(-1px); }
body.theme-dark .table .btn-group .delete-btn:hover { background-color: #c62828 !important; border-color: #ff5252 !important; color: #fff !important; }
body.theme-dark .table .btn-group .edit-btn:hover { background-color: var(--deep-yellow) !important; border-color: var(--deep-yellow) !important; color: #000 !important; }


/* =========================================
   9. PERFIL DE USUARIO (FICHA) - ARREGLADO
   ========================================= */

/* Header & Avatar */
.profile-header {
    display: flex; flex-direction: column; align-items: center;
    border-bottom: 1px solid #e4eaec; padding-bottom: 20px; margin-bottom: 20px;
}
body.theme-dark .profile-header { border-bottom-color: #455a64 !important; }

/* Avatar */
.profile-avatar {
    width: 80px; height: 80px;
    background-color: var(--deep-yellow);
    color: #111;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; font-weight: bold;
    box-shadow: 0 4px 10px rgba(242, 166, 84, 0.4);
}

/* Etiquetas (Labels) */
.info-label {
    font-size: 11px; text-transform: uppercase; color: #a3afb7 !important; /* Gris suave en claro */
    margin-bottom: 3px; display: block; font-weight: 700; letter-spacing: 0.5px;
}
body.theme-dark .info-label { color: #90a4ae !important; } /* Gris medio en obscuro */

/* Valores (Datos) */
.info-value {
    font-size: 15px; font-weight: 500; margin-bottom: 20px;
    color: #37474f !important; /* Gris obscuro en tema CLARO (IMPORTANTE) */
}
/* Valores en Modo Obscuro */
body.theme-dark .info-value { color: #ffffff !important; }

/* Títulos de Sección */
.section-title {
    font-size: 18px; color: var(--deep-yellow) !important;
    margin-bottom: 20px; padding-left: 10px;
    border-left: 4px solid var(--deep-yellow);
}

/* Links en perfil */
.text-deep { color: var(--deep-yellow) !important; text-decoration: none; }
.text-deep:hover { text-decoration: underline; color: #ffca28 !important; }

/* Estrellas Estáticas (Ficha) */
.static-stars { color: #ffd700; font-size: 16px; margin-right: 2px; }
.static-stars.empty { color: #e0e0e0; }
body.theme-dark .static-stars.empty { color: #546e7a !important; }

/* Badges de Disponibilidad */
.badge-avail {
    background-color: #e4eaec; color: #76838f; padding: 4px 8px;
    border-radius: 4px; font-size: 11px; margin-right: 5px; display: inline-block; margin-bottom: 5px;
}
.badge-avail.active {
    background-color: rgba(242, 166, 84, 0.2);
    color: var(--deep-yellow);
    border: 1px solid var(--deep-yellow);
}
body.theme-dark .badge-avail { background-color: #455a64; color: #90a4ae; }