:root {
  color-scheme: light dark;
}

/* =========================================================
   BASE OSCURA
   Se usa cuando el sistema está oscuro o cuando el usuario
   selecciona manualmente modo oscuro.
   ========================================================= */

body {
  font-family:'Plus Jakarta Sans',sans-serif;
  background:#0f172a;
  color:#f8fafc;
  -webkit-tap-highlight-color:transparent;
  transition:background .2s ease,color .2s ease;
}

body.dark-mode {
  color-scheme:dark;
  background:#0f172a;
  color:#f8fafc;
}

/* =========================================================
   MODO CLARO EXPLÍCITO
   ========================================================= */

body.light-mode {
  color-scheme:light;
  background:#f8fafc;
  color:#0f172a;
}

body.light-mode .glass {
  background:rgba(255,255,255,.90);
  border-color:#e2e8f0;
}

body.light-mode .field {
  background:#fff;
  color:#0f172a;
  border-color:#cbd5e1;
}

body.light-mode .quick-btn {
  background:linear-gradient(145deg,#fff,#f8fafc);
  border-color:#cbd5e1;
}

body.light-mode .seg-btn {
  background:#fff;
  color:#475569;
  border-color:#cbd5e1;
}

body.light-mode .seg-btn.active {
  color:#0369a1;
  background:rgba(56,189,248,.12);
  border-color:#38bdf8;
}

body.light-mode .bg-slate-900,
body.light-mode .bg-slate-900\/60,
body.light-mode .bg-slate-950,
body.light-mode .bg-slate-950\/60,
body.light-mode .bg-slate-950\/95 {
  background-color:#f8fafc !important;
}

body.light-mode .bg-slate-800 {
  background-color:#e2e8f0 !important;
}

body.light-mode .border-slate-700,
body.light-mode .border-slate-800 {
  border-color:#cbd5e1 !important;
}

body.light-mode .text-white,
body.light-mode .text-slate-100 {
  color:#0f172a !important;
}

body.light-mode .text-slate-300,
body.light-mode .text-slate-400 {
  color:#475569 !important;
}

body.light-mode .text-slate-500 {
  color:#64748b !important;
}

body.light-mode nav {
  background:rgba(255,255,255,.96) !important;
  border-color:#cbd5e1 !important;
}

/* =========================================================
   TEMA AUTOMÁTICO DEL DISPOSITIVO
   Si NO existe .dark-mode manual y el dispositivo es claro,
   aplicamos exactamente la misma apariencia clara.
   ========================================================= */

@media (prefers-color-scheme: light) {

  body:not(.dark-mode) {
    color-scheme:light;
    background:#f8fafc;
    color:#0f172a;
  }

  body:not(.dark-mode) .glass {
    background:rgba(255,255,255,.90);
    border-color:#e2e8f0;
  }

  body:not(.dark-mode) .field {
    background:#fff;
    color:#0f172a;
    border-color:#cbd5e1;
  }

  body:not(.dark-mode) .quick-btn {
    background:linear-gradient(145deg,#fff,#f8fafc);
    border-color:#cbd5e1;
  }

  body:not(.dark-mode) .seg-btn {
    background:#fff;
    color:#475569;
    border-color:#cbd5e1;
  }

  body:not(.dark-mode) .seg-btn.active {
    color:#0369a1;
    background:rgba(56,189,248,.12);
    border-color:#38bdf8;
  }

  body:not(.dark-mode) .bg-slate-900,
  body:not(.dark-mode) .bg-slate-900\/60,
  body:not(.dark-mode) .bg-slate-950,
  body:not(.dark-mode) .bg-slate-950\/60,
  body:not(.dark-mode) .bg-slate-950\/95 {
    background-color:#f8fafc !important;
  }

  body:not(.dark-mode) .bg-slate-800 {
    background-color:#e2e8f0 !important;
  }

  body:not(.dark-mode) .border-slate-700,
  body:not(.dark-mode) .border-slate-800 {
    border-color:#cbd5e1 !important;
  }

  body:not(.dark-mode) .text-white,
  body:not(.dark-mode) .text-slate-100 {
    color:#0f172a !important;
  }

  body:not(.dark-mode) .text-slate-300,
  body:not(.dark-mode) .text-slate-400 {
    color:#475569 !important;
  }

  body:not(.dark-mode) .text-slate-500 {
    color:#64748b !important;
  }

  body:not(.dark-mode) nav {
    background:rgba(255,255,255,.96) !important;
    border-color:#cbd5e1 !important;
  }
}

/* =========================================================
   COMPONENTES
   ========================================================= */

.theme-switch {
  width:48px;
  height:28px;
  border-radius:999px;
  background:#334155;
  padding:3px;
  display:flex;
  align-items:center;
  transition:.2s;
}

.theme-switch span {
  width:22px;
  height:22px;
  border-radius:50%;
  background:#f8fafc;
  display:block;
  transition:.2s;
  transform:translateX(0);
}

.theme-switch.on {
  background:#38bdf8;
}

.theme-switch.on span {
  transform:translateX(20px);
}

.glass {
  background:rgba(30,41,59,.72);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
}

.tab-active {
  color:#38bdf8;
  border-top:2px solid #38bdf8;
}

.progress {
  background:#334155;
  overflow:hidden;
  border-radius:999px;
}

.progress > span {
  display:block;
  height:100%;
  border-radius:inherit;
  background:#10b981;
}

.field {
  width:100%;
  background:#0f172a;
  border:1px solid #334155;
  border-radius:.8rem;
  padding:.8rem;
  color:#f8fafc;
  font-size:14px;
}

.field:focus {
  outline:none;
  border-color:#38bdf8;
  box-shadow:0 0 0 2px rgba(56,189,248,.15);
}

dialog::backdrop {
  background:rgba(2,6,23,.78);
  backdrop-filter:blur(3px);
}

dialog {
  max-height:88vh;
  overflow:auto;
}

.quick-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.7rem;
}

.quick-btn {
  min-height:86px;
  text-align:left;
  border:1px solid #334155;
  border-radius:1rem;
  background:linear-gradient(145deg,rgba(30,41,59,.95),rgba(15,23,42,.92));
  padding:.8rem;
  transition:border-color .15s ease,transform .15s ease,background .15s ease;
}

.quick-btn:active {
  transform:scale(.985);
}

.quick-btn:focus-visible {
  outline:2px solid #38bdf8;
  outline-offset:2px;
}

.quick-icon {
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:.8rem;
  background:rgba(56,189,248,.10);
  border:1px solid rgba(56,189,248,.18);
  font-size:18px;
  margin-bottom:.5rem;
  overflow:hidden;
}

.quick-icon img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.quick-more .quick-icon {
  background:rgba(16,185,129,.10);
  border-color:rgba(16,185,129,.20);
  color:#34d399;
}

.segmented {
  display:grid;
  gap:.5rem;
}

.segmented.three {
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.segmented.four {
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.seg-btn {
  min-height:44px;
  padding:.55rem .45rem;
  border-radius:.8rem;
  border:1px solid #334155;
  background:#0f172a;
  color:#94a3b8;
  font-size:12px;
  font-weight:700;
}

.seg-btn.active {
  border-color:#38bdf8;
  background:rgba(56,189,248,.12);
  color:#7dd3fc;
}

.shortcut-chip {
  display:flex;
  justify-content:space-between;
  gap:.75rem;
  align-items:center;
  padding:.65rem .75rem;
  border-radius:.8rem;
  background:rgba(15,23,42,.65);
  border:1px solid #334155;
}

.hidden-force {
  display:none !important;
}

body.app-locked {
  overflow:hidden;
}

.api-toast {
  position:fixed;
  left:50%;
  bottom:88px;
  transform:translateX(-50%);
  z-index:120;
  width:calc(100% - 2rem);
  max-width:390px;
  padding:.8rem 1rem;
  border-radius:1rem;
  font-size:12px;
  font-weight:700;
  border:1px solid #334155;
  background:#111827;
  color:#e5e7eb;
  box-shadow:0 15px 40px rgba(0,0,0,.3);
}

.api-toast.ok {
  border-color:rgba(16,185,129,.35);
}

/* =========================================================
   MI HOGAR / MIEMBROS
   Corrección independiente de Tailwind
   ========================================================= */

/* ---------- CONTENEDOR MI HOGAR ---------- */

.home-settings-card {
  padding: 1rem;
  border-radius: 1rem;
}


/* =========================================================
   MODO OSCURO
   ========================================================= */

body.dark-mode .home-settings-card {
  background: rgba(14, 116, 144, .07);
  border: 1px solid rgba(56, 189, 248, .18);
}


/*
 * Las tarjetas son generadas dinámicamente por app.js.
 * Por eso las atacamos directamente desde el contenedor.
 */

body.dark-mode #householdMembersList > div {
  background: #1e293b !important;
  border-color: #334155 !important;
}


/* Nombre */

body.dark-mode #householdMembersList > div p:first-child {
  color: #f8fafc !important;
}


/* Correo */

body.dark-mode #householdMembersList > div p.text-slate-400 {
  color: #94a3b8 !important;
}


