:root{
  /* Paleta al estilo Aeros: Bootstrap clásico sobre una barra lateral azul marino */
  --bg:#f4f6f9; --surface:#FFFFFF; --surface-2:#f7f9fb; --line:#d5dbe3; --line-2:#e6eaf0;
  --ink:#1f2d3d; --ink-2:#4b5b6b; --ink-3:#7b8896;
  --accent:#337ab7; --accent-ink:#FFFFFF; --accent-soft:#d9edf7; --accent-2:#286090;
  --mag:#8a3fb1; --mag-soft:#efe3f7;
  --teal:#31708f; --teal-soft:#d9edf7;
  --vio:#6B4FD8; --vio-soft:#ECE8FC;
  --ok:#3c763d; --ok-soft:#dff0d8; --warn:#8a6d3b; --warn-soft:#fcf8e3; --bad:#a94442; --bad-soft:#f2dede;
  --rail:#081028; --rail-ink:#a9b4c8; --rail-hi:#FFFFFF; --rail-act:#14284a; --rail-sec:#6b7a94;
  --tile-1:#337ab7; --tile-2:#dff0d8; --tile-3:#d9edf7; --tile-4:#fcf8e3;
  --shadow:0 1px 2px rgba(15,34,51,.06);
  --radius:6px;
  --font:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#08121C; --surface:#0F1D2B; --surface-2:#132536; --line:#1F3448; --line-2:#1A2D40;
    --ink:#E6EEF5; --ink-2:#A3B6C8; --ink-3:#6D869C;
    --accent:#4C9DF5; --accent-ink:#04111F; --accent-soft:#13304F; --accent-2:#7AB6F8;
    --mag:#E77DB8; --mag-soft:#3A1B2D; --teal:#3CC4B4; --teal-soft:#0F3531; --vio:#A898F5; --vio-soft:#2A2350;
    --ok:#4CC88A; --ok-soft:#10352A; --warn:#F2AE45; --warn-soft:#3A2A10; --bad:#F2766B; --bad-soft:#3E1B18;
    --rail:#050D15; --rail-ink:#8098AE; --rail-hi:#FFFFFF; --rail-act:#12263A; --rail-sec:#4F667B;
    --tile-1:#2f6ea8; --tile-2:#173b26; --tile-3:#14304f; --tile-4:#3a3112;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -8px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#08121C; --surface:#0F1D2B; --surface-2:#132536; --line:#1F3448; --line-2:#1A2D40;
  --ink:#E6EEF5; --ink-2:#A3B6C8; --ink-3:#6D869C;
  --accent:#4C9DF5; --accent-ink:#04111F; --accent-soft:#13304F; --accent-2:#7AB6F8;
  --mag:#E77DB8; --mag-soft:#3A1B2D; --teal:#3CC4B4; --teal-soft:#0F3531; --vio:#A898F5; --vio-soft:#2A2350;
  --ok:#4CC88A; --ok-soft:#10352A; --warn:#F2AE45; --warn-soft:#3A2A10; --bad:#F2766B; --bad-soft:#3E1B18;
  --rail:#050D15; --rail-ink:#8098AE; --rail-hi:#FFFFFF; --rail-act:#12263A; --rail-sec:#4F667B;
  --tile-1:#2f6ea8; --tile-2:#173b26; --tile-3:#14304f; --tile-4:#3a3112;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -8px rgba(0,0,0,.5);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:500 14px/1.5 var(--font);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
h1,h2,h3{margin:0;text-wrap:balance;letter-spacing:-.02em}
a{color:var(--accent)}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100%}
.app.sin-rail{grid-template-columns:minmax(0,1fr)}
.app.sin-rail .rail{display:none}
.content{min-width:0;display:flex;flex-direction:column}
.rail{background:var(--rail);color:var(--rail-ink);padding:20px 14px;display:flex;flex-direction:column;gap:16px;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 8px;color:var(--rail-hi)}
.brand svg{flex:none}
.brand b{display:block;font-size:15px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.brand small{display:block;font-size:10.5px;color:var(--rail-ink);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.nav{display:flex;flex-direction:column;gap:2px}
.nav-sec{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:14px 10px 6px;color:var(--rail-sec)}
.nav button{all:unset;cursor:pointer;display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;font-weight:600;font-size:13.5px}
.nav button:hover{background:rgba(255,255,255,.05);color:var(--rail-hi)}
.nav button[aria-current="page"]{background:var(--rail-act);color:var(--rail-hi)}
.nav button[aria-current="page"] svg{color:#5FB0FF}
.nav button:focus-visible,.rail-foot button:focus-visible{outline:2px solid #5FB0FF;outline-offset:1px}
.nav svg{width:18px;height:18px;flex:none}
.nav .badge{margin-left:auto;background:#E0524A;color:#fff;border-radius:99px;font-size:10.5px;padding:1px 7px;font-weight:700}
.rail-foot{margin-top:auto;padding:12px 8px 0;border-top:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;gap:8px}
.who{display:flex;align-items:center;gap:10px;min-width:0}
.who .av{width:32px;height:32px;border-radius:10px;background:var(--rail-act);color:var(--rail-hi);display:grid;place-items:center;font-weight:800;font-size:12px;flex:none}
.who b{display:block;color:var(--rail-hi);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who span{font-size:11px}
.foot-actions{display:flex;gap:4px;flex-wrap:wrap}
.foot-actions button{all:unset;cursor:pointer;font-size:11.5px;font-weight:700;padding:4px 8px;border-radius:7px;color:var(--rail-ink);background:rgba(255,255,255,.04)}
.foot-actions button:hover{color:var(--rail-hi);background:rgba(255,255,255,.09)}
.sync{display:flex;align-items:center;gap:7px;font-size:11px}
.dot{width:8px;height:8px;border-radius:50%;background:#4CC88A;flex:none;box-shadow:0 0 0 3px rgba(76,200,138,.18)}
.dot.off{background:#F2766B;box-shadow:0 0 0 3px rgba(242,118,107,.2)}

main{padding-block:26px 60px;padding-inline:clamp(16px,3vw,36px);min-width:0;container:main/inline-size}
.top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.top h1{font-size:26px;font-weight:800}
.top p{margin:4px 0 0;color:var(--ink-2);max-width:70ch}
.eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-bottom:4px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------- primitivos ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:8px 13px;font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap;text-decoration:none;color:var(--ink);transition:background .15s,border-color .15s}
.btn:hover{border-color:var(--ink-3)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible,.slot:focus-visible,.blk:focus-visible,.link:focus-visible,.tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{background:var(--surface-2)}
.btn.danger{color:var(--bad)}
.btn.sm{padding:5px 9px;font-size:12px;border-radius:8px}
.btn svg{width:15px;height:15px;flex:none}
.btn[disabled]{opacity:.45;pointer-events:none}
.link{all:unset;cursor:pointer;color:var(--ink);font-weight:700}
.link:hover{color:var(--accent)}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field>span{font-size:12px;font-weight:700;color:var(--ink-2)}
.input{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:8px 10px;min-height:38px}
.input:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
textarea.input{min-height:70px;resize:vertical}

.card{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px 0;flex-wrap:wrap}
.card-h h2{font-size:15px;font-weight:800}
.card-h .sub{color:var(--ink-3);font-size:12px;font-weight:600}
.card-b{padding:14px 18px 18px}
.grid{display:grid;gap:16px}
.g-kpi{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-kpi.k4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-kpi.k2{grid-template-columns:repeat(2,minmax(0,1fr))}
@container main (max-width:760px){.g-kpi.k4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container main (max-width:480px){.g-kpi,.g-kpi.k4,.g-kpi.k2{grid-template-columns:minmax(0,1fr)}}
.g-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr))}
.g-main{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
@media (max-width:1100px){.g-main{grid-template-columns:minmax(0,1fr)}}
.stack{display:flex;flex-direction:column;gap:16px}
.mb{margin-bottom:16px}

.kpi{padding:16px 18px;display:flex;flex-direction:column;gap:6px;container-type:inline-size;min-width:0}
.kpi .l{font-size:12px;font-weight:700;color:var(--ink-2);display:flex;align-items:center;gap:8px}
.kpi .l i{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);flex:none}
.kpi .l i svg{width:15px;height:15px}
.kpi .v{font-size:clamp(16px,11cqi,26px);font-weight:600;font-family:var(--mono);letter-spacing:-.03em;line-height:1.15;white-space:nowrap}
.kpi .d{font-size:12px;color:var(--ink-3);font-weight:600}
.pos{color:var(--ok)} .neg{color:var(--bad)}

.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:99px;font-size:11.5px;font-weight:700;white-space:nowrap;background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line-2)}
.pill.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.pill.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.pill.bad{background:var(--bad-soft);color:var(--bad);border-color:transparent}
.pill.info{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.pill.mag{background:var(--mag-soft);color:var(--mag);border-color:transparent}

.tbl-wrap{overflow-x:auto;margin-inline:-18px}
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:700;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:10px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.tbl th:first-child,.tbl td:first-child{padding-left:18px}
.tbl th:last-child,.tbl td:last-child{padding-right:18px}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:var(--surface-2)}
.tbl .r{text-align:right}
.tbl .nw{white-space:nowrap}
.tbl tfoot td{font-weight:800;border-top:1px solid var(--line)}
.muted{color:var(--ink-3)}
.small{font-size:12px}
.empty{padding:26px 18px;text-align:center;color:var(--ink-3);font-weight:600}
.note{font-size:12px;color:var(--ink-3);margin-top:12px;max-width:80ch}

.banner{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;margin-bottom:18px;flex-wrap:wrap;font-weight:600}
.banner svg{width:18px;height:18px;flex:none}
.banner>span{flex:1 1 260px;min-width:0}
.banner.warn{background:var(--warn-soft);color:var(--warn)}
.banner.info{background:var(--accent-soft);color:var(--accent)}
.banner.bad{background:var(--bad-soft);color:var(--bad)}
.banner .btn{margin-left:auto}

.alerts{display:flex;flex-direction:column}
.alert{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line-2)}
.alert:last-child{border-bottom:0}
.alert .sev{width:4px;align-self:stretch;border-radius:4px;flex:none;background:var(--warn)}
.alert.bad .sev{background:var(--bad)} .alert.info .sev{background:var(--accent)} .alert.ok .sev{background:var(--ok)}
.alert .t{font-weight:700} .alert .s{color:var(--ink-2);font-size:12.5px}
.alert .btn{margin-left:auto;flex:none}

.tabs{display:inline-flex;background:var(--surface-2);border:1px solid var(--line-2);border-radius:11px;padding:3px;gap:2px;flex-wrap:wrap}
.tab{all:unset;cursor:pointer;padding:6px 12px;border-radius:8px;font-weight:700;font-size:13px;color:var(--ink-2)}
.tab[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.toolbar .input,.actions .input{width:auto}
.spacer{flex:1}

/* ---------- grilla de turnos ---------- */
.sched{overflow-x:auto}
.sched-in{min-width:1120px}
.grow{display:grid;grid-template-columns:150px repeat(var(--slots),minmax(34px,1fr));align-items:stretch;position:relative}
.grow+.grow{border-top:1px solid var(--line-2)}
.ghead{position:sticky;top:0;z-index:3;background:var(--surface)}
.ghead .h{grid-row:1;font:500 11px var(--mono);color:var(--ink-3);padding:10px 0 8px 4px;border-left:1px solid var(--line)}
.glabel{grid-column:1;grid-row:1;padding:10px 12px;display:flex;flex-direction:column;justify-content:center;min-height:62px;position:sticky;left:0;background:var(--surface);z-index:2;border-right:1px solid var(--line)}
.glabel b{font-family:var(--mono);font-weight:600;font-size:13px}
.glabel span{font-size:11.5px;color:var(--ink-3);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsec{padding:12px 12px 6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--ink-3);background:var(--surface-2);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.slot{all:unset;grid-row:1;cursor:pointer;border-left:1px solid var(--line-2)}
.slot.hr{border-left-color:var(--line)}
.slot:hover{background:var(--accent-soft)}
.slot.past{background:repeating-linear-gradient(135deg,transparent 0 6px,var(--surface-2) 6px 8px)}
.grow.maint .slot{background:repeating-linear-gradient(135deg,var(--warn-soft) 0 6px,transparent 6px 12px)}
.now{grid-row:1;width:2px;background:var(--bad);z-index:1;pointer-events:none;justify-self:start}
.blk{all:unset;grid-row:1;z-index:1;margin:6px 2px;border-radius:9px;padding:5px 8px;font-size:11.5px;line-height:1.25;cursor:pointer;overflow:hidden;min-width:0;display:flex;flex-direction:column;justify-content:center;border-left:3px solid;background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
.blk b{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blk span{color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.blk:hover{box-shadow:var(--shadow)}
.t-solo{background:var(--teal-soft);border-color:var(--teal)}
.t-alquiler{background:var(--surface-2);border-color:var(--ink-3)}
.t-bautismo{background:var(--mag-soft);border-color:var(--mag)}
.t-mantenimiento{background:var(--warn-soft);border-color:var(--warn)}
.s-volado{opacity:.6}
.s-volado b::before{content:"✓ ";color:var(--ok)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--ink-2);font-weight:600}
.legend i{display:inline-block;width:12px;height:12px;border-radius:4px;border-left:3px solid;vertical-align:-2px;margin-right:6px}

/* ---------- flota ---------- */
.plane{padding:18px;display:flex;flex-direction:column;gap:14px}
.plane-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.reg{font:600 22px var(--mono);letter-spacing:-.02em}
.meter{height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden;border:1px solid var(--line-2)}
.meter>i{display:block;height:100%;border-radius:99px;background:var(--accent)}
.meter.warn>i{background:var(--warn)} .meter.bad>i{background:var(--bad)}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.kv div{display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.kv span{font-size:11px;color:var(--ink-3);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.kv b{font-weight:700}

/* ---------- cuenta ---------- */
.acct-head{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:18px}
.avatar{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-weight:800;background:var(--accent-soft);color:var(--accent);flex:none}
.avatar.sm{width:32px;height:32px;border-radius:10px;font-size:12px}
.big{font:600 30px var(--mono);letter-spacing:-.03em}

/* ---------- gráficos ---------- */
.chart svg{display:block;width:100%;height:auto}
.chart text{fill:var(--ink-3);font:500 10.5px var(--mono)}
.chart .gridl{stroke:var(--line-2)}
.hbar{display:grid;grid-template-columns:minmax(90px,160px) 1fr auto;gap:10px;align-items:center;padding:5px 0;font-size:13px}
.hbar .track{height:10px;background:var(--surface-2);border-radius:99px;overflow:hidden}
.hbar .track i{display:block;height:100%;background:var(--accent);border-radius:99px}

/* ---------- diálogos ---------- */
dialog{border:0;padding:0;border-radius:18px;background:var(--surface);color:var(--ink);box-shadow:0 30px 80px -20px rgba(0,0,0,.45);width:min(560px,calc(100vw - 24px));max-height:calc(100vh - 32px)}
dialog.wide{width:min(860px,calc(100vw - 24px))}
dialog::backdrop{background:rgba(6,16,26,.5);backdrop-filter:blur(3px)}
.dlg{display:flex;flex-direction:column;max-height:calc(100vh - 32px)}
.dlg-h{display:flex;justify-content:space-between;align-items:center;padding:18px 20px 12px;gap:12px}
.dlg-h h2{font-size:18px;font-weight:800}
.dlg-b{padding:4px 20px 16px;overflow:auto}
.dlg-f{display:flex;gap:8px;justify-content:flex-end;padding:14px 20px;border-top:1px solid var(--line-2);flex-wrap:wrap}
.dlg-f .left{margin-right:auto;display:flex;gap:8px;flex-wrap:wrap}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.form .full{grid-column:1/-1}
@media (max-width:520px){.form{grid-template-columns:minmax(0,1fr)}}
.err{color:var(--bad);font-weight:700;font-size:13px;margin-top:10px}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:4px;max-height:190px;overflow:auto;border:1px solid var(--line);border-radius:9px;padding:8px}
.checks label{display:flex;gap:7px;align-items:center;font-size:13px}
.check-row{display:flex;flex-direction:row;align-items:center;gap:8px}
.detail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}
.detail div span{display:block;font-size:11px;color:var(--ink-3);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.detail div b{font-weight:700}
.frame{width:100%;height:min(70vh,760px);border:1px solid var(--line);border-radius:12px;background:#EEF2F6}

.toast-wrap{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:8px;z-index:50}
.toast{background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:10px;font-weight:700;box-shadow:var(--shadow);max-width:380px}
.toast.bad{background:var(--bad);color:#fff}

/* ---------- categorías (colores) ---------- */
.c-azul{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.c-verde{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.c-ambar{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.c-rojo{background:var(--bad-soft);color:var(--bad);border-color:transparent}
.c-violeta{background:var(--vio-soft);color:var(--vio);border-color:transparent}
.c-gris{background:var(--surface-2);color:var(--ink-3)}

/* ---------- pestañas de página, fichas y chips ---------- */
.page-tabs{display:flex;gap:2px;box-shadow:inset 0 -1px 0 var(--line);margin-bottom:16px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.page-tab{all:unset;cursor:pointer;padding:10px 14px;font-weight:700;color:var(--ink-2);border-bottom:2px solid transparent;white-space:nowrap}
.page-tab:hover{color:var(--ink)}
.page-tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.page-tab:focus-visible,.chip:focus-visible,.var:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px 22px}
.fields>div>span{display:block;font-size:11px;color:var(--ink-3);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
.fields>div>b{font-weight:600;overflow-wrap:anywhere}
.sec-title{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--ink-3);margin:4px 0 12px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{all:unset;cursor:pointer;padding:5px 11px;border-radius:99px;font-size:12.5px;font-weight:700;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);white-space:nowrap}
.chip:hover{border-color:var(--ink-3)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip .muted{font-weight:600}
.chip[aria-pressed="true"] .muted{color:inherit;opacity:.7}
tr.row-link{cursor:pointer}
.switch{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer}

/* ---------- pasos de facturación ---------- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:16px}
@container main (max-width:760px){.steps{grid-template-columns:minmax(0,1fr)}}
.step{padding:18px;display:flex;flex-direction:column;gap:10px}
.step-h{display:flex;align-items:center;gap:10px}
.step-h .n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:var(--accent-soft);color:var(--accent);flex:none}
.step.done .step-h .n{background:var(--ok-soft);color:var(--ok)}
.step-h b{font-size:14px}
.step p{margin:0;color:var(--ink-2);font-size:13px;flex:1}
.step .btn{align-self:flex-start}

/* ---------- carga rápida y cálculo ---------- */
.form.f4{grid-template-columns:repeat(4,minmax(0,1fr))}
.form.f4 .span2{grid-column:span 2}
@container main (max-width:900px){.form.f4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container main (max-width:480px){.form.f4{grid-template-columns:minmax(0,1fr)}.form.f4 .span2{grid-column:auto}}
.calc{background:var(--surface-2);border:1px dashed var(--line);border-radius:12px;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.calc .formula{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);display:flex;flex-direction:column;gap:2px}
.calc .total{font:600 26px var(--mono);letter-spacing:-.02em}
.calc .total small{display:block;font:700 11px var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);text-align:right}
.input[readonly]{background:var(--surface-2);color:var(--ink-2)}
.quick-actions{display:flex;gap:8px;justify-content:flex-end;align-items:center;margin-top:14px;flex-wrap:wrap}
.quick-actions .err{margin:0 auto 0 0}

/* ---------- asignación de socios a conceptos ---------- */
.asig{max-height:300px;overflow:auto;border:1px solid var(--line);border-radius:9px}
.asig table{width:100%;border-collapse:collapse;font-size:13px}
.asig td{padding:5px 8px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.asig td:first-child{width:28px}
.asig td:last-child{width:150px}
.asig .input{min-height:30px;padding:4px 8px}
.asig-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.asig-tools .input{flex:1;min-width:160px}

/* ---------- movimientos anulados y créditos ---------- */
tr.anulado td{opacity:.55}
tr.anulado .concepto{text-decoration:line-through}
.credito{color:var(--teal)}
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:var(--ink)}
th.sortable[aria-sort]:not([aria-sort="none"]){color:var(--accent)}
.badge-pct{display:inline-block;padding:2px 8px;border-radius:99px;background:var(--ok-soft);color:var(--ok);font-size:11.5px;font-weight:700}
@media print{
  .rail,.top .actions,.toolbar,.banner,.btn{display:none!important}
  .app{grid-template-columns:minmax(0,1fr)}
  main{padding:0}
  .card{box-shadow:none;border-color:#ccc;break-inside:avoid}
}

/* ---------- editor de plantilla ---------- */
textarea.editor{font-family:var(--mono);font-size:12px;line-height:1.5;min-height:440px;white-space:pre;overflow:auto;tab-size:2}
.vars{display:flex;flex-wrap:wrap;gap:6px}
.var{all:unset;cursor:pointer;font:500 11.5px var(--mono);padding:3px 8px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line-2)}
.var:hover{border-color:var(--accent);color:var(--accent)}
.frame.tall{height:560px;background:#fff}

/* ---------- ingreso ---------- */
.login{min-height:100%;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);background:var(--bg)}
.login-art{background:var(--rail);color:var(--rail-ink);padding:48px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;position:relative;overflow:hidden}
.login-art h1{color:#fff;font-size:clamp(28px,3.6vw,44px);line-height:1.05;font-weight:800;max-width:14ch}
.login-art p{max-width:42ch;font-size:15px}
.login-art svg.rwy{position:absolute;right:-60px;bottom:-40px;width:420px;opacity:.14}
.login-art .brand{padding:0}
.login-form{display:flex;align-items:center;justify-content:center;padding:32px 16px}
.login-form form{width:min(380px,100%);display:flex;flex-direction:column;gap:14px}
.login-form h2{font-size:24px;font-weight:800}
@media (max-width:820px){.login{grid-template-columns:minmax(0,1fr)}.login-art{padding:28px 20px}.login-art svg.rwy{display:none}}

@media (max-width:860px){
  .app{grid-template-columns:minmax(0,1fr)}
  .topbar .menu-btn{display:none}
  .rail{position:sticky;top:env(safe-area-inset-top,0px);height:auto;z-index:10;flex-direction:row;align-items:center;padding:10px 12px;gap:10px;overflow-x:auto}
  .brand{padding:0}
  .brand div{display:none}
  .nav{flex-direction:row}
  .nav-sec,.rail-foot .who,.rail-foot .sync{display:none}
  .rail-foot{margin:0;padding:0;border:0;flex-direction:row}
  .foot-actions{flex-wrap:nowrap}
  .nav button{padding:8px 10px;white-space:nowrap}
  .top h1{font-size:22px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- pagos por mes ---------- */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--surface)}
.seg-b{all:unset;cursor:pointer;padding:5px 10px;font-size:12px;font-weight:700;color:var(--ink-3);border-right:1px solid var(--line);white-space:nowrap}
.seg-b:last-child{border-right:0}
.seg-b:hover{background:var(--surface-2);color:var(--ink)}
.seg-b.on{color:var(--ink);background:var(--surface-2)}
.seg-b.on.warn{background:var(--warn-soft);color:var(--warn)}
.seg-b.on.ok{background:var(--ok-soft);color:var(--ok)}
.seg-b:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.kv-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line-2);font-size:13px}
.kv-row:last-child{border-bottom:0}
.pill.muted{color:var(--ink-3)}
.tbl.pmes td{vertical-align:middle}

/* ---------- líneas editables y asistente ---------- */
.lineas{width:100%;border-collapse:collapse;margin-top:2px}
.lineas th{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:2px 6px 4px 0;font-weight:700}
.lineas td{padding:3px 6px 3px 0;vertical-align:middle}
.lineas td:last-child{width:34px;padding-right:0}
.lineas .input{min-height:34px;padding:5px 8px}
.lineas-tools{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.wiz{display:flex;gap:8px;margin:0 0 14px;flex-wrap:wrap}
.wiz-p{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:99px;background:var(--surface-2);color:var(--ink-3);font-size:12.5px;font-weight:700}
.wiz-p .n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--line);color:var(--ink-2);font-size:12px}
.wiz-p.on{background:var(--accent-soft);color:var(--accent)}
.wiz-p.on .n{background:var(--accent);color:var(--accent-ink)}
.wiz-p.done{color:var(--ok)}
.wiz-p.done .n{background:var(--ok-soft);color:var(--ok)}
.sim{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;align-items:end}

/* =====================================================================
   Estilo Aeros: barra superior, logo en tarjeta, tarjetas planas,
   cabeceras azules en los formularios y tiles de colores en los indicadores
   ===================================================================== */
.brand{background:#fff;color:#0f172a;border-radius:8px;padding:10px 12px;margin:0 0 8px;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.brand small{color:#64748b}
.nav button[aria-current="page"]{background:rgba(255,255,255,.08);box-shadow:inset 3px 0 0 #3c8dbc;color:var(--rail-hi)}
.nav button[aria-current="page"] svg{color:#7cc0f0}
.topbar{display:flex;align-items:center;gap:12px;padding:8px 16px;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;min-height:48px}
.topbar .menu-btn{all:unset;cursor:pointer;width:36px;height:36px;display:grid;place-items:center;border-radius:6px;background:var(--rail);color:#fff;flex:none}
.topbar .menu-btn svg{width:18px;height:18px}
.topbar .title{font-weight:700;font-size:14px;color:var(--ink)}
.topbar .title small{display:block;font-weight:600;font-size:11px;color:var(--ink-3)}
.topbar .spacer{flex:1}
.topbar .user{font-size:12.5px;color:var(--ink-2);display:flex;align-items:center;gap:8px}
.topbar .user b{color:var(--ink)}
.topbar .user .av{width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:800}
.top h1{font-size:22px;font-weight:700;display:flex;align-items:center;gap:10px}
.top h1::before{content:"";width:6px;height:22px;border-radius:3px;background:var(--accent);flex:none}
.eyebrow{color:var(--accent)}
.card{box-shadow:var(--shadow);border-color:var(--line)}
.card-h{background:var(--surface-2);border-bottom:1px solid var(--line-2);padding:12px 18px;border-radius:var(--radius) var(--radius) 0 0}
.card-h h2{color:var(--accent);font-weight:700}
.card.kpi{background:var(--surface)}
.g-kpi .kpi:nth-child(4n+1){background:var(--tile-1);border-color:var(--tile-1)}
.g-kpi .kpi:nth-child(4n+1) .l,.g-kpi .kpi:nth-child(4n+1) .v,.g-kpi .kpi:nth-child(4n+1) .d{color:#fff}
.g-kpi .kpi:nth-child(4n+1) .l i{background:rgba(255,255,255,.22);color:#fff}
.g-kpi .kpi:nth-child(4n+1) .v.neg{color:#ffd6d2}
.g-kpi .kpi:nth-child(4n+1) .v.pos{color:#d7f5df}
.g-kpi .kpi:nth-child(4n+1) .link{color:#fff}
.g-kpi .kpi:nth-child(4n+2){background:var(--tile-2);border-color:transparent}
.g-kpi .kpi:nth-child(4n+2) .l i{background:var(--ok);color:#fff}
.g-kpi .kpi:nth-child(4n+3){background:var(--tile-3);border-color:transparent}
.g-kpi .kpi:nth-child(4n+3) .l i{background:var(--accent);color:#fff}
.g-kpi .kpi:nth-child(4n+4){background:var(--tile-4);border-color:transparent}
.g-kpi .kpi:nth-child(4n+4) .l i{background:#f0ad4e;color:#fff}
.kpi .v{font-family:var(--font);font-weight:700}
.btn{border-radius:4px}
.btn.primary{background:var(--accent);border-color:#2e6da4}
.btn.primary:hover{background:var(--accent-2)}
.btn.success{background:#5cb85c;border-color:#4cae4c;color:#fff}
.input{border-radius:4px}
.tbl th{background:var(--surface-2);color:var(--ink-2);text-transform:none;letter-spacing:0;font-size:12.5px}
.tbl tfoot td{background:var(--surface-2);font-weight:700}
.sec-title{color:var(--accent);border-bottom:2px solid var(--accent-soft);padding-bottom:4px;letter-spacing:.08em}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.tab[aria-selected="true"]{background:var(--accent);color:#fff}
.page-tab[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}
dialog{border-radius:8px}
.dlg-h{background:var(--accent);color:#fff;padding:12px 20px;border-radius:8px 8px 0 0}
.dlg-h h2{color:#fff;font-size:16px}
.dlg-h .btn.ghost{color:#fff}
.dlg-h .btn.ghost:hover{background:rgba(255,255,255,.15)}
.dlg-b{padding-top:14px}
.pill{border-radius:4px}
.banner{border-radius:6px;border:1px solid transparent}
.banner.info{border-color:#bce8f1;color:#31708f}
.banner.warn{border-color:#faebcc}
.banner.bad{border-color:#ebccd1}
.alert{border-radius:6px}
.seg{border-radius:4px}
.plane .reg{color:var(--accent)}

/* ingreso: tarjeta centrada sobre fondo azul marino, como Aeros */
.login{min-height:100vh;grid-template-columns:minmax(0,1fr);background:radial-gradient(900px 520px at 50% -10%,#1b3763,#081028)}
.login-art{display:none}
.login-form form{background:#fff;border-radius:8px;padding:28px 26px 24px;box-shadow:0 24px 60px rgba(0,0,0,.35);color:var(--ink)}
.login-form .brand{margin:0 0 4px;box-shadow:none;border:1px solid var(--line-2);padding:8px 10px}
.login-form h2{font-size:20px}

/* logo del club */
.logo-img{display:block;max-width:150px;object-fit:contain;flex:none}
.rail .brand .logo-img{margin:0 auto}
.rail .brand:has(.logo-img){flex-direction:column;text-align:center}
.logo-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.logo-preview{height:64px;max-width:200px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:6px;padding:6px}
.pt-top .brand{background:transparent;box-shadow:none;color:var(--rail-hi);padding:0}
.pt-top .brand small{color:var(--rail-ink)}
.pt-top .brand img{background:#fff;border-radius:6px;padding:3px}

/* Perfiles con acceso «Ver»: la sección se consulta pero no se modifica */
#view.solo-ver .btn.primary, #view.solo-ver .btn.danger, #view.solo-ver .link.danger, #view.solo-ver [data-act="ajuste"],
#view.solo-ver [data-act="nuevo-cargo"], #view.solo-ver [data-act^="nuevo-"], #view.solo-ver [data-act^="nueva-"],
#view.solo-ver [data-act^="eliminar-"], #view.solo-ver [data-act^="anular-"] { display: none !important; }
.perm-grid { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; align-items: center; }
.perm-grid .perm-g { grid-column: 1 / -1; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.perm-grid .seg { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.perm-grid .seg label { padding: 4px 10px; font-size: 12px; cursor: pointer; background: var(--card); }
.perm-grid .seg label + label { border-left: 1px solid var(--border); }
.perm-grid .seg input { display: none; }
.perm-grid .seg input:checked + span { font-weight: 700; }
.perm-grid .seg label:has(input:checked) { background: var(--accent); color: #fff; }
.perm-grid .seg label:has(input[value=""]:checked) { background: var(--bg); color: var(--muted); }
/* Las exportaciones contables son de la sección Reportes (el padrón va con Socios) */
body.sin-reportes a.btn[href^="/api/export/"]:not([href*="socios.csv"]) { display: none !important; }

/* ---------- Correo del club ---------- */
.mail { display: grid; grid-template-columns: 190px minmax(280px, 380px) 1fr; gap: 12px; min-height: 70vh; align-items: stretch; }
.mail-folders { display: flex; flex-direction: column; gap: 2px; }
.mail-folders .folder { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; background: transparent; border-radius: 6px; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.mail-folders .folder svg { width: 16px; height: 16px; color: var(--muted); }
.mail-folders .folder:hover { background: var(--card); }
.mail-folders .folder.activa { background: var(--accent); color: #fff; font-weight: 700; }
.mail-folders .folder.activa svg { color: #fff; }
.mail-folders .folder .badge { margin-left: auto; }
.mail-list { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.mail-tools { padding: 8px; border-bottom: 1px solid var(--border); }
.mail-list .chips { padding: 6px 8px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.mail-list .chips.small .chip { font-size: 11px; padding: 3px 8px; }
.mail-rows { flex: 1; overflow: auto; }
.mail-row { display: flex; gap: 6px; padding: 8px 10px 8px 6px; border-bottom: 1px solid var(--border); cursor: pointer; align-items: flex-start; }
.mail-row:hover { background: var(--bg); }
.mail-row.activa { background: #e8f0fa; box-shadow: inset 3px 0 0 var(--accent); }
.mail-row.noleido .de, .mail-row.noleido .asunto { font-weight: 800; }
.mail-row .star { border: 0; background: transparent; color: var(--muted); font-size: 16px; cursor: pointer; padding: 0 2px; line-height: 1.2; }
.mail-row .star.on { color: #e0a800; }
.mail-main { flex: 1; min-width: 0; }
.mail-l1 { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.mail-l1 .de { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-l1 .fecha { font-size: 11px; color: var(--muted); white-space: nowrap; }
.mail-l1 .clip { font-size: 12px; }
.mail-l2 { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-l2 .resumen { color: var(--muted); }
.mail-pager { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 6px; border-top: 1px solid var(--border); }
.mail-read { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; min-height: 60vh; }
.mail-head { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.mail-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mail-title h2 { margin: 0; font-size: 18px; }
.mail-meta { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; font-size: 13px; }
.mail-meta .av { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 800; flex: none; }
.mail-meta > div:nth-child(2) { flex: 1; min-width: 0; }
.mail-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.mail-adj { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.mail-body { flex: 1; width: 100%; min-height: 420px; border: 0; background: #fff; }
.mail-read .empty svg { width: 56px; height: 56px; }
.pill.sm { font-size: 10px; padding: 1px 6px; }
@media (max-width: 1100px) { .mail { grid-template-columns: 160px 1fr; } .mail-read { grid-column: 1 / -1; } }
@media (max-width: 720px) { .mail { grid-template-columns: 1fr; } .mail-folders { flex-direction: row; flex-wrap: wrap; } }

.mail-cuentas { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.mail-cuentas .cuenta { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--border); background: var(--card); border-radius: 6px; text-align: left; font: inherit; font-weight: 700; font-size: 12px; color: var(--ink); cursor: pointer; }
.mail-cuentas .cuenta.activa { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.mail-cuentas .cuenta .badge { margin-left: auto; }