/* ============================================================
   SMILE · ATELIER — back-office interno
   Sistema funcional. Reusa tokens Smile (borgoña/champaña/crema)
   en clave densa, calma y amigable. Inter-dominante; Playfair
   solo como gracia de marca (logo, saludo, login).
   Responsive vía CONTAINER QUERIES (.app es el contenedor) para
   simular mobile/tablet/desktop dentro del frame de review.
   ============================================================ */
:root{
  /* canvas + superficies */
  --bg:#F4EEE6; --surface:#FFFFFF; --surface-2:#FAF6F0; --surface-3:#F3ECE2;
  /* tinta */
  --ink:#241F1D; --ink-2:#6B6360; --ink-3:#9C948C; --ink-4:#BDB4AB;
  /* líneas */
  --line:#E7DFD4; --line-2:#F0E9DF; --line-strong:#D9CDBE;
  /* marca */
  --burgundy:#6B2C2C; --burgundy-deep:#501F1F; --burgundy-700:#7E3A3A;
  --burgundy-tint:#F6ECEA; --burgundy-tint-2:#EFDDDA;
  --champagne:#B8924F; --champagne-soft:#CDAE78; --champagne-tint:#F7EFE0;
  /* foco */
  --focus:#9A6B2F;
  /* radios */
  --r-sm:8px; --r-md:11px; --r-lg:16px; --r-pill:999px;
  /* sombras (calmas, cálidas) */
  --sh-1:0 1px 2px rgba(43,31,29,.05), 0 1px 1px rgba(43,31,29,.04);
  --sh-2:0 4px 14px -8px rgba(43,31,29,.22);
  --sh-3:0 18px 48px -22px rgba(43,31,29,.42);
  --f-display:"Playfair Display",Georgia,serif;
  --f-body:"Inter",-apple-system,system-ui,sans-serif;

  /* status — tonos boutique, sin semáforo */
  --st-pend-bg:#F7F1E8;   --st-pend-tx:#7A6F60;   --st-pend-dot:#B8924F;
  --st-conf-bg:#E9F1EA;   --st-conf-tx:#3F6B49;   --st-conf-dot:#6E9268;
  --st-repr-bg:#F3EADF;   --st-repr-tx:#8B6A37;   --st-repr-dot:#B8924F;
  --st-canc-bg:#F8E9E6;   --st-canc-tx:#9C4A3E;   --st-canc-dot:#B85B49;
  --st-comp-bg:#E4EEE6;   --st-comp-tx:#3A6242;   --st-comp-dot:#5E8460;
  --st-noas-bg:#F1EDE7;   --st-noas-tx:#7A726A;   --st-noas-dot:#A79C90;
  --amber:#9A6B2F; --amber-soft:#C79A5A;
}

*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{font-family:var(--f-body);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;}
a{color:inherit;}
::selection{background:var(--champagne-tint);}

/* ============================================================
   REVIEW CHROME (fuera del producto)
   ============================================================ */
.stage{position:fixed;inset:0;background:#2A2422;display:flex;flex-direction:column;
  background-image:radial-gradient(120% 80% at 50% -10%, #322A27, #221D1B 70%);}
.chrome{flex:none;height:52px;display:flex;align-items:center;gap:18px;padding:0 18px;
  color:#EFE7DD;border-bottom:1px solid rgba(217,188,133,.16);background:rgba(20,15,13,.5);backdrop-filter:blur(6px);}
.chrome .ttl{font-family:var(--f-display);font-size:16px;font-weight:500;letter-spacing:-.01em;display:flex;align-items:baseline;gap:7px;}
.chrome .ttl small{font-family:var(--f-body);font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:rgba(239,231,221,.55);font-weight:600;}
.chrome .ttl .dot{width:6px;height:6px;border-radius:50%;background:var(--champagne-soft);transform:translateY(-2px);box-shadow:0 0 10px rgba(205,174,120,.7);}
.chrome .seg{display:flex;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-pill);padding:3px;gap:2px;}
.chrome .seg button{border:0;background:transparent;color:rgba(239,231,221,.62);font-size:12px;font-weight:600;padding:6px 13px;border-radius:var(--r-pill);letter-spacing:.01em;}
.chrome .seg button.on{background:rgba(247,239,224,.95);color:#2A2422;}
.chrome .spacer{flex:1;}
.chrome label{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(239,231,221,.5);font-weight:600;}
.chrome .jump{background:rgba(255,255,255,.07);color:#EFE7DD;border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-sm);padding:7px 12px;font-size:13px;font-weight:500;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23CDAE78' stroke-width='2.4'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center;padding-right:30px;}
.chrome .jump:focus{outline:2px solid var(--champagne-soft);outline-offset:1px;}

.viewport{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:26px;overflow:auto;}
.framesizer{position:relative;flex:none;}
.device{background:var(--bg);border-radius:22px;overflow:hidden;position:absolute;top:0;left:0;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(217,188,133,.14);
  display:flex;flex-direction:column;}

/* the product itself — container for @container queries */
.app{flex:1;min-height:0;width:100%;container-type:inline-size;container-name:app;
  display:flex;flex-direction:column;background:var(--bg);position:relative;overflow:hidden;font-size:14px;}

/* ============================================================
   SHELL — sidebar (desktop) / drawer (mobile,tablet)
   ============================================================ */
.shell{flex:1;min-height:0;display:flex;position:relative;}
/* mobile/tablet: .sidebar acts as a sliding drawer (opens via .is-open).
   Desktop overrides below (@container app min-width:1024px) make it static. */
.sidebar{position:fixed;inset:0 auto 0 0;width:80%;max-width:300px;z-index:60;background:var(--surface);
  border-right:1px solid var(--line);box-shadow:var(--sh-3);
  display:flex;flex-direction:column;
  transform:translateX(-104%);transition:transform .26s cubic-bezier(.4,0,.2,1);}
.sidebar.is-open{transform:translateX(0);}
.scrim{display:none;position:fixed;inset:0;z-index:55;background:rgba(36,31,29,.42);backdrop-filter:blur(1px);}
.scrim.is-shown{display:block;}

/* topbar (mobile/tablet) */
.topbar{flex:none;height:56px;display:flex;align-items:center;gap:12px;padding:0 14px;
  background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;}
.topbar .burger{width:40px;height:40px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);
  display:flex;align-items:center;justify-content:center;color:var(--ink);}
.topbar .burger:active{background:var(--surface-2);}
.topbar .burger svg{width:22px;height:22px;}
.topbar .tb-title{font-weight:600;font-size:15px;letter-spacing:-.01em;}
.topbar .tb-title span{color:var(--ink-3);font-weight:500;}
.topbar .tb-right{margin-left:auto;display:flex;align-items:center;gap:8px;}

/* wordmark (sobrio) */
.wordmark{display:inline-flex;align-items:baseline;gap:6px;font-family:var(--f-display);font-weight:600;color:var(--burgundy);letter-spacing:-.01em;}
.wordmark .bd{width:6px;height:6px;border-radius:50%;background:var(--champagne);align-self:center;transform:translateY(1px);}
.wordmark .tag{font-family:var(--f-body);font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--champagne);font-weight:700;align-self:center;margin-left:2px;}

/* main content scroll area */
.main{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;}
.scrollarea{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;}
.page{padding:18px 16px 120px;max-width:1180px;margin:0 auto;width:100%;}

/* drawer */
.drawer{position:absolute;inset:0 auto 0 0;width:80%;max-width:300px;z-index:60;background:var(--surface);
  border-right:1px solid var(--line);transform:translateX(-104%);transition:transform .26s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;box-shadow:var(--sh-3);}
.app.drawer-open .drawer{transform:translateX(0);}
.app.drawer-open .scrim{display:block;position:absolute;inset:0;z-index:50;background:rgba(36,31,29,.42);backdrop-filter:blur(1px);}
.drawer .dr-head{padding:20px 18px 16px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;justify-content:space-between;}
.drawer .dr-head .wordmark{font-size:22px;}
.nav{padding:12px 10px;display:flex;flex-direction:column;gap:2px;}
.nav .sec{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);font-weight:700;padding:14px 12px 6px;}
.nav a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--r-md);color:var(--ink-2);
  font-weight:500;font-size:14.5px;text-decoration:none;position:relative;min-height:44px;}
.nav a .ic{width:20px;height:20px;flex:none;color:var(--ink-3);}
.nav a .ic svg{width:20px;height:20px;}
.nav a .cnt{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--ink-3);background:var(--surface-3);
  border-radius:var(--r-pill);padding:2px 9px;min-width:24px;text-align:center;}
.nav a:hover{background:var(--surface-2);color:var(--ink);}
.nav a.on{background:var(--burgundy-tint);color:var(--burgundy);font-weight:600;}
.nav a.on .ic{color:var(--burgundy);}
.nav a.on .cnt{background:var(--burgundy-tint-2);color:var(--burgundy);}
.nav a.on::before{content:"";position:absolute;left:-10px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--burgundy);}
.nav .soon{color:var(--ink-3);font-size:13px;letter-spacing:.01em;padding:11px 12px;display:flex;align-items:center;gap:12px;background:none;border:0;width:100%;text-align:left;font-weight:500;min-height:44px;cursor:default;}
.nav .soon .ic{color:var(--ink-4);width:20px;height:20px;}
.nav .soon .ic svg{width:20px;height:20px;}
.nav .soon .lbl{opacity:.85;}
.nav .soon::after{content:"pronto";margin-left:auto;font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  border:1px dashed var(--line-strong);color:var(--ink-4);border-radius:var(--r-pill);padding:2px 8px;}

/* session footer in nav */
.session{margin-top:auto;border-top:1px solid var(--line-2);padding:14px 16px;display:flex;align-items:center;gap:11px;}
.session .av{width:34px;height:34px;border-radius:50%;background:var(--burgundy);color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:13px;flex:none;font-family:var(--f-body);}
.session .who{min-width:0;}
.session .who b{display:block;font-size:13px;font-weight:600;color:var(--ink);line-height:1.2;}
.session .who span{display:block;font-size:11px;color:var(--ink-3);}
.session .logout{margin-left:auto;font-size:12px;font-weight:600;color:var(--ink-2);background:none;border:0;padding:6px;border-radius:var(--r-sm);white-space:nowrap;}
.session .logout:hover{color:var(--burgundy);}

/* ============================================================
   PAGE HEADER
   ============================================================ */
.phead{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px;}
.phead .back{width:38px;height:38px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);
  display:flex;align-items:center;justify-content:center;color:var(--ink-2);flex:none;}
.phead .back:hover{color:var(--burgundy);border-color:var(--line-strong);}
.phead .back svg{width:20px;height:20px;}
.phead .h-txt{min-width:0;flex:1;}
.phead h1{margin:0;font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.15;}
.phead .h-sub{margin-top:3px;font-size:13px;color:var(--ink-3);}
.phead .h-actions{display:flex;gap:8px;align-items:center;flex:none;}

.greet{font-family:var(--f-display);font-weight:500;font-size:26px;letter-spacing:-.02em;margin:0;}
.greet em{font-style:italic;color:var(--burgundy);}
.greet-sub{font-size:13px;color:var(--ink-3);margin-top:4px;letter-spacing:.01em;}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r-sm);
  font-weight:600;font-size:14px;padding:0 16px;height:42px;border:1px solid transparent;letter-spacing:.005em;
  transition:background .14s,border-color .14s,color .14s;white-space:nowrap;}