/* =========================================================
   MODO CLARO
   ========================================================= */

body.light-mode .home-settings-card {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
}


/* Tarjeta de cada miembro */

body.light-mode #householdMembersList > div {
  background: #ffffff !important;
  border-color: #dbe4ee !important;

  box-shadow:
    0 2px 8px rgba(15, 23, 42, .04);
}


/* Nombre */

body.light-mode #householdMembersList > div p:first-child {
  color: #0f172a !important;
}


/* Correo */

body.light-mode #householdMembersList > div p.text-slate-400 {
  color: #64748b !important;
}


/* Badge Tú */

body.light-mode #householdMembersList span.bg-sky-500\/15 {
  background: #e0f2fe !important;
  color: #0369a1 !important;
}


/* Propietario */

body.light-mode #householdMembersList span.bg-emerald-500\/15 {
  background: #dcfce7 !important;
  color: #15803d !important;
  border-color: #bbf7d0 !important;
}


/* Miembro */

body.light-mode #householdMembersList span.bg-sky-500\/15.border {
  background: #e0f2fe !important;
  color: #0369a1 !important;
  border-color: #bae6fd !important;
}


/* =========================================================
   MODO CLARO AUTOMÁTICO DEL SISTEMA
   ========================================================= */

@media (prefers-color-scheme: light) {

  body:not(.dark-mode) .home-settings-card {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
  }

  body:not(.dark-mode) #householdMembersList > div {
    background: #ffffff !important;
    border-color: #dbe4ee !important;

    box-shadow:
      0 2px 8px rgba(15, 23, 42, .04);
  }

  body:not(.dark-mode) #householdMembersList > div p:first-child {
    color: #0f172a !important;
  }

  body:not(.dark-mode) #householdMembersList > div p.text-slate-400 {
    color: #64748b !important;
  }

  body:not(.dark-mode) #householdMembersList span.bg-emerald-500\/15 {
    background: #dcfce7 !important;
    color: #15803d !important;
    border-color: #bbf7d0 !important;
  }

  body:not(.dark-mode) #householdMembersList span.bg-sky-500\/15 {
    background: #e0f2fe !important;
    color: #0369a1 !important;
    border-color: #bae6fd !important;
  }
}


