/* Sanitize Pool Intelligence — visual design.
   Follows the company's existing "Control de Piscinas" web app: white surfaces, near-black
   (#111827) primary, dark-navy sidebar (#0f172a), Inter, 10–12px radii, hairline borders.
   Light only, as in that app. */
/* Self-hosted Inter (latin subset, SIL OFL 1.1) — no third-party font requests. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ---------- tokens ---------- */
:root{
  --bg:#ffffff; --surface:#ffffff; --surface-2:#f4f4f5; --surface-3:#f1f5f9;
  --border:#e5e7eb; --border-soft:#f1f1f3;
  --ink:#111827; --ink-2:#6b7280; --ink-muted:#9ca3af;
  --accent:#111827; --accent-ink:#ffffff; --accent-hover:#27272a; --accent-wash:#f4f4f5;
  --blue:#0b6bcb; --blue-wash:#e8f1fc;
  --good:#15803d; --good-bg:#dcfce7;
  --warn:#b45309; --warn-bg:#fef3c7;
  --critical:#dc2626; --critical-bg:#fee2e2; --critical-line:#fecaca;
  --watch:#0b6bcb; --watch-bg:#e8f1fc;
  --side-bg:#0f172a; --side-w:232px;
  --radius:10px; --radius-lg:12px; --radius-sm:8px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.03);
  --shadow-md:0 6px 18px rgba(15,23,42,.08);
  --shadow-lg:0 20px 60px rgba(0,0,0,.25);
  --font-body:'Inter','Segoe UI',system-ui,sans-serif;
}
/* Light only, like the existing Control de Piscinas app (its navy logo is designed for white). */
:root{color-scheme:light;}

*{box-sizing:border-box;}
body{margin:0;font-family:var(--font-body);font-size:14px;background:var(--bg);color:var(--ink);overflow-x:hidden;-webkit-font-smoothing:antialiased;}
#app{min-height:100vh;background:var(--bg);}
h1,h2,h3{text-wrap:balance;letter-spacing:-.02em;}
button{font-family:inherit;}
img{display:block;}
a{color:var(--ink);}
.tabular{font-variant-numeric:tabular-nums;}
::selection{background:var(--accent);color:var(--accent-ink);}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
[hidden]{display:none !important;}
svg{flex:none;}

