/* Disposiciones · estilos
   Basado en el Cabify Design System (tokens de color, tipografía, espaciado, radios y motion).
   Ciudad titula, Ciudad Text opera. Moradul M60 como primario. Color plano, sin degradados. */

@font-face{font-family:'Cabify Ciudad';font-weight:600;font-style:normal;font-display:swap;src:url('../fonts/CabifyCiudad-SemiBold.woff2') format('woff2')}
@font-face{font-family:'Cabify Ciudad';font-weight:700;font-style:normal;font-display:swap;src:url('../fonts/CabifyCiudad-Bold.woff2') format('woff2')}
@font-face{font-family:'Cabify Ciudad Text';font-weight:400;font-style:normal;font-display:swap;src:url('../fonts/CabifyCiudadText-Book.woff2') format('woff2')}
@font-face{font-family:'Cabify Ciudad Text';font-weight:600;font-style:normal;font-display:swap;src:url('../fonts/CabifyCiudadText-SemiBold.woff2') format('woff2')}
@font-face{font-family:'Cabify Ciudad Text';font-weight:700;font-style:normal;font-display:swap;src:url('../fonts/CabifyCiudadText-Bold.woff2') format('woff2')}

:root{
  /* Matriz (subconjunto usado) */
  --color-neutral-0:#F8F8FB;--color-neutral-10:#F3F3F7;--color-neutral-20:#DBDCE8;--color-neutral-30:#C0C2D8;
  --color-neutral-40:#9EA1BE;--color-neutral-50:#7D7FA5;--color-neutral-60:#5E6088;--color-neutral-70:#4B4C6A;
  --color-neutral-90:#2C2D3C;--color-neutral-100:#1A1A1C;
  --color-moradul-0:#FAF8FE;--color-moradul-10:#F5F1FC;--color-moradul-20:#DFDAF8;--color-moradul-30:#C4BDF5;
  --color-moradul-40:#A697ED;--color-moradul-60:#7145D6;--color-moradul-70:#5B34AC;--color-moradul-80:#4A2B8D;
  --color-moradul-90:#362065;--color-moradul-100:#1F123F;
  --color-green-10:#DAFAEB;--color-green-50:#0C936B;--color-green-60:#017251;--color-green-80:#044938;
  --color-yellow-0:#FFF9E1;--color-yellow-50:#AD7708;--color-yellow-70:#744202;
  --color-red-10:#FDF0EF;--color-red-60:#BF2721;--color-red-80:#7D1916;
  --color-lightblue-10:#E7F5FE;--color-lightblue-60:#00699E;--color-lightblue-80:#034466;
  --color-white:#FFFFFF;

  /* Semántica */
  --brand:var(--color-moradul-60);--brand-hover:var(--color-moradul-70);--brand-active:var(--color-moradul-80);
  --brand-subtle:var(--color-moradul-10);
  --surface-page:var(--color-neutral-0);--surface-card:var(--color-white);--surface-inverse:var(--color-moradul-100);
  --surface-disabled:var(--color-neutral-10);
  --text-strong:var(--color-neutral-100);--text-body:var(--color-neutral-90);--text-muted:var(--color-neutral-60);
  --text-disabled:var(--color-neutral-40);--text-link:var(--color-moradul-60);
  --border-subtle:var(--color-neutral-20);--border-strong:var(--color-neutral-40);
  --ok:var(--color-green-60);--ok-bg:var(--color-green-10);--ok-tx:var(--color-green-80);
  --warn:var(--color-yellow-50);--warn-bg:var(--color-yellow-0);--warn-tx:var(--color-yellow-70);
  --bad:var(--color-red-60);--bad-bg:var(--color-red-10);--bad-tx:var(--color-red-80);
  --info-bg:var(--color-lightblue-10);--info-tx:var(--color-lightblue-80);

  --font-display:'Cabify Ciudad',system-ui,sans-serif;
  --font-body:'Cabify Ciudad Text',system-ui,sans-serif;
  --font-mono:ui-monospace,'SF Mono','Cascadia Mono',Menlo,Consolas,monospace;

  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:40px;--space-8:48px;--space-9:64px;
  --radius-s:8px;--radius-m:12px;--radius-l:16px;--radius-xl:24px;--radius-pill:999px;--radius-manzana:16px;
  --shadow-overlay:0 8px 24px rgba(26,26,28,.12),0 2px 6px rgba(26,26,28,.08);
  --focus-ring:0 0 0 3px var(--color-moradul-30);
  --ease:cubic-bezier(.2,.8,.2,1);--ease-io:cubic-bezier(.8,0,.2,1);
  --dur-fast:160ms;--dur-base:240ms;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);font-size:15px;line-height:1.5;color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;line-height:1.12;color:var(--text-strong);margin:0;text-wrap:balance}