/* =========================================================
   INVITACIONES PENDIENTES
   ========================================================= */

body.light-mode #pendingInvitationsList > div {
  background: #fffbeb !important;
  border-color: #fde68a !important;
}

body.light-mode #pendingInvitationsList p {
  color: #475569;
}

body.dark-mode #pendingInvitationsList > div {
  background: rgba(245, 158, 11, .06) !important;
}


/* =========================================================
   BOTÓN HOGAR COMPLETO
   ========================================================= */

#inviteMemberButton:disabled {
  opacity: .55;
  cursor: not-allowed;
}

body.light-mode #inviteMemberButton:disabled {
  background: #e2e8f0 !important;
  color: #64748b !important;
  border-color: #cbd5e1 !important;
}

body.dark-mode #inviteMemberButton:disabled {
  background: #334155 !important;
  color: #94a3b8 !important;
  border-color: #475569 !important;
}

.api-toast.error {
  border-color:rgba(244,63,94,.4);
  color:#fda4af;
}

/* =========================================================
   AJUSTES - APARIENCIA
   ========================================================= */

.settings-appearance-card {
  padding: .75rem;
  border-radius: .8rem;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
}


/* MODO OSCURO */

body.dark-mode .settings-appearance-card {
  background: #1e293b;
  border: 1px solid #334155;
}


/* MODO CLARO */