/* ---------- app shell: sidebar + top bar ---------- */
.app-shell{display:flex;min-height:100vh;}
.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.sidebar{width:var(--side-w);flex:none;background:var(--side-bg);color:#cbd5e1;position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;padding:14px 10px 10px;}
body.sidebar-collapsed .sidebar{display:none;}
.side-brand{padding:4px 2px 18px;}
.side-logo-caja{display:block;width:100%;background:#fff;border:none;border-radius:10px;padding:8px 10px;cursor:pointer;}
.side-logo-caja img{display:block;width:100%;height:auto;}
.side-nav{display:flex;flex-direction:column;gap:2px;flex:1;}
.side-label{font-size:11px;font-weight:500;color:#64748b;padding:4px 10px 6px;}
.side-link{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:8px;color:#cbd5e1;font-size:13.5px;font-weight:500;background:none;border:none;text-align:left;cursor:pointer;}
.side-link svg{width:17px;height:17px;}
.side-link:hover{background:rgba(255,255,255,.07);color:#fff;}
.side-link.active{background:rgba(255,255,255,.13);color:#fff;}
.side-link:focus-visible{outline-color:#fff;}
.side-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:10px;padding-top:8px;display:flex;flex-direction:column;gap:2px;}
.side-overlay{display:none;}

.topbar{height:48px;flex:none;display:flex;align-items:center;gap:12px;padding:0 20px;border-bottom:1px solid var(--border);background:var(--bg);position:sticky;top:0;z-index:40;}
.topbar-toggle{background:none;border:none;cursor:pointer;color:var(--ink);padding:6px;border-radius:6px;display:flex;line-height:1;}
.topbar-toggle:hover{background:var(--surface-2);}
.topbar-toggle svg{width:18px;height:18px;}
.topbar-context{display:flex;flex-direction:column;line-height:1.2;min-width:0;}
.topbar-context b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px;}
.topbar-context span{font-size:11px;color:var(--ink-2);}
.topbar-derecha{margin-left:auto;display:flex;align-items:center;gap:18px;}
.topbar-user{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-2);text-align:right;}
.topbar-user strong{color:var(--ink);font-weight:600;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.topbar-rol{font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:var(--surface-2);color:var(--ink-2);padding:3px 9px;border-radius:999px;border:1px solid var(--border);white-space:nowrap;}
.idioma-selector{display:flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;}
.btn-idioma{background:var(--surface);border:none;border-right:1px solid var(--border);color:var(--ink-2);font-size:11.5px;font-weight:600;padding:5px 10px;cursor:pointer;}
.idioma-selector .btn-idioma:last-child{border-right:none;}
.btn-idioma:hover{background:var(--surface-2);color:var(--ink);}
.btn-idioma.activo{background:var(--accent);color:var(--accent-ink);cursor:default;}
.icon-btn{position:relative;width:32px;height:32px;border-radius:8px;border:none;background:none;color:var(--ink-2);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.icon-btn:hover{background:var(--surface-2);color:var(--ink);}
.icon-btn svg{width:18px;height:18px;}
.badge-dot{position:absolute;top:0;right:0;min-width:15px;height:15px;padding:0 3px;border-radius:8px;background:var(--critical);color:#fff;font-size:9.5px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg);}
.demo-chip{font-size:10.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--warn);background:var(--warn-bg);padding:3px 10px;border-radius:999px;white-space:nowrap;}
.pos-rel{position:relative;}

@media (max-width:899px){
  .sidebar{position:fixed;left:-260px;top:0;z-index:400;transition:left .2s;width:250px;}
  body.sidebar-open .sidebar{left:0;box-shadow:0 0 30px rgba(0,0,0,.35);}
  body.sidebar-open .side-overlay{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:390;}
  body.sidebar-collapsed .sidebar{display:flex;}
  .topbar{padding:0 12px;gap:8px;}
  .topbar-user strong,.topbar-context span{display:none;}
  .topbar-derecha{gap:10px;}
}
@media (max-width:520px){ .topbar-rol,.topbar-context{display:none;} }

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;vertical-align:middle;padding:9px 16px;border:1px solid transparent;border-radius:8px;font-weight:600;font-size:13.5px;line-height:1;cursor:pointer;color:var(--accent-ink);background:var(--accent);transition:background .12s,border-color .12s;white-space:nowrap;}
.btn:hover{background:var(--accent-hover);}
.btn-primary{background:var(--accent);}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--border);}
.btn-ghost:hover{background:var(--surface-2);}
.btn-sm{padding:6px 12px;font-size:12px;border-radius:7px;}
.btn svg{width:15px;height:15px;}
.btn:disabled{opacity:.5;cursor:not-allowed;}

/* ---------- login ---------- */
.login-screen{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px 16px;background:var(--bg);}
.login-lang{position:absolute;top:16px;right:16px;}
.login-box{width:380px;max-width:100%;background:var(--surface);padding:34px 36px;border-radius:14px;border:1px solid var(--border);box-shadow:0 4px 24px rgba(0,0,0,.06);}
.login-box h1{font-size:20px;font-weight:700;letter-spacing:-.02em;margin:0 0 6px;}
.login-logo{display:block;width:100%;max-width:300px;height:auto;margin:0 auto 22px;}
.login-sub{font-size:13px;color:var(--ink-2);margin:0 0 8px;line-height:1.5;}
.field{margin-bottom:0;}
.field label{display:block;font-size:13px;font-weight:500;color:var(--ink);margin:14px 0 6px;}
.field input,.field select,input[type=text],input[type=password]{width:100%;padding:10px 12px;font-size:14px;font-family:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:8px;}
.field input:focus,.field select:focus,.lang-select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(17,24,39,.08);}
.field .hint{font-size:11.5px;color:var(--ink-2);margin-top:5px;line-height:1.5;}
.login-submit{width:100%;margin-top:22px;}
.demo-divider{display:flex;align-items:center;gap:10px;margin:24px 0 12px;color:var(--ink-2);font-size:11.5px;font-weight:500;}
.demo-divider::before,.demo-divider::after{content:"";flex:1;height:1px;background:var(--border);}
.demo-accounts{display:flex;flex-direction:column;gap:6px;}
.demo-acc{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:1px solid var(--border);background:var(--surface);border-radius:8px;padding:8px 10px;cursor:pointer;color:var(--ink);}
.demo-acc:hover{background:var(--surface-2);}
.demo-acc-ic{width:30px;height:30px;border-radius:8px;background:var(--blue-wash);color:var(--blue);display:flex;align-items:center;justify-content:center;flex:none;}
.demo-acc-ic svg{width:16px;height:16px;}
.demo-acc-text{flex:1;min-width:0;}
.demo-acc b{display:block;font-size:13px;font-weight:600;}
.demo-acc-text span{font-size:11.5px;color:var(--ink-2);}
.demo-tag{flex:none;font-size:10.5px;font-weight:600;padding:2px 9px;border-radius:999px;white-space:nowrap;}
.demo-tag.tone-good{background:var(--good-bg);color:var(--good);}
.demo-tag.tone-warn{background:var(--warn-bg);color:var(--warn);}
.demo-tag.tone-critical{background:var(--critical-bg);color:var(--critical);}
.demo-tag.tone-accent{background:var(--surface-3);color:var(--ink-2);}
.auth-error{display:flex;align-items:flex-start;gap:9px;background:var(--critical-bg);color:var(--critical);border:1px solid var(--critical-line);border-radius:8px;padding:10px 12px;font-size:13px;line-height:1.5;margin:10px 0 4px;}
.auth-error svg{width:16px;height:16px;flex:none;margin-top:1px;}
.loading-card{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;}
.loading-card .login-logo{margin:0;max-width:220px;}
.loading-card p{margin:0;font-size:13px;color:var(--ink-2);}
.spinner{width:24px;height:24px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--ink);animation:spin .8s linear infinite;}
@media (prefers-reduced-motion:reduce){ .spinner{animation-duration:2.4s;} }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- page ---------- */
.page{padding:26px 30px 24px;width:100%;}
@media (max-width:899px){ .page{padding:18px 14px 20px;} }
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap;}
.page-head h1{font-size:24px;font-weight:700;letter-spacing:-.02em;margin:0 0 4px;}
.page-head p{margin:0;color:var(--ink-2);font-size:13.5px;}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 4px;}
.legal-footer{padding:8px 30px 28px;}
.legal-links{display:flex;justify-content:center;gap:10px;font-size:12px;color:var(--ink-muted);margin-top:18px;}
.legal-links a{color:var(--ink-2);text-decoration:none;font-weight:500;}
.legal-links a:hover{color:var(--ink);text-decoration:underline;}
.legal-footer .legal-links{margin-top:0;}

