/* Estilos para la sección de presupuestos (BudgList) */

/* Variables de tema */
:root{
  --bg:#0f172a; --bg2:#020617;
  --text:#e2e8f0; --muted:#9aa7bd;
  --accent:#38bdf8; --accent-2:#0ea5e9;
  --danger:#f43f5e;
  --success:#4ade80;
  --shadow:rgba(2,6,23,.4);
  --ring:rgba(56,189,248,.55);
}
[data-theme="light"]{
  --bg:#f6f7fb; --bg2:#eef1f6;
  --text:#0b1220; --muted:#64748b;
  --accent:#0ea5e9; --accent-2:#0284c7;
  --danger:#e11d48;
  --success:#15803d;
  --shadow:rgba(2,6,23,.08);
  --ring:rgba(14,165,233,.5);
}

*{box-sizing:border-box;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;-webkit-tap-highlight-color:transparent;}
body{margin:0;min-height:100vh;display:flex;justify-content:center;color:var(--text);background:radial-gradient(circle at top,var(--bg) 0%, var(--bg2) 60%, #0000 100%);}
/* Estilizar los checkboxes para que coincidan con el tema */
input[type="checkbox"]{
  accent-color:var(--accent);
  width:.95rem;
  height:.95rem;
}
.app{width:min(900px,100%);padding:clamp(12px,3vw,20px);padding-bottom:7rem;}
header{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;margin-bottom:.7rem;flex-wrap:wrap;}
.title h1{margin:0;font-size:1.35rem;display:flex;gap:.5rem;align-items:center;}
.subtitle{margin:.2rem 0 0;color:var(--muted);font-size:.82rem;}
.top-actions{display:flex;gap:.4rem;}
.icon-btn{border:1px solid rgba(148,163,184,.18);background:rgba(148,163,184,.08);width:2.1rem;height:2.1rem;border-radius:.75rem;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.1rem;box-shadow:0 4px 16px var(--shadow);} 
.icon-btn:active{transform:scale(.98);}

/* Menú */
.menu{position:relative;}
/*
 * Panel del menú.
 *
 * En pantallas grandes se coloca de forma fija con un margen en la parte superior
 * para que quede alineado bajo el header. En móviles ocupa prácticamente
 * toda la pantalla para evitar que quede fuera del viewport al abrirlo.
 */
.menu-panel{
  position:fixed;
  right:1rem;
  /* distancia desde la parte superior; aumenta un poco para que no quede
     oculto bajo la barra del navegador en móviles */
  top:4.5rem;
  background:rgba(2,6,23,.97);
  border:1px solid rgba(148,163,184,.15);
  border-radius:1rem;
  min-width:260px;
  z-index:60;
  padding:.35rem 0;
  display:none;
  backdrop-filter:blur(10px);
  max-height:calc(100vh - 5rem);
  overflow-y:auto;
}
[data-theme="light"] .menu-panel{background:#fff;}
.menu.show .menu-panel{display:block;}
.menu-head{display:flex;align-items:center;justify-content:space-between;padding:.45rem .75rem .35rem;font-size:.9rem;}
.menu-title{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;opacity:.7;}
.menu-close{border:none;background:transparent;color:var(--muted);font-size:1.2rem;cursor:pointer;}
.menu-item{padding:.5rem .75rem;font-size:.86rem;display:flex;gap:.5rem;align-items:center;cursor:pointer;}
.menu-item:hover{background:rgba(148,163,184,.10);}
.menu-sep{height:1px;background:rgba(148,163,184,.12);margin:.35rem 0;}
.menu-list{max-height:160px;overflow:auto;}
.menu-list .menu-row{display:flex;gap:.5rem;align-items:center;padding:.35rem .75rem;cursor:pointer;}
.menu-list .menu-row.active{background:rgba(56,189,248,.15);}
.menu-list .menu-row input{width:.9rem;height:.9rem;accent-color:var(--accent);}
.menu-right{margin-left:auto;font-size:.65rem;opacity:.65;}

/* Tabs */
.tabs{display:flex;gap:.5rem;overflow:auto;padding:.35rem 0 .6rem;}
.tab{position:relative;border:1px solid transparent;background:rgba(148,163,184,.06);color:var(--text);border-radius:999px;padding:.35rem .9rem;display:flex;gap:.45rem;align-items:center;white-space:nowrap;cursor:pointer;box-shadow:0 4px 12px var(--shadow);transition:.2s;flex:0 0 auto;}
.tab.active{background:rgba(56,189,248,.12);border-color:var(--ring);}
.tab .count{font-size:.68rem;opacity:.7;background:rgba(148,163,184,.12);padding:.05rem .45rem;border-radius:999px;}
.tab .sel{display:none;position:absolute;left:-.35rem;top:-.35rem;background:var(--accent);color:#00131a;border-radius:999px;width:1.1rem;height:1.1rem;align-items:center;justify-content:center;font-size:.7rem;}
.tab.selecting{padding-left:1.5rem;}
.tab.selecting .sel{display:flex;}

/* Totales */
.totals{display:flex;gap:1rem;flex-wrap:wrap;background:rgba(148,163,184,.08);border:1px solid rgba(148,163,184,.12);border-radius:1rem;padding:.6rem .8rem;margin:.3rem 0 .8rem;}
.totals .k{display:flex;flex-direction:column;gap:.15rem;min-width:120px;}
.lab{font-size:.65rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);}
.val{font-weight:700;}
.budget{width:100%;display:flex;gap:.5rem;align-items:center;}
.progress{flex:1;height:.5rem;background:rgba(148,163,184,.16);border-radius:999px;overflow:hidden;}
.bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));width:0%;}
.pill{display:inline-flex;gap:.4rem;align-items:center;background:rgba(148,163,184,.12);border:1px solid rgba(148,163,184,.16);padding:.2rem .5rem;border-radius:999px;font-size:.72rem;cursor:pointer;}

