/* Ajustes puntuales sobre Tailwind para el panel. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #33333b; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #44444d; }

/* Inputs base del panel */
.field {
    width: 100%;
    background: #1e1e24;
    border: 1px solid #33333b;
    border-radius: 0.625rem;
    padding: 0.6rem 0.8rem;
    color: #e2e8f0;
    font-size: 0.9rem;
    transition: border-color .15s, box-shadow .15s;
}
.field:focus {
    outline: none;
    border-color: #b3192f;
    box-shadow: 0 0 0 3px rgba(179, 25, 47, .2);
}
.field::placeholder { color: #475569; }
.field[readonly] { opacity: .6; cursor: not-allowed; }

.lbl { display:block; font-size:.78rem; font-weight:500; color:#94a3b8; margin-bottom:.35rem; }

/* Botones */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    border-radius:.625rem; font-weight:600; font-size:.875rem; padding:.6rem 1.1rem;
    transition:filter .15s, background .15s, opacity .15s; cursor:pointer; }
.btn-primary { background:#b3192f; color:#ffffff; }
.btn-primary:hover { background:#941223; filter:none; }
.btn-ghost { background:rgba(255,255,255,.05); color:#e2e8f0; }
.btn-ghost:hover { background:rgba(255,255,255,.1); }
.btn-danger { background:rgba(239,68,68,.12); color:#fca5a5; }
.btn-danger:hover { background:rgba(239,68,68,.2); }
/* Estado "armado": botón de borrado activo y bien visible. */
.btn-danger-armed { background:#dc2626; color:#fff; box-shadow:0 6px 16px rgba(220,38,38,.35); }
.btn-danger-armed:hover { background:#b91c1c; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

/* Drag de fotos */
.foto-drag { outline:2px dashed #b3192f; outline-offset:2px; }

/* ===================== MODO CLARO ===================== */
/* Íconos del toggle: luna en oscuro, sol en claro. */
.theme-sun { display:none; }
html.light .theme-sun { display:block; }
html.light .theme-moon { display:none; }

/* Superficies */
html.light body { background:#eef2f6; color:#0f172a; }
html.light .bg-ink { background-color:#eef2f6 !important; }
html.light .bg-panel { background-color:#ffffff !important; }
html.light .bg-panel\/80 { background-color:rgba(255,255,255,.85) !important; }
html.light .bg-panel2 { background-color:#f8fafc !important; }
html.light .border-line { border-color:#e2e8f0 !important; }

/* Texto */
html.light .text-white { color:#0f172a !important; }
html.light .text-slate-100 { color:#0f172a !important; }
html.light .text-slate-200 { color:#1e293b !important; }
html.light .text-slate-300 { color:#334155 !important; }
html.light .text-slate-400 { color:#475569 !important; }
html.light .text-slate-500 { color:#64748b !important; }
html.light .text-slate-600 { color:#94a3b8 !important; }
html.light .text-cyan { color:#941223 !important; }

/* Overlays blancos -> oscuros translúcidos */
html.light .bg-white\/5 { background-color:rgba(15,23,42,.04) !important; }
html.light .bg-white\/15 { background-color:rgba(15,23,42,.08) !important; }
html.light .bg-white\/25 { background-color:rgba(15,23,42,.12) !important; }
html.light .hover\:bg-white\/5:hover { background-color:rgba(15,23,42,.05) !important; }
html.light .hover\:bg-white\/25:hover { background-color:rgba(15,23,42,.12) !important; }
html.light .hover\:text-white:hover { color:#0f172a !important; }
html.light .hover\:text-slate-100:hover { color:#0f172a !important; }
html.light .hover\:text-slate-200:hover { color:#1e293b !important; }
html.light .hover\:text-cyan:hover { color:#941223 !important; }

/* Inputs y botones */
html.light .field { background:#ffffff; border-color:#e2e8f0; color:#0f172a; }
html.light .field::placeholder { color:#94a3b8; }
html.light .btn-ghost { background:rgba(15,23,42,.05); color:#1e293b; }
html.light .btn-ghost:hover { background:rgba(15,23,42,.1); }

/* Zona de peligro: en modo claro los rojos claros casi no se ven sobre el fondo
   rosado; se fuerza un rojo oscuro legible para todos los textos de la sección. */
html.light .danger-zone [class*="text-red-"] { color:#b91c1c !important; }
html.light .danger-zone code { color:#991b1b !important; }

/* Scrollbar */
html.light ::-webkit-scrollbar-thumb { background:#cbd5e1; }
html.light ::-webkit-scrollbar-thumb:hover { background:#94a3b8; }

/* ===================== SIDEBAR COLAPSABLE (solo desktop) ===================== */
/* Estado por defecto (expandido): el monograma "VC" oculto, el wordmark visible. */
.sidebar-mini { display:none; }
aside[data-sidebar] { transition: width .18s ease; }

/* Estado colapsado: riel angosto de solo iconos. La clase la pone/quita el toggle
   (app.js) y la aplica head.php al cargar. Gana al w-64/px-3 de Tailwind por
   especificidad (igual que las reglas html.light .xxx de arriba). */
html.sidebar-collapsed aside[data-sidebar] { width: 4.5rem; }
html.sidebar-collapsed aside[data-sidebar] .sidebar-full { display:none; }
html.sidebar-collapsed aside[data-sidebar] .sidebar-mini { display:inline-flex; width:1.75rem; height:1.75rem; font-size:.7rem; }
html.sidebar-collapsed aside[data-sidebar] .nav-label { display:none; }

/* Cabecera colapsada: en el riel angosto no caben el "VC" y la flecha en una fila
   (el "VC" quedaba pegado al borde y desalineado de los iconos). Se apilan en
   vertical y centrados, así el "VC" queda alineado con la columna de iconos. */
html.sidebar-collapsed aside[data-sidebar] > div:first-child { flex-direction:column; gap:.3rem; padding-left:0; padding-right:0; justify-content:center; }
html.sidebar-collapsed aside[data-sidebar] [data-sidebar-toggle] { margin-left:0; padding:.2rem; }

/* Iconos centrados cuando no hay texto (nav + pie "Ver sitio público"). */
html.sidebar-collapsed aside[data-sidebar] nav a,
html.sidebar-collapsed aside[data-sidebar] .p-3 > a { justify-content:center; padding-left:0; padding-right:0; gap:0; }

/* El chevron del toggle apunta al otro lado al estar colapsado. */
html.sidebar-collapsed [data-sidebar-toggle] .sidebar-chevron { transform: rotate(180deg); }

/* Badge (contactos nuevos) -> punto rojo sobre el icono cuando está colapsado
   (no cabe el número en el riel). */
html.sidebar-collapsed aside[data-sidebar] .nav-badge {
    position:absolute; top:6px; right:12px; min-width:0; width:8px; height:8px;
    padding:0; font-size:0; line-height:0;
}

/* Tooltips: solo cuando el menú está colapsado (expandido ya se ve la etiqueta).
   CSS puro: instantáneo y con estilo, a diferencia del title nativo. */
html.sidebar-collapsed aside[data-sidebar] a[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position:absolute; left:calc(100% + 10px); top:50%; transform:translateY(-50%);
    background:#26262d; color:#e2e8f0; border:1px solid #33333b;
    padding:.35rem .6rem; border-radius:.5rem; font-size:.8rem; font-weight:500;
    white-space:nowrap; box-shadow:0 8px 20px rgba(0,0,0,.35);
    z-index:50; pointer-events:none;
}
html.sidebar-collapsed aside[data-sidebar] a[data-tooltip]:hover::before {
    content:""; position:absolute; left:calc(100% + 4px); top:50%; transform:translateY(-50%);
    border:6px solid transparent; border-right-color:#33333b; z-index:50; pointer-events:none;
}

/* Modo claro: tooltip legible sobre fondo blanco. */
html.light.sidebar-collapsed aside[data-sidebar] a[data-tooltip]:hover::after {
    background:#ffffff; color:#0f172a; border-color:#e2e8f0; box-shadow:0 8px 20px rgba(15,23,42,.15);
}
html.light.sidebar-collapsed aside[data-sidebar] a[data-tooltip]:hover::before {
    border-right-color:#e2e8f0;
}

/* Aprovechar el espacio liberado: al colapsar, el <main> se ensancha ~11.5rem.
   Los contenedores de contenido tienen max-w-* + mx-auto, así que sin esto solo
   se recentrarían (mismo ancho, más margen). Subimos su tope para que el contenido
   se extienda hacia la derecha. Solo SUBE el cap: nunca angosta, y en pantallas
   chicas (donde el contenido ya no llega al tope) no cambia nada. */
main .max-w-6xl, main .max-w-5xl, main .max-w-4xl, main .max-w-3xl { transition: max-width .18s ease; }
html.sidebar-collapsed main .max-w-6xl { max-width: 83rem; }
html.sidebar-collapsed main .max-w-5xl { max-width: 75rem; }
html.sidebar-collapsed main .max-w-4xl { max-width: 64rem; }
html.sidebar-collapsed main .max-w-3xl { max-width: 54rem; }