/* =====================================================================
   MP Design — CRM
   Lenguaje visual: la disciplina de Apple (tipografía del sistema,
   superficies en capas, separadores de un pelo, mucho aire) con el
   verde de marca de la web y el monograma MP de miltonpenalba.com.
   ===================================================================== */

:root{
  /* ---- Marca ---- */
  --marca:#365f23;
  --marca-hover:#294b19;
  --acento:#a5c98b;

  /* ---- Superficies: base, tarjeta, elevado ---- */
  --ink:#0a0a0b;
  --surface:#151518;
  --surface-2:#1e1e23;
  --surface-3:#29292c;

  /* ---- Tinta ---- */
  --paper:#f5f5f7;
  --muted:#a4a4af;
  --muted-2:#9d9d9d;

  /* ---- Separadores de un pelo, no bordes duros ---- */
  --line:rgba(255,255,255,.075);
  --line-2:rgba(255,255,255,.13);
  --hover:rgba(255,255,255,.055);
  --press:rgba(255,255,255,.09);

  /* ---- Semánticos ---- */
  --ok:var(--acento);
  --warn:var(--paper);
  --bad:var(--paper);

  /* ---- Forma ---- */
  --r:16px;
  --r-sm:11px;
  --r-xs:8px;
  --pill:980px;

  --pad:clamp(20px,3vw,40px);
  --side-w:252px;

  /* Curva tipo resorte, corta */
  --ease:cubic-bezier(.32,.72,0,1);

  --sombra:0 1px 1px rgba(0,0,0,.16), 0 8px 28px rgba(0,0,0,.28);
  --sombra-alta:0 12px 48px rgba(0,0,0,.45);

  --tab-h:calc(56px + env(safe-area-inset-bottom));
}

body.light{
  --marca:#0e2d05;
  --acento:#0e2d05;
  --ink:#f5f5f7;
  --surface:#ffffff;
  --surface-2:#f5f5f7;
  --surface-3:#ebebf0;
  --paper:#19191d;
  --muted:#62626b;
  --muted-2:#656565;
  --line:rgba(0,0,0,.08);
  --line-2:rgba(0,0,0,.14);
  --hover:rgba(0,0,0,.035);
  --press:rgba(0,0,0,.06);
  --ok:var(--acento);
  --warn:var(--paper);
  --bad:var(--paper);
  --sombra:0 1px 1px rgba(0,0,0,.04), 0 6px 22px rgba(0,0,0,.07);
  --sombra-alta:0 12px 44px rgba(0,0,0,.14);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",
              Inter,Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;
  line-height:1.47;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition:background .4s var(--ease), color .4s var(--ease);
}

a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}

h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.022em}
h1{font-size:28px;letter-spacing:-.03em}
h2{font-size:20px}
h3{font-size:16px}
p{margin:0}

/* Apenas un susurro de la textura de la marca */
.noise{
  position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.014;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.light .noise{opacity:.02}

/* Etiqueta pequeña — sin gritar en mayúsculas */
.micro{
  font-size:12.5px;font-weight:500;color:var(--muted);
  letter-spacing:-.005em;
}

::selection{background:color-mix(in srgb,var(--marca) 35%,transparent)}
:focus-visible{outline:2px solid var(--acento);outline-offset:2px;border-radius:6px}

/* ============================= SIDEBAR ============================= */
.side{
  position:fixed;inset:0 auto 0 0;width:var(--side-w);z-index:40;
  display:flex;flex-direction:column;
  background:var(--surface);
  border-right:1px solid var(--line);
  transition:transform .42s var(--ease);
}

.side-top{padding:22px 18px 10px}

.brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.03em}
.brand b{
  width:34px;height:34px;border-radius:10px;
  background:var(--paper);color:var(--ink);
  display:grid;place-items:center;font-size:12px;font-weight:700;flex:none;
  letter-spacing:-.04em;
}
.brand .logo{width:30px;height:34px;flex:none;color:var(--paper)}
.login .brand .logo{width:40px;height:46px}
.brand span{font-size:15.5px}
.brand sup{font-size:6px;vertical-align:super;color:var(--muted)}

