/* ============================================================
   BITÁCORAS — TEMA "AURORA GLASS" (oscuro, vidrio, glow)
   Armoniza con la PWA del oficial. Se carga DESPUÉS de app.css
   y de DaisyUI dark, por eso gana sin tocar el resto.
   ============================================================ */

:root {
  --bi-bg:    #0a0817;
  --bi-txt:   #eaecf7;
  --bi-dim:   rgba(234,236,247,0.60);
  --bi-glass: rgba(255,255,255,0.055);
  --bi-bd:    rgba(255,255,255,0.11);
  --bi-blue:  #4C72E8;
  --bi-purple:#6448DF;
  --bi-teal:  #1CEAB5;
}

/* Fondo aurora en toda la página */
html[data-theme="dark"] body,
body.bg-base-200 {
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(76,114,232,0.28), transparent 60%),
    radial-gradient(820px 520px at 92% 4%, rgba(28,234,181,0.16), transparent 55%),
    radial-gradient(1000px 700px at 50% 110%, rgba(100,72,223,0.22), transparent 60%),
    linear-gradient(160deg, #14102b 0%, #0b0819 60%, #080615 100%) !important;
  color: var(--bi-txt);
}

/* ---------- ICONOS SVG ---------- */
.b-ico {
  width: 1.25rem; height: 1.25rem;
  display: inline-block; vertical-align: -0.18em;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.btn-paso .b-ico { width: 2rem; height: 2rem; }
.b-ico.lg { width: 2.5rem; height: 2.5rem; }

/* ---------- NAVBAR (barra superior) ---------- */
.navbar {
  background: linear-gradient(120deg, #4C72E8 0%, #6448DF 55%, #1CEAB5 130%) !important;
  box-shadow: 0 6px 24px rgba(76,114,232,.35) !important;
  color: #fff !important;
}
.navbar .bg-white { background: rgba(255,255,255,0.18) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.navbar .text-primary { color: #fff !important; }

/* ---------- BARRA STICKY (timeline) y BARRA INFERIOR ---------- */
.sticky.bg-base-100,
#navButtons.bg-base-100 {
  background: rgba(16,12,32,0.78) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-color: var(--bi-bd) !important;
  color: var(--bi-txt);
}
#pasoLabel { color: var(--bi-teal) !important; }

/* ---------- TIMELINE ---------- */
.timeline-paso {
  background: var(--bi-glass) !important;
  border: 1px solid var(--bi-bd) !important;
  color: var(--bi-dim) !important;
}
.timeline-paso.active {
  background: linear-gradient(135deg, var(--bi-blue), var(--bi-purple)) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 0 0 4px rgba(76,114,232,.25), 0 6px 16px rgba(76,114,232,.4) !important;
}
.timeline-paso.done {
  background: rgba(28,234,181,.18) !important;
  border-color: rgba(28,234,181,.45) !important;
  color: var(--bi-teal) !important;
}
.timeline-linea { background: var(--bi-bd) !important; }
.timeline-linea.done { background: var(--bi-teal) !important; }

/* ---------- TARJETAS DE VIDRIO ---------- */
.card-upi {
  background: var(--bi-glass) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--bi-bd) !important;
  box-shadow: 0 12px 44px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.07) !important;
  border-radius: 1.3rem !important;
  color: var(--bi-txt) !important;
}
.card-upi h2, .card-upi h3, .card-upi h4 { color: var(--bi-txt) !important; }

/* Textos atenuados legibles sobre oscuro */
.text-gray-400, .text-gray-500, .text-gray-600 { color: var(--bi-dim) !important; }

/* ---------- BOTONES DE PASO (tiles) ---------- */
.btn-paso {
  background: var(--bi-glass) !important;
  border: 1px solid var(--bi-bd) !important;
  color: var(--bi-txt) !important;
  border-radius: 1rem !important;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.btn-paso .ico { color: var(--bi-txt); display:flex; align-items:center; justify-content:center; }
.btn-paso .lbl { color: var(--bi-txt) !important; }
.btn-paso:hover { transform: translateY(-2px); border-color: rgba(76,114,232,.6) !important; }
.btn-paso.selected {
  background: linear-gradient(135deg, rgba(76,114,232,.30), rgba(100,72,223,.22)) !important;
  border-color: var(--bi-blue) !important;
  box-shadow: 0 0 0 3px rgba(76,114,232,.25), 0 8px 22px rgba(76,114,232,.35) !important;
}
.btn-paso.selected .b-ico { color: #bcd0ff; }

/* ---------- GRABADOR ---------- */
.grabador, #grabadorBox {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--bi-bd) !important;
  border-radius: 1rem !important;
  color: var(--bi-txt);
}
.grabador p { color: var(--bi-dim) !important; }
#transcribiendoWrapper, #audioPreview { background: rgba(255,255,255,0.05) !important; }
.btn-grabar {
  background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
  color: #fff !important; border: none !important;
  box-shadow: 0 8px 22px rgba(239,68,68,.45) !important;
}
.btn-grabar .b-ico { width: 2rem; height: 2rem; color: #fff; }
.btn-grabar.grabando { animation: bi-pulse 1.2s ease-in-out infinite; }
@keyframes bi-pulse { 0%,100%{ box-shadow:0 8px 22px rgba(239,68,68,.45) } 50%{ box-shadow:0 0 0 10px rgba(239,68,68,.12),0 8px 22px rgba(239,68,68,.55) } }

/* ---------- FOTOS ---------- */
.fotos-grid .foto-add {
  background: var(--bi-glass) !important;
  border: 2px dashed var(--bi-bd) !important;
  color: var(--bi-dim) !important;
  border-radius: 1rem !important;
}
.fotos-grid .foto-add:hover { border-color: var(--bi-blue) !important; color: #bcd0ff !important; }
.fotos-grid .foto-add .b-ico { width: 2rem; height: 2rem; }

/* ---------- INPUTS / TEXTAREA / SELECT (glass) ---------- */
.input, .textarea, .select, input[type="time"], input[type="text"] {
  background: rgba(255,255,255,0.06) !important;
  border-color: var(--bi-bd) !important;
  color: var(--bi-txt) !important;
}
.input::placeholder, .textarea::placeholder { color: rgba(234,236,247,0.4) !important; }
.bg-base-200 { background: rgba(255,255,255,0.05) !important; border-radius: 1rem; }

/* ---------- BOTONES PRIMARIOS / ÉXITO ---------- */
.btn-primary {
  background: linear-gradient(135deg, var(--bi-blue), var(--bi-purple)) !important;
  border: none !important; color: #fff !important;
  box-shadow: 0 6px 18px rgba(76,114,232,.4) !important;
}
.btn-success {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  border: none !important; color: #04231a !important; font-weight: 800;
  box-shadow: 0 6px 18px rgba(16,185,129,.4) !important;
}
.btn-ghost { color: var(--bi-txt) !important; }

/* ---------- RESULTADO / ÉXITO ---------- */
.resultado-exito { color: var(--bi-txt); }
.resultado-exito .numero { color: var(--bi-teal) !important; }
.resultado-exito .fecha  { color: var(--bi-dim) !important; }
.resultado-exito .b-ico.lg { color: #10b981; width: 4rem; height: 4rem; }

/* ---------- MODAL / OVERLAY ---------- */
.modal-box {
  background: rgba(20,16,40,0.92) !important;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--bi-bd);
  color: var(--bi-txt) !important;
}
.modal-box h3, .modal-box p { color: var(--bi-txt) !important; }
#loadingOverlay .bg-white {
  background: rgba(20,16,40,0.92) !important;
  border: 1px solid var(--bi-bd); color: var(--bi-txt) !important;
}
#loadingOverlay .bg-white p { color: var(--bi-txt) !important; }

/* Dropdown menú del avatar */
.dropdown-content.bg-base-100 {
  background: rgba(20,16,40,0.96) !important;
  border: 1px solid var(--bi-bd); color: var(--bi-txt) !important;
}
.dropdown-content a { color: var(--bi-txt) !important; }
.dropdown-content a:hover { background: rgba(76,114,232,.25) !important; }

/* Historial: tarjetas e items */
.bitacora-card, .hist-item, .card { color: var(--bi-txt); }
.b-ico-wrap .b-ico { width: 1.75rem; height: 1.75rem; }
.b-ico-wrap.text-primary .b-ico, .text-primary > .b-ico { color: #8aa6ff; }

/* Fondos claros de Tailwind reusados en detalle → glass oscuro */
.bg-gray-50, .bg-white { background: rgba(255,255,255,0.05) !important; }
.bg-gray-50 { border: 1px solid var(--bi-bd); }
.bg-gray-50 p, .bg-gray-50 .text-gray-600 { color: var(--bi-txt) !important; }

/* Bordes divisores legibles sobre oscuro */
.border-b, .border-t, .border { border-color: var(--bi-bd) !important; }