/* ---------- KPI tiles ---------- */
.stat-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:20px;}
@media (max-width:640px){ .stat-row{grid-template-columns:1fr 1fr;} }
.stat-card{display:grid;grid-template-columns:42px minmax(0,1fr);grid-template-areas:"ico l" "ico n";column-gap:12px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:11px 14px;box-shadow:var(--shadow-sm);min-width:0;}
.stat-ico{grid-area:ico;width:42px;height:42px;border-radius:10px;background:var(--blue-wash);color:var(--blue);display:flex;align-items:center;justify-content:center;}
.stat-ico svg{width:22px;height:22px;}
.stat-card .l{grid-area:l;font-size:12px;color:var(--ink-2);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.stat-card .n{grid-area:n;font-size:23px;font-weight:700;letter-spacing:-.02em;line-height:1.1;}
.stat-card.warn .stat-ico{background:var(--warn-bg);color:var(--warn);}
.stat-card.good .stat-ico{background:var(--good-bg);color:var(--good);}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm);}
.card h2{font-size:15px;font-weight:600;letter-spacing:-.01em;margin:0 0 3px;}
.card .card-desc{font-size:12px;color:var(--ink-2);margin:0 0 14px;}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
.card-head h2{margin:0;}
.side-cards{display:flex;flex-direction:column;gap:14px;}