.btn .ic,.btn .ic svg{width:17px;height:17px;}
.btn>svg{width:18px;height:18px;}
.btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
.btn-pri{background:var(--burgundy);color:#fff;}
.btn-pri:hover{background:var(--burgundy-deep);}
.btn-sec{background:var(--surface);color:var(--ink);border-color:var(--line-strong);}
.btn-sec:hover{background:var(--surface-2);border-color:var(--ink-4);}
.btn-ghost{background:transparent;color:var(--ink-2);}
.btn-ghost:hover{background:var(--surface-2);color:var(--ink);}
.btn-danger{background:var(--surface);color:#9A4233;border-color:#E4C5BD;}
.btn-danger:hover{background:#FBF1EE;border-color:#D69F93;}
.btn-danger-solid{background:#9A4233;color:#fff;}
.btn-danger-solid:hover{background:#823527;}
.btn-sm{height:34px;padding:0 12px;font-size:13px;}
.btn-block{width:100%;}
.btn:disabled{opacity:.5;cursor:not-allowed;}

/* ============================================================
   STATUS PILLS
   ============================================================ */
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);padding:3px 10px 3px 8px;
  font-size:11.5px;font-weight:600;letter-spacing:.01em;line-height:1;white-space:nowrap;}
.pill .pd{width:6px;height:6px;border-radius:50%;flex:none;}
.pill.pendiente{background:var(--st-pend-bg);color:var(--st-pend-tx);}     .pill.pendiente .pd{background:var(--st-pend-dot);}
.pill.confirmada{background:var(--st-conf-bg);color:var(--st-conf-tx);}    .pill.confirmada .pd{background:var(--st-conf-dot);}
.pill.reprogramada{background:var(--st-repr-bg);color:var(--st-repr-tx);}  .pill.reprogramada .pd{background:var(--st-repr-dot);}
.pill.cancelada{background:var(--st-canc-bg);color:var(--st-canc-tx);}     .pill.cancelada .pd{background:var(--st-canc-dot);}
.pill.completada{background:var(--st-comp-bg);color:var(--st-comp-tx);}    .pill.completada .pd{background:var(--st-comp-dot);}
.pill.no_asistio{background:var(--st-noas-bg);color:var(--st-noas-tx);}    .pill.no_asistio .pd{background:var(--st-noas-dot);}
.pill.lg{font-size:13px;padding:5px 13px 5px 11px;}
.pill.lg .pd{width:7px;height:7px;}
.pill .pg{display:flex;flex:none;}
.pill.completada .pg{color:var(--st-comp-tx);}
.pill .pdash{width:8px;height:1.6px;border-radius:2px;background:var(--st-noas-dot);flex:none;}

/* mini bandera EC */
.ecflag{display:inline-flex;flex-direction:column;width:15px;height:11px;border-radius:2px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(43,31,29,.12);vertical-align:-1px;flex:none;}
.ecflag .b1{height:5.5px;background:#FFD100;}
.ecflag .b2{height:2.75px;background:#0033A0;}
.ecflag .b3{height:2.75px;background:#CE1126;}

/* dot ámbar "pendiente de cierre" */
.amberdot{display:inline-flex;width:7px;height:7px;border-radius:50%;background:var(--amber-soft);flex:none;
  box-shadow:0 0 0 3px rgba(199,154,90,.18);}

/* ocasión tag */
.tag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--ink-2);
  background:var(--surface-3);border-radius:var(--r-pill);padding:3px 10px;letter-spacing:.01em;}
.tag .dur{color:var(--ink-3);font-weight:500;}

/* ============================================================
   CARDS / SURFACES
   ============================================================ */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);}
.card-pad{padding:16px;}

/* metric cards */
.metrics{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:22px;}
.metric{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 16px 14px;
  box-shadow:var(--sh-1);display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden;text-align:left;}
.metric .m-top{display:flex;align-items:center;gap:9px;}
.metric .m-ic{width:30px;height:30px;border-radius:9px;background:var(--burgundy-tint);color:var(--burgundy);
  display:flex;align-items:center;justify-content:center;flex:none;}
.metric .m-ic svg{width:17px;height:17px;}
.metric.amber .m-ic{background:var(--champagne-tint);color:#9A6B2F;}
.metric.sage .m-ic{background:var(--st-comp-bg);color:var(--st-comp-tx);}
.metric .m-lbl{font-size:12.5px;font-weight:600;color:var(--ink-2);letter-spacing:.01em;}
.metric .m-val{font-family:var(--f-display);font-size:34px;font-weight:500;letter-spacing:-.02em;line-height:1;color:var(--ink);}
.metric .m-val small{font-size:15px;color:var(--ink-3);font-family:var(--f-body);font-weight:500;margin-left:4px;}
.metric .m-hint{font-size:12px;color:var(--ink-3);}
.metric .m-hint b{color:var(--burgundy);font-weight:600;}

/* section header inside page */
.shdr{display:flex;align-items:baseline;justify-content:space-between;margin:24px 0 12px;}
.shdr h2{margin:0;font-size:15px;font-weight:700;letter-spacing:.01em;}
.shdr .more{font-size:12.5px;font-weight:600;color:var(--burgundy);background:none;border:0;padding:4px 6px;border-radius:var(--r-sm);}
.shdr .more:hover{background:var(--burgundy-tint);}

/* ============================================================
   LIST — cards (mobile) / table (desktop)
   ============================================================ */
.list{display:flex;flex-direction:column;gap:10px;}
.minilist{display:flex;flex-direction:column;gap:10px;}
.row{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-1);padding:13px 14px;text-decoration:none;color:inherit;width:100%;text-align:left;
  display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;}
.row:hover{border-color:var(--line-strong);box-shadow:var(--sh-2);}
.row:active{background:var(--surface-2);}
.row .when{flex:none;text-align:center;min-width:54px;}
.row .when .d{font-size:11px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;}
.row .when .t{font-family:var(--f-display);font-size:18px;font-weight:500;color:var(--ink);letter-spacing:-.01em;line-height:1.1;}
.row .body{min-width:0;}
.row .body .nm{font-weight:600;font-size:14.5px;color:var(--ink);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.row .body .meta{margin-top:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.row .end{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex:none;}
.row .chev{display:none;color:var(--ink-4);}

/* table (desktop via container query) */
.table-wrap{display:none;}
.tbl{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1);}
.tbl thead th{position:sticky;top:0;z-index:2;background:var(--surface-2);text-align:left;
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  padding:11px 16px;border-bottom:1px solid var(--line);white-space:nowrap;}
.tbl tbody tr{cursor:pointer;}
.tbl tbody tr:hover td{background:var(--surface-2);}
.tbl tbody td{padding:13px 16px;border-bottom:1px solid var(--line-2);font-size:14px;vertical-align:middle;}
.tbl tbody tr:last-child td{border-bottom:0;}
.tbl td .nm{font-weight:600;letter-spacing:-.01em;}
.tbl td .sub{font-size:12px;color:var(--ink-3);margin-top:2px;}
.tbl td.num{font-variant-numeric:tabular-nums;color:var(--ink-2);}
.tbl .idcell{font-variant-numeric:tabular-nums;color:var(--ink-3);font-weight:600;font-size:13px;}

/* ============================================================
   FILTERS / SEARCH
   ============================================================ */
.toolbar{position:sticky;top:0;z-index:15;background:var(--bg);padding:12px 0 10px;margin-bottom:4px;}
.searchbar{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--r-md);padding:0 12px;height:46px;box-shadow:var(--sh-1);}
.searchbar:focus-within{border-color:var(--focus);box-shadow:0 0 0 3px rgba(154,107,47,.12);}
.searchbar .ic{color:var(--ink-3);flex:none;display:flex;}
.searchbar input{border:0;outline:0;background:transparent;flex:1;font-size:15px;color:var(--ink);min-width:0;}
.searchbar input::placeholder{color:var(--ink-3);}
.searchbar .kbd{flex:none;}
.kbd{display:inline-flex;gap:3px;}
.kbd kbd{font-family:var(--f-body);font-size:10.5px;font-weight:600;color:var(--ink-3);background:var(--surface-3);
  border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:2px 6px;line-height:1.3;min-width:18px;text-align:center;}

.chips{display:flex;gap:8px;margin-top:11px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;}
.chips::-webkit-scrollbar{display:none;}
.chip{flex:none;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);
  border-radius:var(--r-pill);padding:7px 14px;font-size:13px;font-weight:600;white-space:nowrap;min-height:36px;}
.chip:hover{border-color:var(--ink-4);}
.chip.on{background:var(--burgundy);color:#fff;border-color:var(--burgundy);}

.filters{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
.selctl{position:relative;flex:1;min-width:0;}
.selctl select{width:100%;appearance:none;background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--r-sm);padding:9px 30px 9px 12px;font-size:13.5px;font-weight:500;color:var(--ink);height:40px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239C948C' stroke-width='2.4'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 11px center;}
.selctl select:focus{outline:0;border-color:var(--focus);box-shadow:0 0 0 3px rgba(154,107,47,.12);}
.result-count{font-size:12.5px;color:var(--ink-3);margin:14px 2px 10px;font-weight:500;}

/* ============================================================
   DETAIL — data rows, sections
   ============================================================ */
.detgrid{display:flex;flex-direction:column;gap:14px;}
.block{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden;}
.block .bh{padding:13px 16px;border-bottom:1px solid var(--line-2);font-size:12px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;justify-content:space-between;}
.block .bb{padding:6px 16px 14px;}
.field{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-2);align-items:flex-start;}
.field:last-child{border-bottom:0;}
.field .k{flex:none;width:108px;font-size:12.5px;color:var(--ink-3);font-weight:600;padding-top:1px;}
.field .v{flex:1;min-width:0;font-size:14.5px;color:var(--ink);font-weight:500;}
.field .v a{color:var(--burgundy);font-weight:600;text-decoration:none;}
.field .v a:hover{text-decoration:underline;}
.field .v .muted{color:var(--ink-3);font-weight:400;}
.field .v.notes{white-space:pre-line;line-height:1.55;font-weight:400;}

/* audit */
.audit{margin-top:14px;}
.audit .ah{width:100%;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:13px 15px;font-size:13px;font-weight:600;color:var(--ink-2);box-shadow:var(--sh-1);}
.audit .ah .ic{color:var(--ink-3);display:flex;}
.audit .ah .chev{margin-left:auto;color:var(--ink-3);transition:transform .2s;}
.audit.open .ah .chev{transform:rotate(180deg);}
.audit .ah .last{margin-left:auto;font-size:11.5px;color:var(--ink-3);font-weight:500;}
.audit .alog{border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r-md) var(--r-md);
  background:var(--surface);margin-top:-4px;padding:8px 15px 6px;display:none;}
.audit.open .alog{display:block;}
.aentry{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--line-2);}
.aentry:last-child{border-bottom:0;}
.aentry .ad{flex:none;display:flex;flex-direction:column;align-items:center;padding-top:3px;}
.aentry .ad .dot{width:8px;height:8px;border-radius:50%;background:var(--champagne-soft);border:2px solid var(--surface);box-shadow:0 0 0 1px var(--line-strong);}
.aentry .ad .ln{flex:1;width:1px;background:var(--line);margin-top:2px;}
.aentry .at{min-width:0;flex:1;padding-bottom:2px;}
.aentry .at .ev{font-size:13.5px;font-weight:600;color:var(--ink);}
.aentry .at .dt{font-size:12px;color:var(--ink-2);margin-top:1px;}
.aentry .at .meta{font-size:11.5px;color:var(--ink-3);margin-top:3px;}
.audit .seeall{width:100%;text-align:center;font-size:12.5px;font-weight:600;color:var(--burgundy);background:none;border:0;padding:10px;}
.audit .seeall:hover{background:var(--burgundy-tint);}

/* ============================================================
   DETAIL ACTION BAR
   ============================================================ */
.actionbar{position:absolute;bottom:0;left:0;right:0;z-index:18;background:var(--surface);
  border-top:1px solid var(--line);padding:12px 16px;display:flex;gap:8px;
  box-shadow:0 -10px 28px -22px rgba(43,31,29,.5);
  padding-bottom:calc(12px + env(safe-area-inset-bottom));}
.actionbar .grow{flex:1;}
.actionbar .more-actions{display:flex;gap:8px;flex:1;}
.actionbar .menu-btn{flex:none;}
.h-actions.ab-desktop{display:none;}

/* secondary actions: on mobile collapsed into an overflow sheet */
.act-sheet{position:absolute;inset:0;z-index:70;display:none;}
.act-sheet.open{display:block;}
.act-sheet .sc{position:absolute;inset:0;background:rgba(36,31,29,.42);}
.act-sheet .panel{position:absolute;left:0;right:0;bottom:0;background:var(--surface);border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:10px 12px calc(14px + env(safe-area-inset-bottom));box-shadow:var(--sh-3);}
.act-sheet .panel .grab{width:38px;height:4px;border-radius:2px;background:var(--line-strong);margin:6px auto 12px;}
.act-sheet .panel button{width:100%;justify-content:flex-start;margin-bottom:6px;}

/* ============================================================
   MODAL / CONFIRM
   ============================================================ */
.overlay{position:absolute;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:20px;}
.overlay .sc{position:absolute;inset:0;background:rgba(36,31,29,.5);backdrop-filter:blur(2px);}
.modal{position:relative;z-index:1;background:var(--surface);border-radius:var(--r-lg);width:100%;max-width:420px;
  box-shadow:var(--sh-3);overflow:hidden;animation:modalin .2s cubic-bezier(.2,.7,.3,1);}
@keyframes modalin{from{opacity:0;transform:translateY(10px) scale(.98);}to{opacity:1;transform:none;}}
.modal .mh{padding:20px 20px 0;display:flex;gap:13px;align-items:flex-start;}
.modal .mh .mic{width:40px;height:40px;border-radius:11px;background:var(--st-canc-bg);color:var(--st-canc-tx);
  display:flex;align-items:center;justify-content:center;flex:none;}
.modal .mh .mic svg{width:21px;height:21px;}
.modal .mh.neutral .mic{background:var(--champagne-tint);color:#9A6B2F;}
.modal h3{margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em;}
.modal .mid{font-size:12px;color:var(--ink-3);font-weight:600;font-variant-numeric:tabular-nums;margin-top:2px;}
.modal .mb{padding:14px 20px 4px;font-size:14px;color:var(--ink-2);line-height:1.55;}
.modal .mfoot{padding:16px 20px 20px;display:flex;gap:9px;}
.modal .mfoot .btn{flex:1;}

/* ============================================================
   TOAST
   ============================================================ */
.toasts{position:absolute;left:0;right:0;bottom:0;z-index:95;padding:14px;display:flex;flex-direction:column;gap:10px;pointer-events:none;}
.toast{pointer-events:auto;background:var(--ink);color:#F4EEE6;border-radius:var(--r-md);padding:13px 14px;
  display:flex;align-items:center;gap:12px;box-shadow:var(--sh-3);animation:toastin .26s cubic-bezier(.2,.7,.3,1);max-width:560px;margin:0 auto;width:100%;}
@keyframes toastin{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.toast .tic{flex:none;color:var(--champagne-soft);display:flex;}
.toast .tbody{flex:1;min-width:0;}
.toast .tbody b{display:block;font-size:13.5px;font-weight:600;}
.toast .tbody span{display:block;font-size:12px;color:rgba(244,238,230,.7);margin-top:1px;}
.toast .tbtn{flex:none;background:rgba(255,255,255,.14);color:#fff;border:0;border-radius:var(--r-sm);
  padding:8px 13px;font-size:13px;font-weight:600;}
.toast .tbtn:hover{background:rgba(255,255,255,.24);}
.toast.error{background:#5A2620;}
.toast.error .tic{color:#E9B4A9;}
.toast.ok .tic{color:var(--st-comp-dot);}

/* ============================================================
   EMPTY / SKELETON
   ============================================================ */
.empty{text-align:center;padding:54px 24px;color:var(--ink-3);}
.empty .ei{width:54px;height:54px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:var(--champagne);}
.empty .ei svg{width:26px;height:26px;}
.empty h3{margin:0 0 5px;font-size:15.5px;font-weight:600;color:var(--ink-2);}
.empty p{margin:0;font-size:13.5px;}

/* ============================================================
   FULL-PAGE STATES (login, forbidden, expired)
   ============================================================ */
.gate{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:32px 24px;text-align:center;position:relative;overflow:hidden;
  background:radial-gradient(90% 60% at 50% 8%, #FFFDFA, transparent 64%), linear-gradient(180deg,#FBF7F2,#F1E8DD);}
.gate .edge{position:absolute;inset:18px;border:1px solid var(--line);border-radius:var(--r-lg);pointer-events:none;}
.gate .inner{position:relative;z-index:1;width:100%;max-width:360px;display:flex;flex-direction:column;align-items:center;}
.gate .wordmark{font-size:40px;}
.gate .wordmark .tag{font-size:11px;}
.gate .lede{font-family:var(--f-display);font-style:italic;font-size:18px;color:var(--burgundy);margin:14px 0 0;}
.gate .sub{font-size:13.5px;color:var(--ink-2);margin:8px 0 0;letter-spacing:.02em;line-height:1.5;}
.gate .hair{height:1px;width:120px;background:linear-gradient(90deg,transparent,var(--champagne) 50%,transparent);opacity:.7;margin:26px 0;}
.gate .card{width:100%;padding:22px 20px;}
.gate .gicon{width:62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;}
.gate .gicon.lock{background:var(--burgundy-tint);color:var(--burgundy);}
.gate .gicon.clock{background:var(--champagne-tint);color:#9A6B2F;}
.gate h2{font-family:var(--f-display);font-weight:500;font-size:23px;letter-spacing:-.01em;margin:0 0 8px;}
.gate .foot{margin-top:22px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);font-weight:600;
  display:flex;align-items:center;gap:8px;}
.gate .foot .ic{display:flex;color:var(--ink-4);}
.google{display:inline-flex;align-items:center;justify-content:center;gap:11px;width:100%;height:50px;border-radius:var(--r-sm);
  background:var(--surface);border:1px solid var(--line-strong);font-size:15px;font-weight:600;color:var(--ink);box-shadow:var(--sh-1);}
.google:hover{background:var(--surface-2);border-color:var(--ink-4);}
.google svg{width:20px;height:20px;flex:none;}

/* ============================================================
   CONTAINER QUERIES — tablet / desktop
   ============================================================ */
@container app (min-width:720px){
  .page{padding:24px 28px 130px;}
  .metrics{grid-template-columns:repeat(3,1fr);gap:14px;}
  .phead h1{font-size:25px;}
  .greet{font-size:30px;}
  .filters{flex-wrap:nowrap;}
  .selctl{max-width:200px;}
  .detgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;}
  .detgrid .span2{grid-column:1 / -1;}
}

@container app (min-width:1024px){
  .topbar{display:none;}
  .sidebar{display:flex;flex-direction:column;width:248px;max-width:none;flex:none;background:var(--surface);
    border-right:1px solid var(--line);height:100%;position:relative;inset:auto;z-index:5;
    transform:none;transition:none;box-shadow:none;}
  .sidebar .dr-head{padding:22px 18px 14px;display:flex;align-items:center;}
  .sidebar .dr-head .wordmark{font-size:23px;}
  .sidebar .nav{padding:10px 12px;}
  .drawer{display:none !important;}
  .scrim,.scrim.is-shown{display:none !important;}
  .page{padding:28px 36px 48px;}
  /* lists become tables */
  .list{display:none;}
  .table-wrap{display:block;}
  .toolbar{padding-top:0;}
  /* detail action bar -> top-right (handled in markup); hide sticky bottom */
  .actionbar{position:static;border-top:0;box-shadow:none;padding:0;background:transparent;}
  .actionbar.as-bottom{display:none;}
  .h-actions.ab-desktop{display:flex;}
  .greet{font-size:32px;}
}

/* ============================================================
   CITAS v2 — topbar, tabla, popover, bulk, drawer detalle
   ============================================================ */
.list-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px;}
.list-head .lh-txt{flex:1;min-width:0;}
.list-head h1{margin:0;font-size:22px;font-weight:600;letter-spacing:-.02em;}
.list-head .counts{margin-top:3px;font-size:12.5px;color:var(--ink-3);font-weight:500;}
.list-head .counts b{color:var(--ink);font-weight:600;}
.list-head .lh-actions{flex:none;}

/* tabla v2 */
.tbl .ck{width:34px;text-align:center;padding-left:14px;padding-right:0;}
.tbl input[type=checkbox]{width:16px;height:16px;accent-color:var(--burgundy);cursor:pointer;vertical-align:middle;margin:0;}
.tbl thead .ck{padding-top:12px;}
.tbl tbody tr.dim td:not(.ck):not(.more-cell){opacity:.5;}
.tbl tbody tr.sel td{background:var(--burgundy-tint) !important;}
.tbl .estado-cell{display:flex;align-items:center;gap:7px;}
.tbl .wa{display:inline-flex;align-items:center;gap:7px;color:var(--ink-2);font-variant-numeric:tabular-nums;font-size:13.5px;text-decoration:none;}
.tbl .wa:hover{color:var(--burgundy);}
.tbl .creada{color:var(--ink-3);font-size:12.5px;white-space:nowrap;}
.tbl .more-cell{width:44px;text-align:right;padding-right:12px;}
.iconbtn{width:30px;height:30px;border-radius:var(--r-sm);border:0;background:transparent;color:var(--ink-3);
  display:inline-flex;align-items:center;justify-content:center;}
.iconbtn:hover{background:var(--surface-3);color:var(--ink);}
.iconbtn svg{width:18px;height:18px;}
.more-wrap{position:relative;display:inline-flex;}

/* popover (desktop) */
.qmenu-pop{display:none;}
.qmenu{position:absolute;top:calc(100% + 4px);right:0;z-index:88;min-width:210px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-3);padding:6px;
  animation:modalin .14s ease;}
.qmenu button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;text-align:left;
  font-size:13.5px;font-weight:500;color:var(--ink);padding:9px 10px;border-radius:var(--r-sm);}
.qmenu button:hover{background:var(--surface-2);}
.qmenu button.danger{color:var(--st-canc-tx);}
.qmenu button.danger:hover{background:#FBF1EE;}
.qmenu button svg{width:16px;height:16px;color:var(--ink-3);flex:none;}
.qmenu button.danger svg{color:var(--st-canc-tx);}
.qmenu .sep{height:1px;background:var(--line-2);margin:5px 4px;}

/* popover -> bottom-sheet en mobile */
.qmenu-sheet{position:absolute;inset:0;z-index:80;}
.qmenu-sheet .sc{position:absolute;inset:0;background:rgba(36,31,29,.42);}
.qmenu-sheet .qpanel{position:absolute;left:0;right:0;bottom:0;background:var(--surface);
  border-radius:var(--r-lg) var(--r-lg) 0 0;padding:8px 12px calc(14px + env(safe-area-inset-bottom));
  box-shadow:var(--sh-3);animation:sheetup .24s cubic-bezier(.2,.7,.3,1);}
.qmenu-sheet .grab{width:38px;height:4px;border-radius:2px;background:var(--line-strong);margin:8px auto 8px;}
.qmenu-sheet .qhead{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--ink-3);padding:4px 8px 8px;text-transform:uppercase;}
.qmenu-sheet .qpanel button{display:flex;align-items:center;gap:12px;width:100%;border:0;background:transparent;
  text-align:left;font-size:15px;font-weight:500;color:var(--ink);padding:13px 10px;border-radius:var(--r-sm);min-height:48px;}
.qmenu-sheet .qpanel button:active{background:var(--surface-2);}
.qmenu-sheet .qpanel button.danger{color:var(--st-canc-tx);}
.qmenu-sheet .qpanel button svg{width:19px;height:19px;color:var(--ink-3);flex:none;}
.qmenu-sheet .qpanel button.danger svg{color:var(--st-canc-tx);}
@keyframes sheetup{from{transform:translateY(100%);}to{transform:none;}}

/* mobile cards v2 */
.ccard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);
  padding:14px;display:flex;flex-direction:column;gap:9px;text-align:left;width:100%;cursor:pointer;}