.nav{flex:1;overflow-y:auto;padding:6px 10px 20px;-webkit-overflow-scrolling:touch}
.nav-label{
  font-size:11.5px;font-weight:600;color:var(--muted-2);
  padding:18px 10px 6px;letter-spacing:-.005em;
}
.nav a{
  display:flex;align-items:center;gap:11px;
  padding:8px 10px;border-radius:var(--r-sm);
  color:var(--paper);font-size:14.5px;font-weight:450;
  transition:background .18s var(--ease);
}
.nav a:hover{background:var(--hover)}
.nav a:active{background:var(--press)}
.nav a.on{background:var(--marca);color:#fff;font-weight:500}
.nav a svg{width:18px;height:18px;flex:none;opacity:.62;stroke-width:1.7}
.nav a.on svg{opacity:1}
.nav a em{
  margin-left:auto;font-style:normal;font-size:11.5px;font-weight:600;
  background:var(--paper);color:var(--ink);border-radius:var(--pill);
  padding:0 7px;min-width:20px;text-align:center;line-height:19px;
}
.nav a.on em{background:rgba(255,255,255,.24)}

.side-foot{padding:12px 14px;border-top:1px solid var(--line)}
.me{display:flex;align-items:center;gap:10px}
.me-av{
  width:32px;height:32px;border-radius:var(--pill);flex:none;
  background:var(--marca);color:#fff;
  display:grid;place-items:center;font-size:11.5px;font-weight:600;
}
.me strong{display:block;font-size:13.5px;font-weight:500;
           overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me small{color:var(--muted);font-size:12px}

/* ============================== MAIN ============================== */
.main{margin-left:var(--side-w);min-height:100vh;display:flex;flex-direction:column}

.top{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:16px;
  padding:14px var(--pad);
  background:color-mix(in srgb,var(--ink) 72%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line);
}
.crumb h1{font-size:24px}
.crumb p{font-size:13px;color:var(--muted);margin-top:1px}

.top-tools{margin-left:auto;display:flex;align-items:center;gap:10px}

.search{
  display:flex;align-items:center;gap:8px;
  background:var(--surface-2);border:1px solid transparent;
  border-radius:var(--r-sm);padding:0 12px;height:36px;width:280px;
  transition:border-color .2s,background .2s;
}
.search:focus-within{border-color:var(--marca);background:var(--surface)}
.search svg{width:15px;height:15px;color:var(--muted);flex:none}
.search input{border:0;background:none;outline:0;width:100%;font-size:14px}
.search input::placeholder{color:var(--muted)}

/* ============================= BOTONES ============================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:36px;padding:0 15px;border-radius:var(--r-sm);
  border:0;background:var(--surface-2);
  font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap;
  transition:background .18s var(--ease), transform .1s var(--ease), opacity .18s;
}
.btn:hover{background:var(--surface-3)}
.btn:active{transform:scale(.97)}
.btn svg{width:15px;height:15px;stroke-width:2}
.btn-pri{background:var(--marca);color:#fff}
.btn-pri:hover{background:var(--marca-hover)}
.btn-sm{height:30px;padding:0 12px;font-size:13px;border-radius:var(--r-xs)}
.btn-ghost{background:transparent}
.btn-ghost:hover{background:var(--hover)}

.icon-btn{
  width:36px;height:36px;flex:none;
  display:grid;place-items:center;
  border:0;background:var(--surface-2);
  border-radius:var(--pill);cursor:pointer;
  transition:background .18s var(--ease), transform .1s;
}
.icon-btn:hover{background:var(--surface-3)}
.icon-btn:active{transform:scale(.93)}
.icon-btn svg{width:16px;height:16px;stroke-width:1.9}

/* ============================== VISTA ============================== */
.view{padding:24px var(--pad) 64px;flex:1}

.grid{display:grid;gap:14px}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-23{grid-template-columns:2fr 1fr}

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
}
.card-head{
  display:flex;align-items:center;gap:12px;
  padding:15px 18px;
}
.card-head + .card-body,
.card-head + .tw,
.card-head + .cal-head{border-top:1px solid var(--line)}
.card-head h3{font-size:16px;font-weight:600}
.card-head .btn{margin-left:auto}
.card-body{padding:18px}
.card-body.tight{padding:0}

/* Tarjeta de dato: el número manda */
.kpi{padding:18px}
.kpi .micro{margin-bottom:8px}
.kpi-val{
  font-size:30px;font-weight:600;letter-spacing:-.035em;line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.kpi-foot{margin-top:6px;font-size:13px;color:var(--muted);
          display:flex;align-items:center;gap:6px}
.up{color:var(--ok)} .down{color:var(--bad)} .flat{color:var(--muted)}

/* ============================== TABLA ============================== */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:14px}
th{
  text-align:left;font-size:12.5px;color:var(--muted);font-weight:500;
  padding:11px 18px;border-bottom:1px solid var(--line);white-space:nowrap;
  letter-spacing:-.005em;
}
td{padding:13px 18px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .15s;cursor:pointer}
tbody tr:hover{background:var(--hover)}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.t-main{font-weight:500}
.t-sub{color:var(--muted);font-size:13px;margin-top:1px}

.av{
  width:30px;height:30px;border-radius:9px;flex:none;
  display:grid;place-items:center;font-size:11px;font-weight:600;color:#fff;
  letter-spacing:-.02em;
}
.cell{display:flex;align-items:center;gap:10px}

/* ============================== BADGES ============================== */
.tag{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12.5px;font-weight:500;
  padding:2px 9px;border-radius:var(--pill);white-space:nowrap;
}
.tag::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.tag-ok  {color:var(--ok);  background:color-mix(in srgb,var(--ok) 15%,transparent)}
.tag-warn{color:var(--warn);background:color-mix(in srgb,var(--warn) 15%,transparent)}
.tag-bad {color:var(--bad); background:color-mix(in srgb,var(--bad) 15%,transparent)}
.tag-info{color:var(--acento);background:color-mix(in srgb,var(--marca) 18%,transparent)}
.tag-mute{color:var(--muted);background:var(--hover)}
body.light .tag-info{color:var(--marca)}

/* ============================== LISTAS ==============================
   Separadores que arrancan donde arranca el texto, no en el borde.
   Es la firma de las listas de iOS.
   =================================================================== */
.row{
  display:flex;align-items:center;gap:12px;
  padding:12px 18px;position:relative;
}
.row::after{
  content:"";position:absolute;left:18px;right:0;bottom:0;
  height:1px;background:var(--line);
}
.row:last-child::after{display:none}
.row-main{flex:1;min-width:0}
.row-main strong{display:block;font-size:14.5px;font-weight:500}
.row-main small{color:var(--muted);font-size:13px}
.row-date{
  width:44px;flex:none;text-align:center;
  background:var(--surface-2);border-radius:var(--r-xs);padding:5px 0;
}
.row-date b{display:block;font-size:16px;font-weight:600;
            letter-spacing:-.03em;line-height:1.1}
.row-date span{font-size:10.5px;color:var(--muted)}

.alert{display:flex;gap:11px;align-items:flex-start;padding:12px 18px;position:relative}
.alert::after{
  content:"";position:absolute;left:18px;right:0;bottom:0;
  height:1px;background:var(--line);
}
.alert:last-child::after{display:none}
.alert i{width:7px;height:7px;border-radius:50%;margin-top:6px;flex:none}
.alert strong{font-size:14px;font-weight:500;display:block}
.alert small{color:var(--muted);font-size:13px}

/* =========================== SEGUIMIENTO =========================== */
.seg-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.seg-fila{
  display:grid;grid-template-columns:206px 1fr 80px;
  align-items:center;gap:16px;
  padding:9px 0;position:relative;min-width:640px;
}
.seg-fila::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:1px;background:var(--line);
}
.seg-fila:last-of-type::after{display:none}
.seg-head{padding-bottom:7px}