.pool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;}
.property-group{margin-bottom:24px;}
.property-group:last-child{margin-bottom:0;}
.property-group-title{font-size:15px;font-weight:600;letter-spacing:-.01em;margin:0 0 10px;}
.pool-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px;cursor:pointer;box-shadow:var(--shadow-sm);text-align:left;color:var(--ink);}
.pool-card:hover{box-shadow:var(--shadow-md);}
.pool-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px;}
.pool-card-top h3{font-size:14.5px;font-weight:600;margin:0 0 2px;}
.pool-card-top span{font-size:12px;color:var(--ink-2);}
.mini-ring{width:48px;height:48px;flex:none;}
.stale-date{color:var(--warn) !important;font-weight:600;}
.status-pill{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap;}
.status-pill .dot{display:none;}
.pill-good{background:var(--good-bg);color:var(--good);}
.pill-warn{background:var(--warn-bg);color:var(--warn);}
.pill-critical{background:var(--critical-bg);color:var(--critical);}
.pill-watch{background:var(--watch-bg);color:var(--watch);}
.watch-chip{margin-left:6px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--watch-bg);color:var(--watch);}
.pool-card-row{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--ink-2);padding-top:10px;margin-top:10px;border-top:1px solid var(--border-soft);}
.pool-card-row b{color:var(--ink);font-weight:700;}

/* ---------- pool detail ---------- */
.pool-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
.back-btn{width:34px;height:34px;border-radius:8px;border:1px solid var(--border);background:var(--surface);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-2);flex:none;}
.back-btn:hover{background:var(--surface-2);color:var(--ink);}
.back-btn svg{width:16px;height:16px;}
.pool-header h1{font-size:24px;font-weight:700;margin:0;}
.pool-header .loc{font-size:12.5px;color:var(--ink-2);}
.hero-grid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:14px;margin-bottom:14px;}
@media (max-width:980px){ .hero-grid{grid-template-columns:1fr;} }
.hero-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:24px 22px;display:flex;flex-direction:column;align-items:center;text-align:center;}
.gauge-wrap{position:relative;width:200px;height:200px;margin:4px 0 10px;cursor:pointer;}
.gauge-wrap svg{width:100%;height:100%;transform:rotate(-90deg);}
.gauge-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.gauge-score{font-size:44px;font-weight:700;letter-spacing:-.03em;line-height:1;}
.gauge-of{font-size:12px;color:var(--ink-2);font-weight:500;margin-top:3px;}
.gauge-tap{font-size:10.5px;color:var(--ink-muted);margin-top:6px;display:flex;align-items:center;gap:3px;font-weight:500;}
.gauge-tap svg{width:11px;height:11px;}
.status-line{font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.4;margin:6px 0 2px;max-width:290px;}
.status-sub{font-size:12.5px;color:var(--ink-2);max-width:300px;line-height:1.5;}
.stale-note{display:flex;gap:8px;align-items:flex-start;text-align:left;margin-top:12px;padding:10px 12px;border-radius:8px;background:var(--warn-bg);color:var(--warn);font-size:12.5px;font-weight:600;line-height:1.45;}
.stale-note svg{width:15px;height:15px;margin-top:1px;}

/* alerts — list rows with a tinted icon square */
.alert-card{border-color:var(--critical-line);}
.alert-card:not(.critical){border-color:#fde68a;}
.alert-row{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--border-soft);}
.alert-row:first-of-type{border-top:none;padding-top:2px;}
.alert-ic{width:30px;height:30px;border-radius:8px;background:var(--warn-bg);display:flex;align-items:center;justify-content:center;flex:none;color:var(--warn);}
.alert-card.critical .alert-ic{background:var(--critical-bg);color:var(--critical);}
.alert-ic svg{width:16px;height:16px;}
.alert-row p{margin:0;font-size:12.5px;line-height:1.5;align-self:center;}
.watch-note{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;font-size:12.5px;line-height:1.45;color:var(--watch);font-weight:600;}
.watch-note svg{width:15px;height:15px;margin-top:1px;}
.notify-row{display:flex;align-items:center;justify-content:space-between;padding-top:12px;margin-top:10px;border-top:1px solid var(--border-soft);}
.notify-opts{display:flex;gap:16px;}
.switch-lbl{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:var(--ink-2);cursor:pointer;}
.switch{position:relative;width:36px;height:21px;border-radius:99px;background:var(--border);cursor:pointer;flex:none;transition:.15s;}
.switch.on{background:var(--accent);}
.switch i{position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;transition:.15s;box-shadow:0 1px 3px rgba(0,0,0,.3);}
.switch.on i{left:17px;}

