/* ---------- Tokens ---------- */
:root{
  --bg:#f4f6f8;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --border:#e2e8f0;
  --border-strong:#cbd5e1;
  --text:#0f172a;
  --muted:#64748b;
  --accent:#0f4c81;
  --accent-soft:#e6eef6;
  --ok:#15803d;
  --ok-soft:#dcfce7;
  --warn:#b45309;
  --warn-soft:#fef3c7;
  --danger:#b91c1c;
  --danger-soft:#fee2e2;
  --info:#1d4ed8;
  --info-soft:#dbeafe;
  --violeta:#6d28d9;
  --violeta-soft:#ede9fe;
  --shadow:0 1px 2px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.06);
  --radius:12px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
html[data-theme="dark"]{
  --bg:#0b1220; --surface:#111a2b; --surface-2:#0f1726;
  --border:#1e293b; --border-strong:#334155;
  --text:#e2e8f0; --muted:#94a3b8;
  --accent:#60a5fa; --accent-soft:#17283f;
  --ok:#4ade80; --ok-soft:#113524;
  --warn:#fbbf24; --warn-soft:#3a2a0b;
  --danger:#f87171; --danger-soft:#3b1414;
  --info:#93c5fd; --info-soft:#152544;
  --violeta:#c4b5fd; --violeta-soft:#2b2250;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:15px/1.45 "Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:600}
h2{font-size:22px}

/* ---------- Topbar ---------- */
.topbar{
  display:flex;align-items:center;gap:14px;padding:12px 22px;
  background:var(--surface);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:40;
}
.brand{display:flex;align-items:center;gap:11px}
.brand-mark{
  width:36px;height:36px;border-radius:10px;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-size:19px;
}
.brand-title{font-weight:650}
.brand-sub{font-size:12px;color:var(--muted)}
.spacer{flex:1}

main{padding:22px;max-width:1240px;margin:0 auto}
.page-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  margin-bottom:16px;flex-wrap:wrap;
}
.page-head>div{min-width:0}
.volver{
  border:0;background:transparent;color:var(--accent);cursor:pointer;padding:0;font-size:13px;
}
.volver:hover{text-decoration:underline}

/* ---------- Botones ---------- */
.btn{
  padding:8px 15px;border-radius:9px;border:1px solid var(--border);
  background:var(--surface-2);cursor:pointer;white-space:nowrap;
}
.btn:hover{border-color:var(--border-strong)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent}
.btn-sm{padding:5px 11px;font-size:13px;border-radius:8px}
.btn-danger{color:var(--danger)}
.btn-danger:hover{background:var(--danger-soft)}
.icon-btn{
  border:1px solid transparent;background:transparent;cursor:pointer;border-radius:7px;
  padding:3px 7px;color:var(--muted);font-size:14px;
}
.icon-btn:hover{background:var(--surface-2);border-color:var(--border);color:var(--text)}

.menu-wrap{position:relative}
.menu{
  position:absolute;right:0;top:calc(100% + 6px);min-width:250px;z-index:60;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  box-shadow:var(--shadow);padding:6px;
}
.menu button{
  display:block;width:100%;text-align:left;padding:9px 11px;border:0;border-radius:8px;
  background:transparent;cursor:pointer;
}
.menu button:hover{background:var(--surface-2)}
.menu button.danger{color:var(--danger)}
.menu hr{border:0;border-top:1px solid var(--border);margin:5px 2px}

/* ---------- Tarjetas ---------- */
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.card-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;border-bottom:1px solid var(--border);flex-wrap:wrap;
}
.card-head h3{font-size:15px}
.grid{display:grid;gap:14px}
.cols-3{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.muted{color:var(--muted)}
.small{font-size:13px}
.empty{padding:34px 22px;text-align:center;color:var(--muted)}
.empty p{margin:6px 0 0}
.vencido{color:var(--danger);font-weight:600}
.pronto{color:var(--warn);font-weight:600}
.linea1,.linea2{
  display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;
  -webkit-line-clamp:1;line-clamp:1;
}
.linea2{-webkit-line-clamp:2;line-clamp:2}

.chip{
  display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--border);font-size:12px;color:var(--muted);
  white-space:nowrap;
}
.tag{font-size:11px;padding:1px 7px;border-radius:5px;background:var(--accent-soft);color:var(--accent)}