.ccard:active{background:var(--surface-2);}
.ccard.dim{opacity:.62;}
.ccard .cc-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.ccard .cc-top .creada{font-size:12px;color:var(--ink-3);}
.ccard .cc-name{font-weight:600;font-size:16px;letter-spacing:-.01em;display:flex;align-items:center;gap:8px;}
.ccard .cc-name .idtag{font-size:12px;color:var(--ink-3);font-weight:600;font-variant-numeric:tabular-nums;}
.ccard .cc-meta{font-size:13px;color:var(--ink-2);}
.ccard .cc-wa{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink-2);font-variant-numeric:tabular-nums;text-decoration:none;}
.ccard .cc-foot{display:flex;justify-content:flex-end;margin-top:2px;}
.ccard .cc-foot .btn{pointer-events:auto;}

/* bulk bar */
.bulkbar{position:absolute;left:0;right:0;bottom:0;z-index:40;background:var(--ink);color:#F4EEE6;
  padding:13px 18px;display:flex;align-items:center;gap:14px;box-shadow:0 -12px 30px -20px rgba(0,0,0,.6);
  animation:toastin .22s ease;}
.bulkbar .bn{font-size:14px;font-weight:600;}
.bulkbar .bn b{color:var(--champagne-soft);}
.bulkbar .bspacer{flex:1;}
.bulkbar .btn{height:38px;}
.bulkbar .lnk{background:none;border:0;color:rgba(244,238,230,.72);font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px;}
.bulkbar .lnk:hover{color:#fff;}
.bulkbar .lnk svg{width:15px;height:15px;}

/* empty v2 */
.empty .ebtn{margin-top:14px;}

/* ============================================================
   DRAWER / SHEET DETALLE
   ============================================================ */
.sheet-overlay{position:absolute;inset:0;z-index:80;}
.sheet-overlay .sc{position:absolute;inset:0;background:rgba(36,31,29,.5);backdrop-filter:blur(2px);animation:fadein .2s ease;}
@keyframes fadein{from{opacity:0;}to{opacity:1;}}
.cdrawer{position:absolute;left:0;right:0;bottom:0;
  height:93%;height:93dvh;max-height:100dvh;
  background:var(--surface);
  border-radius:18px 18px 0 0;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 -20px 50px -20px rgba(0,0,0,.5);animation:sheetup .28s cubic-bezier(.2,.7,.3,1);}
.cdrawer .grab{width:40px;height:4px;border-radius:2px;background:var(--line-strong);margin:9px auto 2px;flex:none;}
.dhead{flex:none;padding:10px 16px 14px;border-bottom:1px solid var(--line-2);display:flex;align-items:flex-start;gap:10px;}
.dhead .dh-txt{flex:1;min-width:0;}
.dhead .dh-txt .t{display:flex;align-items:center;gap:10px;}
.dhead .dh-txt h2{margin:0;font-size:19px;font-weight:700;letter-spacing:-.01em;}
.dhead .dh-txt .sub{font-size:12.5px;color:var(--ink-3);margin-top:3px;}
.dhead .dh-tools{display:flex;gap:4px;flex:none;}
.dbody{flex:1;min-height:0;overflow-y:auto;padding:4px 16px 16px;-webkit-overflow-scrolling:touch;}
.dsec{padding:16px 0;border-bottom:1px solid var(--line-2);}
.dsec:last-child{border-bottom:0;}
.dlabel{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:700;
  display:flex;align-items:center;gap:9px;margin-bottom:11px;}
.dlabel .ring{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--champagne-soft);flex:none;}
.dlabel .ring.fill{background:var(--champagne-soft);}
.dwhen{font-family:var(--f-display);font-size:21px;font-weight:500;letter-spacing:-.01em;color:var(--ink);}
.dwhen .ctx{display:block;font-family:var(--f-body);font-size:13px;font-weight:500;color:var(--burgundy);margin-top:5px;}
.dwhen .ctx.amber{color:var(--amber);}
.dname{font-size:17px;font-weight:600;letter-spacing:-.01em;margin-bottom:10px;}
.dline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px;}
.dline .val{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums;}
.dkv{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--line-2);align-items:center;}
.dkv:last-child{border-bottom:0;}
.dkv .k{flex:none;width:118px;font-size:12.5px;color:var(--ink-3);font-weight:600;}
.dkv .v{flex:1;min-width:0;font-size:14px;color:var(--ink);display:flex;align-items:center;gap:8px;}
.dkv .v .muted{color:var(--ink-3);}
.dkv .v code{font-family:var(--f-body);font-variant-numeric:tabular-nums;letter-spacing:.02em;}
.copybtn{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);color:var(--ink-2);
  font-size:11.5px;font-weight:600;padding:4px 9px;display:inline-flex;align-items:center;gap:5px;}
.copybtn:hover{border-color:var(--line-strong);color:var(--burgundy);}
.copybtn svg{width:13px;height:13px;}
.copybtn.ok{color:var(--st-comp-tx);border-color:var(--st-comp-dot);}

.quote{background:var(--surface-2);border:1px solid var(--line-2);border-left:3px solid var(--champagne-soft);
  border-radius:6px;padding:13px 15px;font-family:var(--f-display);font-style:italic;font-size:15px;line-height:1.5;color:var(--ink);}

/* nota interna editable */
.notaedit{position:relative;}
.notaedit textarea{width:100%;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface-2);
  padding:11px 12px;font-size:14px;line-height:1.5;color:var(--ink);resize:vertical;min-height:64px;font-family:inherit;}
.notaedit textarea:focus{outline:0;border-color:var(--focus);box-shadow:0 0 0 3px rgba(154,107,47,.12);background:var(--surface);}
.notaedit .saved{font-size:11.5px;color:var(--st-comp-tx);font-weight:600;margin-top:6px;display:inline-flex;align-items:center;gap:5px;height:14px;transition:opacity .3s;}
.notaedit .saved svg{width:13px;height:13px;}
.notaedit .placeholder{color:var(--ink-3);font-style:italic;}

/* QR */
.qrtoggle{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--burgundy);
  background:none;border:0;padding:4px 0;}
.qrtoggle svg{width:16px;height:16px;}
.qrwrap{margin-top:14px;display:flex;flex-direction:column;align-items:center;gap:10px;}
.qrbox{width:188px;height:188px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;
  display:grid;}
.qrbox .qrgrid{display:grid;width:100%;height:100%;}
.qrbox .qrgrid i{background:var(--ink);}
.qrcap{font-size:12px;color:var(--ink-3);}

/* bitácora */
.bitatoggle{width:100%;display:flex;align-items:center;gap:10px;background:none;border:0;padding:2px 0;
  font-size:13.5px;font-weight:600;color:var(--ink-2);}
.bitatoggle .ic{color:var(--ink-3);display:flex;}
.bitatoggle .ic svg{width:17px;height:17px;}
.bitatoggle .chev{margin-left:auto;color:var(--ink-3);transition:transform .2s;}
.bitatoggle .chev svg{width:18px;height:18px;}
.bita.open .bitatoggle .chev,
.bita details[open] .bitatoggle .chev{transform:rotate(180deg);}
.bita .timeline{margin-top:12px;display:none;}
.bita.open .timeline,
.bita details[open] .timeline{display:block;}
.bentry{display:flex;gap:12px;padding:2px 0 12px;}
.bentry .bd{flex:none;display:flex;flex-direction:column;align-items:center;padding-top:4px;}
.bentry .bd .dot{width:9px;height:9px;border-radius:50%;background:var(--champagne-soft);border:2px solid var(--surface);box-shadow:0 0 0 1px var(--line-strong);}
.bentry .bd .ln{flex:1;width:1px;background:var(--line);margin-top:3px;min-height:14px;}
.bentry:last-child .bd .ln{display:none;}
.bentry .bt{flex:1;min-width:0;}
.bentry .bt .br{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.bentry .bt .btype{font-size:12.5px;font-weight:700;color:var(--ink);text-transform:capitalize;}
.bentry .bt .bts{font-size:11.5px;color:var(--ink-3);}
.bentry .bt .desc{font-size:13px;color:var(--ink-2);margin-top:3px;}
.bentry .bt .by{font-size:11.5px;color:var(--ink-3);margin-top:2px;}
.res{font-size:10px;font-weight:700;padding:2px 7px;border-radius:var(--r-pill);letter-spacing:.02em;}
.res.ok{background:var(--st-comp-bg);color:var(--st-comp-tx);}
.res.error{background:var(--st-canc-bg);color:var(--st-canc-tx);}
.res.skipped{background:var(--surface-3);color:var(--ink-3);}
.bita .seeall{font-size:12.5px;font-weight:600;color:var(--burgundy);background:none;border:0;padding:6px 0 0;}

/* footer drawer */
.dfooter{flex:none;border-top:1px solid var(--line);padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:8px;background:var(--surface);}
.dfooter .dfp{width:100%;height:46px;}
.dfsec{display:flex;gap:8px;flex-wrap:wrap;}
.dfsec .btn{flex:1 1 calc(50% - 4px);min-width:0;height:44px;}

/* reprogramar (sub-vista) */
.resched .rback{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink-2);background:none;border:0;padding:2px 0;margin-bottom:8px;}
.resched .rback svg{width:16px;height:16px;}
.calhead{display:flex;align-items:center;justify-content:space-between;margin:6px 0 12px;}
.calhead .m{font-weight:600;font-size:15px;text-transform:capitalize;}
.calhead .nav{display:flex;gap:4px;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;}
.cal-dow{font-size:10.5px;font-weight:700;color:var(--ink-3);text-align:center;text-transform:uppercase;padding-bottom:4px;}
.cal-d{aspect-ratio:1;border:1px solid transparent;border-radius:9px;background:var(--surface-2);color:var(--ink-3);
  font-size:13.5px;font-weight:600;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;}
.cal-d.empty{background:transparent;}
.cal-d.avail{background:var(--surface);border-color:var(--line-strong);color:var(--ink);cursor:pointer;}
.cal-d.avail:hover{border-color:var(--burgundy);color:var(--burgundy);}
.cal-d.sel{background:var(--burgundy);border-color:var(--burgundy);color:#fff;}
.slots{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.slot{border:1px solid var(--line-strong);background:var(--surface);border-radius:var(--r-sm);padding:9px 14px;
  font-size:13.5px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;}
.slot:hover{border-color:var(--ink-4);}
.slot.sel{background:var(--burgundy);border-color:var(--burgundy);color:#fff;}
.resched .hint{font-size:12.5px;color:var(--ink-3);margin-top:14px;}

/* nueva cita form */
.formgrid{display:flex;flex-direction:column;gap:14px;}
.fld label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px;}
.fld input,.fld textarea{width:100%;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  padding:11px 12px;font-size:14.5px;color:var(--ink);background:var(--surface);font-family:inherit;}
.fld input:focus,.fld textarea:focus{outline:0;border-color:var(--focus);box-shadow:0 0 0 3px rgba(154,107,47,.12);}
.fld .two{display:flex;gap:10px;}
.segctl{display:flex;gap:8px;}
.segctl button{flex:1;border:1px solid var(--line-strong);background:var(--surface);border-radius:var(--r-sm);
  padding:11px;font-size:13.5px;font-weight:600;color:var(--ink-2);}
.segctl button.on{background:var(--burgundy);color:#fff;border-color:var(--burgundy);}
.propuesta{font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--amber);background:var(--champagne-tint);
  border:1px dashed var(--champagne-soft);border-radius:var(--r-pill);padding:3px 9px;display:inline-flex;align-items:center;gap:6px;}

@container app (min-width:1024px){
  .list-head h1{font-size:25px;}
  .qmenu-sheet{display:none !important;}
  .qmenu-pop{display:block;}
  .ccard{display:none;}
  /* drawer -> side panel derecho */
  .cdrawer{left:auto;top:0;right:0;bottom:0;height:100%;width:560px;border-radius:0;
    box-shadow:-24px 0 60px -24px rgba(0,0,0,.45);animation:slidein .28s cubic-bezier(.2,.7,.3,1);}
  .cdrawer .grab{display:none;}
  .dhead{padding:20px 22px 16px;}
  .dbody{padding:4px 22px 18px;}
  .dfooter{padding:14px 22px;}
}
@keyframes slidein{from{transform:translateX(100%);}to{transform:none;}}
@container app (max-width:1023px){
  .qmenu-pop{display:none !important;}
  .bulkbar{display:none;}
}

/* ============================================================
   PRODUCTION OVERRIDES (smileops)
   The design CSS assumes the .app sits inside a preview chrome
   wrapper (.stage > .device). In production .app is mounted
   directly under <body>, so the body needs to become the flex
   column that .app expects as parent.
   ============================================================ */
html, body { height: 100%; }
body.atelier {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  margin: 0;
}
body.atelier > .app { flex: 1; min-height: 0; }

/* Gate form classes that the templates use but the design CSS
   only had as descendant selectors (.gate .sub, .gate h2…). */
.gate-h {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 23px;
  letter-spacing: -.01em;
  margin: 18px 0 8px;
  text-align: center;
  color: var(--ink);
}
.gate-sub {
  font-size: 13.5px;
  color: var(--ink-2);
  margin: 0 0 18px;
  letter-spacing: .02em;
  line-height: 1.55;
  text-align: center;
}
.gate-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.gate-lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.gate-input {
  height: 44px;
  padding: 0 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font: 500 14.5px var(--f-body);
  color: var(--ink);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.gate-input:focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(154, 107, 47, .18);
}
.gate-note {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--ink-3);
  text-align: center;
  line-height: 1.5;
}
.alert-error {
  margin: 8px 0 14px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: #F8E9E6;
  color: #9C4A3E;
  font-size: 13px;
  border: 1px solid #ECCBC4;
}

/* ============================================================
   DASHBOARD ADDITIONS (smileops)
   ============================================================ */
.h-page {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--ink);
}
.h-page-sub {
  margin-left: 8px;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 12.5px;
  color: var(--ink-3);
  letter-spacing: .01em;
}
.shdr {
  margin: 24px 0 10px;
}
.shdr h2 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
}
.shortcuts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.shortcut {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, background .15s;
}
.shortcut:hover {
  background: var(--surface-2);
  border-color: var(--line-strong);
}
.sc-h {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
.sc-s {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--ink-3);
}