/* breakdown rows (also used in modal) */
.param-row{display:grid;grid-template-columns:110px 1fr 74px;gap:12px;align-items:center;padding:9px 0;}
.param-row + .param-row{border-top:1px solid var(--border-soft);}
.param-name{font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:7px;}
.param-name .dot{width:7px;height:7px;border-radius:50%;flex:none;}
.prov-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--blue);vertical-align:middle;cursor:help;}
.range-track{position:relative;height:8px;border-radius:99px;background:var(--surface-3);}
.range-zone{position:absolute;top:0;bottom:0;border-radius:99px;}
.range-zone.good{background:color-mix(in srgb, var(--good) 30%, transparent);}
.range-zone.watch{background:color-mix(in srgb, var(--watch) 35%, transparent);}
.range-mark{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%);border:2.5px solid var(--surface);box-shadow:0 0 0 1px var(--border);}
.param-val{font-size:12.5px;font-weight:700;text-align:right;}
.param-val small{font-weight:500;color:var(--ink-muted);}
.param-tier-caption{font-size:10.5px;color:var(--ink-muted);margin-top:2px;}

/* tabs — underline style */
.tabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--border);margin-bottom:20px;}
.tab{flex:none;padding:8px 14px;margin-bottom:-1px;font-size:13px;font-weight:500;color:var(--ink-2);background:none;border:none;border-bottom:2px solid transparent;border-radius:8px 8px 0 0;cursor:pointer;white-space:nowrap;}
.tab:hover{color:var(--ink);}
.tab.active{color:var(--ink);background:var(--surface-2);border-bottom-color:var(--ink);}
.chart-box{height:230px;position:relative;}
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;}
.compare-cell{background:var(--surface-2);border-radius:10px;padding:11px 13px;}
.compare-cell .l{font-size:11px;font-weight:500;color:var(--ink-2);}
.compare-cell .v{font-size:19px;font-weight:700;letter-spacing:-.02em;margin-top:3px;}
.forecast-caption{display:flex;gap:10px;align-items:flex-start;background:var(--blue-wash);border-radius:10px;padding:11px 13px;margin-top:12px;}
.forecast-caption svg{width:16px;height:16px;color:var(--blue);margin-top:1px;}
.forecast-caption p{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink);}
.beta-chip{font-size:10.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--border);padding:2px 9px;border-radius:999px;vertical-align:middle;}

/* visit feed */
.visit{display:flex;gap:13px;padding:14px 0;border-top:1px solid var(--border-soft);}
.visit:first-child{border-top:none;padding-top:2px;}
.visit-photo{width:64px;height:64px;border-radius:8px;flex:none;object-fit:cover;}
.visit-main{flex:1;min-width:0;}
.visit-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap;}
.visit-date{font-size:13.5px;font-weight:600;}
.visit-cost{font-size:13.5px;font-weight:700;}
.visit-tech{font-size:11.5px;color:var(--ink-2);margin-top:1px;}
.visit-products{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;}
.chip{font-size:11px;font-weight:500;background:var(--surface-2);border:1px solid var(--border);color:var(--ink-2);padding:2px 9px;border-radius:999px;}
.visit-notes{font-size:12px;color:var(--ink-2);margin-top:7px;line-height:1.5;}

/* ---------- tables ---------- */
.billing-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:20px;}
@media (max-width:1100px){ .billing-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
.table-wrap{width:100%;overflow-x:auto;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);}
table{width:100%;min-width:640px;border-collapse:collapse;background:var(--surface);font-size:13px;}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--border-soft);font-size:13px;}
th{font-weight:500;font-size:12.5px;color:var(--ink-2);border-bottom:1px solid var(--border);white-space:nowrap;}
tbody tr:hover td{background:var(--surface-2);}
tbody tr:last-child td{border-bottom:none;}
td.num{text-align:right;font-weight:600;}
.subtle{color:var(--ink-2);font-size:11.5px;}
.row-actions{display:flex;gap:6px;flex-wrap:wrap;}