/* color por etapa */
.chip.etapa-nuevo{background:var(--surface-2)}
.chip.etapa-evaluacion{background:var(--info-soft);color:var(--info);border-color:transparent}
.chip.etapa-negociacion{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.chip.etapa-promesa{background:var(--violeta-soft);color:var(--violeta);border-color:transparent}
.chip.etapa-mira{background:var(--surface-2);border-style:dashed}
.chip.etapa-desarrollo{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.chip.etapa-compra{background:var(--ok-soft);color:var(--ok);border-color:transparent}

/* ---------- Ficha de datos del proyecto ---------- */
.ficha{
  display:flex;flex-wrap:wrap;gap:0;margin-bottom:16px;position:relative;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;
}
.dato{padding:11px 18px;border-right:1px solid var(--border);min-width:120px}
.dato:last-of-type{border-right:0}
.dl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.dv{font-weight:600;margin-top:2px;white-space:nowrap}
.dato-edit{position:absolute;top:8px;right:8px}
.ficha-vacia{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:11px 16px;margin-bottom:16px;border:1px dashed var(--border-strong);border-radius:var(--radius);
}
.cifras{font-size:13px;font-weight:600}
.sep{
  font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;
  border-top:1px solid var(--border);padding-top:14px;margin-top:2px;
}
.sep .muted{font-weight:400;text-transform:none;letter-spacing:0}
.calculado{font-size:13px;color:var(--accent);background:var(--accent-soft);border-radius:9px;padding:0 12px}
.calculado:not(:empty){padding:9px 12px}
.pill{
  display:inline-block;min-width:20px;padding:0 6px;border-radius:999px;
  background:var(--accent);color:#fff;font-size:12px;line-height:19px;text-align:center;
}

/* ---------- Tarjeta de proyecto ---------- */
.pcard{padding:16px;display:flex;flex-direction:column;gap:9px;cursor:pointer}
.pcard:hover{border-color:var(--accent);transform:translateY(-1px);transition:.12s}
.pcard .ph{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.pcard h4{font-size:16px}
.pstats{display:flex;gap:14px;font-size:13px;color:var(--muted);margin-top:2px;flex-wrap:wrap}
.pstats b{color:var(--text);font-weight:600}

/* ---------- Pestañas del proyecto ---------- */
.tabs{display:flex;gap:4px;margin-bottom:14px;border-bottom:1px solid var(--border)}
.tabs button{
  padding:9px 16px;border:0;background:transparent;cursor:pointer;color:var(--muted);
  border-bottom:2px solid transparent;display:flex;align-items:center;gap:7px;
}
.tabs button:hover{color:var(--text)}
.tabs button.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}

/* ---------- Agregar rápido ---------- */
.quick-add{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.quick-add input[type="text"],.quick-add input:not([type]){flex:1;min-width:240px}
.quick-add input{
  padding:11px 14px;border-radius:10px;border:1px solid var(--border);background:var(--surface);
}
.quick-add #quickAdd{flex:1;min-width:240px}
.quick-add input:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}

/* ---------- Lista de pendientes ---------- */
.lista{list-style:none;margin:0;padding:0}
.item{
  display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);
}
.item:last-child{border-bottom:0}
.item:hover{background:var(--surface-2)}
.chk{width:19px;height:19px;cursor:pointer;accent-color:var(--accent);flex:none}
.it-main{flex:1;min-width:0}
.it-title{cursor:pointer}
.it-title:hover{color:var(--accent)}
.item.hecho .it-title{text-decoration:line-through;color:var(--muted)}
.t-sub{font-size:12px;color:var(--muted);margin-top:3px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.it-fecha{flex:none;text-align:right;min-width:92px}
.actions{display:flex;gap:2px;flex:none;opacity:.35}
.item:hover .actions{opacity:1}

table{width:100%;border-collapse:collapse}
td{padding:10px 16px;border-bottom:1px solid var(--border)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
.t-title{font-weight:550}

/* ---------- Gantt ---------- */
.gantt-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.seg{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.seg button{padding:5px 12px;border:0;background:var(--surface-2);cursor:pointer;color:var(--muted);font-size:13px}
.seg button+button{border-left:1px solid var(--border)}
.seg button.active{background:var(--accent);color:#fff}

.gantt-scroll{overflow:auto;max-height:66vh;position:relative;background:var(--surface);border-radius:0 0 var(--radius) var(--radius)}
.gantt-inner{position:relative}
.gantt-head{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--border-strong)}
.gantt-head-row{display:flex;height:26px}
.gantt-corner{
  position:sticky;left:0;z-index:22;background:var(--surface);border-right:1px solid var(--border-strong);
  display:flex;align-items:center;padding:0 10px;font-size:12px;color:var(--muted);font-weight:600;
}
.gantt-months,.gantt-ticks{position:relative;flex:none;height:26px}
.gantt-month{
  position:absolute;top:0;height:26px;border-left:1px solid var(--border);
  font-size:11px;color:var(--muted);padding:5px 6px;white-space:nowrap;overflow:hidden;text-transform:capitalize;
}
.gantt-tick{
  position:absolute;top:0;height:26px;border-left:1px solid var(--border);
  font-size:10px;color:var(--muted);text-align:center;overflow:hidden;padding-top:7px;
}
.gantt-tick.we{background:var(--surface-2)}
.gantt-row{display:flex;height:36px;border-bottom:1px solid var(--border);position:relative}
.gantt-row:hover{background:var(--surface-2)}
.gantt-label{
  position:sticky;left:0;z-index:12;background:var(--surface);border-right:1px solid var(--border-strong);
  display:flex;align-items:center;gap:8px;padding:0 10px;overflow:hidden;font-size:13px;
}
.gantt-row:hover .gantt-label{background:var(--surface-2)}
.gantt-label .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gantt-label .ic{color:var(--muted);font-size:11px}
.gantt-label .spacer{flex:1}
.gantt-track{position:relative;flex:none;height:36px}
.gantt-grid{position:absolute;inset:0;pointer-events:none}
.gantt-gridline{position:absolute;top:0;bottom:0;border-left:1px solid var(--border)}
.gantt-weekend{position:absolute;top:0;bottom:0;background:rgba(100,116,139,.07)}
.gantt-bar{
  position:absolute;top:8px;height:20px;border-radius:5px;background:var(--accent);
  color:#fff;font-size:11px;display:flex;align-items:center;padding:0 7px;cursor:grab;
  overflow:hidden;white-space:nowrap;user-select:none;
}
.gantt-bar .prog{position:absolute;left:0;top:0;bottom:0;background:rgba(255,255,255,.35)}
.gantt-bar .lbl{position:relative;z-index:2;text-shadow:0 1px 1px rgba(0,0,0,.25)}
.gantt-bar.critico{outline:2px solid var(--danger);outline-offset:1px}
.gantt-bar.cerrado{opacity:.55}
.gantt-handle{position:absolute;top:0;bottom:0;width:7px;cursor:ew-resize}
.gantt-handle.l{left:0}.gantt-handle.r{right:0}
.gantt-ms{
  position:absolute;top:9px;width:18px;height:18px;transform:rotate(45deg);
  background:var(--warn);border:2px solid var(--surface);cursor:grab;border-radius:3px;
}
.gantt-ms.critico{background:var(--danger)}
.gantt-ms-label{position:absolute;top:10px;font-size:11px;color:var(--muted);white-space:nowrap;pointer-events:none}
.gantt-today{position:absolute;top:0;bottom:0;width:2px;background:var(--danger);opacity:.65;z-index:8;pointer-events:none}
.gantt-dep{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:visible}
.gantt-legend{display:flex;gap:16px;font-size:12px;color:var(--muted);padding:11px 16px;flex-wrap:wrap;align-items:center;border-top:1px solid var(--border)}
.lg{display:inline-flex;align-items:center;gap:6px}
.lg i{width:14px;height:10px;border-radius:3px;display:inline-block;background:var(--accent)}
.lg i.ms{transform:rotate(45deg);width:11px;height:11px;background:var(--warn);border-radius:2px}
.lg i.hoy{width:2px;height:13px;background:var(--danger);border-radius:0}

/* ---------- Modal ---------- */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:100;
  display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow:auto;
}
.modal-backdrop[hidden]{display:none}   /* el atributo hidden debe ganarle al display:flex */
.modal{
  background:var(--surface);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.3);
  width:min(620px,100%);border:1px solid var(--border);
}
.modal.wide{width:min(880px,100%)}
.modal-head{
  padding:15px 20px;border-bottom:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;
}
.modal-body{padding:20px;display:flex;flex-direction:column;gap:15px}
.modal-foot{
  padding:13px 20px;border-top:1px solid var(--border);
  display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;
}
.field{display:flex;flex-direction:column;gap:5px}
.field>label{font-size:12px;color:var(--muted);font-weight:600}
.field input,.field select,.field textarea{
  padding:9px 12px;border-radius:9px;border:1px solid var(--border);background:var(--surface-2);width:100%;
}
.field textarea{resize:vertical;min-height:72px;font-family:inherit}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.f3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:13px}
.check{display:flex;align-items:center;gap:9px;font-size:14px;cursor:pointer}
.check input{width:17px;height:17px;accent-color:var(--accent)}
code{background:var(--surface-2);padding:1px 5px;border-radius:4px;font-family:var(--mono);font-size:12px}

/* ---------- Toast ---------- */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:var(--text);color:var(--bg);padding:11px 20px;border-radius:10px;z-index:200;
  box-shadow:var(--shadow);font-size:14px;
}