h1{font-size:28px}h2{font-size:22px}h3{font-size:17px;font-weight:600}
p{margin:0;text-wrap:pretty}
a{color:var(--text-link);text-underline-offset:2px}
a:hover{color:var(--brand-active)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
::selection{background:var(--color-moradul-20);color:var(--color-moradul-100)}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--text-muted)}
.sm{font-size:13px}
.mono{font-family:var(--font-mono);font-size:13px}
.num{font-variant-numeric:tabular-nums}
.overline{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}

/* Icono: SVG oficial tintado con mask + currentColor */
.ic{display:inline-block;flex:none;width:20px;height:20px;background:currentColor;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.ic.s{width:16px;height:16px}.ic.l{width:24px;height:24px}

/* ---------------- Botones (pill) ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 22px;border-radius:var(--radius-pill);border:2px solid transparent;
  font-family:var(--font-body);font-weight:600;font-size:15px;line-height:1.2;cursor:pointer;text-decoration:none;white-space:nowrap;
  background:var(--brand);color:var(--color-white);transition:background var(--dur-fast) var(--ease),transform 80ms var(--ease)}
.btn:hover{background:var(--brand-hover);color:var(--color-white)}
.btn:active{transform:scale(.98);background:var(--brand-active)}
.btn.secondary{background:var(--color-white);color:var(--brand);border-color:var(--brand)}
.btn.secondary:hover{background:var(--color-moradul-0);color:var(--brand)}
.btn.ghost{background:transparent;color:var(--brand)}
.btn.ghost:hover{background:var(--brand-subtle)}
.btn.danger{background:var(--color-white);color:var(--bad);border-color:var(--bad)}
.btn.danger:hover{background:var(--bad-bg)}
.btn.s{min-height:36px;padding:6px 14px;font-size:14px}
.btn.xs{min-height:30px;padding:4px 12px;font-size:13px}
.btn.full{display:flex;width:100%}
.btn:disabled,.btn[aria-disabled="true"]{background:var(--surface-disabled);color:var(--text-disabled);border-color:transparent;cursor:not-allowed;transform:none}
.btn .spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------------- Tags ---------------- */
.tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--radius-pill);font-size:12px;font-weight:600;line-height:1.3;white-space:nowrap;background:var(--brand-subtle);color:var(--color-moradul-80)}
.tag.ok{background:var(--ok-bg);color:var(--ok-tx)}
.tag.warn{background:var(--warn-bg);color:var(--warn-tx)}
.tag.bad{background:var(--bad-bg);color:var(--bad-tx)}
.tag.info{background:var(--info-bg);color:var(--info-tx)}
.tag.neutral{background:var(--color-neutral-10);color:var(--color-neutral-90)}

/* ---------------- Formularios ---------------- */
.field{display:grid;gap:6px;min-width:0}
.field label{font-size:14px;font-weight:600;color:var(--text-strong)}
.field .hint{font-size:13px;color:var(--text-muted)}
.input,.field input,.field select,.field textarea{width:100%;min-height:44px;padding:10px 14px;border:1px solid var(--border-strong);border-radius:var(--radius-s);background:var(--color-white);font-size:15px;transition:border-color var(--dur-fast) var(--ease)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--color-neutral-60)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);box-shadow:var(--focus-ring);outline:none}
.field input[readonly]{background:var(--color-neutral-10);color:var(--text-muted)}
.field textarea{font-family:var(--font-mono);font-size:13px;min-height:160px;resize:vertical;line-height:1.55}
.field.invalid input{border-color:var(--bad)}
.pwd{position:relative}
.pwd input{padding-right:52px}
.pwd button{position:absolute;right:4px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--text-muted);font-size:13px;font-weight:600;padding:8px 10px;border-radius:var(--radius-s);cursor:pointer}
.pwd button:hover{color:var(--brand)}
.grid-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid-fields .full{grid-column:1/-1}
@media (max-width:560px){.grid-fields{grid-template-columns:minmax(0,1fr)}}
.checks{display:flex;flex-wrap:wrap;gap:8px}
.check{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--border-subtle);border-radius:var(--radius-pill);cursor:pointer;font-size:14px;background:var(--color-white)}
.check:has(input:checked){border-color:var(--brand);background:var(--brand-subtle);color:var(--color-moradul-80)}
.check input{accent-color:var(--brand)}