.seg-cli{display:flex;align-items:center;gap:10px;min-width:0}
.seg-cli strong{display:block;font-size:14px;font-weight:500;
                overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seg-cli small{color:var(--muted);font-size:12.5px}

.seg-dias{display:flex;gap:3px}
.seg-dias.nums{font-size:10px;color:var(--muted-2);font-weight:500}
.seg-dias.nums span{flex:1;min-width:0;text-align:center;font-variant-numeric:tabular-nums}
.seg-dias.nums .finde{opacity:.45}
.seg-dias.nums .hoy{color:var(--acento);font-weight:700}

.dia{
  flex:1;min-width:11px;height:26px;border-radius:7px;padding:0;
  background:var(--surface-2);border:1px solid transparent;
  transition:transform .16s var(--ease), background .18s, box-shadow .18s;
  cursor:pointer;
}
.dia.hecho{background:var(--c);border-color:var(--c)}
/* A medias: el relleno sube desde abajo, proporcional a lo cumplido */
.dia.parcial{border-color:var(--c)}
.dia.finde:not(.hecho):not(.parcial){background:transparent;border:1px dashed var(--line-2)}
.dia.futuro:not(.hecho):not(.parcial){background:transparent;border:1px solid var(--line);opacity:.5}
/* Día sin rutinas: ni se puede tocar */
.dia.libre{background:transparent;border:1px solid var(--line);opacity:.28;cursor:default}
.dia.hoy{outline:2px solid var(--acento);outline-offset:1px}
.dia:hover:not(:disabled),.dia:focus-visible{
  transform:scaleY(1.18);box-shadow:0 2px 8px rgba(0,0,0,.3)}
.dia:active:not(:disabled){transform:scaleY(.95)}
.dia:disabled{cursor:default}

.seg-pct{text-align:right}
.seg-pct b{font-size:15px;font-weight:600;letter-spacing:-.025em}
.seg-pct .bar{margin-top:4px}

.seg-leyenda{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted);
}
.seg-leyenda .dia{flex:none;width:15px;height:15px;min-width:0}

/* ======================== REGISTRO RÁPIDO ========================
   Botón flotante siempre a mano, y una hoja pensada para anotar
   en cinco segundos: monto grande, un campo, dos selectores.
   =============================================================== */
.fab{
  position:fixed;right:24px;bottom:24px;z-index:46;
  width:54px;height:54px;border-radius:50%;
  border:0;background:var(--marca);color:#fff;cursor:pointer;
  display:grid;place-items:center;
  box-shadow:0 6px 22px rgba(100,143,71,.45), 0 1px 3px rgba(0,0,0,.3);
  transition:transform .18s var(--ease), box-shadow .2s, background .2s;
}
.fab:hover{transform:scale(1.06);background:var(--marca-hover);
           box-shadow:0 10px 30px rgba(100,143,71,.55)}
.fab:active{transform:scale(.94)}
.fab svg{width:24px;height:24px;stroke-width:2.4}

.rap-monto{
  display:flex;align-items:baseline;justify-content:center;gap:8px;
  padding:8px 0 4px;
}
.rap-monto span{font-size:26px;font-weight:500;color:var(--muted)}
.rap-monto input{
  width:auto;max-width:260px;height:auto;padding:0;
  background:transparent;border:0;outline:0;text-align:left;
  font-size:52px;font-weight:600;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;color:var(--paper);
}
.rap-monto input::placeholder{color:var(--line-2)}
.rap-monto input::-webkit-outer-spin-button,
.rap-monto input::-webkit-inner-spin-button{-webkit-appearance:none}
.rap-monto input[type=number]{-moz-appearance:textfield}

.rap-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:2px}
.rap-chips .chip-task{height:30px;font-size:12.5px;padding:0 11px}

/* Aviso breve que confirma y se va solo */
.toast{
  position:fixed;left:50%;bottom:calc(var(--tab-h) + 20px);z-index:500;
  transform:translateX(-50%) translateY(12px);
  background:var(--surface-3);color:var(--paper);
  padding:10px 18px;border-radius:var(--pill);
  font-size:14px;font-weight:500;box-shadow:var(--sombra-alta);
  opacity:0;transition:opacity .25s var(--ease), transform .25s var(--ease);
  pointer-events:none;
}
.toast.ver{opacity:1;transform:translateX(-50%)}

/* ========================== PRESUPUESTO ========================== */
.pres{padding:11px 0;border-bottom:1px solid var(--line)}
.pres:last-child{border-bottom:0;padding-bottom:0}
.pres:first-child{padding-top:0}
.pres-top{display:flex;justify-content:space-between;align-items:baseline;
          gap:12px;font-size:13.5px;margin-bottom:2px}
.pres-top b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.pres-top b small{color:var(--muted);font-weight:450;font-size:12px}
.pres-nota{display:block;margin-top:5px;font-size:12px;color:var(--muted)}

@media(max-width:820px){
  .fab{right:16px;bottom:calc(var(--tab-h) + 14px);width:52px;height:52px}
  .rap-monto input{font-size:44px}
  .toast{bottom:calc(var(--tab-h) + 80px)}
}

/* ========================= PLANIFICADOR ==========================
   Matriz rutinas x días. Se marca una casilla, una fila entera
   (toda la semana o el mes) o una columna (el día completo).
   =============================================================== */
.pl-top{display:flex;align-items:center;gap:14px;margin-bottom:14px}