body.light-mode .settings-appearance-card {
  background: #ffffff;
  border: 1px solid #dbe4ee;

  box-shadow:
    0 2px 8px rgba(15, 23, 42, .04);
}


/* MODO CLARO DEL SISTEMA */

@media (prefers-color-scheme: light) {

  body:not(.dark-mode) .settings-appearance-card {
    background: #ffffff;
    border: 1px solid #dbe4ee;

    box-shadow:
      0 2px 8px rgba(15, 23, 42, .04);
  }

}

/* =========================================================
   PWA - AVISO DE INSTALACIÓN
   ========================================================= */

.pwa-install-card {
  padding: 14px;

  border-radius: 18px;

  background: #ffffff;

  border: 1px solid #dbe4ee;

  box-shadow:
    0 18px 50px rgba(15, 23, 42, .18);
}

.pwa-install-icon {
  width: 42px;
  height: 42px;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #ffffff;

  border: 1px solid #e2e8f0;

  border-radius: 13px;

  overflow: hidden;
}

.pwa-install-icon img {
  width: 30px;
  height: 30px;

  object-fit: contain;
}

.pwa-install-title {
  margin: 0;

  color: #0f172a;

  font-size: 14px;
  font-weight: 800;
}

.pwa-install-text {
  margin: 4px 0 0;

  color: #64748b;

  font-size: 11px;
  line-height: 1.45;
}

.pwa-install-close {
  width: 30px;
  height: 30px;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 9px;

  color: #64748b;

  font-size: 12px;

  background: #f1f5f9;
}

.pwa-install-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 8px;

  margin-top: 12px;
}

.pwa-install-later,
.pwa-install-button {
  min-height: 40px;

  border-radius: 11px;

  font-size: 12px;
  font-weight: 800;
}

.pwa-install-later {
  background: #f1f5f9;
  color: #475569;
}

.pwa-install-button {
  background: #0ea5e9;
  color: #082f49;
}


/* =========================================================
   PWA - MODO OSCURO
   ========================================================= */

body.dark-mode .pwa-install-card {
  background: #172033;

  border-color: #334155;

  box-shadow:
    0 18px 55px rgba(0, 0, 0, .38);
}

body.dark-mode .pwa-install-icon {
  background: #ffffff;
  border-color: #334155;
}

body.dark-mode .pwa-install-title {
  color: #f8fafc;
}

body.dark-mode .pwa-install-text {
  color: #94a3b8;
}

body.dark-mode .pwa-install-close {
  background: #273449;
  color: #94a3b8;
}

body.dark-mode .pwa-install-later {
  background: #273449;
  color: #cbd5e1;
}

/* =========================================================
   PWA - ACTUALIZACIÓN OBLIGATORIA
   ========================================================= */

.pwa-update-card {
  width: 100%;
  max-width: 360px;

  padding: 24px;

  border-radius: 22px;

  background: #ffffff;
  border: 1px solid #dbe4ee;

  text-align: center;

  box-shadow:
    0 25px 70px rgba(0, 0, 0, .35);
}

.pwa-update-icon {
  width: 64px;
  height: 64px;

  margin: 0 auto 16px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 18px;

  background: #ffffff;
  border: 1px solid #e2e8f0;
}

.pwa-update-icon img {
  width: 46px;
  height: 46px;

  object-fit: contain;
}

.pwa-update-card h2 {
  margin: 0;

  color: #0f172a;

  font-size: 20px;
  font-weight: 800;
}

.pwa-update-card > p {
  margin-top: 10px;

  color: #64748b;

  font-size: 13px;
  line-height: 1.6;
}

.pwa-update-button {
  width: 100%;
  min-height: 46px;

  margin-top: 18px;

  border: 0;
  border-radius: 13px;

  background: #0ea5e9;
  color: #082f49;

  font-size: 13px;
  font-weight: 800;
}

.pwa-update-button:disabled {
  opacity: .65;
  cursor: wait;
}

.pwa-update-status {
  min-height: 18px;

  margin-top: 10px;

  font-size: 11px;
}


/* DARK MODE */

body.dark-mode .pwa-update-card {
  background: #172033;
  border-color: #334155;
}

body.dark-mode .pwa-update-card h2 {
  color: #f8fafc;
}

body.dark-mode .pwa-update-card > p {
  color: #94a3b8;
}