.alert{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--radius-m);font-size:14px}
.alert .ic{margin-top:1px}
.alert.bad{background:var(--bad-bg);color:var(--bad-tx)}
.alert.warn{background:var(--warn-bg);color:var(--warn-tx)}
.alert.ok{background:var(--ok-bg);color:var(--ok-tx)}
.alert.info{background:var(--brand-subtle);color:var(--color-moradul-80)}

/* =====================================================================
   LOGIN
   ===================================================================== */
.login{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);background:var(--color-white)}
.login-side{position:relative;background:var(--surface-inverse);color:var(--color-white);padding:var(--space-7);display:flex;flex-direction:column;gap:var(--space-6);overflow:hidden}
.login-side .logo{width:108px;height:36px;background:url('../img/logo-white.svg') left center/contain no-repeat;flex:none}
.login-photo{position:relative;flex:1;min-height:260px;border-radius:var(--radius-manzana);overflow:hidden;background:var(--color-moradul-90)}
.login-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 30%}
.login-claim{display:grid;gap:10px;max-width:520px}
.login-claim h2{color:var(--color-white);font-size:40px;line-height:1.05}
.login-claim p{color:var(--color-moradul-20);font-size:17px}
.login-main{display:flex;align-items:center;justify-content:center;padding:var(--space-7) var(--space-5)}
.login-card{width:100%;max-width:420px;display:grid;gap:var(--space-5)}
.login-card .logo-m{display:none;width:96px;height:32px;background:url('../img/logo-m60.svg') left center/contain no-repeat}
.login-head{display:grid;gap:8px}
.login-section{display:grid;gap:12px}
.gbtn-wrap{min-height:44px;display:flex}
.gbtn-wrap > div{width:100%}
.btn-google{background:var(--color-white);color:var(--text-strong);border:1px solid var(--border-strong);font-weight:600}
.btn-google:hover{background:var(--color-neutral-0);color:var(--text-strong)}
.btn-google .g{width:18px;height:18px}
.divider{display:flex;align-items:center;gap:12px;color:var(--text-muted);font-size:13px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--border-subtle)}
.login-foot{font-size:13px;color:var(--text-muted);border-top:1px solid var(--border-subtle);padding-top:var(--space-4)}
@media (max-width:900px){
  .login{grid-template-columns:minmax(0,1fr)}
  .login-side{display:none}
  .login-main{align-items:flex-start;padding-top:var(--space-8)}
  .login-card .logo-m{display:block}
}

/* =====================================================================
   APP
   ===================================================================== */
