/* Diseño "Liquid Glass". Va DESPUÉS de styles.css; para quitarlo basta borrar su <link>. */

/* ---------- Variables ---------- */
:root {
  --glass: rgba(255,255,255,.52);
  --glass-strong: rgba(255,255,255,.74);   /* barra inferior, hojas */
  --glass-edge: rgba(255,255,255,.75);
  --glass-shine: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(255,255,255,.25);
  --glass-shadow: 0 8px 32px rgba(31,52,92,.12), 0 1px 3px rgba(31,52,92,.08);
  --glass-blur: blur(28px) saturate(185%);
  --fill-glass: rgba(255,255,255,.45);     /* campos, chips, pestaña activa, filas al tocar */
  --bg: #f6f7f9;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --segment-on: var(--glass-strong);
  --bg-grad: linear-gradient(180deg, #f6f7f9 0%, #f6f7f9 18%, #eceef2 55%, #e1e4ea 100%);
  --inner-shine: inset 0 1px 0 rgba(255,255,255,.45);
  --blue: linear-gradient(160deg, #3d9bff, #0a6cf0);
  --brand: #0a6cf0; --brand-text: #fff;
  --info: #0a5fd6; --info-bg: rgba(10,108,240,.12);
  --line: var(--glass-edge);
  --card: transparent;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --glass: rgba(38,40,48,.48);
    --glass-strong: rgba(34,36,44,.72);
    --glass-edge: rgba(255,255,255,.14);
    --glass-shine: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04);
    --glass-shadow: 0 10px 36px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.3);
    --fill-glass: rgba(255,255,255,.08);
    --bg: #1c1d21;

    --segment-on: rgba(255,255,255,.16);
    --brand: #4aa3ff; --brand-text: #fff;
    --info: #8cc4ff; --info-bg: rgba(74,163,255,.16);
    --bg-grad: linear-gradient(180deg, #1c1d21 0%, #1c1d21 18%, #131417 55%, #0b0c0e 100%);
    --inner-shine: inset 0 1px 0 rgba(255,255,255,.12);
  }
}
:root[data-theme="dark"] {
    --glass: rgba(38,40,48,.48);
    --glass-strong: rgba(34,36,44,.72);
    --glass-edge: rgba(255,255,255,.14);
    --glass-shine: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04);
    --glass-shadow: 0 10px 36px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.3);
    --fill-glass: rgba(255,255,255,.08);
    --bg: #1c1d21;

    --segment-on: rgba(255,255,255,.16);
    --brand: #4aa3ff; --brand-text: #fff;
    --info: #8cc4ff; --info-bg: rgba(74,163,255,.16);
    --bg-grad: linear-gradient(180deg, #1c1d21 0%, #1c1d21 18%, #131417 55%, #0b0c0e 100%);
    --inner-shine: inset 0 1px 0 rgba(255,255,255,.12);
  }

/* ---------- Fondo gris perla ---------- */
body {
  background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
}
body::before {
  content: ""; position: fixed; inset: -10%; z-index: -1; pointer-events: none;
  background: var(--bg-grad);
}

/* ---------- Superficies de vidrio ---------- */
.card, .stat, #nav, dialog, #toast {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shine), var(--glass-shadow);
}
.card, .stat { border-radius: 22px; }
.card.today { border-color: var(--brand); }
.row, td, tr, .form-section, .modal-form header, .modal-form footer, .bar-area { border-color: var(--glass-edge); }
.amount, .stat b, .num, .time { font-variant-numeric: tabular-nums; }