/* ============================================================
   TOOLBAR (Citas)
   ============================================================ */
.tb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.tb-row-top {
  margin-bottom: 10px;
}
.tb-row-chips {
  margin-bottom: 10px;
}
.tb-row-filters {
  padding-top: 6px;
  border-top: 1px dashed var(--line);
}
.results-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--ink-3);
}

/* ============================================================
   DATA TABLE (Citas, desktop)
   ============================================================ */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.data-table thead th {
  position: sticky;
  top: 0;
  background: var(--surface-2);
  color: var(--ink-2);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.data-table tbody td {
  padding: 11px 12px;
  border-top: 1px solid var(--line-2);
  vertical-align: middle;
}
.data-table tbody tr:hover {
  background: var(--surface-2);
}
.data-table tbody tr.dim {
  opacity: .55;
}
.col-check { width: 32px; text-align: center; }
.col-id    { width: 64px; font-variant-numeric: tabular-nums; color: var(--ink-2); font-weight: 600; }
.col-name  { font-weight: 500; }
.col-rel   { color: var(--ink-3); white-space: nowrap; }
.col-act   { width: 32px; text-align: right; }
.row-link {
  color: var(--ink);
  text-decoration: none;
}
.row-link:hover { color: var(--burgundy); }
.row-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  color: var(--ink-3);
  text-decoration: none;
  font-size: 16px;
  line-height: 1;
}
.row-more:hover {
  background: var(--surface-3);
  color: var(--ink);
}
.dot-amber {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
  margin-left: 6px;
  vertical-align: middle;
}
.wa-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-2);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.wa-link:hover { color: var(--burgundy); }

/* ============================================================
   MOBILE CARD LIST (Citas)
   ============================================================ */
.card-list {
  display: none;
  flex-direction: column;
  gap: 10px;
}
@container app (max-width: 1023px) {
  .data-table { display: none; }
  .card-list { display: flex; }
}
@media (max-width: 1023px) {
  .data-table { display: none; }
  .card-list { display: flex; }
}
.row-card {
  display: block;
  padding: 14px 14px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s;
}
.row-card:hover, .row-card:active {
  border-color: var(--line-strong);
}
.row-card.dim { opacity: .55; }
.rc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.rc-rel {
  font-size: 11.5px;
  color: var(--ink-3);
}
.rc-name {
  font-weight: 600;
  font-size: 14.5px;
}
.rc-id {
  color: var(--ink-3);
  font-weight: 500;
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
}
.rc-meta {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--ink-2);
}
.rc-wa {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state {
  margin: 36px auto;
  max-width: 420px;
  text-align: center;
  padding: 32px 20px;
}
.empty-ico {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink-3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}
.empty-state h3 {
  margin: 0 0 6px;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 18px;
}
.empty-state p {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--ink-3);
}

/* ============================================================
   SIDEBAR FOOTER (staff identity)
   ============================================================ */
.dr-foot {
  margin-top: auto;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
}
.who { flex: 1; min-width: 0; }
.who-name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.who-mail {
  font-size: 11.5px;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   DETAIL DRAWER (Citas)
   ============================================================ */
.drawer-wrap {
  position: fixed;
  inset: 0;
  z-index: 100;
}
.drawer-scrim {
  position: absolute;
  inset: 0;
  background: rgba(36, 31, 29, .42);
  backdrop-filter: blur(2px);
}
.detail-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(560px, 100%);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  box-shadow: -20px 0 60px -20px rgba(36, 31, 29, .35);
  animation: drawer-in .25s var(--ease, ease-out);
}
@keyframes drawer-in {
  from { transform: translateX(8%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@media (max-width: 720px) {
  .drawer {
    top: 7vh;
    width: 100%;
    border-radius: 18px 18px 0 0;
  }
  @keyframes drawer-in {
    from { transform: translateY(100%); }
    to   { transform: none; }
  }
}
.drawer-head {
  flex: none;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.dh-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.dh-id {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -.01em;
}
.dh-sub {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--ink-3);
}
.dh-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.dh-close:hover {
  color: var(--burgundy);
  border-color: var(--line-strong);
}
.drawer-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 22px 80px;
}
.drawer-foot {
  flex: none;
  padding: 12px 22px 16px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Drawer body — blocks */
.db-block {
  padding: 16px 0;
  border-bottom: 1px solid var(--line-2);
}
.db-block:last-of-type { border-bottom: 0; }
.db-h {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
}
.db-h small {
  margin-left: 6px;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-4);
  font-weight: 500;
  text-transform: none;
}
.db-strong {
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink);
}
.db-sub {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--ink-2);
}
.db-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.db-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--ink-2);
}
.db-dl {
  margin: 0;
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 6px 12px;
  font-size: 13px;
}
.db-dl dt {
  color: var(--ink-3);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: .04em;
  align-self: center;
}
.db-dl dd {
  margin: 0;
  color: var(--ink);
}
.db-quote {
  padding: 12px 14px;
  background: var(--surface-2);
  border-left: 3px solid var(--champagne-soft);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-style: italic;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.55;
}
.db-empty {
  font-size: 13px;
  color: var(--ink-3);
}
.db-note-internal {
  width: 100%;
  min-height: 70px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font: 500 13.5px var(--f-body);
  resize: vertical;
  color: var(--ink);
}
.db-note-internal:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(154, 107, 47, .15);
}
.db-note-status {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--ink-3);
}

