/* PRODUCTION OS · sistema de diseño · identidad Aeroméxico (v4) */
:root{
  /* ===== ESTRUCTURA · marino (sidebar, barra inferior, header, portadas, panel seleccionado, progreso) ===== */
  --navy:#040C3E; --navy-2:#0B1550; --navy-3:#182463;
  --navy-tint:rgba(4,12,62,.06); --navy-tint-2:rgba(4,12,62,.10);

  /* ===== ACCIÓN · rosa, exclusivo (acción principal, FAB, selección, indicador activo, dato clave) ===== */
  --pink:#D32D6B; --pink-d:#B31F57; --pink-t:#FBE1EB; --pink-50:#FDF1F6;

  /* Alias heredados "--blue*" = ESTRUCTURA marino (links, tints, bordes, entidades).
     El azul NO decora; la acción rosa se aplica explícita donde toca. */
  --blue:#040C3E; --blue-d:#0B1550; --blue-t:rgba(4,12,62,.05); --blue-t2:#E4E9F3;

  /* ESTADO · solo verde/amarillo/rojo (hex del sistema aprobado) */
  --ok:#22C55E;   --ok-tx:#15803D; --ok-t:#E4F6EA;    /* hecho · listo */
  --warn:#F59E0B; --warn-tx:#B45309; --warn-t:#FBEFDD; /* falta · esperando */
  --bad:#EF4444;  --bad-tx:#B91C1C; --bad-t:#FADFDF;   /* problema · actuar */
  --off:#8A93A6;  --off-tx:#5B6474; --off-t:#EDEFF3;   /* inactivo · no aplica */
  --red:#EF4444;  --red-tx:#B91C1C; --red-t:#FADFDF;   /* alias */

  /* ENTIDAD · marca discreta de identificación, nunca estado */
  --e-bloque:#7B61FF; --e-locacion:#0E9384; --e-jornada:#475467;

  --ink:#111827; --mute:#5B6474;
  /* SUPERFICIES · tres niveles: fondo azulado · agrupador · card blanca (solo cuando se eleva) */
  --bg:#EEF1F7; --card:#FFFFFF; --soft:#F3F6FB; --group:#E4E9F2;
  --line:#E4E8F0; --line-2:#D6DCEA;

  /* ESQUINAS · un solo lenguaje: tarjetas 18 · paneles 20 · botones/inputs 14 */
  --r-card:18px; --r-panel:20px; --r-btn:14px; --r-input:14px;
  --r:16px; --r-sm:12px;

  /* SOMBRAS · suavísimas, tintadas de marino */
  --sh:0 1px 2px rgba(16,24,40,.05), 0 8px 24px -14px rgba(4,12,62,.12);
  --sh-2:0 18px 44px -18px rgba(4,12,62,.24);
  --font:"Poppins","Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font);line-height:1.5;-webkit-font-smoothing:antialiased;font-size:15px}
a{color:var(--blue);text-decoration:none}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.015em}
h1{font-size:22px} h2{font-size:22px} h3{font-size:17px}
.mute{color:var(--mute)} .small{font-size:13px} .tiny{font-size:11px}
.right{text-align:right} .center{text-align:center}
.nowrap{white-space:nowrap}