/* ---------- Agrupación por etapa ---------- */
.grupo-etapa{display:flex;align-items:center;gap:10px;margin:20px 0 10px}
.grupo-etapa:first-of-type{margin-top:4px}

/* ---------- Sincronización con carpeta ---------- */
.sync{font-size:12px;color:var(--ok);background:var(--ok-soft);padding:3px 10px;border-radius:999px;white-space:nowrap}
.sync.off{color:var(--warn);background:var(--warn-soft)}
.sync-btn{font-size:12px}

/* ---------- Pantalla de entrada ---------- */
.login-backdrop{
  position:fixed;inset:0;background:var(--bg);z-index:200;
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.login{
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  box-shadow:var(--shadow);padding:28px;width:min(420px,100%);text-align:center;
}
.login-marca{color:var(--accent);font-weight:600;letter-spacing:.02em}
.login h2{margin:14px 0 6px;font-size:20px}
.login p{color:var(--muted);font-size:14px;line-height:1.5;margin:0 0 18px}
.login .btn{width:100%;justify-content:center}
.login-msg{margin:14px 0 0;min-height:20px}

/* ---------- Trazabilidad ---------- */
.tag-claude{background:var(--violeta-soft);color:var(--violeta)}
.fuente{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Resumen (ficha de conocimiento) ---------- */
.resumen-body{padding:6px 20px 18px;line-height:1.55}
.resumen-body h3,.resumen-body h4,.resumen-body h5{margin:16px 0 6px}
.resumen-body h3{font-size:17px}.resumen-body h4{font-size:15px;color:var(--accent)}.resumen-body h5{font-size:14px}
.resumen-body p{margin:6px 0}
.resumen-body ul{margin:4px 0 8px;padding-left:20px}
.resumen-body li{margin:2px 0}
.md-t{margin:8px 0 12px;font-size:13px;border:1px solid var(--border);border-radius:8px}
.md-t th{text-align:left;padding:7px 12px;background:var(--surface-2);border-bottom:1px solid var(--border);font-weight:600}
.md-t td{padding:7px 12px}

/* ---------- Permisos de la promesa ---------- */
h3.bloque{font-size:15px;margin:4px 0 10px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
h3.bloque .muted{font-weight:400}
.acciones{display:flex;flex-direction:column}
.accion{display:grid;grid-template-columns:100px minmax(0,1fr) 120px 120px 130px;gap:16px;align-items:center;
  padding:12px 16px;border-bottom:1px solid var(--border)}
.accion:last-child{border-bottom:0}
.accion .sev{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:inline-flex;gap:7px;align-items:center}
.accion .sev::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--warn);flex:none}
.accion.r .sev{color:var(--danger)}.accion.r .sev::before{background:var(--danger)}
.accion.t .sev::before{background:var(--ok)}
.accion .aw{display:flex;flex-direction:column;gap:2px;min-width:0}
.accion .aw b{font-weight:600}
.accion .aw span,.accion .ak span{font-size:12px;color:var(--muted)}
.accion .ak{display:flex;flex-direction:column;gap:1px}
.accion .ak b{font-family:var(--mono);font-size:13px;font-weight:600}
.accion.r .ak b{color:var(--danger)}
.accion .acc{justify-self:end}
.accion input[type=date],input.mini{padding:5px 8px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);font-size:13px}
input.mini{width:56px;margin:0 4px}
.pg-scroll{overflow-x:auto}
.pg{min-width:980px;display:grid;grid-template-columns:230px 1fr}
.pl{height:50px;padding:0 14px;display:flex;flex-direction:column;justify-content:center;gap:2px;border:0;border-right:1px solid var(--border-strong);
  border-bottom:1px solid var(--border);background:var(--surface);position:sticky;left:0;z-index:4;text-align:left;font-size:13px;min-width:0}