/* Formulario */
.form{background:rgba(148,163,184,.06);border:1px solid rgba(148,163,184,.12);border-radius:1rem;padding:1rem;display:grid;gap:.65rem;margin-bottom:1rem;}
.form-row{display:flex;gap:.5rem;}
.field{flex:1;display:flex;flex-direction:column;gap:.3rem;}
label{font-size:.72rem;color:var(--muted);}
input{background:rgba(15,23,42,.35);border:1px solid rgba(148,163,184,.18);border-radius:.8rem;color:var(--text);padding:.6rem .7rem;font-size:.9rem;outline:none;}
[data-theme="light"] input{background:#fff;}
input:focus{border-color:var(--ring);box-shadow:0 0 0 3px rgba(56,189,248,.15);}

/* Botones */
.btn{border:none;border-radius:.85rem;padding:0 .9rem;font-weight:700;color:#fff;background:linear-gradient(120deg,var(--accent),var(--accent-2));cursor:pointer;display:inline-flex;align-items:center;justify-content:center;height:44px;line-height:1;flex:0 0 auto;white-space:normal;gap:.4rem;font-size:.9rem;}
.btn:active{transform:scale(.98);}
.btn-sec{background:rgba(148,163,184,.14);color:var(--text);border:1px solid rgba(148,163,184,.18);}
.btn-danger{background:rgba(244,63,94,.2);color:var(--danger);border:1px solid rgba(244,63,94,.4);}

/* Footer */
footer.bar{
  position:fixed;
  left:0;
  right:0;
  bottom:calc(env(safe-area-inset-bottom,0px) + 12px);
  width:min(900px, calc(100% - 1.6rem));
  margin:0 auto;
  display:grid;
  /* Dos columnas: Reiniciar y Borrar */
  grid-template-columns:1fr 1fr;
  gap:.6rem;
  align-items:center;
  background:rgba(2,6,23,.9);
  border:1px solid rgba(148,163,184,.12);
  border-radius:1rem;
  padding:.55rem .6rem;
  backdrop-filter:blur(10px);
  box-shadow:0 12px 30px var(--shadow);
  max-height:72px;
  overflow:hidden;
  z-index:100;
}

/* Tema claro para footer */
[data-theme="light"] footer.bar{background:#fff;}

/* Cuando sólo hay un botón visible en selección múltiple */
footer.bar.single{grid-template-columns:1fr;}

/* Estilos para opciones al mover productos entre listas */
.move-options{
  display:flex;
  flex-direction:column;
  gap:.4rem;
  margin:.5rem 0;
  max-height:200px;
  overflow-y:auto;
}
.move-option{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:.5rem .75rem;
  background:rgba(148,163,184,.08);
  border:1px solid rgba(148,163,184,.15);
  border-radius:.75rem;
  cursor:pointer;
  font-size:.9rem;
}
.move-option:hover{
  background:rgba(148,163,184,.12);
}
.move-option .badge{
  background:rgba(148,163,184,.15);
  padding:.2rem .5rem;
  border-radius:.6rem;
  font-size:.7rem;
  color:var(--text);
}

/* Item cards in list */
.list .item{border:1px solid rgba(148,163,184,.12);background:rgba(148,163,184,.06);border-radius:.9rem;padding:.7rem;display:flex;align-items:center;margin-bottom:.6rem;}
.list .item .body{flex:1;display:flex;flex-direction:column;gap:.3rem;}
.list .item .title{display:flex;justify-content:space-between;align-items:center;}
.list .item .meta{display:flex;gap:.5rem;font-size:.72rem;color:var(--muted);}
.list .actions{display:flex;gap:.4rem;}
.list .actions .btn{padding:0 .6rem;height:40px;font-size:.9rem;}

/* Responsive */
@media (max-width:520px){
  .app{padding:12px;padding-bottom:8rem;}
  header{flex-direction:column;align-items:flex-start;gap:.4rem;}
  .title h1{font-size:1.2rem;}
  .subtitle{font-size:.75rem;}
  .totals{gap:.6rem;}
  .form-row{flex-direction:column;}
  .actions{flex-direction:row;}
  /* En móviles el panel ocupa casi toda la pantalla para que no desaparezca */
  .menu-panel{
    min-width:unset;
    width:92vw;
    right:4%;
    top:4.5rem;
    max-height:calc(100vh - 5rem);
  }
  .tab{padding:.32rem .75rem;}
}