/* ---------- modals ---------- */
.overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:500;display:flex;align-items:center;justify-content:center;padding:20px;}
.sheet{background:var(--surface);color:var(--ink);width:100%;max-width:460px;max-height:88vh;overflow-y:auto;border-radius:14px;box-shadow:var(--shadow-lg);}
.sheet-head{position:sticky;top:0;background:var(--surface);display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);}
.sheet-head h3{margin:0;font-size:16px;font-weight:600;letter-spacing:-.01em;}
.sheet-body{padding:22px 24px;}
.close-x{width:30px;height:30px;border-radius:8px;border:1px solid var(--border);background:var(--surface);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-2);}
.close-x:hover{background:var(--surface-2);color:var(--ink);}
.close-x svg{width:15px;height:15px;}
.csv-box{width:100%;height:180px;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:11px;font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--ink-2);resize:vertical;}
.copied-note{font-size:12px;color:var(--good);font-weight:600;margin-top:8px;display:flex;align-items:center;gap:5px;height:16px;}
.dropdown{position:absolute;top:38px;right:0;width:320px;max-width:88vw;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 28px rgba(15,23,42,.18);z-index:90;max-height:420px;overflow-y:auto;}
.dropdown-head{padding:12px 14px;border-bottom:1px solid var(--border);font-size:12.5px;font-weight:600;}
.dropdown-item{display:flex;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border-soft);cursor:pointer;}
.dropdown-item:hover{background:var(--surface-2);}
.dropdown-item:last-child{border-bottom:none;}
.dropdown-empty{padding:24px 14px;text-align:center;color:var(--ink-muted);font-size:12.5px;}
.footnote{font-size:11.5px;color:var(--ink-muted);text-align:center;margin-top:24px;line-height:1.6;}
.footnote a{color:var(--ink);font-weight:600;}

/* ---------- admin panel ---------- */
.lang-select{appearance:auto;padding:6px 10px;font-size:13px;font-weight:500;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--ink);font-family:inherit;}
.admin-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.fieldset{border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px 4px;margin:6px 0 4px;}
.fieldset-title{font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:6px;}
.check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);padding:4px 0;cursor:pointer;}
.check input{width:16px;height:16px;accent-color:var(--accent);}
.check-group{margin-bottom:8px;}
.check-group>b{display:block;font-size:12px;color:var(--ink);margin-bottom:2px;}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.secret-row{display:flex;gap:8px;align-items:center;}
.secret-row input{font-family:ui-monospace,Menlo,monospace;font-size:13px;}
.admin-prop{padding:10px 0;border-top:1px solid var(--border-soft);}
.admin-prop:first-of-type{border-top:none;padding-top:0;}
.admin-prop-head{margin-bottom:4px;}
.admin-line{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;padding:5px 0 5px 12px;}

/* ---------- legal pages (privacy.html / terms.html) ---------- */
.legal-page{max-width:760px;margin:0 auto;padding:32px 20px 64px;line-height:1.65;}
.legal-page h1{font-size:28px;font-weight:700;margin:0 0 4px;}
.legal-page h2{font-size:17px;font-weight:600;margin:28px 0 6px;}
.legal-page p,.legal-page li{font-size:14.5px;color:var(--ink-2);}
.legal-page a{color:var(--ink);}
.legal-page .meta{font-size:12.5px;color:var(--ink-muted);margin:0 0 20px;}
.legal-page .back{display:inline-block;margin-bottom:18px;font-size:13px;font-weight:600;text-decoration:none;}
.legal-draft{background:var(--warn-bg);color:var(--warn);border-radius:8px;padding:12px 14px;font-size:13px;font-weight:600;margin:0 0 22px;}

