/* Ajustes puntuales sobre Tailwind para el panel. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #2c3a52; }

/* Inputs base del panel */
.field {
    width: 100%;
    background: #0b1020;
    border: 1px solid #1e293b;
    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: #22d3ee;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, .15);
}
.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:#22d3ee; color:#04121a; }
.btn-primary:hover { filter:brightness(1.08); }
.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 #22d3ee; 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:#0891b2 !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:#0891b2 !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; }