/* ---- shell ---- */
.shell{display:flex;min-height:100vh}
.side{width:208px;flex:none;background:var(--navy);padding:16px 12px;display:flex;flex-direction:column;gap:2px}
.brand{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#fff;font-weight:600;padding:4px 10px 14px}
.pj{background:rgba(255,255,255,.06);border-radius:11px;padding:9px 11px;margin-bottom:11px;border:0}
.pj .k{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:600}
.pj .v{font-size:12.5px;font-weight:600;margin-top:3px;line-height:1.3;color:#fff}
.pj a{font-size:11.5px;color:rgba(255,255,255,.66)}
.pj a:hover{color:#fff}
.mi{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:10px;font-size:13px;color:rgba(255,255,255,.6);font-weight:500;position:relative}
.mi:hover{background:rgba(255,255,255,.06);color:#fff}
.mi.on{background:rgba(255,255,255,.09);color:#fff;font-weight:600}
.mi.on::before{content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:3px;height:18px;border-radius:0 3px 3px 0;background:var(--pink)}
.side .sep{height:1px;background:rgba(255,255,255,.1);margin:11px 4px}
.main{flex:1;min-width:0;padding:20px 24px 80px;max-width:1180px}
.topbar{display:none}
.tabbar{display:none}

/* ---- page head ---- */
.phead{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.phead .sub{font-size:13px;color:var(--mute);margin-top:2px}

/* ---- cards ---- */
.card{background:var(--card);border-radius:var(--r-card);box-shadow:var(--sh);padding:18px 20px;margin-bottom:14px;border:1px solid var(--line)}
.card.tight{padding:14px 16px}
.card h3{margin-bottom:12px}
.lbl{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:600;margin:0 0 12px}

/* ---- kpis ---- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.kpi{background:var(--card);border-radius:var(--r-card);box-shadow:var(--sh);border:1px solid var(--line);padding:14px 16px;display:flex;flex-direction:column;gap:1px}
.kpi .k{font-size:11.5px;color:var(--mute)}
.kpi .v{font-size:22px;font-weight:650;letter-spacing:-.02em;color:var(--ink)}
.kpi .v.ok{color:var(--ok)} .kpi .v.warn{color:var(--warn)} .kpi .v.bad{color:var(--bad)}
.kpi .v.b{color:var(--ink)} .kpi .v.r{color:var(--bad)}
.kpi .d{font-size:11.5px;color:var(--mute);margin-top:2px}

/* ---- buttons ---- */
.btn{display:inline-block;font:inherit;font-size:13.5px;font-weight:550;border-radius:var(--r-btn);padding:11px 18px;border:0;cursor:pointer;text-align:center;transition:transform .08s ease,filter .15s ease,background .15s ease}
.btn:active{transform:scale(.97)}
.btn:hover{filter:brightness(.98)}
.btn:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.btn-pri{background:var(--pink);color:#fff;box-shadow:0 8px 18px -8px rgba(211,45,107,.55)}
.btn-pri:hover{background:var(--pink-d);filter:none}
.btn-sec{background:var(--navy-tint-2);color:var(--ink)}
.btn-out{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn-neg{background:var(--red-t);color:var(--red)}
.btn-sm{padding:7px 12px;font-size:12.5px}
.btn-block{display:block;width:100%}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* ---- menú "⋯" · acciones secundarias/destructivas ocultas ---- */
.mas{position:relative;display:inline-block}
.mas>summary{list-style:none;cursor:pointer;width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--mute);font-size:17px;line-height:1;transition:background .15s ease,color .15s ease}
.mas>summary::-webkit-details-marker,.mas>summary::marker{display:none;content:""}
.mas>summary:hover{background:var(--soft);color:var(--ink)}
.mas[open]>summary{background:var(--line);color:var(--ink)}
.mas-menu{position:absolute;right:0;top:36px;z-index:30;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-2);padding:5px;min-width:180px;display:flex;flex-direction:column;gap:1px;animation:detIn .16s ease}
.mas-menu form{display:block;margin:0}
.mas-menu .btn,.mas-menu a.item{display:block;width:100%;text-align:left;background:transparent;color:var(--ink);box-shadow:none;font-weight:500;font-size:13.5px;padding:9px 11px;border-radius:9px}
.mas-menu .btn:hover,.mas-menu a.item:hover{background:var(--soft);filter:none}
.mas-menu .btn:active{transform:none}
.mas-menu .btn-neg{color:var(--bad)}
.mas-menu .btn-neg:hover{background:var(--bad-t)}

/* ---- chips ---- */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:100px;line-height:1.35}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.chip.sin-punto::before{display:none}
.c-ok{background:var(--ok-t);color:var(--ok-tx)}
.c-warn{background:var(--warn-t);color:var(--warn-tx)}
.c-bad{background:var(--bad-t);color:var(--bad-tx)}
.c-off{background:var(--off-t);color:var(--off-tx)}
.c-info{background:var(--blue-t2);color:var(--blue-d)}
/* alias heredados para no romper pantallas viejas */
.c-blue{background:var(--blue-t2);color:var(--blue-d)}
.c-red{background:var(--bad-t);color:var(--bad-tx)}
.c-gray{background:var(--off-t);color:var(--off-tx)}

/* ---- forms ---- */
.form{display:flex;flex-direction:column;gap:13px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:13px}
.fld{display:flex;flex-direction:column;gap:6px}
.fld label{font-size:11.5px;color:var(--mute);font-weight:500}
.fld input,.fld select,.fld textarea{font:inherit;font-size:15px;padding:12px 14px;border:0;border-radius:var(--r-input);background:var(--card);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink);width:100%}
.fld textarea{min-height:80px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;box-shadow:inset 0 0 0 2px var(--pink)}
.fld input[type=file]{padding:9px;font-size:13px}

/* ---- tables ---- */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th,td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
thead th{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);font-weight:600;white-space:nowrap}
td.n,th.n{text-align:right;white-space:nowrap}
tbody tr:hover td{background:var(--soft)}
tfoot td{background:var(--blue-t);font-weight:600;border-bottom:0}
tfoot td.g{color:var(--blue)}
tr.cs-esc td{background:var(--soft);border-top:1.5px solid var(--line-2);font-size:12px;letter-spacing:.02em;padding-top:12px}
.tblcard{background:var(--card);border-radius:var(--r-card);box-shadow:var(--sh);overflow:hidden;margin-bottom:16px}
.tblcard .th{padding:15px 18px 0}
/* Celular: en tablas anchas fija Nombre (izq.) y las acciones (der.); sólo scrollea
   el centro. Así Editar/Quitar/Estatus nunca quedan escondidos tras el scroll. */
@media (max-width:860px){
  .tblcard .tscroll td:first-child, .tblcard .tscroll thead th:first-child{
    position:sticky;left:0;z-index:1;background:var(--card);box-shadow:7px 0 10px -8px rgba(4,12,62,.14)}
  .tblcard .tscroll td:last-child, .tblcard .tscroll thead th:last-child{
    position:sticky;right:0;z-index:1;background:var(--card);box-shadow:-7px 0 10px -8px rgba(4,12,62,.16)}
}
/* Financiero maestro · Total general SIEMPRE arriba (no hay que deslizar la matriz). */
.fin-total{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  background:var(--card);border:1px solid var(--line);border-left:4px solid var(--pink,#D32D6B);
  border-radius:var(--r-card);padding:16px 20px;margin-bottom:16px;box-shadow:var(--sh)}
.fin-total .ft-main{display:flex;flex-direction:column;gap:3px}
.fin-total .ft-main .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--mute);font-weight:700}
.fin-total .ft-main b{font-size:30px;font-weight:800;color:var(--ink);line-height:1;letter-spacing:-.01em}
.fin-total .ft-sub{display:flex;flex-wrap:wrap;gap:20px}
.fin-total .ft-sub div{font-size:11.5px;color:var(--mute);display:flex;flex-direction:column;gap:1px}
.fin-total .ft-sub span{font-size:15px;font-weight:700;color:var(--ink)}
@media(max-width:640px){ .fin-total{padding:14px 16px;gap:12px} .fin-total .ft-main b{font-size:25px} .fin-total .ft-sub{gap:14px;width:100%} }

/* Teléfono llamable en Equipo (un toque marca en el celular). */
.tel-a{display:inline-flex;align-items:center;gap:5px;margin-top:3px;font-size:12.5px;font-weight:600;color:var(--ok-tx);text-decoration:none}
.tel-a svg{width:13px;height:13px;flex:none}
.tel-a:hover{text-decoration:underline}

/* ---- progreso ---- */
.track{height:7px;border-radius:100px;background:#EFEFEF;overflow:hidden}
.track i{display:block;height:100%;background:var(--blue)}
.track i.r{background:var(--red)}

/* ---- listas ---- */
.lrow{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.lrow:last-child{border-bottom:0}
.lrow .tx{flex:1;min-width:0}
.lrow .t1{font-size:14px;font-weight:500}
.lrow .t2{font-size:11.5px;color:var(--mute);margin-top:1px}
.lrow .amt{font-weight:600;white-space:nowrap}
.lrow .amt.r{color:var(--red)}

.empty{text-align:center;padding:36px 18px;color:var(--mute)}
.empty h3{color:var(--ink);margin-bottom:6px}
/* Estado vacío que enseña */
.empty2{text-align:center;padding:44px 24px}
.empty2 .es-ico{width:56px;height:56px;margin:0 auto 15px;border-radius:16px;background:var(--soft);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--mute)}
.empty2 .es-ico svg{width:26px;height:26px}
.empty2 h3{font-size:18px;margin-bottom:7px;color:var(--ink)}
.empty2 p{max-width:360px;margin:0 auto;font-size:14px;line-height:1.5;color:var(--mute)}
.empty2 .es-acc{justify-content:center;margin-top:16px}
.flash{background:var(--blue-t2);color:var(--blue-d);padding:12px 16px;border-radius:var(--r-sm);margin-bottom:16px;font-size:13.5px}

/* ---- login ---- */
.authwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:22px}
.authbox{width:100%;max-width:390px;background:var(--card);border-radius:18px;box-shadow:var(--sh-2);padding:30px}

/* ================= MÓVIL ================= */
@media (max-width:860px){
  .shell{display:block}
  .side{display:none}
  .topbar{display:flex;align-items:center;gap:12px;background:var(--navy);border-bottom:0;padding:12px 16px;position:sticky;top:0;z-index:20}
  .topbar .t{font-size:15px;font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff}
  .topbar a{font-size:12.5px;color:rgba(255,255,255,.82)}
  .main{padding:16px 14px 96px}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;background:var(--navy);border-top:0;padding:8px 0 max(11px,env(safe-area-inset-bottom));z-index:30}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;color:rgba(255,255,255,.55);font-size:10px;font-weight:600}
  .tabbar a.on{color:#fff}
  .tabbar a.on svg{color:var(--pink)}
  .tabbar svg{width:21px;height:21px}
  .phead{margin-bottom:14px}
  .card{padding:15px}
  th,td{padding:10px 9px}
  .btn{padding:12px 16px}
}
/* Móvil: filas densas se apilan en vez de encimarse (Checklist, Programar jornadas, listas). */
@media (max-width:640px){
  .ci-row{flex-wrap:wrap}
  .ci-row .ci-tx{flex:1 1 calc(100% - 40px);min-width:0}
  .ci-row .af{flex:1 1 auto;min-width:130px}
  .ci-row .af select,.ci-row .af input{width:100%}
  .lrow{flex-wrap:wrap}
  .lrow>.row{flex-wrap:wrap;width:100%;gap:6px}
  /* Gantt en celular: la columna de nombres no debe comerse la pantalla; se
     acota y los nombres se envuelven para que el gráfico tenga espacio. */
  .gantt td.nom,.gantt th.nom{width:120px;min-width:120px;max-width:120px;white-space:normal;overflow-wrap:anywhere;line-height:1.18;padding-right:8px}
  .gantt tr.sub td.nom{padding-left:12px}
  /* Tablas anchas → tarjetas apiladas en celular (Shot list): cada fila es una
     tarjeta y cada dato trae su etiqueta; se acaba el deslizar horizontal. */
  .cards-movil .tscroll{overflow-x:visible}
  .cards-movil table{min-width:0}
  .cards-movil thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cards-movil table,.cards-movil tbody,.cards-movil tr,.cards-movil td{display:block;width:auto}
  .cards-movil tr{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:9px 12px;margin:0 0 10px;box-shadow:var(--sh)}
  .cards-movil td{border:0;padding:3px 0;display:flex;gap:10px;align-items:baseline;font-size:13px;max-width:none!important;white-space:normal}
  .cards-movil td::before{content:attr(data-label);flex:0 0 82px;color:var(--mute);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;line-height:1.5}
  .cards-movil td[data-label=""]::before{display:none}
  .cards-movil td[data-label="Toma"]{flex-direction:column;gap:3px;font-weight:600;font-size:15px;margin-bottom:2px}
  .cards-movil td[data-label="Toma"]::before{flex-basis:auto;font-weight:700}
  .cards-movil td.acciones{justify-content:flex-end;gap:8px;margin-top:7px;padding-top:8px;border-top:1px solid var(--line)}
  .cards-movil td.acciones .af{margin:0}
}

/* ===== MAPA MENTAL (estilo Suite Global) ===== */
.mm-wrap{overflow:auto;padding:6px 2px 14px}
.mm-tree{display:flex;align-items:flex-start;gap:10px;min-width:max-content}
.mm-rama{display:flex;flex-direction:column;gap:7px}
.mm-hijos{display:flex;flex-direction:column;gap:7px;padding-left:22px;border-left:1px dashed var(--line-2);margin-left:11px}
.mm-fila{display:flex;align-items:flex-start;gap:0}
.mm-node{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border:1px solid var(--line-2);
  border-radius:10px;background:var(--card);min-width:150px;max-width:280px;text-decoration:none;color:inherit;
  box-shadow:var(--sh);transition:box-shadow .15s}
.mm-node:hover{box-shadow:0 0 0 2px var(--blue)}
.mm-node .t{font-weight:600;font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm-node .m{font-size:10.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm-proyecto{min-width:250px;max-width:340px;padding:13px 15px;border-radius:12px;border-color:var(--blue)}
.mm-proyecto .t{font-size:16px;font-weight:600;white-space:normal}
.mm-etapa{border-left:3px solid var(--blue)}
.mm-bloque{border-left:3px solid #7B61FF}
.mm-jornada{border-left:3px solid var(--mute)}
.mm-jornada.es-rodaje{border-left-color:var(--blue)}
.mm-jornada.es-buffer{border-left-color:var(--red)}
.mm-loc{border-left:3px solid #16A34A}

/* ===== GANTT ===== */
.gantt{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* border-collapse:separate (no collapse) para que el fondo de la columna
   pegajosa SÍ se pinte en iOS Safari y las barras no se vean bajo las letras. */
.gantt table{min-width:760px;border-collapse:separate;border-spacing:0}
.gantt th,.gantt td{border-bottom:1px solid var(--line);padding:7px 6px;font-size:12px}
.gantt th.mes{text-align:center;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);min-width:44px}
.gantt td.nom,.gantt th.nom{white-space:nowrap;font-weight:500;padding-right:12px;position:sticky;left:0;background:var(--card);z-index:2;box-shadow:7px 0 10px -8px rgba(4,12,62,.14)}
.gantt .celda{padding:0;height:26px}
.gantt .barra{height:14px;border-radius:100px;background:var(--blue);opacity:.9}
.gantt .barra.bloque{background:#7B61FF;height:11px}
.gantt .barra.hoy{outline:2px solid var(--red)}
.gantt tr.grupo td.nom{font-weight:600}
.gantt tr.sub td.nom{padding-left:20px;font-weight:400;color:var(--mute)}

/* ===== NAVEGACIÓN v3 ===== */
.subnav{display:flex;flex-wrap:wrap;background:#EDEEEF;border-radius:11px;padding:4px;margin-bottom:18px;gap:3px}
.subnav a{font-size:13px;font-weight:500;color:var(--mute);padding:8px 16px;border-radius:8px;white-space:nowrap}
.subnav a.on{background:var(--card);color:var(--pink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.subnav a:hover:not(.on){color:var(--ink)}

/* Formulario que se abre con botón (contenido primero) */
.addbox{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);margin-bottom:16px;overflow:hidden}
.addbox>summary{list-style:none;cursor:pointer;padding:15px 18px;font-size:14px;font-weight:600;color:var(--blue);
  display:flex;align-items:center;gap:9px;user-select:none}
.addbox>summary::-webkit-details-marker{display:none}
.addbox>summary::before{content:"+";display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;background:var(--blue-t2);color:var(--blue);font-weight:600;font-size:15px;line-height:1}
.addbox[open]>summary{border-bottom:1px solid var(--line)}
.addbox[open]>summary::before{content:"–"}
.addbox .inner{padding:18px}

/* Migas de pan */
.crumb{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--mute);margin-bottom:10px;flex-wrap:wrap}
.crumb a{color:var(--mute)} .crumb a:hover{color:var(--blue)}
.crumb .sep{opacity:.5}

/* Mindmap colapsable */
.mm-det{border:0;margin:0}
.mm-det>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.mm-det>summary::-webkit-details-marker{display:none}
.mm-caret{width:18px;height:18px;flex:none;border-radius:5px;background:#EDEEEF;color:var(--mute);
  display:inline-flex;align-items:center;justify-content:center;font-size:10px;transition:transform .15s}
.mm-det[open]>summary .mm-caret{transform:rotate(90deg);background:var(--blue-t2);color:var(--blue)}
.mm-toolbar{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}

/* ===== FICHAS DE TRABAJO (locación / jornada) ===== */
.sheet-head{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:20px 22px;margin-bottom:14px}
.sheet-head h2{font-size:21px;margin:0}
.sheet-head .sub{font-size:13px;color:var(--mute);margin-top:3px}
.sheet-tabs{display:flex;flex-wrap:wrap;gap:3px;background:#EDEEEF;border-radius:11px;padding:4px;margin-bottom:16px}
.sheet-tabs a{font-size:13px;font-weight:500;color:var(--mute);padding:9px 14px;border-radius:8px;white-space:nowrap;display:flex;align-items:center;gap:6px;flex:1 1 auto;justify-content:center;transition:color .15s ease,background .2s ease,box-shadow .2s ease}
.sheet-tabs a.on{background:var(--card);color:var(--pink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.sheet-tabs .n{font-size:10.5px;background:#DFE2E4;color:var(--mute);border-radius:100px;padding:1px 6px;font-weight:600}
.sheet-tabs a.on .n{background:var(--pink-t);color:var(--pink-d)}
.ctx{background:var(--blue-t);border:1px solid #C9E2FF;border-radius:var(--r-sm);padding:9px 13px;font-size:12.5px;color:var(--blue-d);margin-bottom:14px}
.ctx b{font-weight:600}
.foto{border:1.5px dashed var(--line-2);border-radius:var(--r);padding:20px 14px;text-align:center;background:var(--soft);cursor:pointer;display:block}
.foto .t{font-size:13.5px;font-weight:600;color:var(--blue)}
.foto .s{font-size:11.5px;color:var(--mute);margin-top:3px}
.foto input{display:none}

/* ===== v4 · JERARQUÍA Y DATOS QUE SE VEN ===== */

/* Pieza protagonista: la jornada de hoy */
.hero{background:linear-gradient(180deg,#fff,var(--blue-t));border:1px solid var(--blue-t2);
  border-radius:16px;padding:20px 22px;margin-bottom:12px;box-shadow:var(--sh)}
.hero .eyebrow{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-d);font-weight:700;margin:0 0 8px}
.hero .titulo{font-size:26px;font-weight:650;letter-spacing:-.02em;line-height:1.1}
.hero .meta{font-size:13px;color:var(--mute);margin-top:5px}
.hero .lugar{font-size:15px;font-weight:600;margin-top:9px}
.hero .acciones{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

/* Anillo de avance */
.ring{--p:0;width:52px;height:52px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:conic-gradient(var(--ok) calc(var(--p)*1%), var(--off-t) 0)}
.ring.b{background:conic-gradient(var(--blue) calc(var(--p)*1%), var(--off-t) 0)}
.ring.warn{background:conic-gradient(var(--warn) calc(var(--p)*1%), var(--off-t) 0)}
.ring::after{content:attr(data-v);width:40px;height:40px;border-radius:50%;background:var(--card);
  display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--ink)}
.kpi.con-ring{flex-direction:row;align-items:center;gap:12px}
.kpi.con-ring .txt{min-width:0}

/* Barra de estado */
.barra{height:6px;border-radius:100px;background:var(--off-t);overflow:hidden;margin-top:7px}
.barra i{display:block;height:100%;background:var(--ok)}
.barra i.warn{background:var(--warn)} .barra i.bad{background:var(--bad)} .barra i.b{background:var(--blue)}

/* Estado vacío que invita */
.vacio{text-align:center;padding:26px 16px}
.vacio .t{font-size:14px;font-weight:600;color:var(--ink)}
.vacio .s{font-size:12.5px;color:var(--mute);margin:4px 0 12px}

/* Marca de entidad */
.ent{border-left:3px solid var(--off)}
.ent-bloque{border-left-color:var(--e-bloque)}
.ent-locacion{border-left-color:var(--e-locacion)}
.ent-jornada{border-left-color:var(--e-jornada)}

/* Encabezado de sección más sobrio */
.lbl{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);font-weight:700;margin:0 0 10px}

@media (max-width:860px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .hero{padding:16px 17px} .hero .titulo{font-size:22px}
}

/* ===== LOGO ===== */
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:4px 6px 16px;text-decoration:none}
.brand img{height:88px;width:auto;max-width:100%;display:block}
.mi svg{width:18px;height:18px;flex:none}
.brand span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62);font-weight:700}
.topbar-logo{height:28px;width:auto;flex:none}
.logo-auth{text-align:center;margin-bottom:18px}
.logo-auth img{height:44px;width:auto}

/* Botón-formulario: toda acción que modifica datos viaja por POST, pero
   se ve exactamente igual que los demás botones de la fila. */
.af{display:inline-block;margin:0}
.af button{font:inherit}

/* ================================================================
   ÁRBOL DE PRODUCCIÓN · el bloque como tarjeta viva y colapsable.
   Abre en su lugar: no manda a otra página para ver sus jornadas.
   ================================================================ */
.arbol{margin-bottom:70px}
.acc{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh);margin-bottom:12px;overflow:hidden}
.acc[open]{box-shadow:var(--sh-2)}
.acc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:15px 16px}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary:hover{background:var(--soft)}
.acc-caret{width:22px;height:22px;flex:none;border-radius:6px;background:var(--blue-t);color:var(--blue);
  display:flex;align-items:center;justify-content:center;font-size:11px;transition:transform .18s ease}
.acc[open]>summary .acc-caret{transform:rotate(90deg)}
.acc-tit{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.acc-tit .lbl-e{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--e-bloque);font-weight:700}
.acc-tit .nm{font-size:16px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc-tit .meta{font-size:11.5px;color:var(--mute);margin-top:2px}
.acc-prog{flex:none;width:96px;text-align:right}
.acc-prog .p{font-size:13px;font-weight:650;color:var(--ink)}
.acc-prog .barra{height:5px;border-radius:3px;background:var(--line);margin-top:4px;overflow:hidden}
.acc-prog .barra i{display:block;height:100%;background:var(--ok);border-radius:3px}
.acc-body{padding:4px 16px 16px;border-top:1px solid var(--line)}
.acc-body .jrow{display:flex;align-items:center;gap:11px;padding:11px 4px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.acc-body .jrow:last-of-type{border-bottom:0}
.acc-body .jrow:hover{background:var(--soft);border-radius:8px;padding-left:9px}
.jdot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--off)}
.jdot.ok{background:var(--ok)} .jdot.warn{background:var(--warn)} .jdot.blue{background:var(--blue)}
.jrow .jx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.jrow .jx .n{font-size:14px;font-weight:550}
.jrow .jx .s{font-size:11.5px;color:var(--mute);margin-top:1px}
.jrow .jnum{font-size:11px;color:var(--mute);white-space:nowrap}
.acc-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;padding-top:4px}

/* Botón flotante contextual: sabe qué se crea según dónde estás */
.fab{position:fixed;right:18px;bottom:calc(64px + env(safe-area-inset-bottom));z-index:40;
  display:inline-flex;align-items:center;gap:8px;background:var(--pink);color:#fff;font-weight:600;font-size:14px;
  padding:14px 18px;border-radius:30px;box-shadow:0 12px 26px -8px rgba(211,45,107,.6);text-decoration:none}
.fab:hover{background:var(--pink-d)}
.fab svg{width:18px;height:18px}
@media(min-width:880px){.fab{bottom:26px;right:26px}}

/* Barra de herramientas de la pantalla (Abrir todos / Cerrar todos, filtros) */
.toolrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.toolrow .sp{flex:1}
@media(max-width:560px){.toolrow>span:first-child{flex-basis:100%}.toolrow .sp{display:none}}

/* Mini-selector de estado de toma, con el color del estado actual */
.mini-estado{font:inherit;font-size:12px;font-weight:600;padding:5px 8px;border:0;border-radius:20px;cursor:pointer;-webkit-appearance:none;appearance:none;text-align:center}
.mini-estado.c-ok{background:var(--ok-t);color:var(--ok)}
.mini-estado.c-warn{background:var(--warn-t);color:var(--warn)}
.mini-estado.c-bad{background:var(--bad-t);color:var(--bad)}
.mini-estado.c-off{background:var(--off-t);color:var(--off)}

/* Buscador global */
.buscador{display:flex;align-items:center;gap:9px;background:var(--card);border-radius:14px;box-shadow:var(--sh);border:1px solid var(--line);padding:8px 12px;margin-bottom:16px}
.buscador svg{width:19px;height:19px;color:var(--mute);flex:none}
.buscador input{flex:1;min-width:0;font:inherit;font-size:15px;border:0;background:transparent;color:var(--ink);padding:6px 0}
.buscador input:focus{outline:0}
/* Lupa en la barra superior móvil y en el sidebar */
.side-buscar{display:flex;align-items:center;gap:8px;margin:2px 0 8px;padding:9px 11px;border-radius:10px;background:rgba(255,255,255,.07);color:rgba(255,255,255,.66);font-size:13px;border:0}
.side-buscar:hover{background:rgba(255,255,255,.1);color:#fff}
.side-buscar svg{width:16px;height:16px;flex:none}
.topbar .lupa{flex:none;display:flex;align-items:center;color:#fff}
.topbar .lupa svg{width:22px;height:22px}

/* Tabla en escritorio, tarjetas en celular (gastos, presupuesto) */
.solo-movil{display:none}
@media(max-width:760px){ .solo-desktop{display:none} .solo-movil{display:block} }
.dcards{list-style:none;margin:0 0 16px;padding:0}
.dcard{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh);padding:13px 15px;margin-bottom:10px}
.dcard .top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.dcard .concepto{font-size:15px;font-weight:600;letter-spacing:-.01em}
.dcard .monto{font-size:16px;font-weight:700;white-space:nowrap}
.dcard .linea{font-size:12px;color:var(--mute);margin-top:2px}
.dcard .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;align-items:center}
.dcard .chips .acts{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.dtot{background:var(--blue-t);border:1px solid var(--blue-t2);border-radius:14px;padding:13px 16px;margin-bottom:16px}
.dtot .lbl{color:var(--blue-d);margin:0 0 4px}
.dtot .v{font-size:21px;font-weight:700}

/* ================================================================
   TANDA FINAL · escala tipográfica, vidrio en navegación, toasts
   ================================================================ */
/* #8 · Jerarquía tipográfica real. El título de página crece de verdad. */
.phead h1{font-size:28px;font-weight:650;letter-spacing:-.025em;line-height:1.15}
.phead .sub{font-size:13px}
h2{font-size:22px;letter-spacing:-.02em}
.card h3{font-size:17px}
@media(max-width:600px){ .phead h1{font-size:24px} }

/* #21 · Vidrio (blur) SÓLO en navegación: barra superior y barra inferior. */
@media (max-width:860px){
  .topbar{background:rgba(4,12,62,.9);-webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px)}
  .tabbar{background:rgba(4,12,62,.92);-webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px)}
}

/* #18 · Aviso tipo toast: aparece abajo y se va solo. Sin "deshacer" (a pedido). */
.toast{position:fixed;left:50%;bottom:calc(76px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(8px);
  z-index:60;max-width:calc(100% - 32px);background:#1F2124;color:#fff;font-size:13.5px;font-weight:500;
  padding:12px 18px;border-radius:12px;box-shadow:0 10px 30px -8px rgba(0,0,0,.5);opacity:0;pointer-events:none;
  transition:opacity .25s ease, transform .25s ease}
.toast.ver{opacity:1;transform:translateX(-50%) translateY(0)}
@media(min-width:860px){ .toast{bottom:26px} }

/* Badge del timbre de avisos */
.badge{background:var(--bad);color:#fff;font-size:11px;font-weight:700;min-width:19px;height:19px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.badge-float{position:absolute;top:-4px;right:-4px}

/* #26 · Modo día de rodaje: el "Hoy" se transforma cuando una jornada está activa */
/* ---- "Mi día" del crew: su jornada de un vistazo ---- */
.saludo{display:flex;align-items:baseline;gap:10px;margin:0 2px 14px}
.saludo h2{font-size:26px;letter-spacing:-.02em}
.saludo .mute{font-size:14px}
.hoy-hero{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh);padding:20px;margin-bottom:14px}
.hoy-hero .hh-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.hh-cuando{font-size:11px;font-weight:700;letter-spacing:.09em;padding:5px 11px;border-radius:100px;background:var(--pink);color:#fff}
.hh-cuando.lejos{background:var(--off-t);color:var(--off-tx)}
.hh-num{font-size:18px;font-weight:600;letter-spacing:-.01em}
.hh-llamado{display:flex;align-items:center;gap:14px;margin:16px 0 4px}
.hh-llamado b{font-size:46px;font-weight:700;letter-spacing:-.03em;line-height:.95}
.hh-llamado span{font-size:13px;color:var(--mute);line-height:1.35}
.hh-loc{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.hh-acc{margin-top:16px;gap:8px}
.rodaje{background:linear-gradient(135deg,#0E9384,#017AFF);color:#fff;border-radius:18px;padding:20px;margin-bottom:16px;box-shadow:0 12px 34px -12px rgba(1,122,255,.6)}
.rodaje-top{display:flex;align-items:center;gap:10px}
.rodaje-num{font-size:24px;font-weight:700;letter-spacing:-.02em}
.rodaje-loc{margin-top:4px;font-size:14px;opacity:.92}
.rodaje-prog{margin-top:14px}
.rodaje-prog .n{font-size:13px;font-weight:600;margin-bottom:6px}
.rodaje-prog .barra{height:8px;border-radius:5px;background:rgba(255,255,255,.25);overflow:hidden}
.rodaje-prog .barra i{display:block;height:100%;background:#fff;border-radius:5px}
.rodaje-sig{margin-top:16px;background:rgba(255,255,255,.12);border-radius:12px;padding:12px 14px}
.rodaje-sig .k{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.8;font-weight:600}
.rodaje-sig .v{font-size:15px;margin-top:3px}
.rodaje-pie{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px}
.rodaje-pie .mute-w{font-size:12.5px;opacity:.85}

/* ================================================================
   MESA DE PRODUCCIÓN · Finder de dos columnas (escritorio) / drawer (celular)
   ================================================================ */
.mesa{display:grid;grid-template-columns:288px 1fr;gap:0;min-height:calc(100vh - 130px);
  background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh);overflow:hidden;margin-top:-4px}

/* --- Árbol (izquierda) --- */
.arbol-col{border-right:1px solid var(--line);background:var(--soft);display:flex;flex-direction:column;min-width:0}
.arbol-scroll{flex:1;overflow-y:auto;padding:10px 8px}
.arbol-etapa{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);font-weight:700;padding:12px 10px 5px}
.arbol-bloque{--bc:var(--e-bloque);margin-bottom:2px}
.arbol-bhead{display:flex;align-items:center;gap:9px;width:100%;background:none;border:0;cursor:pointer;padding:9px 10px;border-radius:9px;text-align:left;font:inherit;color:var(--ink)}
.arbol-bhead:hover{background:var(--card)}
.arbol-bhead .caret{font-size:9px;color:var(--mute);transition:transform .18s ease;flex:none}
.arbol-bloque.abierto>.arbol-bhead .caret{transform:rotate(90deg)}
.arbol-bhead .bnm{flex:1;min-width:0;font-size:13.5px;font-weight:600;line-height:1.2;overflow:hidden}
.arbol-bhead .be{display:block;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--bc);font-weight:700}
.arbol-bhead .bnm{white-space:nowrap;text-overflow:ellipsis}
.aring{flex:none;width:24px;height:24px;border-radius:50%;position:relative;font-size:0;
  background:conic-gradient(var(--ok) calc(var(--p)*1%),var(--line-2) 0)}
.aring::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--soft)}
.arbol-bhead:hover .aring::after{background:var(--card)}
.aring.lleno::before{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--ok);z-index:1}
.arbol-jornadas{max-height:0;overflow:hidden;padding:0 0 0 20px;margin-left:9px;border-left:1px dashed var(--line-2);transition:max-height .28s cubic-bezier(.32,.72,0,1),padding .28s ease}
.arbol-bloque.abierto>.arbol-jornadas{max-height:2400px;padding:2px 0 8px 20px}
.arbol-jor{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;text-decoration:none;color:inherit}
.arbol-jor:hover{background:var(--card)}
.arbol-jor.sel{background:var(--blue-t2)}
.arbol-jor.sel .jt{color:var(--blue-d)}
.arbol-jor .jt{font-size:13px;font-weight:550;min-width:0;line-height:1.25;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.arbol-jor .js{display:block;font-size:10.5px;font-weight:400;color:var(--mute)}
.arbol-add{display:flex;align-items:center;gap:4px;margin:4px 0 0 2px}
.arbol-add input{flex:1;min-width:0;font:inherit;font-size:12px;border:0;background:none;padding:6px 8px;border-radius:7px;color:var(--mute)}
.arbol-add input:focus{outline:0;background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.arbol-add button{flex:none;width:26px;height:26px;border:0;border-radius:7px;background:var(--blue-t);color:var(--blue);font-size:16px;cursor:pointer}
.arbol-nuevo{display:block;text-align:center;padding:12px;border-top:1px solid var(--line);font-size:13px;font-weight:600;color:var(--blue);background:var(--card)}

/* --- Detalle (derecha) --- */
.detalle-col{min-width:0;overflow-y:auto;padding:20px 22px}
/* Micro-animaciones: el detalle y el inspector entran con un fundido corto al cambiar */
@keyframes detIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.detalle-col.entra,.inspector-col.entra{animation:detIn .22s cubic-bezier(.32,.72,0,1)}
.det-back{display:none}
.det-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.det-tit h2{font-size:24px;letter-spacing:-.02em}
.kpis-3{grid-template-columns:repeat(3,1fr)}
.det-vacio{max-width:420px;margin:8vh auto;text-align:center;color:var(--mute)}
.det-vacio .dv-ico{width:54px;height:54px;margin:0 auto 14px;color:var(--line-2)}
.det-vacio .dv-ico svg{width:100%;height:100%}
.det-vacio h2{font-size:22px;color:var(--ink);margin-bottom:8px}
.dv-prox{display:block;text-align:left;background:var(--blue-t);border:1px solid var(--blue-t2);border-radius:14px;padding:14px 16px;margin:20px 0;text-decoration:none;color:inherit}
.dv-prox .k{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-d);font-weight:700}
.dv-prox .v{font-size:16px;font-weight:600;margin-top:3px;color:var(--ink)}
.dv-prox .s{font-size:12.5px;color:var(--mute)}
.dv-kpis{display:flex;gap:26px;justify-content:center}
.dv-kpis div{display:flex;flex-direction:column}
.dv-kpis b{font-size:22px;font-weight:700;color:var(--ink)}
.dv-kpis span{font-size:11.5px}
.crumb-mini{font-size:12px;color:var(--mute)}

/* ================= CELULAR: árbol a lo ancho, detalle como drawer ================= */
@media (max-width:860px){
  .mesa{display:block;border:0;border-radius:0;box-shadow:none;background:transparent;min-height:0;margin:0}
  .arbol-col{border:0;background:transparent}
  .arbol-scroll{padding:0}
  .arbol-bhead{background:var(--card);border:1px solid var(--line);margin-bottom:6px;padding:13px 14px;border-radius:12px}
  .arbol-nuevo{border:1px solid var(--line);border-radius:12px;margin-top:8px}
  .detalle-col{position:fixed;inset:0;z-index:70;background:var(--bg);padding:16px 16px 90px;
    transform:translateY(100%);transition:transform .28s cubic-bezier(.32,.72,0,1);overflow-y:auto}
  .mesa.con-detalle .detalle-col{transform:translateY(0)}
  .det-back{display:flex;align-items:center;gap:10px;margin:-4px -4px 12px;position:sticky;top:-16px;background:var(--bg);padding:12px 4px}
  .det-back a{font-size:15px;font-weight:600;color:var(--blue)}
}

/* ================================================================
   INSPECTOR · 3ª columna (Final Cut) para la toma seleccionada
   ================================================================ */
.mesa{position:relative}
.mesa.con-inspector{grid-template-columns:288px minmax(0,1fr) 340px}
.inspector-col{border-left:1px solid var(--line);background:var(--soft);overflow-y:auto;padding:16px 16px 40px;display:none}
.mesa.con-inspector .inspector-col{display:block}
/* Escritorio angosto (861–1199): el inspector flota encima, no exprime el centro */
@media (min-width:861px) and (max-width:1199px){
  .mesa.con-inspector{grid-template-columns:288px minmax(0,1fr)}
  .mesa.con-inspector .inspector-col{position:absolute;top:0;right:0;bottom:0;width:340px;z-index:6;
    box-shadow:-10px 0 30px -14px rgba(31,33,36,.28)}
}
.insp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.insp-head .k{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);font-weight:700}
.insp-cerrar{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--card);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--mute);font-size:13px}
.insp-form .fld input,.insp-form .fld select,.insp-form .fld textarea{background:var(--card)}
.insp-campos{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.insp-campos div{display:flex;justify-content:space-between;font-size:13px;border-bottom:1px solid var(--line);padding-bottom:6px}
.insp-campos span{color:var(--mute)}
.insp-nota{background:var(--card);border-radius:10px;padding:10px 12px;font-size:13px;color:var(--ink);margin-top:10px}

/* Filas de toma seleccionables (abren el inspector) */
.toma-row{display:flex;align-items:center;gap:10px;padding:9px 6px;border-bottom:1px solid var(--line);border-radius:8px}
.toma-row:last-child{border-bottom:0}
.toma-row.sel{background:var(--blue-t)}
.toma-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;text-decoration:none;color:inherit;position:relative;padding-left:2px}
.toma-tx .t1{font-size:14px;font-weight:500}
.toma-tx .t2{font-size:11.5px;color:var(--mute)}
.toma-tx .prio{color:var(--warn);font-size:12px;margin-right:4px}
.toma-row:hover{background:var(--soft)}

@media (max-width:860px){
  /* En celular el inspector sube como hoja, encima del detalle */
  .inspector-col{position:fixed;inset:0;z-index:80;background:var(--bg);border:0;padding:16px 16px 90px;display:none}
  .mesa.con-inspector .inspector-col{display:block}
}

/* ================================================================
   LÍNEA DE TIEMPO · columna de bloques FIJA + eje que se desplaza
   ================================================================ */
.tlwrap{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh);overflow:hidden;margin-bottom:14px}
.tl2{display:flex}
.tl2-labels{flex:none;width:154px;border-right:1px solid var(--line);background:var(--card);z-index:2}
.tl2-corner{height:44px;border-bottom:1px solid var(--line)}
.tl2-lab{height:52px;border-bottom:1px solid var(--line);padding:8px 12px;font-size:13px;font-weight:600;line-height:1.15;display:flex;flex-direction:column;justify-content:center}
.tl2-lab:last-child{border-bottom:0}
.tl2-lab .be{display:block;font-size:9px;letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.tl2-scroll{flex:1;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tl2-eje{position:relative;height:44px;border-bottom:1px solid var(--line)}
.tl-dia{position:absolute;top:0;width:var(--px,34px);height:44px;text-align:center;border-left:1px solid var(--line)}
.tl-dia.finde{background:var(--soft)}
.tl-mes{position:absolute;top:5px;left:3px;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-d);font-weight:700}
.tl-num{position:absolute;bottom:6px;left:0;right:0;font-size:11px;color:var(--mute)}
.tl-hoy{position:absolute;top:0;bottom:0;width:2px;background:var(--bad);z-index:3}
.tl2-track{position:relative;height:52px;border-bottom:1px solid var(--line)}
.tl2-track:last-child{border-bottom:0}
.tl-barra{position:absolute;top:14px;height:24px;border-radius:7px;border:1.5px solid}
.tl-jor{position:absolute;top:9px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;z-index:2}
.tl-jor .pt{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 2px #fff}
.tl-jor .lb{font-size:9px;font-weight:600;color:var(--ink);white-space:nowrap;background:var(--card);padding:0 2px;border-radius:3px}
.tl-jor:hover .pt{transform:scale(1.25)}
.tl-leyenda{display:flex;flex-wrap:wrap;gap:16px;font-size:12px;color:var(--mute)}
.tl-leyenda span{display:flex;align-items:center;gap:6px}
.tl-leyenda i{width:10px;height:10px;border-radius:50%}

/* Miniatura de portada del bloque en el árbol */
.btumb{flex:none;width:30px;height:30px;border-radius:7px;background-size:cover;background-position:center;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}

/* ================================================================
   ⌘K · Command Palette (búsqueda + acciones rápidas)
   ================================================================ */
.cmdk{display:none;position:fixed;inset:0;z-index:100;background:rgba(20,22,25,.4);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);justify-content:center;align-items:flex-start;padding:12vh 16px 16px}
.cmdk.abierto{display:flex}
.cmdk-box{width:100%;max-width:560px;background:var(--card);border-radius:16px;box-shadow:0 24px 60px -12px rgba(0,0,0,.4);overflow:hidden}
.cmdk-in{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.cmdk-in svg{width:20px;height:20px;color:var(--mute);flex:none}
.cmdk-in input{flex:1;min-width:0;font:inherit;font-size:16px;border:0;background:transparent;color:var(--ink)}
.cmdk-in input:focus{outline:0}
.cmdk-in kbd{font:inherit;font-size:10px;color:var(--mute);background:var(--soft);border:1px solid var(--line-2);border-radius:5px;padding:2px 6px}
.cmdk-list{max-height:52vh;overflow-y:auto;padding:6px}
.cmdk-it{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;text-decoration:none;color:inherit}
.cmdk-it .tp{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);font-weight:700;flex:none;width:74px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmdk-it .tx{font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmdk-it.on,.cmdk-it:hover{background:var(--blue-t2)}
.cmdk-it.on .tx{color:var(--blue-d)}
.cmdk-vacio{padding:22px;text-align:center;color:var(--mute);font-size:13px}
@media(max-width:860px){ .cmdk{padding-top:6vh} }

/* Encabezado de escena en la shot list (Escena → Tomas) */
.escena-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0 4px;padding-bottom:5px;border-bottom:1.5px solid var(--line)}
.escena-h:first-child{margin-top:0}
.escena-h .en{font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--ink)}
.escena-h .ec{font-size:11px;font-weight:600;color:var(--mute);background:var(--soft);border-radius:20px;padding:2px 9px}

/* Asa para reordenar tomas arrastrando */
.toma-drag{flex:none;cursor:grab;color:var(--line-2);font-size:15px;padding:2px 4px;touch-action:none;user-select:none}
.toma-drag:hover{color:var(--mute)}
.toma-row.arrastrando{opacity:.6;background:var(--blue-t2);border-radius:8px}
.toma-row{transition:background .1s}

/* Punto de jornada arrastrable en la línea de tiempo */
.tl-jor.mov{cursor:grab;touch-action:none}
.tl-jor.arrastrando{z-index:5}
.tl-jor.arrastrando .pt{transform:scale(1.4);box-shadow:0 0 0 3px var(--blue-t2)}

/* Accesibilidad: si el sistema pide reducir movimiento, cortamos las animaciones */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ===================== FASE 2 · momentos del día ===================== */
/* --- Empieza mi día (briefing marino) --- */
.brief{background:linear-gradient(160deg,var(--navy-2),var(--navy) 72%);border-radius:22px;color:#fff;padding:22px;box-shadow:var(--sh-2);margin-bottom:14px}
.brief-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.brief-saludo{font-size:19px;font-weight:700;letter-spacing:-.01em}
.brief-rol{font-size:10.5px;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.1em;font-weight:600;white-space:nowrap}
.brief-cuando{display:flex;align-items:center;gap:9px;margin-top:16px}
.brief-cuando .hh-cuando{position:static;transform:none}
.brief-fecha{font-size:12.5px;color:rgba(255,255,255,.72)}
.brief-llamado{display:flex;align-items:baseline;gap:12px;margin-top:8px}
.brief-llamado b{font-size:48px;font-weight:800;letter-spacing:-.03em;line-height:1}
.brief-llamado span{font-size:13px;color:rgba(255,255,255,.78)}
.brief-loc{display:flex;align-items:center;gap:7px;margin-top:12px;font-size:13.5px;font-weight:600;color:#fff}
.brief-loc svg{width:15px;height:15px;opacity:.85;flex:none}
.brief-chg{display:inline-flex;align-items:center;gap:7px;margin-top:14px;background:var(--pink);color:#fff;font-size:12px;font-weight:700;padding:8px 13px;border-radius:11px;text-decoration:none;box-shadow:0 8px 18px -8px rgba(211,45,107,.55)}
.brief-chg svg{width:14px;height:14px}
.brief-acc{display:flex;gap:9px;margin-top:18px;flex-wrap:wrap}
.brief-acc .btn{padding:12px 18px}
.brief-btn2{background:rgba(255,255,255,.14);color:#fff}
.brief-meta{display:flex;gap:12px;margin-bottom:14px}
.bm{background:var(--group);border-radius:14px;padding:12px 15px}
.bm>b{display:block;font-size:22px;font-weight:700;letter-spacing:-.02em}
.bm>span{font-size:11px;color:var(--mute)}
.bm-prim{flex:1;min-width:0;text-decoration:none;color:var(--ink);display:block}
.bm-prim .k{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);font-weight:700}
.bm-prim>b{font-size:14px;font-weight:600;margin-top:3px;line-height:1.3;letter-spacing:0}

/* --- Estamos grabando --- */
.grab{max-width:560px;margin:0 auto}
.grab-hero{background:linear-gradient(160deg,var(--navy-2),var(--navy) 70%);border-radius:22px;color:#fff;padding:24px 22px 26px;box-shadow:var(--sh-2)}
.grab-hero .k-w{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7);font-weight:700}
.grab-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.gpill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;background:var(--pink);color:#fff;padding:5px 11px;border-radius:100px}
.gpill i{width:6px;height:6px;border-radius:50%;background:#fff}
.grab-lbl{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7);font-weight:700;margin-top:20px}
.grab-num{font-size:72px;font-weight:800;letter-spacing:-.04em;line-height:1;margin-top:2px}
.grab-desc{font-size:16px;font-weight:600;margin-top:8px}
.grab-tec{font-size:13px;color:rgba(255,255,255,.7);margin-top:3px}
.grab-prog{margin-top:22px}
.grab-acc{margin-top:14px}
.grab-main{width:100%;font-size:17px;padding:17px}
.grab-2{width:100%;background:var(--navy-tint-2);color:var(--ink);padding:14px;font-size:14px}
.grab-link{display:block;text-align:center;margin-top:20px;font-size:13px;color:var(--mute);font-weight:600;text-decoration:none}
.grab-hero.done{text-align:center}
.grab-hero.done h2{font-size:24px}
.grab-hero.done p{color:rgba(255,255,255,.8);margin:6px 0 16px}
.grab-check{width:60px;height:60px;border-radius:50%;background:var(--ok);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;color:#fff}
.grab-check svg{width:32px;height:32px}
.grab-hero h2{font-size:22px}

/* --- Acabo de pagar (gasto rápido) --- */
.pagar{max-width:460px;margin:0 auto}
.pg-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.pg-monto{display:flex;align-items:center;justify-content:center;gap:4px;padding:22px 0 10px}
.pg-monto .cur{font-size:34px;font-weight:700;color:var(--mute)}
.pg-monto input{font:inherit;font-size:56px;font-weight:800;letter-spacing:-.03em;border:0;background:transparent;color:var(--ink);width:min(6ch,72%);text-align:center;outline:0;font-variant-numeric:tabular-nums}
.pg-monto input::placeholder{color:var(--line-2)}
.pg-cats{display:flex;flex-wrap:wrap;gap:8px}
.qchip{display:inline-block;cursor:pointer}
.qchip input{position:absolute;opacity:0;width:0;height:0}
.qchip span{display:inline-block;font-size:14px;font-weight:600;padding:11px 16px;border-radius:12px;background:var(--group);color:var(--mute);transition:background .15s ease,color .15s ease}
.qchip input:checked+span{background:var(--navy);color:#fff}
.qchip input:focus-visible+span{outline:2px solid var(--pink);outline-offset:2px}
.pg-foto{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;margin-top:16px;cursor:pointer;box-shadow:var(--sh)}
.pg-foto .ico{width:42px;height:42px;border-radius:12px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.pg-foto .ico svg{width:21px;height:21px}
.pg-foto .tx b{display:block;font-size:14px;font-weight:600}
.pg-foto .sub{font-size:11.5px;color:var(--mute)}
.pg-foto.lista{border-color:var(--ok);background:var(--ok-t)}
.pg-foto.lista .ico{background:var(--ok)}
.pg-guardar{width:100%;font-size:17px;padding:16px;margin-top:18px}
.pg-detalle{display:block;text-align:center;margin-top:14px;font-size:13px;color:var(--mute);font-weight:600;text-decoration:none}

/* --- ¿Cómo vamos? (progreso del rodaje) --- */
.prog2{max-width:460px;margin:0 auto}
.pring{position:relative;width:150px;height:150px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:8px auto 0;background:conic-gradient(var(--pink) calc(var(--p,0)*1%),rgba(4,12,62,.1) 0)}
.pring::after{content:"";position:absolute;inset:14px;border-radius:50%;background:var(--card)}
.pring .rv{position:relative;z-index:2;text-align:center}
.pring .rv b{display:block;font-size:34px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.pring .rv span{font-size:11px;color:var(--mute)}
.prog2-tit{text-align:center;margin-top:14px;font-size:16px;font-weight:600}
.stat3{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:16px}
.stat3 .s{background:var(--group);border-radius:14px;padding:14px 6px;text-align:center}
.stat3 .s b{display:block;font-size:24px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat3 .s span{font-size:10.5px;color:var(--mute);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.pe-row{display:flex;align-items:center;gap:12px;padding:9px 14px}
.pe-nom{flex:1;min-width:0;font-size:13.5px;font-weight:600}
.pe-bar{width:96px;flex:none}
.pe-n{width:40px;text-align:right;font-size:12px;color:var(--mute);font-weight:600;font-variant-numeric:tabular-nums}

/* --- Estoy llegando al set --- */
.lleg{max-width:520px;margin:0 auto}
.lleg-hero{background:linear-gradient(160deg,var(--navy-2),var(--navy) 72%);border-radius:22px;color:#fff;padding:22px;box-shadow:var(--sh-2);margin-bottom:14px}
.lleg-hero .k-w{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7);font-weight:700}
.lleg-hero h2{color:#fff;font-size:26px;letter-spacing:-.02em;margin:8px 0 0}
.lleg-hero .sub-w{color:rgba(255,255,255,.82);font-size:13.5px;margin-top:5px}
.lleg-go{margin-top:18px;display:inline-flex;align-items:center;gap:8px;font-size:15px;padding:13px 20px}
.lleg-go svg{width:17px;height:17px}

/* --- Cambios de hoy (feed) --- */
.cambios{max-width:560px;margin:0 auto}
.cambios .fi{display:flex;gap:12px;padding:13px 0;box-shadow:inset 0 -1px 0 var(--line-2)}
.cambios .fi:last-child{box-shadow:none}
.cambios .fi .ic{width:34px;height:34px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;color:#fff}
.cambios .fi .ic svg{width:17px;height:17px}
.ic-navy{background:var(--navy)} .ic-warn{background:var(--warn)} .ic-ok{background:var(--ok)} .ic-bad{background:var(--bad)}
.cambios .fi .ft{flex:1;min-width:0}
.cambios .fi .ft .h{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.35}
.cambios .fi .ft .m{font-size:11.5px;color:var(--mute);margin-top:1px}
.cambios .fi .tm{font-size:11px;color:var(--mute);white-space:nowrap;font-weight:600;flex:none}

/* --- Necesito a alguien (crew del día) --- */
.quien{max-width:520px;margin:0 auto}
.quien-hero{background:linear-gradient(160deg,var(--navy-2),var(--navy) 72%);border-radius:22px;color:#fff;padding:20px 22px 22px;box-shadow:var(--sh-2)}
.quien-hero .k-w{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7);font-weight:700}
.quien-cnt{margin-top:8px;font-size:15px;color:rgba(255,255,255,.85)}
.quien-cnt b{font-size:32px;font-weight:800;letter-spacing:-.02em;color:#fff;margin-right:4px}
.rows2{background:var(--group);border-radius:16px;padding:4px 2px}
.qrow{display:flex;align-items:center;gap:11px;padding:10px 14px}
.qrow+.qrow{box-shadow:inset 0 1px 0 rgba(4,12,62,.06)}
.qav{width:36px;height:36px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff}
.qav.ok{background:var(--navy)} .qav.falta{background:var(--warn)}
.qrow .tx{flex:1;min-width:0}
.qrow .t1{font-size:13.5px;font-weight:600}
.qrow .t2{font-size:11.5px;color:var(--mute);margin-top:1px}
.qacc{display:flex;gap:6px;flex:none}
.qbtn{width:36px;height:36px;border-radius:50%;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:inherit}
.qbtn svg{width:17px;height:17px}
.qbtn.call{background:var(--navy);color:#fff}
.qbtn.wa{background:var(--ok-t);color:var(--ok-tx)}
.qbtn.done{background:var(--pink);color:#fff}
.qbtn.undo{background:var(--group);color:var(--mute);font-size:16px}

/* --- Terminó el día (cierre de misión) --- */
.cerrar{max-width:480px;margin:0 auto}
.cierre-hero{background:linear-gradient(160deg,var(--navy-2),var(--navy) 74%);border-radius:22px;color:#fff;padding:24px 22px 22px;box-shadow:var(--sh-2);margin-bottom:14px}
.cierre-check{width:56px;height:56px;border-radius:50%;background:var(--ok);display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:14px}
.cierre-check svg{width:30px;height:30px}
.cierre-hero .k-w{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7);font-weight:700}
.cierre-hero h2{color:#fff;font-size:26px;letter-spacing:-.02em;margin:6px 0 0}
.cierre-sub{color:rgba(255,255,255,.82);font-size:13.5px;margin-top:4px}
.report{margin-top:18px}
.report .rrow{display:flex;justify-content:space-between;align-items:center;padding:11px 0;box-shadow:inset 0 -1px 0 rgba(255,255,255,.1)}
.report .rrow:last-child{box-shadow:none}
.report .rrow .l{font-size:13px;color:rgba(255,255,255,.78)}
.report .rrow .v{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}

/* --- cierre de misión: resumen visual --- */
.cierre-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:18px;background:rgba(255,255,255,.1);border-radius:14px;overflow:hidden}
.cierre-stats .cs{background:var(--navy);padding:14px 6px;text-align:center}
.cierre-stats .cs b{display:block;font-size:24px;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.cierre-stats .cs span{font-size:10px;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-top:4px;display:block}
.cierre-msg{text-align:center;font-size:19px;font-weight:700;letter-spacing:-.01em;margin-top:18px}
.cierre-note{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:12.5px;color:rgba(255,255,255,.75);font-weight:600}

/* --- Cambios de hoy como capa: banner en Hoy --- */
.chg-banner{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--warn);border-radius:14px;padding:12px 15px;margin-bottom:14px;text-decoration:none;color:inherit;box-shadow:var(--sh)}
.chg-banner .ic{width:34px;height:34px;border-radius:10px;background:var(--warn-t);color:var(--warn-tx);display:flex;align-items:center;justify-content:center;flex:none}
.chg-banner .ic svg{width:18px;height:18px}
.chg-banner .tx{flex:1;min-width:0}
.chg-banner .tx b{font-size:13.5px;font-weight:600;display:block;line-height:1.3}
.chg-banner .tx span{font-size:11.5px;color:var(--mute)}
.chg-banner .go{color:var(--mute);font-size:20px;flex:none}

/* ===================== MODO RODAJE · estado global ===================== */
.rodaje-bar{position:sticky;top:0;z-index:70;display:flex;align-items:center;gap:14px;
  background:linear-gradient(90deg,var(--navy),var(--navy-2));color:#fff;padding:10px 20px;
  text-decoration:none;box-shadow:0 6px 18px -8px rgba(4,12,62,.55);border-bottom:2px solid var(--pink)}
.rb-live{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.08em;
  background:var(--pink);color:#fff;padding:5px 11px;border-radius:100px;flex:none}
.rb-live i{width:6px;height:6px;border-radius:50%;background:#fff;animation:pulseRb 1.6s infinite}
@keyframes pulseRb{0%,100%{opacity:1}50%{opacity:.25}}
.rb-info{font-size:13px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rb-info b{font-weight:700}
.rb-next{color:rgba(255,255,255,.72)}
.rb-cta{flex:none;font-size:13px;font-weight:700;background:rgba(255,255,255,.15);padding:8px 14px;border-radius:10px}
.rb-cta:hover{background:rgba(255,255,255,.22)}
@media(max-width:860px){ .rb-next{display:none} .rodaje-bar{padding:9px 14px;gap:10px}
  body.modo-rodaje .topbar{top:44px} }

.side-rodaje{display:block;background:var(--pink);color:#fff;border-radius:12px;padding:11px 12px;margin:0 0 11px;text-decoration:none;box-shadow:0 8px 18px -8px rgba(211,45,107,.6)}
.side-rodaje:hover{background:var(--pink-d)}
.sr-live{display:inline-flex;align-items:center;gap:6px;font-size:9.5px;font-weight:800;letter-spacing:.1em}
.sr-live i{width:5px;height:5px;border-radius:50%;background:#fff;animation:pulseRb 1.6s infinite}
.sr-num{display:block;font-size:14px;font-weight:700;margin-top:3px}
.sr-next{display:block;font-size:10.5px;color:rgba(255,255,255,.85);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* --- chip de clima en héroes marino --- */
.brief-wx{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.14);color:#fff;font-size:12px;font-weight:600;padding:5px 11px;border-radius:100px;flex:none;white-space:nowrap}
.brief-wx svg{width:14px;height:14px;opacity:.9;flex:none}

/* ============ FASE / CICLO DE VIDA (Fase A · Production OS) ============ */
/* Tira de fase en el sidebar (navy estructural: se queda con blanco-alfa) */
.side-fase{display:block;background:rgba(255,255,255,.06);border-radius:11px;padding:9px 11px;margin-bottom:11px;text-decoration:none}
.side-fase:hover{background:rgba(255,255,255,.1)}
.side-fase .sf-top{display:flex;align-items:baseline;justify-content:space-between;gap:6px}
.side-fase .sf-k{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:600}
.side-fase .sf-name{font-size:12px;font-weight:700;color:#fff}
.side-fase .sf-track{display:flex;gap:4px;margin-top:8px}
.side-fase .sf-step{flex:1;height:4px;border-radius:3px;background:rgba(255,255,255,.14)}
.side-fase .sf-step.done{background:rgba(255,255,255,.42)}
.side-fase .sf-step.on{background:var(--pink)}

/* Columna vertebral: los 4 pasos del ciclo */
.lifecard{padding:18px 14px;overflow-x:auto}
.lc-track{display:flex;align-items:flex-start;min-width:min-content}
.lc-step{flex:1;min-width:100px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;padding:0 4px}
.lc-ico{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--group);color:var(--mute)}
.lc-ico svg{width:22px;height:22px}
.lc-step.done .lc-ico{background:var(--navy);color:#fff}
.lc-step.on .lc-ico{background:var(--pink);color:#fff;box-shadow:0 8px 20px -7px var(--pink)}
.lc-nom{font-size:12.5px;font-weight:700;color:var(--ink)}
.lc-step.todo .lc-nom{color:var(--mute)}
.lc-sub{font-size:10.5px;color:var(--mute);line-height:1.25;max-width:118px}
.lc-line{flex:0 0 18px;height:2px;background:var(--line);margin-top:21px}
.lc-line.done{background:var(--mute)}

/* Panel de la fase activa */
.facard{padding:20px 18px}
.fc-chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--pink);background:var(--pink-50);padding:5px 11px;border-radius:999px}
.fc-chip svg{width:14px;height:14px}
.facard h2{margin:12px 0 4px;font-size:22px;letter-spacing:-.02em;color:var(--ink)}
.fc-metrics{display:flex;gap:26px;margin:16px 0 12px;flex-wrap:wrap}
.fc-metric .n{display:block;font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.fc-metric.big .n{font-size:30px;color:var(--pink)}
.fc-metric .l{display:block;font-size:11.5px;color:var(--mute);margin-top:2px}
.prepbar{height:8px;border-radius:6px;background:var(--group);overflow:hidden;margin-top:4px}
.prepbar i{display:block;height:100%;background:var(--pink);border-radius:6px}

/* Switcher de fase */
.fase-switch{display:flex;gap:8px;flex-wrap:wrap}
.fase-switch .af{margin:0}
.fs-btn{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:8px 15px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}
.fs-btn:hover{border-color:var(--navy)}
.fs-btn.on{background:var(--pink);border-color:var(--pink);color:#fff}

/* Workspaces de la fase */
.ws-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px}
.ws-card{display:flex;flex-direction:column;gap:3px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:15px 14px;text-decoration:none;box-shadow:var(--sh);transition:transform .12s ease,box-shadow .12s ease;position:relative}
a.ws-card:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--navy-tint-2)}
.ws-ico{width:34px;height:34px;border-radius:10px;background:var(--navy-tint);color:var(--navy);display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.ws-ico svg{width:19px;height:19px}
.ws-t{font-size:14px;font-weight:700;color:var(--ink)}
.ws-s{font-size:11.5px;color:var(--mute);line-height:1.3}
.ws-card.soon{opacity:.62;box-shadow:none;background:var(--soft)}
.ws-soon{position:absolute;top:12px;right:12px;font-size:9px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;color:var(--mute);background:var(--group);padding:3px 7px;border-radius:6px}

/* Mi Día · tira de enfoque por fase (aparece cuando la fase NO es rodaje) */
.fase-hoy{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--navy);border-radius:var(--r-card);padding:13px 15px;text-decoration:none;box-shadow:var(--sh);margin-bottom:14px}
.fase-hoy:hover{border-color:var(--navy-tint-2)}
.fase-hoy .fh-ic{width:38px;height:38px;border-radius:10px;background:var(--navy-tint);color:var(--navy);display:flex;align-items:center;justify-content:center;flex:none}
.fase-hoy .fh-ic svg{width:20px;height:20px}
.fase-hoy .fh-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.fase-hoy .fh-tx b{font-size:14px;color:var(--ink);letter-spacing:-.01em}
.fase-hoy .fh-n{color:var(--pink);font-weight:800}
.fase-hoy .fh-tx span{font-size:12px;color:var(--mute)}
.fase-hoy .go{color:var(--mute);font-size:12.5px;font-weight:600;flex:none}

/* ============ FASE B · Preproducción (Checklist + Casting) ============ */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.grid2{grid-template-columns:1fr}}

/* Checklist: casilla de listo + fila */
.chk{width:24px;height:24px;border-radius:7px;border:2px solid var(--line);background:var(--card);cursor:pointer;flex:none;padding:0;display:inline-flex;align-items:center;justify-content:center}
button.chk:hover{border-color:var(--ok)}
.chk.on{background:var(--ok);border-color:var(--ok)}
.chk.on::after{content:"";width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg);margin-top:-2px}
.ci-row{display:flex;align-items:center;gap:12px;padding:10px 2px;border-top:1px solid var(--line)}
.ci-row:first-of-type{border-top:0}
.ci-row .af{margin:0}
.ci-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ci-tx .t1{font-size:14px;color:var(--ink);line-height:1.35}
.ci-tx .t2{font-size:11.5px;color:var(--mute)}
.ci-row.done .ci-tx .t1{text-decoration:line-through;color:var(--mute)}

/* Casting */
.cast-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.cast-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:15px 15px 8px;box-shadow:var(--sh);position:relative}
.cast-card.off{opacity:.6}
.cc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.cc-id{display:flex;flex-direction:column;gap:1px;min-width:0}
.cc-pj{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--pink);font-weight:700}
.cc-nom{font-size:15.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.cc-line{font-size:12.5px;color:var(--ink);margin-top:8px;line-height:1.4}
.cc-line .k{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);font-weight:600}
.cc-line.mute{color:var(--mute)}
.cc-acc{display:flex;justify-content:flex-end;margin-top:6px}
.est{font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;white-space:nowrap;flex:none}
.est-ok{background:var(--ok-t);color:var(--ok-tx)}
.est-warn{background:var(--warn-t);color:var(--warn-tx)}
.est-neu{background:var(--navy-tint);color:var(--mute)}
.est-off{background:var(--group);color:var(--mute)}

/* ============ FASE C · Agenda / Calendario pro ============ */
.ag-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.ag-views{display:inline-flex;background:var(--group);border-radius:999px;padding:3px}
.ag-views a{padding:6px 16px;border-radius:999px;font-size:13px;font-weight:600;color:var(--mute);text-decoration:none}
.ag-views a.on{background:var(--card);color:var(--ink);box-shadow:var(--sh)}
.ag-nav{display:inline-flex;align-items:center;gap:6px}
.ag-arrow{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;border:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:18px;line-height:1}
.ag-arrow:hover{border-color:var(--navy)}
.ag-hoy{padding:6px 12px;border-radius:9px;border:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:12.5px;font-weight:600}
.ag-rango{font-size:13.5px;font-weight:700;color:var(--ink);margin-left:6px;text-transform:capitalize}
.ag-bar .btn-pri{margin-left:auto}

.ag-layers{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.lyr{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:5px 11px 5px 8px;font-size:12px;font-weight:600;color:var(--ink);cursor:pointer;font-family:inherit}
.lyr .dot{width:9px;height:9px;border-radius:50%;background:var(--ec);flex:none}
.lyr.off{opacity:.45}
.lyr.off .dot{background:var(--mute)}
.lyr.off .ev-t,.lyr.off{text-decoration:none}
.lyr.off span:last-child,.lyr.off{color:var(--mute)}

/* Chip de evento (color por categoría vía --ec) */
.ev{display:flex;gap:6px;align-items:baseline;background:var(--soft);border-left:3px solid var(--ec);border-radius:6px;padding:5px 8px;text-decoration:none;font-size:12px;line-height:1.3}
.ev:hover{background:var(--group)}
.ev .ev-h{color:var(--mute);font-weight:700;font-size:11px;flex:none}
.ev .ev-t{color:var(--ink);min-width:0}

/* Vista Semana */
.ag-week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.ag-day{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:8px;min-height:120px;display:flex;flex-direction:column;gap:6px}
.ag-day.hoy{border-color:var(--pink);box-shadow:0 0 0 1px var(--pink)}
.ag-dh{display:flex;align-items:baseline;justify-content:space-between}
.ag-dh .dn{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);font-weight:600}
.ag-dh .dd{font-size:16px;font-weight:800;color:var(--ink)}
.ag-day.hoy .dd{color:var(--pink)}
.ag-evs{display:flex;flex-direction:column;gap:5px}
.ag-empty{color:var(--line-2,var(--line));font-size:13px;text-align:center;padding:6px 0}
@media(max-width:760px){
  .ag-week{grid-template-columns:1fr}
  .ag-day{min-height:0;flex-direction:row;align-items:flex-start}
  .ag-dh{flex:0 0 54px;flex-direction:column;align-items:flex-start}
  .ag-evs{flex:1}
  .ag-empty{text-align:left}
}

/* Vista Mes */
.ag-month{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.ag-mh{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);font-weight:600;text-align:center;padding:2px 0}
.ag-cell{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:6px;min-height:88px;min-width:0;display:flex;flex-direction:column;gap:3px}
.ag-cell.fuera{opacity:.5;background:var(--soft)}
.ag-cell.hoy{border-color:var(--pink);box-shadow:0 0 0 1px var(--pink)}
.ag-cell .cn{font-size:12.5px;font-weight:700;color:var(--ink)}
.ag-cell.hoy .cn{color:var(--pink)}
.ag-mini{display:flex;flex-direction:column;gap:3px}
.ev.mini{padding:2px 6px;font-size:10.5px;border-left-width:3px;border-radius:4px}
.ev.mini .ev-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-more{font-size:10px;color:var(--mute);font-weight:600;padding-left:4px}
@media(max-width:760px){
  .ag-month{gap:3px}
  .ag-mh{font-size:9px;padding:1px 0}
  .ag-cell{min-height:58px;padding:3px;border-radius:8px;gap:2px}
  .ag-cell .cn{font-size:11px}
  .ev.mini{padding:1px 3px;font-size:9px;border-left-width:2px}
  .ev.mini .ev-t{font-size:9px}
  .ag-more{font-size:9px;padding-left:2px}
}

/* Diálogo nuevo evento */
.ag-dialog{border:0;border-radius:var(--r-panel);padding:20px;max-width:440px;width:calc(100% - 32px);box-shadow:var(--sh-2);background:var(--card);color:var(--ink)}
.ag-dialog::backdrop{background:rgba(4,12,62,.42)}
.ag-dialog h3{color:var(--ink)}

/* Vista Año · 12 mini-meses con puntos por día */
.ag-year{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:900px){.ag-year{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.ag-year{grid-template-columns:repeat(2,1fr)}}
.yr-mon{display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 10px 12px;text-decoration:none;box-shadow:var(--sh);transition:transform .12s ease,border-color .12s ease}
.yr-mon:hover{border-color:var(--navy-tint-2);transform:translateY(-2px)}
.yr-h{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:7px}
.yr-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.yr-dow{font-size:8px;color:var(--mute);text-align:center;font-weight:600;text-transform:uppercase}
.yr-d{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px;gap:1px}
.yr-n{font-size:9.5px;color:var(--ink);line-height:1}
.yr-d.fuera .yr-n{color:var(--mute);opacity:.4}
.yr-d.con{background:var(--navy-tint)}
.yr-d.con .yr-n{font-weight:800;color:var(--navy)}
.yr-d.hoy{background:var(--pink)}
.yr-d.hoy .yr-n{color:#fff;font-weight:700}
.yr-dots{display:flex;gap:2px;height:6px;align-items:center}
.yr-dots .ev{display:inline-block;width:6px;height:6px;min-width:0;padding:0;border:0;border-radius:50%;background:var(--ec);box-shadow:0 0 0 1.5px var(--card)}

/* Timeline (Gantt del ciclo) */
.ag-zoom{display:inline-flex;background:var(--group);border-radius:999px;padding:3px}
.ag-zoom a{padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--mute);text-decoration:none}
.ag-zoom a.on{background:var(--card);color:var(--ink);box-shadow:var(--sh)}
.tl-scroll{overflow-x:auto;overflow-y:hidden;padding-bottom:4px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--card)}
.tl-canvas{position:relative;padding:8px 0 12px;min-width:100%}
.tl-axis{height:24px}
.tl-gl{position:absolute;top:24px;bottom:12px;width:1px;background:var(--line);opacity:.7}
.tl-mo{position:absolute;top:4px;font-size:10px;font-weight:600;color:var(--mute);padding-left:5px;white-space:nowrap}
.tl-track{position:relative;height:46px;margin:0 0 8px}
.tl-bar{position:absolute;top:5px;height:36px;border-radius:9px;background:var(--tc);color:#fff;padding:4px 12px;overflow:hidden;display:flex;flex-direction:column;justify-content:center;box-shadow:var(--sh)}
.tl-bar.act{box-shadow:0 0 0 2px var(--pink),0 8px 18px -8px var(--pink)}
.tl-bt{font-size:12.5px;font-weight:700;line-height:1.15;white-space:nowrap;display:flex;align-items:center}
.tl-bd{font-size:10px;opacity:.88;white-space:nowrap;line-height:1.2}
.tl-here{background:var(--pink);color:#fff;font-size:8.5px;padding:1px 6px;border-radius:999px;margin-left:6px;text-transform:uppercase;letter-spacing:.05em;font-weight:800}
.tl-empty{position:absolute;top:12px;left:2px;font-size:12px;color:var(--mute)}
.tl-today{position:absolute;top:20px;bottom:12px;width:2px;background:var(--pink);z-index:3}
.tl-today span{position:absolute;top:-3px;left:3px;font-size:9px;font-weight:800;color:var(--pink);background:var(--card);padding:0 3px;text-transform:uppercase;letter-spacing:.04em}
.tl-frow{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.tl-frow .tl-fname{flex:0 0 100px;font-size:12.5px;font-weight:600;color:var(--ink)}
.tl-frow input{flex:1;min-width:0}
.tl-frow .tl-fdash{color:var(--mute);flex:none}

/* Fase D · estados extra + detalles de tarjeta */
.est-info{background:rgba(59,91,219,.13);color:#3B5BDB}
.cc-sub{font-size:11px;color:var(--mute);margin-top:1px}
.cc-line.venc{color:#DC2626;font-weight:600}
.cc-line.venc .k{color:var(--mute);font-weight:600}
.cc-link{color:var(--pink);font-weight:700;text-decoration:none;font-size:12.5px}
.cc-link:hover{text-decoration:underline}
.est-bad{background:rgba(239,68,68,.13);color:#DC2626}

/* ============ Fase 4.1 · Orientación · zona permanente + identidad por fase ============ */
body{--fase-color:var(--pink)}                 /* fallback si no hay proyecto/fase */
body[data-fase="pre"]{--fase-color:#7C4DFF}
body[data-fase="rodaje"]{--fase-color:#F5333F}
body[data-fase="post"]{--fase-color:#12B76A}
body[data-fase="entrega"]{--fase-color:#2E90FA}

/* Zona permanente de fase en el sidebar (Proyecto → Fase → progreso) */
.side-fase .sf-top{display:flex;align-items:baseline;justify-content:space-between;gap:6px;margin-bottom:6px}
.side-fase .sf-k{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:600}
.side-fase .sf-pct{font-size:10.5px;font-weight:700;color:rgba(255,255,255,.75)}
.side-fase .sf-name{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:#fff;margin-bottom:9px;line-height:1}
.side-fase .sf-dot{width:10px;height:10px;border-radius:50%;background:var(--fase-color);flex:none}
.side-fase .sf-step.on{background:var(--fase-color)}

/* Chip de fase en el topbar (móvil): la zona permanente también existe en celular */
.topbar-fase{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.12);border-radius:999px;padding:5px 11px 5px 9px;text-decoration:none;flex:none}
.topbar-fase .sf-dot{width:8px;height:8px;border-radius:50%;background:var(--fase-color);flex:none}
.topbar-fase .tf-n{font-size:12px;font-weight:700;color:#fff;white-space:nowrap}
@media(max-width:480px){ .topbar .t{display:none} }   /* en pantallas chicas manda la fase, no el título de página */

/* Acento sutil de fase: una línea delgada arriba del contenido (personalidad, no rebrand) */
.main{position:relative}
.main::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--fase-color);opacity:.85;z-index:5}

/* Regla 6 · "Todas las herramientas" (nada se oculta, sólo se reprioriza) */
.alltools{margin-top:20px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh)}
.alltools>summary{padding:14px 16px;font-weight:700;font-size:13px;color:var(--ink);cursor:pointer;list-style:none;display:flex;align-items:center}
.alltools>summary::-webkit-details-marker{display:none}
.alltools>summary::after{content:"⌄";margin-left:auto;color:var(--mute);font-size:15px}
.alltools[open]>summary::after{content:"⌃"}
.at-inner{padding:4px 16px 16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.at-h{display:flex;align-items:center;gap:7px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--mute);margin-bottom:8px}
.at-dot{width:8px;height:8px;border-radius:50%;flex:none}
.at-now{background:var(--pink);color:#fff;font-size:8.5px;padding:1px 6px;border-radius:999px;letter-spacing:.03em;font-weight:800}
.at-list{display:flex;flex-direction:column;gap:2px}
.at-item{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:9px;text-decoration:none;color:var(--ink);font-size:13px;font-weight:500}
.at-item svg{width:17px;height:17px;color:var(--mute);flex:none}
a.at-item:hover{background:var(--soft)}
.at-item.soon{opacity:.5}

/* Calendario · Vista Día + arrastrar para reprogramar */
.ag-dayfull{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:14px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--sh);max-width:640px}
.ag-dayfull.hoy{border-color:var(--pink);box-shadow:0 0 0 1px var(--pink)}
.ag-dayfull .ev{padding:11px 14px;font-size:14px;border-left-width:4px;border-radius:9px;gap:10px}
.ag-dayfull .ev .ev-h{font-size:13px}
.ag-dayempty{color:var(--mute);text-align:center;padding:28px 0;font-size:14px}
.ev.movable{cursor:grab}
.ev.dragging{opacity:.45}
.ag-day.drop{outline:2px dashed var(--pink);outline-offset:-2px;background:var(--pink-50)}

/* Calendario · filtros (locación / crew) */
.ag-filtros{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 16px}
.ag-filtro{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:600;color:var(--ink);font-family:inherit;cursor:pointer}
.ag-filtro:focus{outline:2px solid var(--pink);outline-offset:1px}
.ag-filtro-clear{background:transparent;border:0;color:var(--pink);font-weight:700;font-size:12.5px;cursor:pointer;font-family:inherit;padding:7px 6px}
.ag-layers{margin-bottom:10px}

/* Etiqueta de grupo en el sidebar (p.ej. "Más") */
.nav-lbl{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45);font-weight:600;padding:6px 12px 6px}

/* Cambiar de fase tocando el spine (hub) y los pasos (sidebar) */
.lc-step-f{display:contents}
button.lc-step{border:0;background:transparent;font:inherit;padding:0;cursor:pointer}
.lc-ico{transition:transform .12s ease}
button.lc-step:hover .lc-ico{transform:translateY(-2px)}
button.lc-step:hover .lc-nom{color:var(--pink)}
.lc-hint{font-size:11.5px;color:var(--mute);text-align:center;margin:12px 0 0}

.sf-head{display:block;text-decoration:none}
.sf-step-f{display:contents}
.side-fase button.sf-step{-webkit-appearance:none;appearance:none;font:inherit;margin:0;cursor:pointer}
.side-fase button.sf-step:hover{background:#fff}

/* ============ Skip-link (teclado) + Confirmación propia de la app ============ */
/* Salta la navegación: invisible hasta que recibe foco con Tab. */
.skip-link{position:fixed;left:12px;top:-60px;z-index:1000;background:var(--navy);color:#fff;
  padding:10px 16px;border-radius:10px;font-weight:600;font-size:14px;text-decoration:none;
  box-shadow:var(--sh-2);transition:top .15s ease}
.skip-link:focus{top:12px;outline:2px solid var(--pink);outline-offset:2px}

/* Diálogo de confirmación (reemplaza al confirm() del navegador). */
.confdlg{border:0;padding:0;background:transparent;max-width:420px;width:calc(100% - 40px);
  border-radius:var(--r-card);box-shadow:var(--sh-2);color:var(--ink)}
.confdlg::backdrop{background:rgba(4,12,62,.45);backdrop-filter:blur(2px)}
.confdlg-box{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:22px 22px 18px}
.confdlg-msg{margin:0 0 18px;font-size:15.5px;line-height:1.5;color:var(--ink);font-weight:500}
.confdlg-row{display:flex;gap:10px;justify-content:flex-end}
.confdlg-row .btn{min-width:110px;justify-content:center}

/* ============ Product polish · interacción fina ============ */
/* Filas de lista clicables: responden al cursor y la flechita se adelanta un pelín. */
a.lrow{border-radius:9px;transition:background .14s ease}
a.lrow:hover{background:var(--soft)}
a.lrow > .mute:last-child,a.lrow > .go{transition:transform .14s ease}
a.lrow:hover > .mute:last-child,a.lrow:hover > .go{transform:translateX(3px)}

/* Feedback al guardar: el botón de envío muestra un spinner durante el POST. */
.btn.cargando{opacity:.82;pointer-events:none;padding-right:36px;position:relative}
.btn.cargando::after{content:"";position:absolute;top:50%;right:14px;width:13px;height:13px;transform:translateY(-50%);
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;opacity:.75;animation:spin .6s linear infinite}
@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}

/* Entrada de contenido: un fade discreto al cargar cada pantalla (sólo opacidad, no
   toca posicionamiento fijo). Se desactiva solo si el sistema pide menos movimiento. */
@media (prefers-reduced-motion: no-preference){
  .main{animation:fadein .24s ease both}
}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* ===== Volver global (v55) + renglones con título/detalle apilados ===== */
.volver{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--blue);text-decoration:none;padding:5px 11px 5px 7px;border-radius:100px;background:var(--blue-t);margin-bottom:8px;transition:background .15s ease}
.volver:hover{background:var(--blue-t2)}
.lrow .t1,.lrow .t2{display:block}

/* ===== Cambio de fase desde el sidebar (v55) ===== */
.side-fase .sf-info{display:block;text-decoration:none}
.side-fase .sf-track{align-items:center}
.side-fase .sf-step{height:12px;padding:4px 0;background-clip:content-box;-webkit-background-clip:content-box}
.side-fase button.sf-step{border:0;display:block;width:100%}

/* ===== Auditoría de clics (v55): checklist, tablero de prep, anclas ===== */
/* Checklist: el texto también palomea; la fila no brinca al marcar */
.ci-tog{display:flex;flex:1;min-width:0;gap:12px;align-items:flex-start;margin:0;background:none;border:0;padding:0}
.ci-txbtn{background:none;border:0;padding:0;margin:0;font:inherit;text-align:left;cursor:pointer;flex:1;min-width:0;color:inherit;display:block}
.ci-txbtn .t1{display:block;font-size:14px;font-weight:500}
.ci-txbtn .t2{display:block;font-size:11.5px;color:var(--mute);margin-top:1px}
.ci-row.done .ci-txbtn .t1{opacity:.5;text-decoration:line-through}
.ci-edit{background:var(--soft);border-radius:10px;padding:12px;margin:6px 0}
/* Área táctil de 44px para el cuadrito, sin cambiar su tamaño visual */
.chk{position:relative}
.chk::after{content:"";position:absolute;inset:-10px}
/* Llegar por ancla (#itN) resalta el renglón un instante */
.ci-row:target,.lrow:target{animation:itflash 1.4s ease}
@keyframes itflash{0%{background:var(--pink-t)}100%{background:transparent}}
/* Tablero de preparación: los desplegables SÍ se ven desplegables (chevron que gira) */
.prep-det>summary::-webkit-details-marker,.prep-det>summary::marker{display:none;content:""}
.prep-det .dtog{color:var(--mute);font-size:18px;line-height:1;transition:transform .15s ease}
.prep-det[open]>summary .dtog{transform:rotate(90deg)}
/* En celular, el checkbox del checklist ya no se estira como formulario */
@media (max-width:640px){ .ci-row .ci-tog{flex:1 1 calc(100% - 44px);min-width:0} }