.pl b{font-weight:600;display:flex;align-items:center;gap:8px;line-height:1.2}
.pl span{font-size:11px;color:var(--muted);padding-left:0}
button.pl{cursor:pointer}button.pl:hover b{color:var(--accent)}
button.pl span{padding-left:16px}
.pl.dim b{color:var(--muted)}
.pl.ph,.pr.ph{height:30px;background:var(--surface-2)}
.pl.sum,.pr.sum{background:var(--surface-2)}
.pr{height:50px;border-bottom:1px solid var(--border);position:relative}
.pr.dim .pb,.pr.dim .pdl,.pr.dim .plab{opacity:.4}
.pm{position:absolute;top:0;bottom:0;border-left:1px solid var(--border)}
.pm.y{border-left-color:var(--border-strong)}
.pmt{position:absolute;top:7px;font-size:10px;color:var(--muted);font-family:var(--mono);padding-left:4px;text-transform:capitalize}
.pmt.y{color:var(--text);font-weight:700}
.pd{width:8px;height:8px;border-radius:50%;flex:none;background:var(--border-strong);display:inline-block}
.pd.ok{background:var(--ok)}.pd.prog{background:var(--info)}.pd.late{background:var(--danger)}.pd.conf{background:var(--warn)}
.pb{position:absolute;top:18px;height:14px;border-radius:4px}
.pb.win{background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.pb.late{background:repeating-linear-gradient(135deg,var(--danger) 0 3px,var(--danger-soft) 3px 6px)}
.pb.tram{background:var(--info);opacity:.75}
.pb.tram.asm{opacity:1;background:repeating-linear-gradient(90deg,var(--info-soft) 0 6px,transparent 6px 9px);outline:1px dashed var(--info);outline-offset:-1px}
.pb.done{background:var(--ok)}
.pb.span{background:var(--text);height:5px;top:23px;border-radius:3px}
.pb.esc{background:var(--muted);opacity:.5}
.pb.plan{height:0;top:40px;border-top:2px dotted var(--muted);border-radius:0}
.pb.gap{height:20px;top:15px;display:flex;align-items:center;justify-content:center;overflow:visible;border-radius:4px}
.pb.gap.bad{background:var(--danger-soft);border:1px solid var(--danger)}
.pb.gap.good{background:var(--ok-soft);border:1px solid var(--ok)}
.pb.gap span{font-family:var(--mono);font-size:12px;font-weight:700;white-space:nowrap;color:var(--danger)}
.pb.gap.good span{color:var(--ok)}
.pdl{position:absolute;top:13px;width:2px;height:24px;background:var(--text)}
.plab{position:absolute;top:17px;font-family:var(--mono);font-size:11px;white-space:nowrap;color:var(--muted);padding-left:8px}
.plab.izq{transform:translateX(-100%);padding:0 8px 0 0}
.pstar{position:absolute;top:12px;transform:translateX(-50%);font-size:20px;line-height:1}
.pstar.bad{color:var(--danger)}.pstar.good{color:var(--ok)}
.pv{position:absolute;top:0;bottom:0;z-index:3;pointer-events:none}
.pv.hoy{border-left:2px solid var(--danger);opacity:.7}
.pv.lim{border-left:2px dashed var(--text)}
.pflag{position:absolute;top:5px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 6px;white-space:nowrap;z-index:5;border-radius:4px}
.pflag.hoy{background:var(--danger);color:#fff;transform:translateX(-100%)}
.pflag.lim{background:var(--text);color:var(--bg)}
.lg i.pw{background:var(--accent-soft);border:1px solid var(--accent)}
.lg i.pla{background:repeating-linear-gradient(135deg,var(--danger) 0 3px,var(--danger-soft) 3px 6px)}
.lg i.ptr{background:var(--info);opacity:.75}
.lg i.pas{background:var(--info-soft);outline:1px dashed var(--info);outline-offset:-1px}
.lg i.pok{background:var(--ok)}
/* ficha dentro del modal de permiso */
.modal .ficha .dato{flex:1 1 45%}
@media (max-width:700px){.accion{grid-template-columns:1fr 1fr}.accion .sev,.accion .aw{grid-column:1/-1}.accion .acc{grid-column:1/-1;justify-self:start}}

@media (max-width:700px){
  .f2,.f3{grid-template-columns:1fr}
  main{padding:14px}
  h2{font-size:19px}
  /* en pantallas angostas la fecha baja a su propia línea */
  .item{flex-wrap:wrap}
  .it-main{flex:1 1 auto}
  .actions{order:3;opacity:1}
  .it-fecha{order:4;flex:1 1 100%;text-align:left;padding-left:31px;min-width:0}
}
@media print{
  .topbar,.tabs,.gantt-toolbar,.actions,.quick-add,.page-head button{display:none}
  .gantt-scroll{max-height:none;overflow:visible}
  body{background:#fff}
}