.demo-bar{background:var(--color-yellow-0);color:var(--warn-tx);font-size:13px;padding:8px 16px;text-align:center;border-bottom:1px solid #f3e3a6}
.topbar{position:sticky;top:0;z-index:20;background:var(--color-white);border-bottom:1px solid var(--border-subtle)}
.topbar-in{max-width:1240px;margin:0 auto;padding:0 16px;display:flex;align-items:center;gap:16px;min-height:64px}
.topbar .logo{width:84px;height:28px;background:url('../img/logo-m60.svg') left center/contain no-repeat;flex:none}
.product{display:grid;line-height:1.15;padding-left:16px;border-left:1px solid var(--border-subtle)}
.product b{font-family:var(--font-display);font-size:16px;color:var(--text-strong)}
.product span{font-size:12px;color:var(--text-muted)}
.nav{display:flex;gap:2px;margin-left:12px;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav button{border:0;background:none;padding:8px 14px;border-radius:var(--radius-pill);font-weight:600;font-size:14px;color:var(--text-muted);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.nav button:hover{color:var(--brand);background:var(--color-moradul-0)}
.nav button[aria-current="page"]{background:var(--brand-subtle);color:var(--color-moradul-80)}
.nav .count{min-width:20px;padding:0 6px;border-radius:var(--radius-pill);background:var(--warn-bg);color:var(--warn-tx);font-size:12px;text-align:center}
.user{margin-left:auto;display:flex;align-items:center;gap:10px}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--brand);color:var(--color-white);display:grid;place-items:center;font-weight:700;font-size:14px;flex:none}
.user-txt{display:grid;line-height:1.2;text-align:right}
.user-txt b{font-size:14px;color:var(--text-strong);font-weight:600}
.user-txt span{font-size:12px;color:var(--text-muted)}
@media (max-width:1060px){.user-txt{display:none}}
@media (max-width:760px){
  .topbar-in{flex-wrap:wrap;gap:8px 12px;padding:10px 16px 0}
  .product{display:none}
  .nav{order:3;width:100%;margin:0 -16px;padding:0 12px 8px}
}

.page{max-width:1240px;margin:0 auto;padding:var(--space-6) 16px var(--space-9);display:grid;gap:var(--space-5);grid-template-columns:minmax(0,1fr)}
.page > *{min-width:0}
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px}
.page-head .t{display:grid;gap:6px}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.daynav{display:inline-flex;align-items:center;gap:4px;background:var(--color-white);border:1px solid var(--border-subtle);border-radius:var(--radius-pill);padding:3px}
.daynav button{border:0;background:none;border-radius:var(--radius-pill);min-width:36px;height:36px;cursor:pointer;color:var(--text-body);font-weight:600;padding:0 12px}
.daynav button:hover{background:var(--brand-subtle);color:var(--brand)}
.daynav .lbl{font-weight:600;padding:0 8px;min-width:150px;text-align:center;font-size:14px}

.card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-l);padding:var(--space-5);display:grid;gap:var(--space-4);min-width:0;grid-template-columns:minmax(0,1fr)}
.card > *{min-width:0}
.card-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kpi{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-l);padding:16px 18px;display:grid;gap:2px}
.kpi .v{font-family:var(--font-display);font-weight:700;font-size:32px;line-height:1.1;color:var(--text-strong);font-variant-numeric:tabular-nums}
.kpi .l{font-size:14px;font-weight:600;color:var(--text-body)}
.kpi .s{font-size:12px;color:var(--text-muted)}
.kpi.hl{background:var(--brand);border-color:var(--brand)}
.kpi.hl .v,.kpi.hl .l{color:var(--color-white)}
.kpi.hl .s{color:var(--color-moradul-20)}

.todo{display:grid;gap:8px}
.todo-item{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:12px 14px;border-radius:var(--radius-m);background:var(--color-neutral-0);border:1px solid var(--border-subtle)}
.todo-item .txt{flex:1 1 280px;min-width:0;display:grid;gap:2px}
.todo-item .t{font-weight:600;color:var(--text-strong)}
.todo-item .d{font-size:13px;color:var(--text-muted)}
.empty{padding:20px;border:1px dashed var(--border-strong);border-radius:var(--radius-m);color:var(--text-muted);font-size:14px;text-align:center}