/* Timeline (audit log) */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tl-item {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  align-items: start;
}
.tl-meta {
  font-size: 11.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.tl-body {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12.5px;
}
.tl-type {
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 11px;
}
.tl-desc {
  color: var(--ink);
}

/* Make .metric work as an <a> (clickable tile) */
a.metric {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .12s;
}
a.metric:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
}
a.metric:active { transform: translateY(1px); }
.metric.alert {
  border-color: #ECCBC4;
  background: #FDF5F3;
}
.metric.alert .m-ic { background: #F8E9E6; color: #9C4A3E; }

/* Audit-log mini pills (timeline result chips) */
.pill.mini {
  font-size: 10.5px;
  padding: 1.5px 7px;
  letter-spacing: .03em;
  gap: 4px;
}
.pill.result-ok      { background: var(--st-comp-bg); color: var(--st-comp-tx); }
.pill.result-error   { background: var(--st-canc-bg); color: var(--st-canc-tx); }
.pill.result-skipped { background: var(--surface-3);  color: var(--ink-3); }

/* Status pill leading dot — alias .dot to .pd so old templates still work.
   The design uses .pd; the new code uses .pd consistently now. */
.pill .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.pill.pendiente .dot    { background: var(--st-pend-dot); }
.pill.confirmada .dot   { background: var(--st-conf-dot); }
.pill.reprogramada .dot { background: var(--st-repr-dot); }
.pill.cancelada .dot    { background: var(--st-canc-dot); }
.pill.completada .dot   { background: var(--st-comp-dot); }
.pill.no_asistio .dot   { background: var(--st-noas-dot); }

/* ============================================================
   CONFIRMATION MODAL (smileops)
   Lives above the detail drawer (z-index 200). Used for state
   changes that need explicit acknowledgment.
   ============================================================ */
.confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.confirm-scrim {
  position: absolute;
  inset: 0;
  background: rgba(36, 31, 29, .55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: cm-scrim .18s ease-out;
}
@keyframes cm-scrim {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.confirm-card {
  position: relative;
  width: min(420px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 70px -20px rgba(36, 31, 29, .55);
  padding: 24px 22px 18px;
  animation: cm-card .22s ease-out;
}
@keyframes cm-card {
  from { opacity: 0; transform: translateY(6px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.confirm-ic {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--burgundy-tint);
  color: var(--burgundy);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.confirm-modal.danger .confirm-ic {
  background: #F8E9E6;
  color: #9C4A3E;
}
.confirm-title {
  margin: 0 0 8px;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -.01em;
  color: var(--ink);
}
.confirm-body {
  margin: 0 0 18px;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.55;
}
.confirm-foot {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.confirm-foot .btn { min-width: 110px; }

/* Solid destructive primary used inside the confirm modal */
.btn-danger-solid {
  background: #9C4A3E;
  color: #FBF4EC;
  border: 1px solid transparent;
}
.btn-danger-solid:hover { background: #823C32; }

/* ============================================================
   TOAST STACK (non-blocking notifications)
   ============================================================ */
.toast-stack {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}
.toast {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #FBF4EC;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .01em;
  box-shadow: 0 10px 28px -10px rgba(36, 31, 29, .55);
  animation: toast-in .25s ease-out;
  max-width: 92vw;
  pointer-events: auto;
}
.toast-ic {
  display: inline-flex;
  color: var(--champagne-soft);
}
.toast-error .toast-ic { color: #E59A8E; }
.toast.is-out { animation: toast-out .35s ease-in forwards; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes toast-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(4px); }
}

/* ============================================================
   RESCHEDULE MODAL (Atelier — date + slot picker)
   ============================================================ */
.reschedule-modal .reschedule-card {
  width: min(480px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
.rsch-lbl {
  display: block;
  margin: 14px 0 6px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 700;
}
.rsch-date {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  font: 500 14.5px var(--f-body);
  color: var(--ink);
}
.rsch-date:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(154, 107, 47, .15);
}
.rsch-slots {
  margin-top: 14px;
  flex: 1;
  min-height: 60px;
  overflow-y: auto;
}
.rsch-hint {
  font-size: 12.5px;
  color: var(--ink-3);
  padding: 14px 4px;
}
.rsch-group + .rsch-group { margin-top: 14px; }
.rsch-group-lbl {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
  margin-bottom: 8px;
}
.rsch-slot-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rsch-slot {
  min-width: 64px;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  font: 600 13px var(--f-body);
  color: var(--ink);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.rsch-slot:hover:not(:disabled) {
  border-color: var(--burgundy);
}
.rsch-slot.is-on {
  background: var(--burgundy);
  color: #FBF4EC;
  border-color: var(--burgundy);
}
.rsch-slot.is-taken,
.rsch-slot:disabled {
  opacity: .35;
  cursor: not-allowed;
  text-decoration: line-through;
}
.reschedule-modal .confirm-foot {
  margin-top: 14px;
}

/* Gate — Google button + dev fallback */
.gate-google {
  margin-top: 10px;
  height: 48px;
  font-weight: 600;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
}
.gate-google:hover {
  background: var(--surface-2);
  border-color: var(--ink-4);
}
.gate-dev {
  margin-top: 22px;
  border-top: 1px dashed var(--line);
  padding-top: 14px;
}
.gate-dev summary {
  cursor: pointer;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.gate-dev summary::-webkit-details-marker { display: none; }

/* Timeline actor (who triggered the entry) */
.tl-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tl-actor {
  margin-top: 3px;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: .02em;
  font-style: italic;
}

/* ============================================================
   SELECT CONTROL — same styling as .selctl wrapper, when the
   class lives on the <select> itself (template convenience).
   ============================================================ */
select.selctl {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 9px 32px 9px 12px;
  font: 500 13.5px var(--f-body);
  color: var(--ink);
  height: 40px;
  min-width: 160px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239C948C' stroke-width='2.4'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 11px center;
  cursor: pointer;
}
select.selctl:focus {
  outline: 0;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(154,107,47,.12);
}
select.selctl:hover { border-color: var(--ink-4); }

/* Search bar in the toolbar */
.searchbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 220px;
  max-width: 460px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 0 14px;
  height: 40px;
}
.searchbar:focus-within {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(154,107,47,.12);
}
.searchbar .ic { color: var(--ink-3); display: inline-flex; }
.searchbar input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: 0;
  font: 500 14px var(--f-body);
  color: var(--ink);
  height: 100%;
}
.searchbar input::placeholder { color: var(--ink-3); }
.searchbar .kbd {
  font: 600 11px ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink-3);
  background: var(--surface-3);
  padding: 2px 6px;
  border-radius: var(--r-sm);
}

/* Toolbar layout polish */
.tb-row-top { gap: 12px; }
.tb-row-filters {
  margin-top: 6px;
  padding-top: 10px;
  align-items: center;
  gap: 10px;
}
.tb-row-filters .results-count {
  margin-left: auto;
}

/* Staff role badge in sidebar footer */
.who-role {
  display: inline-block;
  margin-left: 6px;
  padding: 1.5px 7px;
  border-radius: var(--r-pill);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  vertical-align: middle;
}
.who-role--admin { background: var(--burgundy-tint); color: var(--burgundy); }
.who-role--ops   { background: var(--champagne-tint); color: var(--amber); }

/* ============================================================
   ARREGLOS — block ported from Round 1 handoff
   ============================================================ */

/* ============================================================
   MÓDULO ARREGLOS
   ============================================================ */
/* pills (7 estados + reabierto) */
.pill.pendiente_medidas{background:#EFEBE5;color:#7A726A;}   .pill.pendiente_medidas .pd{background:#A79C90;}
.pill.medidas_tomadas{background:#F7F1E8;color:#7A6F60;}     .pill.medidas_tomadas .pd{background:#B8924F;}
.pill.asignado_costurera{background:#F0EAF1;color:#6A5170;}  .pill.asignado_costurera .pd{background:#8A6E91;}
.pill.en_progreso{background:#F6EEDD;color:#8B6A37;}         .pill.en_progreso .pd{background:#C79A5A;}
.pill.listo{background:#E9F1EA;color:#3F6B49;}               .pill.listo .pg{color:#3F6B49;}
.pill.entregado{background:#E4EEE6;color:#3A6242;}           .pill.entregado .pg{color:#3A6242;}
.pill.cancelado{background:#F8E9E6;color:#9C4A3E;}           .pill.cancelado .pdash{background:#B85B49;}
.pill.reabierto{background:#F3EADF;color:#8B6A37;}           .pill.reabierto .pd{background:#B8924F;}
/* en_progreso: dot con halo activo */
.pill.en_progreso .pd{box-shadow:0 0 0 3px rgba(199,154,90,.22);}

/* role switcher en el review chrome */
.chrome .roleseg{display:flex;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-pill);padding:3px;gap:2px;}
.chrome .roleseg button{border:0;background:transparent;color:rgba(239,231,221,.6);font-size:11.5px;font-weight:600;padding:6px 12px;border-radius:var(--r-pill);display:flex;align-items:center;gap:6px;}
.chrome .roleseg button .rd{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7;}
.chrome .roleseg button.on{background:rgba(247,239,224,.95);color:#2A2422;}
.chrome .clabel{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(239,231,221,.5);font-weight:600;}

/* role badge en el header de sesión */
.rolebadge{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:2px 7px;border-radius:var(--r-pill);
  background:var(--burgundy-tint);color:var(--burgundy);align-self:flex-start;margin-top:2px;}
.rolebadge.ops{background:#F0EAF1;color:#6A5170;}
.rolebadge.costurera{background:#E9F1EA;color:#3F6B49;}
.rolebadge.admin{background:var(--champagne-tint);color:#9A6B2F;}

/* avatar costurera coloreado */
.av.cost{font-family:var(--f-body);}
.miniav{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:700;color:#fff;flex:none;}
.assignrow{display:inline-flex;align-items:center;gap:8px;}
.assignrow .nm{font-size:13.5px;font-weight:600;color:var(--ink);}
.assign-none{color:var(--ink-3);font-style:italic;font-size:13px;}

/* alert banner (vencidos) */
.alertbar{display:flex;align-items:center;gap:11px;background:#FBF0ED;border:1px solid #EBCFC9;border-radius:var(--r-md);
  padding:12px 14px;margin-bottom:14px;cursor:pointer;}
.alertbar .ic{width:30px;height:30px;border-radius:8px;background:#F4DDD6;color:#9C4A3E;display:flex;align-items:center;justify-content:center;flex:none;}
.alertbar .ic svg{width:18px;height:18px;}
.alertbar .tx{flex:1;min-width:0;font-size:13.5px;color:#8A3F33;font-weight:600;}
.alertbar .tx span{display:block;font-size:12px;color:#A86A5E;font-weight:500;margin-top:1px;}
.alertbar .go{color:#9C4A3E;}

/* thumbnail del vestido en filas/cards */
.vthumb{border-radius:8px;object-fit:cover;background:var(--surface-3);flex:none;border:1px solid var(--line);}
.vthumb.sm{width:46px;height:58px;}
.vthumb.lg{width:84px;height:104px;}

/* tipos-arreglo chips (multi, grandes) */
.tipos{display:flex;flex-wrap:wrap;gap:7px;}
.tchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-strong);background:var(--surface);
  color:var(--ink-2);border-radius:var(--r-pill);padding:6px 12px;font-size:12.5px;font-weight:600;min-height:32px;}
.tchip.mini{padding:3px 9px;font-size:11.5px;min-height:0;background:var(--surface-3);border-color:transparent;color:var(--ink-2);}
.tchip.on{background:var(--burgundy);color:#fff;border-color:var(--burgundy);}
.tchip.sel{background:var(--burgundy-tint);border-color:var(--burgundy-tint-2);color:var(--burgundy);}

/* medidas grid */
.medidas{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.medida{background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:9px 11px;}
.medida .k{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);font-weight:600;}
.medida .v{font-size:16px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;margin-top:2px;}
.medida .v.empty{color:var(--ink-4);font-weight:400;font-style:italic;font-size:13px;}

/* multimedia gallery */
.mediagrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.mediacell{position:relative;aspect-ratio:1;border-radius:9px;overflow:hidden;border:1px solid var(--line);background:var(--surface-3);cursor:pointer;}
.mediacell img{width:100%;height:100%;object-fit:cover;display:block;}
.mediacell .badge{position:absolute;left:5px;bottom:5px;display:inline-flex;align-items:center;gap:4px;
  background:rgba(20,15,13,.66);color:#fff;border-radius:var(--r-pill);padding:2px 7px;font-size:10px;font-weight:600;}
.mediacell .badge svg{width:11px;height:11px;}
.mediacell .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;}
.mediacell .play svg{width:30px;height:30px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));}
.mediacell.audio{background:linear-gradient(135deg,#5A2620,#7E3A3A);display:flex;align-items:center;justify-content:center;}
.mediacell.audio .wave{display:flex;align-items:center;gap:3px;height:34px;}
.mediacell.audio .wave i{width:3px;background:var(--champagne-soft);border-radius:2px;}
.mediacell .who{position:absolute;right:5px;top:5px;font-size:9px;font-weight:700;color:#fff;background:rgba(20,15,13,.55);border-radius:var(--r-pill);padding:1px 6px;}
.media-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1.5px dashed var(--line-strong);
  border-radius:9px;color:var(--ink-3);font-size:11px;font-weight:600;background:var(--surface-2);aspect-ratio:1;}
.media-add svg{width:20px;height:20px;}

/* capture buttons (uploader) */
.caprow{display:flex;gap:8px;}
.capbtn{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;border:1px solid var(--line-strong);
  background:var(--surface);border-radius:var(--r-md);color:var(--ink);font-size:12.5px;font-weight:600;}
.capbtn:hover{border-color:var(--burgundy);color:var(--burgundy);}
.capbtn .ci{width:38px;height:38px;border-radius:50%;background:var(--burgundy-tint);color:var(--burgundy);display:flex;align-items:center;justify-content:center;}
.capbtn .ci svg{width:20px;height:20px;}

/* notas internas (chat corto) */
.notesfeed{display:flex;flex-direction:column;gap:8px;}
.notebubble{background:var(--surface-2);border:1px solid var(--line-2);border-radius:10px;padding:9px 12px;font-size:13.5px;color:var(--ink);line-height:1.45;}
.notebubble .by{font-size:11px;color:var(--ink-3);font-weight:600;margin-bottom:3px;}

/* bitácora foto inline */
.bentry .bphoto{margin-top:7px;display:flex;gap:6px;}
.bentry .bphoto img{width:42px;height:42px;border-radius:6px;object-fit:cover;border:1px solid var(--line);}

/* mi-cola card (costurera) */
.qcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);
  padding:14px;display:grid;grid-template-columns:auto 1fr;gap:14px;text-align:left;width:100%;cursor:pointer;}
.qcard:active{background:var(--surface-2);}
.qcard.dim{opacity:.6;}
.qcard .qbody{min-width:0;display:flex;flex-direction:column;gap:9px;}
.qcard .qtop{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.qcard .qname{font-weight:600;font-size:16px;letter-spacing:-.01em;color:var(--ink);line-height:1.2;}
.qcard .qcode{font-size:11.5px;color:var(--ink-3);font-weight:600;font-variant-numeric:tabular-nums;margin-top:2px;}
.qcard .qdue{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;}
.qcard .qdue .lbl{color:var(--ink-3);font-weight:500;}
.qcard .qdue.hoy{color:#8B6A37;} .qcard .qdue.vencido{color:#9C4A3E;} .qcard .qdue.manana{color:var(--ink);}
.qcard .qcta{margin-top:2px;}
.qcard .qcta .btn{width:100%;}

/* dashboard tiles arreglos */
.qhero{background:linear-gradient(135deg,var(--burgundy) 0%, var(--burgundy-deep) 100%);color:#fff;border-radius:var(--r-lg);
  padding:20px;margin-bottom:18px;position:relative;overflow:hidden;}
.qhero::after{content:"";position:absolute;top:-40px;right:-30px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(217,188,133,.26),transparent 65%);}
.qhero .hi{font-family:var(--f-display);font-size:24px;font-weight:500;letter-spacing:-.01em;position:relative;}
.qhero .sub{font-size:13px;color:rgba(255,255,255,.78);margin-top:3px;position:relative;}
.qhero .nums{display:flex;gap:22px;margin-top:16px;position:relative;}
.qhero .nums .n{display:flex;flex-direction:column;}
.qhero .nums .n b{font-family:var(--f-display);font-size:32px;font-weight:500;line-height:1;}
.qhero .nums .n span{font-size:11.5px;letter-spacing:.04em;color:rgba(255,255,255,.72);margin-top:5px;text-transform:uppercase;font-weight:600;}
.qhero .nums .n.warn b{color:var(--champagne-light);}

/* kanban hint columns header chips on list (segmented vista) */
.vistaseg{display:flex;gap:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:4px;overflow-x:auto;scrollbar-width:none;}
.vistaseg::-webkit-scrollbar{display:none;}
.vistaseg button{flex:none;border:0;background:transparent;color:var(--ink-2);font-size:13px;font-weight:600;padding:7px 14px;border-radius:var(--r-pill);white-space:nowrap;min-height:36px;}
.vistaseg button.on{background:var(--surface);color:var(--burgundy);box-shadow:var(--sh-1);}

/* due cell in table */
.duecell{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-variant-numeric:tabular-nums;}
.duecell .dt{width:6px;height:6px;border-radius:50%;flex:none;}
.duecell.hoy{color:#8B6A37;} .duecell.hoy .dt{background:#C79A5A;}
.duecell.vencido{color:#9C4A3E;} .duecell.vencido .dt{background:#B85B49;}
.duecell.manana{color:var(--ink-2);} .duecell.manana .dt{background:var(--ink-4);}
.duecell.semana{color:var(--ink-3);} .duecell.semana .dt{background:var(--line-strong);}
.duecell.nofecha{color:var(--ink-4);font-weight:500;font-style:italic;} .duecell.nofecha .dt{background:var(--line);}
.duecell.futuro{color:var(--ink-3);} .duecell.futuro .dt{background:var(--line-strong);}

/* ============================================================
   ARREGLOS — mobile card v4 (.acard) per specs/ux-mobile.md §3.2
   Layout: [thumb 60x74] [body] [chev]. Replaces legacy .row-card.
   ============================================================ */
.acard{display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;width:100%;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);
  padding:13px;cursor:pointer;text-decoration:none;color:inherit;}
.acard:active{background:var(--surface-2);}
.acard.dim{opacity:.55;}
.acard .vthumb.lg{width:60px;height:74px;}
.acard .vthumb-empty{background:var(--surface-3);border:1px dashed var(--line-strong);display:block;}
.acard .ac-body{min-width:0;display:flex;flex-direction:column;gap:6px;}
.acard .ac-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.acard .ac-name{font-weight:600;font-size:15.5px;letter-spacing:-.01em;color:var(--ink);line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.acard .ac-sub{font-size:12.5px;color:var(--ink-2);}
.acard .ac-sub .ac-code{color:var(--ink-3);}
.acard .ac-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:1px;}
.acard .ac-tipos{font-size:11.5px;color:var(--ink-3);font-weight:500;}
.acard .ac-chev{color:var(--ink-4);align-self:center;flex:none;display:flex;}

/* ============================================================
   ARREGLOS — drawer detalle v4 (.dsec/.dlabel/.dline/.dkv/...)
   per specs/ux-mobile.md §4. Reuses .cdrawer chrome from form.
   ============================================================ */
.dsec{padding:16px 0;border-bottom:1px solid var(--line-2);}
.dsec:last-child{border-bottom:0;}
.dlabel{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:700;
  display:flex;align-items:center;gap:9px;margin-bottom:11px;}
.dlabel .ring{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--champagne-soft, #D9BC85);flex:none;}
.dlabel .ring.fill{background:var(--champagne-soft, #D9BC85);}
.dname{font-size:17px;font-weight:600;letter-spacing:-.01em;margin-bottom:10px;}
.dline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px;}
.dline .val{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums;}
.dkv{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--line-2);align-items:center;}
.dkv:last-child{border-bottom:0;}
.dkv .k{flex:none;width:118px;font-size:12.5px;color:var(--ink-3);font-weight:600;}
.dkv .v{flex:1;min-width:0;font-size:14px;color:var(--ink);display:flex;align-items:center;gap:8px;}
.dkv .v .muted{color:var(--ink-3);font-style:italic;}
.dkv .v code{font-family:var(--f-body,inherit);font-variant-numeric:tabular-nums;letter-spacing:.02em;}

/* copybtn — secondary inline action button used in dline rows */
.copybtn{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);color:var(--ink-2);
  font-size:11.5px;font-weight:600;padding:4px 9px;display:inline-flex;align-items:center;gap:5px;cursor:pointer;text-decoration:none;}
.copybtn:hover{border-color:var(--line-strong);color:var(--burgundy);}
.copybtn svg{width:13px;height:13px;}

/* Ecuador flag for WhatsApp lines */
.ecflag{display:inline-flex;flex-direction:column;width:15px;height:11px;border-radius:2px;overflow:hidden;
  border:1px solid rgba(0,0,0,.06);flex:none;}
.ecflag .b1{height:5.5px;background:#FFD100;}
.ecflag .b2{height:2.75px;background:#0033A0;}
.ecflag .b3{height:2.75px;background:#CE1126;}

/* quote (instrucciones) */
.cdrawer .quote{background:var(--surface-2);border:1px solid var(--line-2);border-left:3px solid var(--champagne-soft, #D9BC85);
  border-radius:6px;padding:13px 15px;font-size:14px;line-height:1.5;color:var(--ink);}

/* tipos rows: dot burgundy alongside name */
.tiporow .trname .dotb{width:6px;height:6px;border-radius:50%;background:var(--burgundy);flex:none;display:inline-block;}
.tiporow .trbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}

/* multimedia capture row */
.caprow{display:flex;gap:8px;}
.capbtn{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;
  border:1px solid var(--line-strong);background:var(--surface);border-radius:var(--r-md);color:var(--ink);
  font-size:12.5px;font-weight:600;cursor:pointer;}
.capbtn:hover:not([disabled]){border-color:var(--burgundy);color:var(--burgundy);}
.capbtn[disabled]{opacity:.55;cursor:not-allowed;}
.capbtn .ci{width:38px;height:38px;border-radius:50%;background:var(--burgundy-tint, #F4E5DE);color:var(--burgundy);
  display:flex;align-items:center;justify-content:center;}
.capbtn .ci svg{width:20px;height:20px;}

/* media — uploading placeholder cell + lightbox overlay */
.mediacell.uploading{background:var(--surface-2);border-style:dashed;display:flex;align-items:center;justify-content:center;}
.mediacell.uploading .upl-msg{font-size:11px;color:var(--ink-3);font-weight:600;text-align:center;padding:8px;}
.mediacell .media-del{position:absolute;right:4px;top:4px;width:22px;height:22px;border-radius:50%;border:0;
  background:rgba(20,15,13,.65);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;}
.mediacell .media-del:hover{background:rgba(20,15,13,.88);}
.lightbox-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;}
.lightbox-overlay .lb-scrim{position:absolute;inset:0;background:rgba(20,15,13,.85);backdrop-filter:blur(3px);}
.lightbox-overlay .lb-img{position:relative;z-index:1;max-width:92vw;max-height:88vh;border-radius:10px;
  box-shadow:0 18px 60px rgba(0,0,0,.5);object-fit:contain;background:#000;}
.lightbox-overlay .lb-video{position:relative;z-index:1;max-width:92vw;max-height:88vh;border-radius:10px;
  box-shadow:0 18px 60px rgba(0,0,0,.5);background:#000;outline:0;}
/* video cell play overlay */
.mediacell .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#fff;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(0,0,0,.35));}
.mediacell .play svg{filter:drop-shadow(0 2px 8px rgba(0,0,0,.55));opacity:.95;}
.lightbox-overlay .lb-close{position:absolute;top:max(18px,env(safe-area-inset-top));right:18px;z-index:2;
  width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(2px);}
.lightbox-overlay .lb-close:hover{background:rgba(255,255,255,.22);}

/* notas internas — feed con burbujas, textarea + Enviar */
.notesfeed{display:flex;flex-direction:column;gap:8px;}
.notebubble{position:relative;background:var(--surface-2);border:1px solid var(--line-2);border-radius:10px;padding:9px 12px;
  font-size:13.5px;color:var(--ink);line-height:1.45;}
.notebubble .by{font-size:11px;color:var(--ink-3);font-weight:600;margin-bottom:3px;}
.notebubble .nbtxt{white-space:pre-wrap;word-wrap:break-word;}
.notebubble-legacy{border-left:3px solid var(--champagne-soft,#D9BC85);background:var(--surface);}
.notebubble .note-del{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;border:0;
  background:transparent;color:var(--ink-4);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.5;}
.notebubble .note-del:hover{opacity:1;color:var(--burgundy);background:var(--surface-2);}
.notaedit{margin-top:10px;}
.notaedit textarea{width:100%;box-sizing:border-box;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  padding:10px 12px;font-size:14px;line-height:1.4;color:var(--ink);background:var(--surface);resize:vertical;
  min-height:64px;font-family:inherit;}
.notaedit textarea:focus{outline:0;border-color:var(--focus,#9A6B2F);box-shadow:0 0 0 3px rgba(154,107,47,.12);}
.notaedit-foot{display:flex;justify-content:flex-end;margin-top:6px;}
.btn.btn-sm{font-size:12.5px;padding:6px 12px;min-height:0;height:auto;}

/* customer lookup modal (Odoo) */
.customer-lookup-modal{position:fixed;inset:0;z-index:240;display:flex;align-items:center;justify-content:center;padding:16px;}
.customer-lookup-modal .cl-scrim{position:absolute;inset:0;background:rgba(36,31,29,.55);backdrop-filter:blur(2px);}
.customer-lookup-modal .cl-card{position:relative;z-index:1;background:var(--surface);border-radius:var(--r-lg);
  width:100%;max-width:440px;box-shadow:var(--sh-3);overflow:hidden;}
.customer-lookup-modal .cl-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 10px;border-bottom:1px solid var(--line-2);}
.customer-lookup-modal .cl-head h3{margin:0;font-size:16px;font-weight:600;color:var(--ink);}
.customer-lookup-modal .cl-close{width:30px;height:30px;border-radius:6px;border:0;background:transparent;color:var(--ink-3);
  display:flex;align-items:center;justify-content:center;cursor:pointer;}
.customer-lookup-modal .cl-close:hover{background:var(--surface-2);color:var(--ink);}
.customer-lookup-modal .cl-body{padding:14px 18px 18px;}
.customer-lookup-modal .cl-body label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px;}
.customer-lookup-modal .cl-body input{width:100%;box-sizing:border-box;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);padding:10px 12px;font-size:16px;font-family:inherit;background:var(--surface);color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:.04em;}
.customer-lookup-modal .cl-body input:focus{outline:0;border-color:var(--focus,#9A6B2F);box-shadow:0 0 0 3px rgba(154,107,47,.12);}
.customer-lookup-modal .cl-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px;}
.customer-lookup-modal .cl-actions .btn{min-width:96px;}
.customer-lookup-modal .cl-result{margin-top:14px;}
.customer-lookup-modal .cl-result:empty{display:none;}
.customer-lookup-modal .cl-error{background:#FBF0ED;border:1px solid #EBCFC9;color:#8A3F33;padding:9px 12px;border-radius:8px;font-size:13px;}
.customer-lookup-modal .cl-empty{background:var(--surface-2);border:1px solid var(--line-2);color:var(--ink-3);padding:9px 12px;border-radius:8px;font-size:13px;}
.customer-lookup-modal .cl-card-result{background:var(--surface-2);border:1px solid var(--line-2);border-left:3px solid var(--champagne-soft,#D9BC85);
  border-radius:8px;padding:12px 14px;}
.customer-lookup-modal .cl-name{font-size:15.5px;font-weight:600;color:var(--ink);margin-bottom:6px;}
.customer-lookup-modal .cl-meta{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--ink-2);margin-bottom:10px;}
.customer-lookup-modal .cl-card-result .btn{width:100%;}
.customer-lookup-modal .cl-loading{font-size:13px;color:var(--ink-3);font-style:italic;padding:8px 0;}
.customer-lookup-modal .cl-list-head{font-size:11.5px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;}
.customer-lookup-modal .cl-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;max-height:50vh;overflow-y:auto;}
.customer-lookup-modal .cl-row{background:var(--surface-2);border:1px solid var(--line-2);border-radius:8px;padding:10px 12px;cursor:pointer;transition:border-color .15s,background .15s;}
.customer-lookup-modal .cl-row:hover,.customer-lookup-modal .cl-row:active{border-color:var(--burgundy);background:var(--burgundy-tint,#F4E5DE);}
.customer-lookup-modal .cl-row .cl-name{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:4px;}
.customer-lookup-modal .cl-row .cl-meta{font-size:11.5px;color:var(--ink-3);gap:2px;}

/* preview del vestido (thumb + nombre) tras escaneo de código */
.vestido-row{display:flex;align-items:center;gap:10px;}
.vt-thumb{width:48px;height:60px;border-radius:7px;overflow:hidden;flex:none;
  border:1px solid var(--line);background:var(--surface-3);display:flex;align-items:center;justify-content:center;}
.vt-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.vt-thumb.is-empty{border-style:dashed;background:transparent;color:var(--ink-4);}
.vt-thumb.is-empty::after{content:"";display:block;width:18px;height:22px;border:1.5px solid currentColor;
  border-radius:3px;opacity:.4;}

/* barcode scanner — input con botón cámara + overlay full-screen */
.input-with-action{position:relative;}
.cdrawer .input-with-action input{padding-right:44px;}
.scan-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:32px;height:32px;
  border:0;background:transparent;color:var(--ink-3);display:flex;align-items:center;justify-content:center;
  cursor:pointer;border-radius:6px;}
.scan-btn:hover{background:var(--surface-2);color:var(--burgundy);}
.scan-btn:active{transform:translateY(-50%) scale(.92);}
.scanner-overlay{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.92);
  display:flex;align-items:center;justify-content:center;}
.scanner-card{position:relative;width:min(95vw,520px);max-height:90vh;background:#000;border-radius:14px;overflow:hidden;}
.scanner-video{width:100%;height:auto;max-height:80vh;display:block;object-fit:cover;background:#000;}
.scanner-frame{position:absolute;left:8%;right:8%;top:32%;bottom:32%;border:2px solid rgba(255,255,255,.85);
  border-radius:8px;box-shadow:0 0 0 9999px rgba(0,0,0,.45);pointer-events:none;}
.scanner-hint{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:#fff;font-size:13.5px;
  font-weight:500;text-shadow:0 1px 4px rgba(0,0,0,.7);pointer-events:none;}
.scanner-close{position:absolute;top:12px;right:12px;width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;border:0;display:flex;align-items:center;justify-content:center;
  cursor:pointer;backdrop-filter:blur(2px);}
.scanner-close:hover{background:rgba(255,255,255,.22);}

/* bitácora colapsable (zero-JS via <details>) */
.bita details{width:100%;}
.bita details summary{list-style:none;cursor:pointer;}
.bita details summary::-webkit-details-marker{display:none;}
.bita details summary::marker{display:none;content:"";}
.bitatoggle{width:100%;display:flex;align-items:center;gap:10px;background:none;border:0;padding:2px 0;
  font-size:13.5px;font-weight:600;color:var(--ink-2);}
.bitatoggle .ic{color:var(--ink-3);display:flex;}
.bitatoggle .ic svg{width:17px;height:17px;}
.bitatoggle .chev{margin-left:auto;color:var(--ink-3);transition:transform .2s;display:flex;}
.bitatoggle .chev svg{width:18px;height:18px;}
.bita details[open] .bitatoggle .chev{transform:rotate(180deg);}
.bita .timeline{margin-top:12px;}
.bentry{display:flex;gap:12px;padding:2px 0 12px;}
.bentry .bd{flex:none;display:flex;flex-direction:column;align-items:center;padding-top:4px;}
.bentry .bd .dot{width:9px;height:9px;border-radius:50%;background:var(--champagne-soft, #D9BC85);
  border:2px solid var(--surface);box-shadow:0 0 0 1px var(--line-strong);}
.bentry .bd .ln{flex:1;width:1px;background:var(--line);margin-top:3px;min-height:14px;}
.bentry:last-child .bd .ln{display:none;}
.bentry .bt{flex:1;min-width:0;}
.bentry .bt .br{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.bentry .bt .btype{font-size:12.5px;font-weight:700;color:var(--ink);text-transform:capitalize;}
.bentry .bt .bts{font-size:11.5px;color:var(--ink-3);}
.bentry .bt .desc{font-size:13px;color:var(--ink-2);margin-top:3px;display:block;}
.bentry .bt .by{font-size:11.5px;color:var(--ink-3);margin-top:2px;display:block;}
.res{font-size:10px;font-weight:700;padding:2px 7px;border-radius:var(--r-pill);letter-spacing:.02em;display:inline-block;}
.res.ok{background:var(--st-comp-bg, #E9F1EA);color:var(--st-comp-tx, #3F6B49);}
.res.error{background:var(--st-canc-bg, #F8E9E6);color:var(--st-canc-tx, #9C4A3E);}
.res.skipped{background:var(--surface-3);color:var(--ink-3);}

/* footer drawer detalle (espejo del form footer) */
.cdrawer .dfooter .dfp{width:100%;height:46px;}
.cdrawer .dfooter .dfsec{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
.cdrawer .dfooter .dfsec .btn{flex:1 1 calc(50% - 4px);min-width:0;min-height:44px;}

@container app (min-width:1024px){
  .medidas{grid-template-columns:repeat(3,1fr);}
  .qlist-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
}


@container app (min-width:1024px) { .medidas { grid-template-columns: repeat(3, 1fr); } .qlist-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (min-width:1024px) { .medidas { grid-template-columns: repeat(3, 1fr); } .qlist-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } }
/* champagne light alias used by qhero */
:root { --champagne-light: #DDBE8A; }

/* ============================================================
   ARREGLOS — filtros en encabezados de columna (in-header)
   Source: handoff atelier 2 / specs/grid-filtros.md
   ============================================================ */
.tbl.coltbl thead th { position: relative; overflow: visible; }
/* Allow column-header popovers (.thpop) to escape the table rect when tbody is
   short. Otherwise .tbl's overflow:hidden (used for border-radius clipping)
   chops off the popover and visually loses options. */
.tbl.coltbl { overflow: visible; }

/* <details>-based column header dropdown — pure HTML, zero JS for filtering */
.thdrop { display: inline-block; position: relative; }
.thdrop > summary {
  list-style: none;
  cursor: pointer;
  /* remove default disclosure marker */
}
.thdrop > summary::-webkit-details-marker { display: none; }
.thdrop > summary::marker { display: none; content: ""; }
.thdrop[open] > summary .fi svg { transform: rotate(180deg); }
.thdrop > .thpop {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  z-index: 60;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  padding: 7px;
  cursor: default;
}
.thdrop > .thpop.right { left: auto; right: 0; }
.thpop a.opt {
  display: flex; align-items: center; gap: 9px; width: 100%;
  text-decoration: none;
  font-size: 13.5px; font-weight: 500; color: var(--ink);
  padding: 9px 9px; border-radius: var(--r-sm);
  font-family: inherit;
}
.thpop a.opt:hover { background: var(--surface-2); color: var(--burgundy); }
.thpop a.opt.on { background: var(--burgundy-tint); color: var(--burgundy); font-weight: 600; }

/* ============================================================
   ARREGLOS — actions (modal + toast + new button + tipos grid)
   ============================================================ */
.btn-new-arreglo {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  white-space: nowrap;
}

/* Smile-styled confirm modal (used for state transitions + new + assign) */
.smile-modal-wrap {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  animation: smile-modal-in .15s ease;
}
.smile-modal-scrim {
  position: absolute; inset: 0;
  background: rgba(36, 31, 29, .42);
  backdrop-filter: blur(1px);
}
.smile-modal {
  position: relative;
  width: min(440px, 92vw);
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  padding: 22px 22px 18px;
  display: flex; flex-direction: column; gap: 14px;
}
.smile-modal--wide { width: min(560px, 92vw); }
.smile-modal-title {
  font-family: var(--f-display); font-size: 19px; font-weight: 500;
  color: var(--ink); margin: 0; letter-spacing: -.01em;
}
.smile-modal-body {
  display: flex; flex-direction: column; gap: 12px;
  font-size: 13.5px; color: var(--ink-2);
  max-height: 60vh; overflow-y: auto;
}
.smile-modal-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  border-top: 1px solid var(--line-2); padding-top: 14px;
}
.smile-modal-actions .btn { min-width: 110px; }
@keyframes smile-modal-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* Smile toast */
.smile-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
  background: var(--ink); color: #fff;
  padding: 10px 18px; border-radius: var(--r-pill);
  font-size: 13.5px; font-weight: 500;
  box-shadow: var(--sh-2); opacity: 0;
  transition: opacity .2s, transform .2s;
  z-index: 1010;
}
.smile-toast.show { opacity: 1; transform: translate(-50%, 0); }
.smile-toast.error { background: var(--burgundy); }

/* Costurera picker list inside modal */
.pp-list--picker {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 320px; overflow-y: auto; padding-right: 4px;
}
.pp-list--picker .opt {
  display: flex; align-items: center; gap: 9px; width: 100%;
  border: 1px solid var(--line);
  background: var(--surface);
  text-align: left; font-size: 13.5px; font-weight: 500;
  color: var(--ink); padding: 9px 11px; border-radius: var(--r-sm);
  cursor: pointer; font-family: inherit;
}
.pp-list--picker .opt:hover { background: var(--surface-2); border-color: var(--burgundy-tint-2); color: var(--burgundy); }

/* New arreglo: tipos grid */
.smile-modal .ffield input[type="text"],
.smile-modal .ffield input[type="tel"],
.smile-modal .ffield input[type="date"],
.smile-modal .ffield textarea {
  width: 100%;
  padding: 10px 12px;
  font: 500 14px var(--f-body);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
}
.smile-modal .ffield input:focus,
.smile-modal .ffield textarea:focus {
  outline: 0;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(154, 107, 47, .12);
}
.smile-modal .tipos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 6px;
  margin-top: 6px;
}
.smile-modal .tipo-check {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
}
.smile-modal .tipo-check:has(input:checked) {
  background: var(--burgundy-tint);
  color: var(--burgundy);
  border-color: var(--burgundy-tint-2);
  font-weight: 600;
}
.smile-modal .tipo-check input { accent-color: var(--burgundy); }

/* ============================================================
   ARREGLOS — Nuevo / Editar form (side-drawer / bottom-sheet)
   Source: handoff atelier 3 / arreglo-form.jsx + form-arreglo.md
   ============================================================ */
.sheet-overlay {
  /* Overlay con alto del visual viewport (descuenta URL bar de iOS). */
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 100vh;        /* fallback */
  height: 100dvh;       /* visual viewport */
  z-index: 90;
  animation: smile-modal-in .18s ease;
}
.sheet-overlay .sc {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(36, 31, 29, .5);
  backdrop-filter: blur(2px);
}
.cdrawer {
  /* Pin absoluto top/bottom: alto deriva automático, .dbody adentro
     puede flex:1 + overflow:auto sin ambigüedad sobre el alto del padre.
     iOS Safari ahora respeta top:7% del overlay (que tiene 100dvh), no
     del layout viewport. */
  position: absolute;
  left: 0; right: 0;
  top: 7%;
  bottom: 0;
  background: var(--surface);
  display: flex; flex-direction: column;
  width: 100%;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--sh-3);
  overflow: hidden;
}
.cdrawer .grab {
  width: 40px; height: 4px; border-radius: 2px;
  background: var(--line-strong);
  margin: 9px auto 2px;
  flex: none;
}
.cdrawer .dhead {
  flex: none;
  padding: 10px 16px 14px;
  border-bottom: 1px solid var(--line-2);
  display: flex; align-items: flex-start; gap: 10px;
}
.cdrawer .dh-txt { flex: 1; min-width: 0; }
.cdrawer .dh-txt .t { display: flex; align-items: center; gap: 10px; }
.cdrawer .dh-txt h2 {
  margin: 0; font-size: 19px; font-weight: 600;
  letter-spacing: -.01em; color: var(--ink);
  font-family: var(--f-display);
}
.cdrawer .dh-txt .sub { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.cdrawer .dh-tools { display: flex; gap: 4px; flex: none; }
.cdrawer .iconbtn {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: none; cursor: pointer;
  border-radius: var(--r-sm); color: var(--ink-3);
}
.cdrawer .iconbtn:hover { background: var(--surface-2); color: var(--ink); }
.cdrawer .dbody {
  flex: 1; min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 14px 16px 16px;
}
.cdrawer .dfooter {
  flex: none;
  border-top: 1px solid var(--line);
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  background: var(--surface);
  display: flex; flex-direction: column; gap: 8px;
}
.cdrawer .dfp { width: 100%; height: 46px; }
.cdrawer .dfsec { display: flex; justify-content: center; }
/* (removed) override de .btn-sec a estilo ghost: hacía ver "desactivado" el
   botón Editar del drawer detalle. Volvemos al .btn-sec estándar (surface bg
   + border + tinta), consistente con el resto de la app. */

/* Desktop: turn into right-side drawer */
@media (min-width: 720px) {
  .sheet-overlay { align-items: stretch; }
  .cdrawer {
    width: 560px;
    top: 0;
    height: 100%;
    border-radius: 0;
    margin-left: auto;
  }
  .cdrawer .grab { display: none; }
  .cdrawer .dhead { padding: 20px 22px 16px; }
  .cdrawer .dbody { padding: 14px 22px 18px; }
  .cdrawer .dfooter { padding: 14px 22px; }
}

/* Form grid + fields inside the drawer */
.cdrawer .formgrid {
  display: flex; flex-direction: column; gap: 14px;
}
.cdrawer .fld label {
  display: block;
  font-size: 12.5px; font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.cdrawer .fld input[type="text"],
.cdrawer .fld input[type="tel"],
.cdrawer .fld input[type="email"],
.cdrawer .fld input[type="search"],
.cdrawer .fld input[type="date"],
.cdrawer .fld textarea,
.cdrawer .fld select.selctl {
  display: block;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  max-width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font: 500 16px var(--f-body); /* 16px evita zoom en iOS */
  color: var(--ink);
  background: var(--surface);
}
/* iOS Safari: el control date nativo tiene intrinsic width + chrome interno
   que ignora padding/width estándar. Esto lo fuerza a comportarse como input
   normal y respetar el container. */
.cdrawer .fld input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  height: 44px; /* fixed height en lugar de min-height */
  line-height: 1.2;
  text-align: left;
  /* Sin esto, en iOS el value se centra y empuja el ancho del input */
  font-family: inherit;
}
/* iOS Safari específico: el value y el placeholder tienen su propio chrome
   con padding interno. Alineamos a la izquierda y limitamos. */
.cdrawer .fld input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  min-width: 0;
}
.cdrawer .fld input[type="date"]::-webkit-datetime-edit {
  display: block;
  padding: 0;
  min-width: 0;
}
.cdrawer .fld input[type="date"]::-webkit-calendar-picker-indicator {
  margin-left: auto;
  padding: 0;
  opacity: 0; /* hide native, dibujamos uno propio via .input-with-icon */
}
/* Ícono custom para input[type=date] — el SVG es no-interactivo (pointer-events:none),
   tap en cualquier parte del input abre el picker. */
.input-with-icon { position: relative; }
.cdrawer .input-with-icon input[type="date"] { padding-right: 40px; }
.input-with-icon .input-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
/* Container: nos aseguramos que la .fld no permite overflow del child */
.cdrawer .fld {
  min-width: 0;
  overflow: hidden;
}
.cdrawer .fld input:focus,
.cdrawer .fld textarea:focus,
.cdrawer .fld select.selctl:focus {
  outline: 0;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(154, 107, 47, .12);
}
.cdrawer .fld.two { display: flex; gap: 10px; flex-wrap: wrap; }
.cdrawer .fld.two > div { min-width: 0; flex-basis: calc(50% - 5px); }
.cdrawer .fld.two > div label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; display: block; }
@media (max-width: 479px) {
  .cdrawer .fld.two { flex-direction: column; }
  .cdrawer .fld.two > div { flex-basis: auto; }
}
.cdrawer .optx { color: var(--ink-3); font-weight: 400; font-size: 11.5px; }

/* Tipos chips */
.cdrawer .tipos { display: flex; flex-wrap: wrap; gap: 7px; }
.cdrawer .tchip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-2);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 500;
  cursor: pointer; font-family: inherit;
  min-height: 32px;
}
.cdrawer .tchip:hover { border-color: var(--burgundy-tint-2); color: var(--burgundy); }
.cdrawer .tchip.on { background: var(--burgundy); color: #fff; border-color: var(--burgundy); }

/* Tipo edit cards */
.tipoedit-list {
  display: flex; flex-direction: column;
  gap: 8px; margin-top: 11px;
}
.tipoedit {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px 12px;
}
.tipoedit[hidden] { display: none; }
.tipoedit .te-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.tipoedit .te-name {
  font-size: 13px; font-weight: 700;
  color: var(--burgundy); letter-spacing: .01em;
  text-transform: capitalize;
}
.tipoedit .te-x {
  border: 0; background: none;
  color: var(--ink-3); cursor: pointer;
  padding: 2px; border-radius: 6px;
  display: flex;
}
.tipoedit .te-x:hover { color: var(--burgundy); background: var(--surface-3); }
.tipoedit .te-row { display: flex; gap: 9px; }
.tipoedit .te-val { flex: none; width: 130px; }
.tipoedit .te-det { flex: 1; min-width: 0; }
.tipoedit .te-lbl {
  display: block;
  font-size: 10.5px; letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
  margin-bottom: 4px;
}
.tipoedit input {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--surface);
  font-family: inherit;
}
@media (max-width: 480px) {
  .tipoedit .te-row { flex-direction: column; gap: 8px; }
  .tipoedit .te-val { width: 100%; }
}

/* Drawer field grid — labeled rows que matchean el form */
.dbgrid { display: flex; flex-direction: column; gap: 8px; }
.dbf {
  display: grid;
  grid-template-columns: 88px 1fr;
  align-items: baseline;
  gap: 12px;
  padding: 4px 0;
  border-bottom: 1px dashed var(--line);
}
.dbf:last-child { border-bottom: 0; }
.dbk {
  font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3);
}
.dbv {
  font-size: 14px; color: var(--ink);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  min-width: 0;
}
.dbv .db-mono { font-family: var(--mono, ui-monospace, monospace); font-size: 13px; }
.dbempty { color: var(--ink-3); font-style: italic; font-size: 13px; }
@media (max-width: 480px) {
  .dbf { grid-template-columns: 76px 1fr; gap: 10px; }
}

/* Tipos con valor + detalle (drawer detalle) */
.tipodet { display: flex; flex-direction: column; gap: 8px; }
.tiporow {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.trname {
  font-weight: 700; font-size: 13px; color: var(--burgundy);
  letter-spacing: .01em;
}
.trval {
  font-size: 13px; font-weight: 600; color: var(--ink);
  padding: 1px 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.trempty {
  font-size: 12px; color: var(--ink-3); font-style: italic;
}
.trdet {
  font-size: 12px; color: var(--ink-2); flex: 1; min-width: 100%;
  padding-left: 2px;
}

/* Edit button in drawer head */
.drawer-head .dh-tools { display: flex; gap: 6px; align-items: center; }
.dh-edit {
  height: 32px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 12px;
  border: 1px solid var(--burgundy);
  background: #fff;
  color: var(--burgundy);
  cursor: pointer;
  border-radius: var(--r-pill);
  font-family: inherit; font-size: 12px; font-weight: 700;
  letter-spacing: .04em;
}
.dh-edit svg { flex: none; }
.dh-edit:hover { background: var(--burgundy); color: #fff; }
.thbtn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0;
  font-family: inherit; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); cursor: pointer;
}
.thbtn .fi { width: 13px; height: 13px; opacity: .55; flex: none; }
.thbtn:hover { color: var(--ink); }
.thbtn:hover .fi { opacity: .9; }
.thbtn.act { color: var(--burgundy); }
.thbtn.act .fi { opacity: 1; color: var(--burgundy); }
.thbtn .vchip {
  margin-left: 1px; font-size: 10px; font-weight: 700;
  background: var(--burgundy); color: #fff;
  border-radius: var(--r-pill);
  padding: 1px 7px;
  text-transform: none; letter-spacing: 0;
  max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.thpop {
  position: absolute; top: calc(100% + 7px); left: 0; z-index: 60;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  padding: 7px; cursor: default;
}
.thpop.right { left: auto; right: 0; }
.thpop[hidden] { display: none !important; }
.thpop .pp-srch {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 0 11px; height: 40px;
}
.thpop .pp-srch svg { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.thpop .pp-srch input {
  border: 0; outline: 0; background: none;
  font-size: 14px; width: 100%; color: var(--ink);
  font-family: inherit;
}
.thpop .pp-list { max-height: 320px; overflow-y: auto; margin-top: 3px; }
.thpop .opt {
  display: flex; align-items: center; gap: 9px; width: 100%;
  border: 0; background: none; text-align: left;
  font-size: 13.5px; font-weight: 500; color: var(--ink);
  padding: 9px 9px; border-radius: var(--r-sm);
  cursor: pointer; font-family: inherit;
}
.thpop .opt:hover { background: var(--surface-2); }
.thpop .opt.on { background: var(--burgundy-tint); color: var(--burgundy); font-weight: 600; }
.thpop .opt .mav { flex: none; }
.thpop .pp-clear {
  width: 100%; text-align: center; font-size: 12px; font-weight: 600;
  color: var(--ink-3); background: none; border: 0;
  padding: 8px; border-top: 1px solid var(--line-2);
  margin-top: 5px; cursor: pointer; font-family: inherit;
}
.thpop .pp-clear:hover { color: var(--burgundy); }
.thscrim {
  position: fixed; inset: 0; z-index: 55;
  background: transparent;
}
.thscrim[hidden] { display: none !important; }

/* Mobile-only vs desktop-only visibility */
.mobonly { display: flex; }
.deskonly { display: none; }
@container app (min-width: 1024px) {
  .mobonly { display: none !important; }
  .deskonly { display: inline-flex; }
}
@media (min-width: 1024px) {
  .mobonly { display: none !important; }
  .deskonly { display: inline-flex; }
}

/* Toolbar meta row (results count + clear) */
.tb-row-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
}

/* ============================================================
   ARREGLOS — grid formatting fixes (codigo / entrega / tipos)
   ============================================================ */
/* col-id: AR-IMP-XXXX is 12 chars, default 64px wraps. Give it room + nowrap. */
.data-table .col-id {
  width: 112px;
  white-space: nowrap;
}
/* "Entrega" cell text (e.g. "vencido · hace 47 días") must not wrap to two lines */
.data-table td .duecell { white-space: nowrap; }
/* Tipos column: chips wrap as a tight group */
.data-table td .tchip.mini { white-space: nowrap; }
/* Allow long vestido names to ellipsize gracefully on narrow viewports */
.data-table .row-link {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* Toolbar selects line up evenly */
.tb-row-filters .selctl { min-width: 160px; }

/* Clear-filters link in toolbar */
.clear-filters {
  font-size: 12.5px;
  color: var(--burgundy);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  border: 1px dashed var(--line-strong);
}
.clear-filters:hover { background: var(--surface-2); }

/* AJAX loading state for #ar-grid */
#ar-grid { position: relative; transition: opacity .15s; }
#ar-grid.is-loading { opacity: .5; pointer-events: none; }

/* Whole-row clickability: cursor + hover treatment for tr[data-repair] */
.data-table tbody tr[data-repair] { cursor: pointer; }
.data-table tbody tr[data-repair]:hover { background: var(--surface-2); }

/* Vestido cell — thumb + name + code. Uses grid to win specificity wars
   with `.data-table .row-link { display: inline-block }` above. */
.data-table .row-link.vestido-cell,
.vestido-cell {
  display: grid !important;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  max-width: 100%;
  min-width: 0;
  white-space: normal;
}
.vthumb-sm {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--surface-3);
  border: 1px solid var(--line);
}
.vthumb-sm.vthumb-empty {
  display: inline-block;
  background-image: linear-gradient(135deg, var(--surface-2) 0%, var(--surface-3) 100%);
  position: relative;
}
.vthumb-sm.vthumb-empty::after {
  content: "";
  position: absolute;
  inset: 30% 30% 30% 30%;
  background:
    linear-gradient(45deg, transparent 45%, var(--ink-4) 45%, var(--ink-4) 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, var(--ink-4) 45%, var(--ink-4) 55%, transparent 55%);
  opacity: .35;
  border-radius: 2px;
}
.vmeta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.vmeta .vname {
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 280px;
}
.vmeta .vcode {
  color: var(--ink-3);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

/* Mobile row card: thumb left, content right.
   Uses CSS grid (more robust than flex against browser quirks at narrow widths). */
.row-card .rc-body {
  display: grid !important;
  grid-template-columns: 48px 1fr;
  align-items: start;
  gap: 10px;
  margin-top: 8px;
  width: 100%;
}
.row-card .rc-body > .vthumb-sm {
  width: 48px;
  height: 48px;
  display: block;
}
.row-card .rc-body > .rc-text {
  min-width: 0;
  overflow: hidden;
}

/* ============================================================
   FILTER FIELDS (labeled select groups in toolbar)
   ============================================================ */
.tb-row-filters { gap: 12px; align-items: flex-end; }
.ffield {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
}
.ffield .flabel {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-left: 2px;
}
.ffield .selctl { width: 100%; min-width: 0; }
.ffield-actions {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  min-width: 0;
}
.ffield-actions .results-count {
  margin-left: 0;
  font-size: 12.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.ffield-actions .results-count b { color: var(--ink); font-weight: 600; }

/* ============================================================
   PAGER (Arreglos list bottom) — numbered pagination
   ============================================================ */
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 8px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  flex-wrap: wrap;
}
.pg-info {
  font-size: 12.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.pg-info b { color: var(--ink); font-weight: 600; }
.pg-ctl { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.pg-btn, .pg-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: background .15s, border-color .15s, color .15s;
}
.pg-arrow { padding: 0 8px; font-size: 14px; color: var(--ink-2); }
.pg-btn:hover, .pg-num:hover {
  background: var(--surface-2);
  border-color: var(--burgundy-tint-2);
  color: var(--burgundy);
}
.pg-num.on {
  background: var(--burgundy);
  color: #fff;
  border-color: var(--burgundy);
  cursor: default;
  pointer-events: none;
}
.pg-btn.dis {
  color: var(--ink-4);
  background: var(--surface-2);
  border-color: var(--line);
  cursor: not-allowed;
  pointer-events: none;
}
.pg-gap {
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  color: var(--ink-3);
  font-weight: 600;
  user-select: none;
}

@media (max-width: 720px) {
  .pager { flex-direction: column; align-items: stretch; }
  .pg-ctl { justify-content: center; }
  .pg-info { text-align: center; }
}

/* ============================================================
   EVENTOS — module tokens (Fase 1+3)
   ============================================================ */

/* Type pills (used in lists + drawer) */
.tpill { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600;
  padding:3px 9px; border-radius:var(--r-pill); letter-spacing:.01em; white-space:nowrap;
  font-variant-numeric:tabular-nums; }
.tpill .gl { font-size:11px; line-height:1; }
.tpill.t-graduacion  { background:#EFEBE5; color:#7A726A; }
.tpill.t-matrimonio  { background:#F4E5DE; color:#8A3F33; }
.tpill.t-quinceanera { background:#F0EAF1; color:#6A5170; }
.tpill.t-gala        { background:#F3EADF; color:#8B6A37; }
.tpill.t-bautizo     { background:#EBF1ED; color:#3F6B49; }
.tpill.t-otro        { background:#F8E9E6; color:#9C4A3E; }

/* Subhead bajo el título del drawer */
.cdrawer .dh-txt .evhead-sub { font-size:12.5px; color:var(--ink-3); margin-top:3px;
  display:flex; align-items:center; gap:6px; font-weight:500; }

/* ----- TYPE GRID (radio chips de tipo de evento) ----- */
.typegrid { display:grid; grid-template-columns:repeat(3, 1fr); gap:7px; }
@media (max-width: 480px) {
  .typegrid { grid-template-columns:repeat(2, 1fr); }
}
.typeopt { display:flex; align-items:center; gap:8px; padding:10px 11px; min-height:46px;
  border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--surface);
  font-family:inherit; cursor:pointer; text-align:left; transition:border-color .12s, background .12s;
  color:var(--ink); }
.typeopt:hover { border-color:var(--burgundy-tint-2, var(--line-strong)); background:var(--surface-2); }
.typeopt.on { border-color:var(--burgundy); background:var(--burgundy-tint, #FBF0ED); color:var(--burgundy); }
.typeopt .gl { font-size:18px; line-height:1; flex:none; }
.typeopt .tl { font-size:13.5px; font-weight:600; letter-spacing:-.005em; line-height:1.1; }

/* ----- COLEGIO INPUT (button-as-input que dispara el picker) ----- */
.colinput { display:flex; align-items:center; gap:10px; width:100%; height:46px;
  border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--surface);
  padding:0 12px; font-family:inherit; cursor:pointer; text-align:left; color:var(--ink); }
.colinput:hover { border-color:var(--burgundy-tint-2, var(--burgundy)); }
.colinput .ci-ic { color:var(--ink-3); display:flex; flex:none; }
.colinput .ci-tx { flex:1; min-width:0; font-size:14.5px; font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.colinput .ci-tx.ph { color:var(--ink-3); font-weight:400; }
.colinput .ci-search { color:var(--ink-3); display:flex; flex:none; }

.prefillnote { display:inline-flex; align-items:center; gap:5px; font-size:11.5px;
  color:#3F6B49; background:#EBF1ED; padding:3px 8px; border-radius:var(--r-pill);
  margin-top:5px; font-weight:600; }
.prefillnote svg { color:#3F6B49; }

/* ----- COLEGIO PICKER · full-screen (mobile) ----- */
.colfull { position:fixed; inset:0; z-index:100; background:var(--bg);
  display:flex; flex-direction:column; animation:fadein .16s ease; }
.colfull .cf-head { flex:none; display:flex; align-items:center; gap:10px;
  padding:12px 14px; background:var(--surface); border-bottom:1px solid var(--line); }
.colfull .cf-search { flex:1; display:flex; align-items:center; gap:10px;
  background:var(--surface-2); border:1px solid var(--line-strong); border-radius:var(--r-md);
  padding:0 12px; height:46px; }
.colfull .cf-search:focus-within { border-color:var(--focus); box-shadow:0 0 0 3px rgba(154,107,47,.12); }
.colfull .cf-search .ic { color:var(--ink-3); display:flex; flex:none; }
.colfull .cf-search input { border:0; outline:0; background:none; flex:1; min-width:0;
  font-size:15.5px; color:var(--ink); font-family:inherit; }
.colfull .cf-cancel { flex:none; font-size:14px; font-weight:600; color:var(--ink-2);
  background:none; border:0; padding:8px 4px; cursor:pointer; font-family:inherit; }
.colfull .cf-list { flex:1; min-height:0; overflow-y:auto; padding:6px 0 120px;
  -webkit-overflow-scrolling:touch; }

.colopt { display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  border:0; background:none; padding:13px 16px; border-bottom:1px solid var(--line-2);
  cursor:pointer; font-family:inherit; min-height:56px; }
.colopt:hover, .colopt:active { background:var(--surface-2); }
.colopt .cv-ic { width:36px; height:36px; border-radius:10px; background:var(--surface-3);
  color:var(--ink-3); display:flex; align-items:center; justify-content:center; flex:none; }
.colopt .cv-ic svg { width:18px; height:18px; }
.colopt .cv-body { min-width:0; flex:1; }
.colopt .cv-name { font-weight:600; font-size:14.5px; letter-spacing:-.01em;
  color:var(--ink); line-height:1.25; }
.colopt .cv-name em { font-style:normal; color:var(--burgundy);
  background:var(--burgundy-tint, #FBF0ED); border-radius:3px; padding:0 2px; }
.colopt .cv-place { font-size:12.5px; color:var(--ink-3); margin-top:2px; }
.colopt .cv-chev { color:var(--ink-4); flex:none; }

.colfull .cf-create { position:fixed; left:0; right:0; bottom:0;
  padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  background:var(--surface); border-top:1px solid var(--line);
  box-shadow:0 -10px 28px -22px rgba(43,31,29,.5); }
.cc-btn { width:100%; display:flex; align-items:center; gap:11px; border:1px dashed var(--line-strong);
  background:var(--surface-2); border-radius:var(--r-md); padding:13px 14px; text-align:left;
  cursor:pointer; font-family:inherit; }
.cc-btn .ci { width:34px; height:34px; border-radius:9px; background:var(--burgundy-tint, #FBF0ED);
  color:var(--burgundy); display:flex; align-items:center; justify-content:center; flex:none; }
.cc-btn .ct { min-width:0; }
.cc-btn .ct b { display:block; font-size:13.5px; font-weight:600; color:var(--ink); }
.cc-btn .ct span { display:block; font-size:12px; color:var(--ink-3); margin-top:1px; }

/* ----- COLEGIO PICKER · dropdown (desktop) ----- */
.coldrop { position:absolute; top:calc(100% + 5px); left:0; right:0; z-index:70;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--sh-3); overflow:hidden; max-height:340px;
  display:flex; flex-direction:column; }
.coldrop .cf-search { margin:8px; border:1px solid var(--line-strong); border-radius:var(--r-sm);
  display:flex; align-items:center; gap:10px; padding:0 11px; height:42px; background:var(--surface); }
.coldrop .cf-search .ic { color:var(--ink-3); display:flex; }
.coldrop .cf-search input { border:0; outline:0; background:none; flex:1; min-width:0;
  font-size:14px; color:var(--ink); font-family:inherit; }
.coldrop .cd-list { overflow-y:auto; flex:1; min-height:0; }
.coldrop .colopt { padding:11px 13px; min-height:48px; }
.coldrop .colopt .cv-ic { width:30px; height:30px; border-radius:8px; }
.coldrop .colopt .cv-ic svg { width:16px; height:16px; }
.coldrop .cf-create { padding:8px; border-top:1px solid var(--line-2); }
.coldrop .cc-btn { padding:10px 12px; }

/* ----- SOFT WARN (mismo lugar+fecha+tipo) ----- */
.softwarn { display:flex; gap:10px; padding:11px 13px; background:#FBF5E8;
  border:1px solid #E8D9B0; border-left:3px solid #C79A5A; border-radius:var(--r-sm);
  color:#7A5A1E; font-size:13px; line-height:1.45; }
.softwarn .ic { flex:none; color:#C79A5A; display:flex; }
.softwarn .tx { min-width:0; }
.softwarn b { color:#5A4316; font-weight:700; }

@keyframes fadein { from { opacity:0; } to { opacity:1; } }

/* ============================================================
   EVENTOS — Fase 2: grid (cards + table)
   ============================================================ */

/* TBADGE — icono cuadrado por tipo */
.tbadge { width:46px; height:46px; border-radius:13px; display:flex; align-items:center;
  justify-content:center; font-size:22px; line-height:1; flex:none; }
.tbadge.t-graduacion  { background:#EFEBE5; }
.tbadge.t-matrimonio  { background:#F4E5DE; }
.tbadge.t-quinceañera { background:#F0EAF1; }
.tbadge.t-gala        { background:#F3EADF; }
.tbadge.t-bautizo     { background:#EBF1ED; }
.tbadge.t-otro        { background:#F8E9E6; }

/* TPILL — pill de tipo con glifo + label */
.tpill { display:inline-flex; align-items:center; gap:6px; border-radius:var(--r-pill);
  padding:3px 11px 3px 9px; font-size:11.5px; font-weight:600; letter-spacing:.01em;
  line-height:1; white-space:nowrap; }
.tpill .gl { font-size:12.5px; line-height:1; }
.tpill.t-graduacion  { background:#EFEBE5; color:#7A726A; }
.tpill.t-matrimonio  { background:#F4E5DE; color:#8A3F33; }
.tpill.t-quinceañera { background:#F0EAF1; color:#6A5170; }
.tpill.t-gala        { background:#F3EADF; color:#8B6A37; }
.tpill.t-bautizo     { background:#EBF1ED; color:#3F6B49; }
.tpill.t-otro        { background:#F8E9E6; color:#9C4A3E; }

/* EPILL — pill de tiempo al evento */
.epill { display:inline-flex; align-items:center; gap:6px; border-radius:var(--r-pill);
  padding:3px 10px; font-size:11.5px; font-weight:700; letter-spacing:.01em; line-height:1;
  white-space:nowrap; font-variant-numeric:tabular-nums; }
.epill .ed { width:6px; height:6px; border-radius:50%; flex:none; }
.epill.proximo     { background:var(--surface-3); color:var(--ink-2); }
.epill.proximo .ed { background:var(--ink-4); }
.epill.esta_semana     { background:#F6EEDD; color:#8B6A37; }
.epill.esta_semana .ed { background:#C79A5A; }
.epill.manana     { background:#F6E7D2; color:#9A6B2F; }
.epill.manana .ed { background:#C79A5A; box-shadow:0 0 0 3px rgba(199,154,90,.28); }
.epill.hoy     { background:#F3EADF; color:#8B6A37; }
.epill.hoy .ed { background:#B8924F; animation:evpulse 1.6s ease-in-out infinite; }
.epill.pasado     { background:var(--surface-2); color:var(--ink-4); }
.epill.pasado .ed { background:var(--line-strong); }
@keyframes evpulse { 0%, 100% { box-shadow:0 0 0 0 rgba(184,146,79,.5); }
                    50% { box-shadow:0 0 0 4px rgba(184,146,79,0); } }

/* EDATE — fecha display serif columna derecha */
.edate { text-align:right; flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.edate .dnum { font-family:var(--f-display, Georgia, serif); font-size:18px; font-weight:500;
  letter-spacing:-.01em; color:var(--ink); line-height:1; white-space:nowrap; }
.edate .dyr { font-size:11px; color:var(--ink-3); font-weight:600; letter-spacing:.02em; }

/* EVLIST — lista de cards mobile */
.evlist { display:flex; flex-direction:column; gap:11px; padding:6px 0; }

/* ECARD — card de evento */
.ecard { display:grid; grid-template-columns:auto 1fr auto; gap:13px; align-items:start;
  width:100%; text-align:left; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); box-shadow:var(--sh-1); padding:14px; cursor:pointer;
  text-decoration:none; color:inherit; transition:border-color .12s, box-shadow .12s; }
.ecard:hover { border-color:var(--line-strong); box-shadow:var(--sh-2); }
.ecard:active { background:var(--surface-2); }
.ecard.dim { opacity:.62; }
.ecard .ec-body { min-width:0; display:flex; flex-direction:column; gap:7px; padding-top:1px; }
.ecard .ec-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ecard .ec-name { font-weight:600; font-size:15.5px; letter-spacing:-.01em; color:var(--ink);
  line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ecard .ec-place { font-size:12.5px; color:var(--ink-2); display:flex; align-items:center; gap:6px; }
.ecard .ec-place .pin { color:var(--ink-4); display:flex; }
.ecard .ec-place .pin svg { width:13px; height:13px; }
.ecard .ec-place .muted { color:var(--ink-3); }
.ecard .ec-right { display:flex; flex-direction:column; align-items:flex-end; gap:7px; flex:none; }

/* ETHUMBS — strip de miniaturas al pie de la card */
.ethumbs { display:flex; align-items:center; gap:6px; margin-top:3px; }
.ethumbs .et-strip { display:flex; }
.ethumbs .et-strip img { width:30px; height:38px; border-radius:6px; object-fit:cover;
  border:1.5px solid var(--surface); margin-left:-7px; background:var(--surface-3);
  box-shadow:0 1px 2px rgba(43,31,29,.12); }
.ethumbs .et-strip img:first-child { margin-left:0; }
.ethumbs .et-more { width:30px; height:38px; border-radius:6px; border:1.5px solid var(--surface);
  margin-left:-7px; background:var(--surface-3); color:var(--ink-2); display:flex; align-items:center;
  justify-content:center; font-size:11px; font-weight:700; font-variant-numeric:tabular-nums;
  box-shadow:0 1px 2px rgba(43,31,29,.12); }
.ethumbs .et-count { font-size:12px; color:var(--ink-3); font-weight:600; margin-left:5px; }
.ethumbs .et-count b { color:var(--ink-2); }
.ethumbs.empty { font-size:12px; color:var(--ink-4); font-style:italic; }

/* TABLE — desktop ≥1024 */
.ev-table-wrap { display:none; margin-top:10px; }
.ev-table-wrap .tbl { border-collapse:separate; border-spacing:0; width:100%;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; }
.ev-table-wrap .tbl thead th { text-align:left; font-size:11.5px; font-weight:600;
  color:var(--ink-3); letter-spacing:.04em; text-transform:uppercase;
  background:var(--surface-2); border-bottom:1px solid var(--line); padding:11px 14px; }
.ev-table-wrap .tbl tbody td { padding:13px 14px; border-bottom:1px solid var(--line-2);
  font-size:13.5px; color:var(--ink); vertical-align:middle; }
.ev-table-wrap .tbl tbody tr:last-child td { border-bottom:0; }
.ev-table-wrap .tbl tbody tr:hover { background:var(--surface-2); }
.ev-table-wrap .tbl tbody tr.dim { opacity:.6; }
.ev-table-wrap .tbl .evtipo { display:inline-flex; align-items:center; gap:8px; }
.ev-table-wrap .tbl .evtipo .tbadge { width:30px; height:30px; border-radius:9px; font-size:15px; }
.ev-table-wrap .tbl .evdate { font-variant-numeric:tabular-nums; white-space:nowrap; }
.ev-table-wrap .tbl .evdate .rel { font-size:12px; color:var(--ink-3); margin-top:4px; }
.ev-table-wrap .tbl td .vcount { font-family:var(--f-display, Georgia, serif); font-size:18px;
  font-weight:500; color:var(--ink); }
.ev-table-wrap .tbl td .lastsale { font-size:12.5px; color:var(--ink-2); }
.ev-table-wrap .tbl td .lastsale .who { font-weight:600; }
.ev-table-wrap .tbl td .lastsale .ago { color:var(--ink-3); font-size:11.5px; margin-top:1px; }

/* Responsive: tabla desde 1024px, cards debajo */
@media (min-width: 1024px) {
  .evlist { display:none; }
  .ev-table-wrap { display:block; }
}

/* ============================================================
   EVENTOS — drawer detalle (Fase 2.5)
   ============================================================ */
.vlist { display:flex; flex-direction:column; }
.vmini { display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start;
  padding:12px 0; border-bottom:1px solid var(--line-2); }
.vmini:last-child { border-bottom:0; }
.vmini > img { width:46px; height:58px; border-radius:8px; object-fit:cover;
  border:1px solid var(--line); background:var(--surface-3); flex:none; }
.vmini .vm-body { min-width:0; display:flex; flex-direction:column; gap:3px; }
.vmini .vm-name { font-weight:600; font-size:14px; letter-spacing:-.01em; color:var(--ink); line-height:1.25; }
.vmini .vm-code { font-size:11.5px; color:var(--ink-3); font-weight:600; font-variant-numeric:tabular-nums; }
.vmini .vm-cli { font-size:13px; color:var(--ink-2); margin-top:2px;
  display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.vmini .vm-rol { font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--burgundy); background:var(--burgundy-tint, #FBF0ED); border-radius:var(--r-pill); padding:2px 8px; }
.vmini .vm-meta { font-size:11.5px; color:var(--ink-3); margin-top:3px; }

/* ============================================================
   MOBILE — forzar font-size 16px en inputs para evitar auto-zoom
   de iOS Safari cuando el field tiene < 16px y se hace focus.
   Una vez zoomeado, el form se ve descuadrado.
   ============================================================ */
@media (max-width: 720px) {
  .app .searchbar input,
  .app .toolbar input,
  .app input[type="text"],
  .app input[type="search"],
  .app input[type="tel"],
  .app input[type="email"],
  .app input[type="number"],
  .app input[type="date"],
  .app input[type="datetime-local"],
  .app textarea,
  .app select,
  .app .selctl select { font-size: 16px !important; }
}

/* ============================================================
   EVENTOS — lightbox de vestido vendido (Fase 2.5)
   ============================================================ */
.ev-lightbox { position:fixed; inset:0; z-index:300; display:flex;
  align-items:center; justify-content:center; padding:24px;
  animation:fadein .15s ease;
  overscroll-behavior:contain;
  touch-action:manipulation; }
.ev-lightbox .evlb-scrim { position:absolute; inset:0; background:rgba(20,15,13,.86);
  backdrop-filter:blur(3px); }
.ev-lightbox .evlb-close { position:absolute; top:max(18px, env(safe-area-inset-top));
  right:18px; width:42px; height:42px; border-radius:50%; border:0;
  background:rgba(255,255,255,.14); color:#F4EEE6; display:flex;
  align-items:center; justify-content:center; cursor:pointer; z-index:2; }
.ev-lightbox .evlb-close:hover { background:rgba(255,255,255,.22); }

.ev-lightbox .evlb-fig { position:relative; z-index:1; margin:0;
  max-width:min(480px, 92vw); max-height:88vh; display:flex; flex-direction:column;
  gap:14px; align-items:center; }
.ev-lightbox .evlb-fig img { max-width:100%; max-height:62vh; height:auto;
  width:auto; border-radius:14px; background:#241F1D;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.5); object-fit:contain; }

.ev-lightbox .evlb-meta { width:100%; max-width:380px; text-align:center;
  color:#F4EEE6; display:flex; flex-direction:column; gap:6px; padding:0 10px; }
.ev-lightbox .evlb-vest { font-size:16.5px; font-weight:600; letter-spacing:-.01em;
  line-height:1.25; color:#FFF; }
.ev-lightbox .evlb-code { font-size:12px; color:rgba(244,238,230,.62);
  font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:.04em; }
.ev-lightbox .evlb-cap { margin-top:6px; padding-top:10px;
  border-top:1px solid rgba(255,255,255,.12); display:flex; flex-direction:column; gap:3px; }
.ev-lightbox .evlb-lead { font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(244,238,230,.55); }
.ev-lightbox .evlb-lead.muted { color:rgba(244,238,230,.4); }
.ev-lightbox .evlb-cli { font-size:15px; font-weight:600; color:#FFF;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
.ev-lightbox .evlb-rol { font-size:10.5px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; background:rgba(255,255,255,.18); color:#FFF;
  padding:3px 9px; border-radius:var(--r-pill); }

/* ============================================================
   3 botones en una sola fila en el footer del drawer de arreglos
   (Editar / Completar / Borrar). Anula el flex-basis 50% que
   estaba pensado para 2 botones. (2026-06-13)
   ============================================================ */
.cdrawer .dfooter .dfsec { flex-wrap: nowrap !important; }
.cdrawer .dfooter .dfsec .btn { flex: 1 1 0 !important; min-width: 0 !important; padding-left: 10px !important; padding-right: 10px !important; white-space: nowrap !important; }