/* Tarjeta destacada: vidrio teñido de azul */
.stat.hero {
  background: linear-gradient(135deg, rgba(10,132,255,.88), rgba(64,92,230,.82));
  border-color: rgba(255,255,255,.45); border-radius: 26px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 12px 32px rgba(10,90,220,.35);
}
.stat.hero span, .stat.hero b { color: #fff; }

/* ---------- Botones, chips y campos ---------- */
.btn, .tab, .chip, input, select, textarea {
  background: var(--fill-glass); border: 1px solid var(--glass-edge);
  box-shadow: var(--inner-shine);
}
.btn { border-radius: 14px; }
.btn.small { border-radius: 12px; }
.btn.primary, .tab.active, .chip.active {
  background: var(--blue); color: #fff; border-color: rgba(255,255,255,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 6px 18px rgba(10,100,240,.3);
}
.btn.primary { border-radius: 18px; }
.btn.ok { background: var(--ok-bg); }
.btn.bad { background: var(--bad-bg); }
.btn.warn { background: var(--warn-bg); }
input, select, textarea { border-radius: 12px; font-size: 16px; } /* 16px: iOS no hace zoom */
input[type=checkbox] { box-shadow: none; }
.last-class, .receipt-data { background: var(--fill-glass); border: 1px solid var(--glass-edge); border-radius: 16px; }
.meter span, .bar { background: var(--blue); }
.login { border-radius: 30px; }

/* ---------- Aviso (toast) ---------- */
#toast { background: var(--glass-strong); color: var(--text); bottom: calc(var(--safe-bottom) + 100px); }

/* ---------- Hojas (formularios) ---------- */
dialog { background: var(--glass-strong); }
dialog::backdrop { background: rgba(10,20,40,.22); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

/* ---------- iPhone: barra flotante y hojas desde abajo ---------- */
@media (max-width: 699px) {
  #main { padding: calc(var(--safe-top) + 16px) 16px calc(var(--safe-bottom) + 110px); }
  #nav {
    inset: auto 14px calc(var(--safe-bottom) + 8px) 14px; padding: 6px; gap: 0;
    border-radius: 34px; background: var(--glass-strong); border: 1px solid var(--glass-edge);
  }
  #nav a { border-radius: 26px; padding: 7px 0; }
  #nav a.active { background: var(--fill-glass); box-shadow: var(--inner-shine); color: var(--brand); }

  dialog {
    position: fixed; inset: auto 8px 8px 8px; margin: 0; width: auto; max-width: none;
    max-height: calc(100dvh - var(--safe-top) - 24px); border-radius: 34px;
  }
  .modal-form { max-height: calc(100dvh - var(--safe-top) - 24px); }
  .modal-form footer { padding-bottom: calc(var(--safe-bottom) + 20px); }
}
/* En la app instalada, iOS difumina una franja bajo la hora: se baja el contenido */
@media (display-mode: standalone) and (max-width: 699px) {
  #main { padding-top: calc(var(--safe-top) + 30px); }
}

/* ---------- iPad y Mac: barra lateral flotante y panel lateral ---------- */
@media (min-width: 700px) {
  #nav {
    margin: 10px; border-radius: 28px; top: 10px; height: calc(100dvh - 20px);
    border: 1px solid var(--glass-edge);
  }
  #nav a { border-radius: 16px; }
  #nav a.active { background: var(--fill-glass); box-shadow: var(--inner-shine); color: var(--brand); }
  #main { padding-bottom: 32px; }

  dialog {
    position: fixed; inset: 10px 10px 10px auto; margin: 0; width: min(480px, calc(100vw - 20px));
    height: calc(100dvh - 20px); max-height: none; border-radius: 28px; background: var(--glass);
  }
  .modal-form { height: 100%; max-height: none; }
  .modal-form .form-grid { flex: 1; align-content: start; }
}

/* Control segmentado (p. ej. Aspecto en Ajustes) */
.segmented { display: inline-flex; padding: 3px; gap: 2px; border-radius: 14px; background: var(--fill-glass); border: 1px solid var(--glass-edge); }
.segmented button { font: inherit; font-size: .92rem; font-weight: 600; padding: 7px 16px; border: 0; border-radius: 11px; background: none; color: var(--soft); cursor: pointer; }
.segmented button.active { background: var(--segment-on); color: var(--text); box-shadow: var(--inner-shine), 0 1px 3px rgba(0,0,0,.12); }

/* Contadores que piden atención: vidrio normal + línea del color de su estado (igual que las filas) */
.stat.warn, .stat.bad { position: relative; padding-left: 20px; }
.stat.warn::before, .stat.bad::before {
  content: ""; position: absolute; left: 9px; top: 14px; bottom: 14px; width: 4px; border-radius: 4px;
}
.stat.warn::before { background: var(--warn); }
.stat.bad::before { background: var(--bad); }

.cal-cell.sel { background: var(--fill-glass); box-shadow: var(--inner-shine); }
.cal-cell.today .cal-num { background: var(--blue); color: #fff; }

/* Aviso "Hay una versión nueva" */
#update {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 30;
  top: calc(var(--safe-top) + 10px); display: flex; align-items: center; gap: 12px;
  padding: 8px 8px 8px 16px; border-radius: 999px; font-size: .92rem; white-space: nowrap;
  background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-shine), var(--glass-shadow);
}