.tbl{overflow-x:auto;border:1px solid var(--border-subtle);border-radius:var(--radius-l);background:var(--surface-card)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);text-align:left;padding:12px 14px;border-bottom:1px solid var(--border-subtle);white-space:nowrap;background:var(--color-neutral-0)}
td{padding:12px 14px;border-bottom:1px solid var(--border-subtle);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tr.click{cursor:pointer}
tr.click:hover td{background:var(--color-moradul-0)}
td.r,th.r{text-align:right}
.plate{display:inline-block;font-family:var(--font-mono);font-weight:700;font-size:13px;letter-spacing:.03em;padding:3px 8px;border:1.5px solid var(--color-neutral-90);border-radius:6px;background:var(--color-white);color:var(--text-strong);white-space:nowrap}
.strong{font-weight:600;color:var(--text-strong)}

/* Drawer y modal */
.backdrop{position:fixed;inset:0;background:rgba(26,26,28,.36);z-index:40;animation:fade var(--dur-base) var(--ease)}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(560px,100vw);background:var(--color-white);z-index:41;box-shadow:var(--shadow-overlay);overflow-y:auto;padding:24px;display:grid;gap:20px;align-content:start;grid-auto-rows:max-content;grid-template-columns:minmax(0,1fr);animation:slidein var(--dur-base) var(--ease)}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow-y:auto;background:var(--color-white);border-radius:var(--radius-xl);box-shadow:var(--shadow-overlay);z-index:41;padding:28px;display:grid;gap:20px;grid-auto-rows:max-content;grid-template-columns:minmax(0,1fr);animation:pop var(--dur-base) var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes slidein{from{transform:translateX(32px);opacity:0}to{transform:none;opacity:1}}
@keyframes pop{from{transform:translate(-50%,-50%) scale(.96);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.backdrop,.drawer,.modal{animation:none}}
.x{border:0;background:var(--color-neutral-10);width:40px;height:40px;border-radius:50%;cursor:pointer;display:grid;place-items:center;color:var(--text-body);flex:none}
.x:hover{background:var(--brand-subtle);color:var(--brand)}
.dr-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.plate-lg{font-family:var(--font-mono);font-weight:700;font-size:26px;letter-spacing:.03em;color:var(--text-strong)}
.kv{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);border:1px solid var(--border-subtle);border-radius:var(--radius-m);overflow:hidden;font-size:14px}
.kv > div{padding:10px 12px;border-bottom:1px solid var(--border-subtle);min-width:0;overflow-wrap:anywhere}
.kv > div:nth-last-child(-n+2){border-bottom:0}
.kv .k{background:var(--color-neutral-0);color:var(--text-muted)}
.kv .v{display:flex;justify-content:space-between;align-items:center;gap:8px}
.copy{border:0;background:none;color:var(--brand);font-size:12px;font-weight:600;cursor:pointer;padding:2px 6px;border-radius:6px;flex:none}
.copy:hover{background:var(--brand-subtle)}
.steps{list-style:none;margin:0;padding:0;display:grid}
.steps li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;position:relative;padding-bottom:18px}
.steps li:not(:last-child)::before{content:"";position:absolute;left:13px;top:28px;bottom:4px;width:2px;background:var(--border-subtle)}
.steps .dot{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--color-neutral-10);color:var(--text-muted)}
.steps .done .dot{background:var(--ok-bg);color:var(--ok)}
.steps .now .dot{background:var(--brand);color:var(--color-white)}
.steps .fail .dot{background:var(--bad-bg);color:var(--bad)}
.steps .t{font-weight:600;color:var(--text-strong)}
.steps p{font-size:14px;color:var(--text-muted)}
.box{border-radius:var(--radius-m);padding:16px;display:grid;gap:12px;background:var(--brand-subtle)}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.row > input{flex:1 1 180px;min-width:0}
.secret{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:var(--radius-m);background:var(--surface-inverse);color:var(--color-white);font-family:var(--font-mono);font-size:18px;letter-spacing:.04em}
.secret .copy{color:var(--color-moradul-20)}
.secret .copy:hover{background:rgba(255,255,255,.12)}

.grid2{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:900px){.grid2{grid-template-columns:minmax(0,1fr)}}
.seg{display:inline-flex;background:var(--color-neutral-10);border-radius:var(--radius-pill);padding:4px;gap:2px}
.seg button{border:0;background:none;padding:8px 16px;border-radius:var(--radius-pill);font-weight:600;font-size:14px;color:var(--text-muted);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--color-white);color:var(--color-moradul-80);box-shadow:0 1px 2px rgba(26,26,28,.08)}
.list-plain{margin:0;padding-left:18px;display:grid;gap:4px;font-size:14px}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;max-width:min(560px,calc(100vw - 32px));background:var(--surface-inverse);color:var(--color-white);padding:12px 18px;border-radius:var(--radius-m);font-size:14px;box-shadow:var(--shadow-overlay);display:flex;gap:10px;align-items:center}
.toast.bad{background:var(--color-red-80)}
.boot{min-height:100vh;display:grid;place-items:center;color:var(--text-muted)}