.pl-wrap{
  border:1px solid var(--line);border-radius:var(--r-sm);
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.pl-fila{display:flex;align-items:stretch;border-bottom:1px solid var(--line)}
.pl-fila:last-child{border-bottom:0}
.pl-head{background:var(--surface-2)}

.pl-rot{
  width:168px;flex:none;text-align:left;
  padding:9px 12px;border:0;background:transparent;
  border-right:1px solid var(--line);cursor:pointer;
  display:flex;flex-direction:column;justify-content:center;gap:1px;
  transition:background .15s;
}
.pl-rot:hover{background:var(--hover)}
.pl-rot span{font-size:13.5px;font-weight:500;
             overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-rot small{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.pl-rot.completa small{color:var(--ok)}
.pl-head .pl-rot{cursor:default}
.pl-head .pl-rot:hover{background:transparent}

.pl-celdas{display:flex;flex:1;gap:3px;padding:6px;min-width:0}

.pl-dia{
  flex:1;min-width:26px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  border:0;background:transparent;border-radius:var(--r-xs);
  color:var(--muted);font-size:11px;font-weight:500;
  padding:3px 0;cursor:pointer;transition:background .15s,color .15s;
}
.pl-dia:hover{background:var(--hover);color:var(--paper)}
.pl-dia b{font-size:13px;font-weight:600;color:var(--paper)}
.pl-dia.finde{opacity:.55}
.pl-dia.hoy,.pl-dia.hoy b{color:var(--acento)}

.pl-celda{
  flex:1;min-width:26px;height:30px;
  border:1px solid var(--line-2);border-radius:var(--r-xs);
  background:transparent;cursor:pointer;padding:0;
  transition:background .16s var(--ease), transform .12s, border-color .16s;
}
.pl-celda:hover{border-color:var(--c);background:color-mix(in srgb,var(--c) 22%,transparent)}
.pl-celda:active{transform:scale(.9)}
.pl-celda.ok{background:var(--c);border-color:var(--c)}
.pl-celda.futuro:not(.ok){border-style:dashed;opacity:.65}
.pl-celda.vacia{
  border:0;background:transparent;cursor:default;
  background-image:radial-gradient(circle,var(--line-2) 1px,transparent 1px);
  background-size:5px 5px;background-position:center;
  opacity:.5;
}

.pl-abrir{margin-top:7px;width:100%}

@media(max-width:820px){
  .pl-rot{width:118px;padding:8px 9px}
  .pl-rot span{font-size:12.5px}
  .pl-celda,.pl-dia{min-width:22px}
  .pl-celda{height:28px}
}

/* ======================== GRÁFICO DE FLUJO ======================== */
.gf-tot{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  padding-bottom:18px;border-bottom:1px solid var(--line);
}
.gf-tot b{
  display:block;margin-top:4px;
  font-size:21px;font-weight:600;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.gf{width:100%;height:auto;display:block;color:var(--paper);margin-top:6px}
.gf-cero{stroke:var(--line-2);stroke-width:1}
.gf-hoy{stroke:var(--marca);stroke-width:1;stroke-dasharray:3 4;opacity:.55}
.gf-dia{fill:var(--muted-2);font-size:11px;font-variant-numeric:tabular-nums}
.gf-etq{fill:var(--paper);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.gf rect{transition:opacity .16s}
.gf:hover rect{opacity:.4}
.gf rect:hover{opacity:1}

.gf-leyenda{display:flex;gap:14px;margin-left:auto;font-size:12.5px;color:var(--muted)}
.gf-leyenda span{display:flex;align-items:center;gap:6px}
.gf-leyenda i{width:9px;height:9px;border-radius:3px;flex:none}
.gf-nota{margin-top:12px;font-size:12.5px;color:var(--muted);line-height:1.55;max-width:620px}

.tip{
  position:fixed;z-index:400;pointer-events:none;
  background:var(--surface-3);border:1px solid var(--line-2);
  border-radius:var(--r-xs);padding:6px 10px;
  font-size:13px;white-space:nowrap;
  box-shadow:var(--sombra);opacity:0;transition:opacity .14s;
}
.tip.ver{opacity:1}

/* ============================ MINIMIZAR ============================ */
.plegar{
  width:26px;height:26px;flex:none;margin-left:auto;
  display:grid;place-items:center;
  border:0;background:transparent;border-radius:var(--pill);cursor:pointer;
  color:var(--muted);transition:background .18s,color .18s,transform .3s var(--ease);
}
.card-head .btn + .plegar{margin-left:6px}
.plegar:hover{background:var(--hover);color:var(--paper)}
.plegar svg{width:15px;height:15px;stroke-width:2}
.card.plegado .plegar{transform:rotate(-90deg)}
.card.plegado .card-body,.card.plegado .tw,
.card.plegado .cal,.card.plegado .cal-head{display:none}
.card.plegado{align-self:start}

/* ============================== SWITCH ============================== */
.switch{
  display:inline-flex;padding:2px;gap:2px;
  background:var(--surface-2);border-radius:var(--r-sm);
}
.switch button{
  height:30px;padding:0 15px;border:0;border-radius:9px;
  background:transparent;color:var(--muted);
  font-size:13.5px;font-weight:500;cursor:pointer;transition:.2s var(--ease);
}
.switch button:hover{color:var(--paper)}
.switch button.on{background:var(--surface);color:var(--paper);box-shadow:var(--sombra)}
body.light .switch button.on{background:#fff}

/* ============================== TAREAS ============================== */
.task{
  display:flex;align-items:flex-start;gap:12px;
  padding:12px 18px;position:relative;
  transition:opacity .32s var(--ease), transform .32s var(--ease), background .15s;
}
.task::after{
  content:"";position:absolute;left:48px;right:0;bottom:0;
  height:1px;background:var(--line);
}
.task:last-child::after{display:none}
.task:hover{background:var(--hover)}
.task.saliendo{opacity:0;transform:translateX(24px)}
.task.ok .task-t{text-decoration:line-through;color:var(--muted)}
.task.ok{opacity:.5}

.check{
  width:23px;height:23px;flex:none;margin-top:1px;
  border:1.6px solid var(--line-2);border-radius:50%;
  background:transparent;cursor:pointer;
  display:grid;place-items:center;
  transition:background .2s var(--ease), border-color .2s, transform .14s var(--ease);
}
.check:hover{border-color:var(--marca)}
.check:active{transform:scale(.88)}
.check svg{width:12px;height:12px;color:transparent;transition:color .2s}
.check.on{background:var(--marca);border-color:var(--acento)}
.check.on svg{color:#fff}

.task-main{flex:1;min-width:0}
.task-t{font-size:14.5px;font-weight:450;line-height:1.4}
.task-meta{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin-top:3px;font-size:12.5px;color:var(--muted);
}
.task-meta .sep{opacity:.4}
.dot{width:6px;height:6px;border-radius:50%;flex:none}

.chip-task{
  display:inline-flex;align-items:center;gap:7px;
  max-width:280px;height:32px;padding:0 13px;
  border:0;border-radius:var(--pill);
  background:var(--surface-2);font-size:13px;cursor:pointer;
  white-space:nowrap;overflow:hidden;transition:background .18s;
}
.chip-task:hover{background:var(--surface-3)}

.bar{height:5px;background:var(--surface-2);border-radius:var(--pill);
     overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;background:var(--marca);border-radius:var(--pill);
       transition:width .55s var(--ease)}

/* ============================ CALENDARIO ============================ */
.cal-head{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--line)}
.cal-head span{padding:10px 0;text-align:center;font-size:12px;
               color:var(--muted);font-weight:500}
.cal{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-day{
  min-height:104px;padding:7px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  transition:background .15s;
}
.cal-day:nth-child(7n){border-right:0}
.cal-day:hover{background:var(--hover)}
.cal-day.out{opacity:.3}
.cal-day b{
  display:inline-grid;place-items:center;
  width:25px;height:25px;border-radius:50%;
  font-size:13px;font-weight:500;margin-bottom:4px;
}
.cal-day.today b{background:var(--marca);color:#fff;font-weight:600}
.ev{
  display:block;font-size:11.5px;font-weight:450;
  padding:3px 7px;border-radius:6px;margin-bottom:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ============================== TABLERO ============================== */
.board{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(258px,1fr);
  gap:12px;overflow-x:auto;padding-bottom:12px;align-items:start;
  user-select:none;-webkit-user-select:none;-webkit-overflow-scrolling:touch;
}
.col{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:13px 11px;
  transition:border-color .2s,background .2s;
}
.col.sobre{border-color:var(--marca);background:color-mix(in srgb,var(--marca) 8%,var(--surface))}
.col-head{display:flex;align-items:center;gap:8px;padding:0 4px}
.col-head h3{font-size:14px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.col-n{font-size:12px;font-weight:500;color:var(--muted);
       background:var(--surface-2);border-radius:var(--pill);padding:1px 8px}
.col-monto{padding:3px 4px 12px;font-size:12.5px;color:var(--muted);
           font-variant-numeric:tabular-nums}
.col-monto.vacio{opacity:.4}
.col-body{display:flex;flex-direction:column;gap:8px;min-height:64px}
.col-vacia{border:1px dashed var(--line-2);border-radius:var(--r-sm);
           padding:20px 10px;text-align:center;font-size:12.5px;color:var(--muted)}

.tarjeta{
  position:relative;
  background:var(--surface-2);border:0;
  border-left:3px solid var(--tarjeta-acento);
  border-radius:var(--r-sm);padding:12px;cursor:grab;
  transition:transform .18s var(--ease), box-shadow .22s;
  touch-action:none;
}
.tarjeta:hover{transform:translateY(-2px);box-shadow:var(--sombra)}
.tarjeta:active{cursor:grabbing}
.tarjeta.moviendo{opacity:.25}
.tarjeta.fantasma{
  position:fixed;z-index:300;pointer-events:none;margin:0;
  transform:rotate(1.5deg) scale(1.03);
  box-shadow:var(--sombra-alta);cursor:grabbing;
}

.tj-mover{position:absolute;top:8px;right:8px;display:flex;gap:3px;
          opacity:0;transition:opacity .2s}
.tarjeta:hover .tj-mover,.tarjeta:focus-within .tj-mover{opacity:1}
.tj-mover button{
  width:25px;height:25px;display:grid;place-items:center;
  border:0;border-radius:var(--r-xs);
  background:var(--surface-3);color:var(--muted);
  cursor:pointer;transition:.16s;
}
.tj-mover button:hover:not(:disabled){background:var(--marca);color:#fff}
.tj-mover button:disabled{opacity:.25;cursor:default}
.tj-mover svg{width:13px;height:13px}
@media(hover:none){.tj-mover{opacity:1}}

.tj-t{font-size:14px;font-weight:500;line-height:1.35;margin-bottom:8px}
.tj-cli{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.tj-cli .av{width:21px;height:21px;border-radius:6px;font-size:9px}
.tj-meta{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px}
.tj-ent{margin-top:10px;font-size:12px;color:var(--muted)}
.tj-ent .bar{margin-top:5px;height:4px}
.tj-pie{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  margin-top:10px;padding-top:9px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted);
}
.tj-pie span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tj-pie b{font-size:13px;color:var(--paper);font-weight:600;white-space:nowrap}

/* ============================== FORMS ============================== */
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;color:var(--muted);
             font-weight:450;margin-bottom:5px}
.field input,.field select,.field textarea{
  width:100%;height:42px;padding:0 13px;
  background:var(--surface-2);border:1px solid transparent;border-radius:var(--r-sm);
  outline:0;font-size:16px;   /* 16px evita que iOS haga zoom al enfocar */
  transition:border-color .2s,background .2s;
}
.field textarea{height:auto;padding:11px 13px;resize:vertical;min-height:84px}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--marca);background:var(--surface)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.f3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 14px}

/* ============================== MODAL ==============================
   En escritorio es un diálogo centrado; en móvil sube desde abajo
   como una hoja, que es la convención de iOS.
   =================================================================== */
.modal{
  position:fixed;inset:0;z-index:100;
  display:grid;place-items:center;padding:24px;
  background:rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  animation:fade .22s var(--ease);
}
.modal[hidden]{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal-box{
  width:min(760px,100%);max-height:86vh;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);
  border-radius:20px;box-shadow:var(--sombra-alta);
  animation:pop .3s var(--ease);
}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
@keyframes subir{from{transform:translateY(100%)}to{transform:none}}
.modal-head{display:flex;align-items:center;gap:14px;
            padding:16px 18px;border-bottom:1px solid var(--line)}
.modal-head h2{font-size:17px;flex:1}
.modal-body{padding:18px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.modal-foot{display:flex;gap:10px;justify-content:flex-end;
            padding-top:16px;margin-top:4px;border-top:1px solid var(--line)}

/* ============================== ACCESO ============================== */
.login{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;padding:24px;
  background:var(--ink);
  transition:opacity .42s var(--ease), transform .42s var(--ease);
}
.login.fuera{opacity:0;transform:scale(1.03);pointer-events:none}
.login-box{
  width:min(370px,100%);
  background:var(--surface);border:1px solid var(--line);
  border-radius:20px;padding:32px 28px;box-shadow:var(--sombra-alta);
}
.login-box h2{font-size:22px;text-align:center;letter-spacing:-.03em}
.login-sub{text-align:center;color:var(--muted);font-size:14px;margin:5px 0 24px}
.login-nota{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
            font-size:12.5px;color:var(--muted);line-height:1.5;text-align:center}

/* ============================== VACÍO ============================== */
.empty{padding:56px 20px;text-align:center;color:var(--muted)}
.empty svg{width:32px;height:32px;opacity:.35;margin-bottom:12px}
.empty h3{font-size:16px;color:var(--paper);margin-bottom:4px}
.empty p{font-size:14px;max-width:380px;margin:0 auto}

tfoot td{border-bottom:0;border-top:1px solid var(--line)}

/* =====================================================================
   BARRA INFERIOR — la navegación del móvil
   ===================================================================== */
.tabbar{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  padding-bottom:env(safe-area-inset-bottom);
  background:color-mix(in srgb,var(--ink) 78%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  backdrop-filter:saturate(180%) blur(22px);
  border-top:1px solid var(--line);
}
.tabbar-in{display:grid;grid-template-columns:repeat(5,1fr);height:56px}
.tabbar a,.tabbar button{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:0;background:none;cursor:pointer;
  color:var(--muted);font-size:10.5px;font-weight:500;
  transition:color .18s;position:relative;
}
.tabbar a.on,.tabbar button.on{color:var(--acento)}
.tabbar svg{width:22px;height:22px;stroke-width:1.8}
.tabbar a:active,.tabbar button:active{opacity:.55}
.tabbar em{
  position:absolute;top:4px;left:calc(50% + 7px);
  font-style:normal;font-size:10px;font-weight:600;
  background:var(--paper);color:var(--ink);border-radius:var(--pill);
  padding:0 5px;min-width:16px;text-align:center;line-height:16px;
}

/* Hoja de "Más" */
.hoja{
  position:fixed;inset:0;z-index:120;display:none;
  background:rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.hoja.abierta{display:block;animation:fade .22s var(--ease)}
.hoja-in{
  position:absolute;left:0;right:0;bottom:0;
  background:var(--surface);
  border-radius:20px 20px 0 0;
  padding:8px 12px calc(18px + env(safe-area-inset-bottom));
  max-height:78vh;overflow-y:auto;
  animation:subir .34s var(--ease);
}
.hoja-tirador{
  width:38px;height:5px;border-radius:var(--pill);
  background:var(--line-2);margin:6px auto 12px;
}
.hoja-in a{
  display:flex;align-items:center;gap:13px;
  padding:13px 12px;border-radius:var(--r-sm);
  font-size:16px;font-weight:450;
}
.hoja-in a:active{background:var(--hover)}
.hoja-in svg{width:21px;height:21px;opacity:.6;stroke-width:1.8}

.only-mobile{display:none}

/* =====================================================================
   MÓVIL
   ===================================================================== */
@media(max-width:1180px){
  .g-4{grid-template-columns:repeat(2,1fr)}
  .g-23{grid-template-columns:1fr}
}

@media(max-width:820px){
  .side{transform:translateX(-100%)}
  .main{margin-left:0;padding-bottom:var(--tab-h)}
  .tabbar{display:block}
  .only-mobile{display:block}

  /* Título grande, al estilo de iOS: dentro del contenido, no en barra fija */
  .top{
    position:static;flex-direction:column;align-items:stretch;gap:12px;
    padding:14px var(--pad) 4px;border-bottom:0;background:none;backdrop-filter:none;
  }
  .crumb{display:block}
  .crumb h1{font-size:32px;letter-spacing:-.035em;font-weight:700}
  .crumb p{font-size:14px}
  .top-tools{margin-left:0}
  .search{width:100%;height:38px}
  #btn-menu{display:none}

  .view{padding:14px var(--pad) 32px}
  .g-3,.g-2{grid-template-columns:1fr}
  .grid{gap:12px}

  /* Las tarjetas se pegan a los bordes, como las listas de iOS */
  .card{border-radius:14px}
  .card-head{padding:14px 16px}
  .card-body{padding:16px}
  .row,.alert,.task{padding-left:16px;padding-right:16px}
  .row::after,.alert::after{left:16px}
  .task::after{left:46px}

  .modal{padding:0;place-items:end}
  .modal-box{
    width:100%;max-height:92vh;
    border-radius:20px 20px 0 0;border-bottom:0;
    animation:subir .34s var(--ease);
  }
  .modal-body{padding-bottom:calc(18px + env(safe-area-inset-bottom))}

  .cal-day{min-height:70px;padding:4px;font-size:12px}
  .cal-day b{width:22px;height:22px;font-size:12px}
  .ev{font-size:10px;padding:2px 5px}

  .gf-tot{grid-template-columns:repeat(2,1fr);gap:14px}
  .seg-fila{grid-template-columns:142px 1fr 58px;gap:10px}
  .board{grid-auto-columns:minmax(240px,80vw)}

  /* ---- Tablas convertidas en tarjetas ----
     En un teléfono una tabla con scroll horizontal es inservible.
     Cada fila se vuelve una ficha y cada celda lleva su etiqueta. */
  .tw{overflow:visible}
  .tw table,.tw tbody,.tw tr,.tw td{display:block;width:100%}
  .tw thead,.tw tfoot{display:none}
  .tw tr{padding:14px 16px;position:relative;border-bottom:1px solid var(--line)}
  .tw tr:last-child{border-bottom:0}
  .tw td{
    display:flex;align-items:baseline;justify-content:space-between;gap:16px;
    padding:3px 0;border:0;text-align:left;
  }
  .tw td::before{
    content:attr(data-l);color:var(--muted);font-size:13px;
    flex:none;font-weight:450;
  }
  .tw td:empty{display:none}
  /* La primera celda es el título de la ficha */
  .tw td:first-child{display:block;margin-bottom:7px;font-size:15px}
  .tw td:first-child::before{display:none}
  .tw td.num{text-align:right}
  .tw .cell{justify-content:flex-end}
  /* La primera celda es el encabezado de la ficha: va a la izquierda */
  .tw td:first-child .cell{justify-content:flex-start}

  /* Los atajos de tareas del panel: en columna, y el enlace aparte */
  .chip-task{max-width:100%;width:100%;justify-content:flex-start}
}

@media(max-width:420px){
  .g-4{grid-template-columns:1fr}
  .kpi-val{font-size:26px}
  .seg-fila{grid-template-columns:110px 1fr 48px;min-width:520px}
}

/* Menos movimiento si el sistema lo pide */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* =====================================================================
   FACTURA Y CONTRATO — hoja de impresión, siempre en papel blanco
   ===================================================================== */
.sheet{
  background:#fff;color:#111;
  width:100%;max-width:800px;margin:0 auto;padding:44px 48px;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Helvetica,Arial,sans-serif;
  font-size:13px;line-height:1.55;letter-spacing:-.005em;
}
.sheet h1,.sheet h2,.sheet h3{color:#111}
.sh-top{display:flex;justify-content:space-between;gap:30px;align-items:flex-start}
.sh-brand{display:flex;align-items:center;gap:12px}
.sh-brand b{
  width:44px;height:44px;border-radius:12px;background:#0a0a0b;color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:700;flex:none;
}
.sh-brand .logo{width:40px;height:50px;flex:none;color:#0a0a0b}
.sh-brand strong{display:block;font-size:16px;font-weight:600;letter-spacing:-.03em}
.sh-brand small{color:#666;font-size:11.5px;display:block;line-height:1.45}
.sh-doc{text-align:right}
.sh-doc h2{font-size:20px;letter-spacing:-.03em;margin-bottom:3px}
.sh-doc .n{font-size:12px;color:#666}
.sh-doc .n b{color:#111}
.sh-rule{height:1px;background:#e6e6ea;margin:24px 0}
.sh-parties{display:grid;grid-template-columns:1.4fr 1fr;gap:30px}
.sh-lbl{font-size:11px;color:#8a8a90;font-weight:500;margin-bottom:4px}
.sh-parties strong{font-size:14px;font-weight:600}
.sh-meta{display:flex;flex-direction:column;gap:5px;font-size:12.5px}
.sh-meta div{display:flex;justify-content:space-between;gap:16px}
.sh-meta span{color:#666}
.sh-table{width:100%;border-collapse:collapse;margin-top:26px;font-size:12.5px}
.sh-table th{
  background:#f5f5f7;color:#666;font-size:11px;font-weight:500;
  padding:9px 11px;border-bottom:1px solid #e6e6ea;text-align:left;
}
.sh-table td{padding:11px;border-bottom:1px solid #efeff2;vertical-align:top}
.sh-table .num{text-align:right;font-variant-numeric:tabular-nums}
.sh-tot{margin-top:20px;margin-left:auto;width:290px;font-size:12.5px}
.sh-tot div{display:flex;justify-content:space-between;padding:6px 0}
.sh-tot .l{color:#666}
.sh-tot .grand{border-top:1.5px solid #111;margin-top:7px;padding-top:11px;
               font-size:17px;font-weight:600;letter-spacing:-.03em}
.sh-tot .ret{color:#656565}
.sh-tot .neto{border-top:1px dashed #d5d5da;margin-top:6px;padding-top:9px;font-weight:600}
.sh-letras{margin-top:18px;padding:11px 14px;background:#f5f5f7;
           border-left:2px solid #0a0a0b;border-radius:0 8px 8px 0;font-size:12px}
.sh-note{margin-top:20px;font-size:12px;color:#555}
.sh-foot{margin-top:34px;padding-top:16px;border-top:1px solid #e6e6ea;
         font-size:10.5px;color:#8a8a90;line-height:1.7}
.sh-foot b{color:#555}
.sh-regimen{
  display:table;margin-top:12px;font-size:11px;font-weight:500;
  border:1px solid #dcdce1;border-radius:var(--pill);padding:4px 12px;color:#555;
}

@media(max-width:820px){
  .sheet{padding:24px 18px}
  .sh-top{flex-direction:column;gap:18px}
  .sh-doc{text-align:left}
  .sh-parties{grid-template-columns:1fr;gap:18px}
  .sh-tot{width:100%}
}

@media print{
  .side,.top,.noise,.modal-head,.no-print,.tabbar,.hoja{display:none!important}
  .main{margin:0;padding:0}
  .view{padding:0}
  .modal{position:static;background:none;padding:0;backdrop-filter:none;display:block}
  .modal-box{max-height:none;border:0;box-shadow:none;width:100%;animation:none}
  .modal-body{padding:0;overflow:visible}
  .sheet{max-width:none;padding:0}
  body{background:#fff}
  @page{size:A4;margin:14mm}
}

/* ===================== DOCUMENTOS (cotizaciones, contratos, soporte) ===================== */
/* Editor de renglones de la cotización */
.ed-items{margin-top:6px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ed-row{display:grid;grid-template-columns:1fr 62px 84px 104px 96px 30px;gap:8px;align-items:start;padding:8px 10px;border-bottom:1px solid var(--line)}
.ed-row:last-of-type{border-bottom:0}
.ed-row.ed-head{font-size:11.5px;color:var(--muted);padding:8px 10px 6px;background:var(--surface-2);align-items:center}
.ed-row.ed-head span:nth-child(n+2){text-align:right}
.ed-row input{width:100%;height:36px;padding:0 9px;font-size:14px;border-radius:9px;border:1px solid var(--line);background:var(--surface-2);color:var(--paper)}
.ed-row input[type=number]{text-align:right}
.ed-row input.ed-det{margin-top:5px;height:30px;font-size:12.5px;color:var(--muted)}
.ed-row .ed-imp{text-align:right;font-variant-numeric:tabular-nums;font-size:13.5px;line-height:36px;white-space:nowrap}
.ed-row .icon-btn{width:30px;height:30px;margin-top:3px}
.ed-add{display:flex;gap:8px;margin-top:10px;align-items:center}
.ed-cat{flex:1;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--surface-2);color:var(--paper);padding:0 10px;font-size:13.5px}
.ed-tot{padding:10px 12px;background:var(--surface-2);font-size:13px}
.ed-tot div{display:flex;justify-content:space-between;padding:3px 0;color:var(--muted)}
.ed-tot div b{color:var(--paper);font-variant-numeric:tabular-nums}
.ed-tot .grand{font-size:15px;color:var(--paper);border-top:1px solid var(--line);margin-top:4px;padding-top:7px}
.ed-tot .grand b{font-weight:700}
@media (max-width:820px){
  .modal-box{max-width:100vw;overflow:hidden}
  .f2 .field, .ed-row > *{min-width:0}
  .ed-row{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .ed-row > div:first-child{grid-column:1/-1}
  .ed-row .ed-imp{grid-column:1/3;text-align:left;line-height:30px}
  .ed-row .icon-btn{justify-self:end}
  .ed-head{display:none}
}

/* Campo de archivo en formularios */
.archivo{display:flex;align-items:center;gap:10px;height:44px;padding:0 13px;border-radius:11px;border:1px dashed var(--line);background:var(--surface-2);color:var(--muted);cursor:pointer;font-size:14px}
.archivo input{display:none}
.archivo svg{width:18px;height:18px;flex:none}
.archivo span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Bloque de soporte bajo las hojas (foto del talonario, contrato firmado) */
.soporte{display:flex;align-items:center;gap:14px;margin-top:16px;padding:12px 14px;border-radius:14px;background:var(--surface-2);flex-wrap:wrap}
.soporte-txt{flex:1;min-width:180px}
.soporte-txt strong{display:block;font-size:13.5px}
.soporte-txt small{color:var(--muted)}
.soporte-img{width:64px;height:64px;border-radius:10px;overflow:hidden;background:var(--surface-3);display:flex;align-items:center;justify-content:center;flex:none;color:var(--muted)}
.soporte-img img{width:100%;height:100%;object-fit:cover}
.soporte-img svg{width:26px;height:26px}
.soporte-btns{display:flex;gap:8px;flex-wrap:wrap}

/* Cuerpo del contrato y firmas en la hoja */
.sh-cuerpo{font-size:12.5px;line-height:1.7;color:#222;text-align:justify}
.sh-cuerpo p{margin-bottom:12px}
.sh-firmas{display:grid;grid-template-columns:1fr 1fr;gap:50px;margin-top:56px;text-align:center;font-size:11.5px}
.sh-linea{border-top:1px solid #111;padding-top:7px}
.sh-linea span{color:#666}
.sh-notas{margin-top:18px;font-size:12.5px;line-height:1.65;color:#333;padding:12px 14px;background:#f6f6f8;border-radius:10px}
.micro code{font-size:11px;background:var(--surface-2);padding:1px 5px;border-radius:5px}
@media print{ .sh-cuerpo{font-size:11.5pt} .soporte{display:none!important} }
.rap-moneda{height:38px;padding:0 10px;border-radius:9px;border:1px solid var(--line);background:var(--surface-2);color:var(--muted);font-weight:600;font-size:15px;cursor:pointer}
.ed-row textarea.ed-det{width:100%;margin-top:5px;padding:6px 9px;font-size:12.5px;line-height:1.4;color:var(--muted);border-radius:9px;border:1px solid var(--line);background:var(--surface-2);resize:none;font-family:inherit}
.sh-det{color:#666;font-size:11.5px;margin-top:3px;line-height:1.5}
.sh-det div::before{content:"– ";color:#aaa}
/* Reportes */
.rep-barra{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.rep-nav{display:flex;align-items:center;gap:6px}
.rep-nav strong{min-width:150px;text-align:center;font-size:14px}
.rep-nav .icon-btn{width:30px;height:30px;font-size:18px}
.rep-custom{display:flex;align-items:center;gap:6px}
.rep-custom input{height:34px;padding:0 9px;border-radius:9px;border:1px solid var(--line);background:var(--surface-2);color:var(--paper);font-size:14px}
.rep-custom span{color:var(--muted);font-size:13px}
@media (max-width:820px){ .rep-nav strong{min-width:0} }

/* Diálogo de confirmación: por encima del modal */
.dialogo{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);animation:fade .15s}
.dialogo[hidden]{display:none}
.dialogo-box{width:min(420px,100%);background:var(--surface-3, var(--surface));border:1px solid var(--line);border-radius:18px;padding:22px 22px 18px;box-shadow:var(--sombra-alta);animation:pop .2s var(--ease)}
.dialogo-box h3{font-size:16px;font-weight:600;margin-bottom:8px;letter-spacing:-.02em}
.dialogo-box p{font-size:13.5px;color:var(--muted);line-height:1.55;white-space:pre-line}
.dialogo-btns{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.btn-peligro{background:var(--paper)!important;color:var(--ink)!important}
@media (max-width:820px){ .rep-barra .switch{flex-wrap:wrap} .rep-barra > div:last-child{margin-left:0;width:100%} }
.btn-texto-peligro{color:var(--bad)!important}

/* Historial compacto: los trabajos entregados no ocupan la vista diaria. */
.archivo-barra{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.switch[hidden]{display:none}