@media print{
  .sidebar,.topbar,.side-overlay,.no-print,.legal-footer,.ops-toolbar,.ops-filters,.pager,.head-actions,.row-actions,.cal-nav,.cal-legend{display:none !important;}
  body{background:#fff;}
  .print-only{display:block !important;}
}
.print-only{display:none;}

/* ---------- sidebar groups (Operations menu) ---------- */
.side-group-btn .side-chev{margin-left:auto;display:flex;opacity:.7;transition:transform .15s;}
.side-chev svg{width:15px;height:15px;}
.side-group.open>.side-group-btn .side-chev{transform:rotate(180deg);}
.side-sub{display:none;flex-direction:column;gap:1px;padding:2px 0 6px 20px;margin-left:18px;border-left:1px solid rgba(255,255,255,.12);}
.side-group.open>.side-sub{display:flex;}
.side-sub-link{padding:7px 10px;border-radius:7px;color:#94a3b8;font-size:13px;font-weight:500;background:none;border:none;text-align:left;cursor:pointer;}
.side-sub-link:hover{background:rgba(255,255,255,.07);color:#fff;}
.side-sub-link.active{background:rgba(255,255,255,.13);color:#fff;}
.side-sub-link:focus-visible{outline-color:#fff;}

/* ---------- operations pages ---------- */
.head-actions{display:flex;gap:8px;}
.ops-toolbar,.ops-filters,.cal-nav{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px;}
.toolbar-spacer{flex:1;}
.ops-search,.ops-filters input,.ops-filters select,.ops-filters label input{padding:7px 10px;font-size:13px;width:auto;}
.ops-search{width:220px;}
.tabs.inline{border-bottom:none;margin:0;gap:4px;}
.pager{display:flex;align-items:center;gap:8px;margin-top:10px;}
tfoot td{padding:11px 14px;border-top:1px solid var(--border);font-size:13px;}
.stat-row.five{grid-template-columns:repeat(5,minmax(0,1fr));}
@media (max-width:1100px){ .stat-row.five{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:640px){ .stat-row.five{grid-template-columns:1fr 1fr;} }
.dash-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:12px;}
.dash-grid.three{grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:1100px){ .dash-grid.three{grid-template-columns:1fr;} }
@media (max-width:899px){ .dash-grid{grid-template-columns:1fr;} }
.mini-pools{display:flex;flex-direction:column;gap:8px;}
.mini-pool{display:flex;align-items:center;gap:10px;}
.mini-pool>div:not(.mini-ring){flex:1;min-width:0;font-size:13px;}
.mini-pool .mini-ring{width:40px;height:40px;}
.dash-list{list-style:none;margin:0;padding:0;}
.dash-list li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border-soft);font-size:12.5px;}
.dash-list li:last-child{border-bottom:none;}
.dash-ico{flex:none;width:28px;height:28px;border-radius:8px;background:var(--blue-wash);color:var(--blue);display:flex;align-items:center;justify-content:center;}
.dash-ico svg{width:15px;height:15px;}
.dash-ico.aviso{background:var(--warn-bg);color:var(--warn);}
.dash-ico.rojo{background:var(--critical-bg);color:var(--critical);}
.equip-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;}
.equip{border-radius:10px;padding:12px 8px;text-align:center;display:flex;flex-direction:column;}
.equip strong{font-size:28px;line-height:1.1;}
.equip span{font-size:12px;}
.equip.ok{background:var(--good-bg);color:var(--good);}
.equip.rojo{background:var(--critical-bg);color:var(--critical);}
.equip-bar{display:flex;height:8px;border-radius:999px;overflow:hidden;background:var(--surface-3);}
.equip-bar .ok{background:#16a34a;}
.equip-bar .rojo{background:var(--critical);}
.chips{display:flex;flex-wrap:wrap;gap:6px;}

/* calendar / rota */
.cal-nav b{font-size:15px;text-transform:capitalize;min-width:150px;text-align:center;}
.cal-legend{display:flex;gap:16px;font-size:12px;color:var(--ink-2);margin-bottom:10px;}
.cal-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;}
.c-man{background:var(--blue);} .c-avi{background:#f59e0b;} .c-inc{background:var(--critical);}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface);}
.cal-head{background:#fafafa;text-align:center;padding:8px 4px;font-size:12.5px;font-weight:500;color:var(--ink-2);border-bottom:1px solid var(--border);}
.cal-cell{min-height:92px;padding:6px;border:none;border-right:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column;gap:3px;text-align:left;cursor:pointer;overflow:hidden;font-family:inherit;color:var(--ink);}
.cal-cell:nth-child(7n){border-right:none;}
.cal-cell:hover{background:var(--surface-2);}
.cal-cell.off{background:#fafafa;cursor:default;}
.cal-cell.today{background:#fef9c3;}
.cal-num{font-size:13px;font-weight:700;}
.cal-chip{color:#fff;font-size:11px;font-weight:600;padding:2px 6px;border-radius:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
td .cal-chip{display:inline-block;}
.cal-chip.c-man{background:var(--blue);} .cal-chip.c-avi{background:#f59e0b;} .cal-chip.c-inc{background:var(--critical);}
.cal-more{font-size:11px;color:var(--ink-2);font-weight:700;}
@media (max-width:640px){ .cal-cell{min-height:64px;padding:3px;} .cal-chip{font-size:9.5px;padding:1px 3px;} }

/* forms */
.sheet.wide{max-width:680px;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;}
.form-grid .field.wide{grid-column:1/-1;}
@media (max-width:640px){ .form-grid{grid-template-columns:1fr;} }
.form-grid .field{margin-bottom:6px;}
.form-grid textarea{width:100%;padding:9px 10px;font-size:14px;font-family:inherit;border:1px solid var(--border);border-radius:8px;resize:vertical;}
.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:14px;}
.days{display:flex;gap:8px;flex-wrap:wrap;}
.repeater .rep-rows{display:flex;flex-direction:column;gap:6px;margin-bottom:8px;}
.rep-row{display:flex;gap:6px;align-items:center;}
.rep-col{flex:1;min-width:0;}
.rep-col input,.rep-col select{width:100%;padding:8px 10px;font-size:13px;}

/* ---------- top bar clock / welcome (as in the Control de Piscinas app) ---------- */
.topbar-reloj{font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap;}
.topbar-hola{white-space:nowrap;}
.topbar-toggle{border:1px solid transparent;}
@media (max-width:899px){ .topbar-reloj{display:none;} .topbar-hola{display:none;} }

/* ---------- dashboard header + hero banner ---------- */
.dash-barra-paginas{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap;}
.dash-barra-paginas h2{margin:0;font-size:20px;font-weight:700;letter-spacing:-.02em;}
.dash-pager{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--border);border-radius:10px;padding:3px;background:var(--surface);}
.dash-pager-tab{border:none;background:none;font-size:12.5px;font-weight:600;color:var(--ink-2);padding:6px 14px;border-radius:7px;cursor:pointer;}
.dash-pager-tab:hover{background:var(--surface-2);color:var(--ink);}
.dash-pager-tab.activa{background:var(--accent);color:var(--accent-ink);}
.dash-pager-flecha{border:none;background:none;color:var(--ink-2);padding:5px;border-radius:7px;cursor:pointer;display:flex;}
.dash-pager-flecha:hover{background:var(--surface-2);color:var(--ink);}
.dash-pager-flecha svg{width:16px;height:16px;}
.dash-hero{position:relative;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 26px;margin-bottom:12px;border-radius:12px;overflow:hidden;color:#fff;background:url('img/hero.jpg') center 55%/cover;}
.dash-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,28,60,.85) 0%,rgba(8,28,60,.6) 50%,rgba(8,28,60,.1) 100%);}
.dash-hero>*{position:relative;}
.dash-eyebrow{display:block;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.9;margin-bottom:8px;}
.dash-eyebrow::before{content:"";display:inline-block;width:20px;height:1px;background:#fff;vertical-align:middle;margin-right:8px;}
.dash-hero h1{margin:0 0 4px;font-size:26px;line-height:1.15;letter-spacing:-.02em;font-weight:700;color:#fff;}
.dash-hero p{margin:0;font-size:13.5px;opacity:.92;}
.dash-tiempo{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.93);color:#0f172a;border-radius:10px;padding:9px 18px;box-shadow:0 6px 20px rgba(0,0,0,.2);flex:none;}
.dash-tiempo-icono{color:#f59e0b;}
.dash-tiempo-icono .ico{width:34px;height:34px;}
.dash-tiempo-temp{font-size:26px;font-weight:700;line-height:1;letter-spacing:-.02em;}
.dash-tiempo-lugar{font-weight:600;font-size:12px;margin-top:2px;}
.dash-tiempo-desc{font-size:11px;color:#64748b;}
@media (max-width:899px){ .dash-hero{flex-direction:column;align-items:flex-start;} .dash-hero h1{font-size:21px;} }