/* CRM Macob Cargo — hoja de estilos única de la plataforma.
   Los módulos (agentes, finanzas, precosteo, talento) añaden solo lo suyo en su _css.html. */

:root {
  --morado:#7330F2; --morado-osc:#4b1fa6; --morado-claro:#efe8ff; --morado-aro:#e3d6fd; --amarillo:#FFF983;
  --tinta:#1b1533; --tinta-2:#3d3558; --gris:#f7f6fb; --linea:#ebe7f6; --linea-fuerte:#d9d3ec; --muted:#6b6580;
  --verde:#1a9c5b; --amarillo-s:#c98a00; --rojo:#d23b3b;
  --r-ctl:10px; --r-card:14px;
  --alto-header:68px;
  --fuente:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
* { box-sizing:border-box; }
body { margin:0; font-family:var(--fuente); color:var(--tinta); background:var(--gris); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased; }
a { color:var(--morado); text-decoration:none; }
a:hover { text-decoration:underline; }
h1 { font-size:1.55rem; font-weight:700; letter-spacing:-.02em; line-height:1.2; margin:.2rem 0 1rem; }
h2 { font-size:1.05rem; font-weight:600; margin:1.2rem 0 .6rem; }
h3 { font-weight:600; }
.num, td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
.kpi .value, td, .value { font-variant-numeric:tabular-nums; }
.ic { width:1.1em; height:1.1em; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

/* ── Cabecera ─────────────────────────────────────────────────────────────── */
header.top { display:flex; align-items:stretch; justify-content:space-between; gap:1rem; background:#fff;
  border-bottom:1px solid var(--linea); padding:0 1.4rem; min-height:var(--alto-header); position:sticky; top:0; z-index:30; }
header.top .izq { display:flex; align-items:stretch; gap:1.8rem; min-width:0; }
header.top .logo-chip { display:inline-flex; align-items:center; flex-shrink:0; white-space:nowrap; text-decoration:none; }
header.top .logo-chip:hover { text-decoration:none; }
header.top nav.mods { display:flex; gap:.1rem; align-items:stretch; overflow-x:auto; scrollbar-width:none; min-width:0; }
header.top nav.mods::-webkit-scrollbar { display:none; }
header.top nav.mods a { display:flex; align-items:center; color:var(--muted); padding:0 .85rem; font-size:.88rem; font-weight:500;
  border-bottom:3px solid transparent; margin-bottom:-1px; white-space:nowrap; text-decoration:none; }
header.top nav.mods a:hover { color:var(--tinta); background:var(--gris); }
header.top nav.mods a.on { color:var(--morado); font-weight:600; border-bottom-color:var(--morado); }
header.top .user { display:flex; align-items:center; gap:.7rem; font-size:.84rem; color:var(--muted); flex-shrink:0; }
header.top .user .avatar { width:30px; height:30px; border-radius:50%; background:var(--morado-claro); color:var(--morado);
  font-weight:700; font-size:.78rem; display:inline-flex; align-items:center; justify-content:center; }
header.top .user .quien { display:flex; flex-direction:column; line-height:1.2; }
header.top .user .quien b { color:var(--tinta); font-weight:600; }
header.top .user .quien span { font-size:.72rem; }
header.top .user a.pass { color:var(--muted); font-size:.8rem; }
header.top .user form { display:inline; margin:0; }
.menu-btn { display:none; align-items:center; justify-content:center; background:transparent; border:1px solid var(--linea-fuerte);
  border-radius:var(--r-ctl); width:38px; height:38px; align-self:center; cursor:pointer; color:var(--tinta); }
.menu-btn .ic { width:20px; height:20px; }

/* ── Cuerpo: menú lateral oscuro + contenido ─────────────────────────────── */
.layout { display:flex; min-height:calc(100vh - var(--alto-header)); }
nav.side { width:232px; background:var(--tinta); border-right:1px solid var(--tinta); padding:1rem .7rem 1.4rem; flex-shrink:0;
  position:sticky; top:var(--alto-header); align-self:flex-start; height:calc(100vh - var(--alto-header)); overflow-y:auto; }
nav.side .mod-title { font-size:.68rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:#8f86b5; padding:.2rem .75rem .6rem; }
nav.side a { display:flex; align-items:center; gap:.65rem; padding:.55rem .75rem; border-radius:var(--r-ctl); color:#cfc8e8;
  font-weight:500; margin-bottom:2px; }
nav.side a:hover { background:rgba(255,255,255,.08); color:#fff; text-decoration:none; }
nav.side a.active { background:var(--morado); color:#fff; font-weight:600; }
nav.side a .ic { width:17px; height:17px; opacity:.9; }
main.content { flex:1; min-width:0; padding:1.4rem 1.8rem 2.5rem; max-width:1400px; }
.menu-fondo { display:none; }

/* ── Botones ─────────────────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; background:var(--morado); color:#fff; border:1px solid var(--morado);
  border-radius:var(--r-ctl); padding:.52rem 1rem; font:inherit; font-weight:600; cursor:pointer; font-size:.86rem; line-height:1.3; }
.btn:hover { background:var(--morado-osc); border-color:var(--morado-osc); text-decoration:none; }
.btn.ghost { background:#fff; color:var(--tinta-2); border:1px solid var(--linea-fuerte); }
.btn.ghost:hover { background:var(--gris); border-color:var(--morado); color:var(--morado); }
.btn.sm { padding:.32rem .7rem; font-size:.79rem; border-radius:8px; }
.btn:disabled { opacity:.4; cursor:not-allowed; }
:focus-visible { outline:none; box-shadow:0 0 0 3px var(--morado-aro); }
a:focus-visible, .btn:focus-visible { border-radius:var(--r-ctl); }

/* ── Tarjetas, KPI y rejillas ────────────────────────────────────────────── */
.card { background:#fff; border:1px solid var(--linea); border-radius:var(--r-card); padding:1rem 1.2rem; margin-bottom:.9rem; }
.grid { display:grid; gap:.9rem; margin-bottom:.9rem; }
.card .grid:last-child, .card .grid2:last-child { margin-bottom:0; }
.card > :first-child, .card > h2:first-child { margin-top:0; }
.card > :last-child { margin-bottom:0; }
.card h2 { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.card h2 + p, .card h2 + .muted { margin-top:0; }
.grid2 { margin-bottom:1rem; }
.grid > .card, .grid2 > .card { margin-bottom:0; }
.col-apilada { display:flex; flex-direction:column; gap:.9rem; }
.col-apilada > .card { margin-bottom:0; }
.col-apilada > .card:last-child { flex:1; }  /* la última rellena la altura de la fila: sin huecos entre cajas */
.grid.k3 { grid-template-columns:repeat(3,1fr); }
.grid.k4 { grid-template-columns:repeat(4,1fr); }
.grid.mitad { grid-template-columns:repeat(2,minmax(0,1fr)); }
/* Dos columnas: la izquierda apila tarjetas y la derecha trae una más alta; sin huecos entre cajas */
.grid.dos-col { grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); align-items:start; }
.kpi { background:#fff; border:1px solid var(--linea); border-radius:var(--r-card); padding:.85rem 1.1rem; }
.kpi .label { color:var(--muted); font-size:.78rem; font-weight:500; text-transform:none; letter-spacing:0; }
.kpi .value { font-size:1.65rem; font-weight:700; letter-spacing:-.02em; margin-top:.25rem; line-height:1.15; }

/* ── Tablas ──────────────────────────────────────────────────────────────── */
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:.5rem .65rem; border-bottom:1px solid var(--linea); vertical-align:middle; }
th { font-size:.76rem; font-weight:600; text-transform:none; letter-spacing:.01em; color:var(--muted); background:transparent;
  border-bottom:1px solid var(--linea-fuerte); white-space:nowrap; }
tbody tr:last-child td { border-bottom:0; }
/* Tablas de ficha (rótulo | valor): el rótulo se lee como etiqueta, con la misma línea que el valor */
tbody th { font-size:.8rem; font-weight:500; color:var(--muted); background:transparent; border-bottom:1px solid var(--linea);
  white-space:normal; width:34%; padding-block:.42rem; }
tbody tr:last-child th { border-bottom:0; }
/* Controles dentro de tablas: más bajos, para que las filas no se estiren */
td select, td input:not([type=checkbox]):not([type=radio]) { height:32px; padding:0 .55rem; font-size:.85rem; border:1px solid var(--linea-fuerte); border-radius:8px; background:#fff; font-family:inherit; }
td.nw, .nw { white-space:nowrap; }
tbody tr:hover td, tbody tr:hover th { background:#faf8ff; }
td a { font-weight:500; }
.tag { display:inline-flex; align-items:center; gap:.3rem; padding:.14rem .6rem; border-radius:999px; font-size:.74rem; font-weight:600;
  background:var(--morado-claro); color:var(--morado-osc); white-space:nowrap; }
.sem-VERDE { background:#e4f6ec; color:#12724a; }
.sem-AMARILLO { background:#fdf0d6; color:#8a5a00; }
.sem-NARANJA { background:#ffe8d4; color:#a24a00; }
.sem-ROJO { background:#fdeaea; color:#b42d2d; }
.sem-GRIS { background:#eeecf4; color:var(--muted); }
.dot { width:9px; height:9px; border-radius:50%; display:inline-block; }
.dot.VERDE { background:var(--verde); } .dot.AMARILLO { background:var(--amarillo-s); }
.dot.NARANJA { background:#e07800; } .dot.ROJO { background:var(--rojo); } .dot.GRIS { background:#b7b2c4; }
.muted { color:var(--muted); }
.htmx-indicator { opacity:0; transition:opacity .2s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity:1; }

/* Estado vacío: invitación con ícono, texto y acción */
.vacio { text-align:center; padding:2rem 1rem; color:var(--muted); }
.vacio .vacio-ic { width:44px; height:44px; border-radius:50%; background:var(--morado-claro); color:var(--morado);
  display:inline-flex; align-items:center; justify-content:center; margin-bottom:.6rem; }
.vacio .vacio-ic .ic { width:22px; height:22px; }
.vacio b { display:block; color:var(--tinta); font-weight:600; margin-bottom:.15rem; }
.vacio .btn { margin-top:.8rem; }

/* ── Formularios ─────────────────────────────────────────────────────────── */
.toolbar { display:flex; gap:.6rem; align-items:center; margin-bottom:1rem; flex-wrap:wrap; }
.toolbar input, .toolbar select, form.styled input, form.styled select, form.styled textarea, .input {
  height:38px; padding:0 .75rem; border:1px solid var(--linea-fuerte); border-radius:var(--r-ctl); font:inherit; background:#fff; color:var(--tinta); }
form.styled textarea { height:auto; padding:.55rem .75rem; }
.toolbar input:focus, .toolbar select:focus, form.styled input:focus, form.styled select:focus, form.styled textarea:focus, .input:focus {
  outline:none; border-color:var(--morado); box-shadow:0 0 0 3px var(--morado-aro); }
form.styled, .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:.9rem 1.3rem; }
.grid2 { gap:1rem; }
form.styled label { display:block; font-size:.8rem; font-weight:500; color:var(--tinta-2); margin-bottom:.28rem; }
form.styled .full { grid-column:1 / -1; }
form.styled .checks-multi { display:flex; flex-wrap:wrap; gap:.4rem .5rem; }
form.styled .checks-multi > div, form.styled .checks-multi > div > div { display:flex; flex-wrap:wrap; gap:.4rem .5rem; }
form.styled .checks-multi label { display:inline-flex; align-items:center; gap:.4rem; margin:0; font-size:.84rem; color:var(--tinta);
  border:1px solid var(--linea-fuerte); border-radius:999px; padding:.3rem .8rem; background:#fff; cursor:pointer; }
form.styled .checks-multi label:has(input:checked) { background:var(--morado-claro); border-color:var(--morado); color:var(--morado-osc); font-weight:600; }
form.styled .checks-multi input[type=checkbox] { width:auto; height:auto; margin:0; accent-color:var(--morado); }
form.styled .field { display:flex; flex-direction:column; }
form.styled .field > .ayuda { font-size:.74rem; color:var(--muted); margin-top:.25rem; }
form.styled .field > .error { font-size:.76rem; color:var(--rojo); margin-top:.25rem; }
form.styled .input, form.styled input, form.styled select, form.styled textarea { width:100%; }
form.styled input[type=checkbox] { width:auto; height:auto; accent-color:var(--morado); }
form.styled .seccion { grid-column:1 / -1; background:#fff; border:1px solid var(--linea); border-radius:var(--r-card); padding:1.1rem 1.3rem; }
form.styled .seccion > h2 { margin:0 0 .9rem; font-size:.98rem; display:flex; align-items:center; gap:.5rem; }
form.styled .seccion > h2 .ic { color:var(--morado); width:18px; height:18px; }
form.styled .field:has(> input[type=checkbox]) { flex-direction:row-reverse; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:.2rem .55rem; }
form.styled .field:has(> input[type=checkbox]) label { margin:0; font-size:.86rem; color:var(--tinta); }
form.styled .field:has(> input[type=checkbox]) .ayuda { flex-basis:100%; order:3; margin:0 0 0 1.6rem; }
form.styled .seccion .rejilla { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.9rem 1.2rem; }
form.styled .seccion .rejilla .full { grid-column:1 / -1; }
form.styled .seccion .rejilla .dos { grid-column:span 2; }
/* Barra de acciones fija al pie: Guardar siempre a la vista */
.acciones { grid-column:1 / -1; display:flex; justify-content:space-between; align-items:center; gap:.8rem; flex-wrap:wrap;
  position:sticky; bottom:0; z-index:5; background:rgba(255,255,255,.96); border:1px solid var(--linea); border-radius:var(--r-card);
  padding:.75rem 1.1rem; margin-top:.2rem; }
.acciones .nota { color:var(--muted); font-size:.78rem; }
.acciones .botones { display:flex; gap:.5rem; margin-left:auto; }

.messages { list-style:none; padding:0; margin:0 0 1rem; }
.messages li { padding:.65rem 1rem; border-radius:var(--r-ctl); margin-bottom:.4rem; border:1px solid var(--linea); border-left:4px solid var(--morado); background:#fff; }
.messages li.error { border-left-color:var(--rojo); background:#fdeaea; }
.messages li.success { border-left-color:var(--verde); background:#e4f6ec; }

/* ── Selector de vista (Tablero / Lista) ─────────────────────────────────── */
.segmento { display:inline-flex; background:#ebe7f6; border-radius:var(--r-ctl); padding:3px; }
.segmento a { padding:.34rem .9rem; border-radius:8px; font-size:.82rem; font-weight:500; color:var(--muted); text-decoration:none; }
.segmento a.on { background:#fff; color:var(--morado-osc); font-weight:600; border:1px solid var(--linea); }

/* ── Kanban ──────────────────────────────────────────────────────────────── */
.kanban { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(240px,1fr); gap:.8rem; overflow-x:auto; padding-bottom:.8rem; align-items:start; }
.kanban .col { background:#efecf7; border-radius:var(--r-card); padding:.7rem; min-width:0; }
.kanban .col h3 { font-size:.84rem; margin:0; padding:.1rem .25rem .2rem; display:flex; justify-content:space-between; align-items:center; font-weight:600; }
.kanban .col h3 .tag { background:#fff; }
.kanban .col .total { font-size:.74rem; color:var(--muted); padding:0 .25rem .6rem; }
.kanban .col .body { display:flex; flex-direction:column; gap:.55rem; min-height:60px; }
.kanban .kcard { display:block; background:#fff; border:1px solid var(--linea); border-radius:12px; padding:.7rem .8rem; color:var(--tinta); font-size:.82rem; }
.kanban .kcard:hover { border-color:var(--morado); text-decoration:none; box-shadow:0 0 0 3px var(--morado-aro); }
.kanban .kcard .titulo { font-weight:600; font-size:.88rem; line-height:1.3; }
.kanban .kcard .cliente { display:flex; align-items:center; gap:.3rem; color:var(--muted); font-size:.76rem; margin-top:.2rem; }
.kanban .kcard .ruta { color:var(--muted); font-size:.76rem; margin-top:.15rem; }
.kanban .kcard .pie { display:flex; justify-content:space-between; align-items:center; margin-top:.6rem; gap:.4rem; font-size:.74rem; }
.kanban .kcard .avatar { width:22px; height:22px; border-radius:50%; background:var(--morado-claro); color:var(--morado); font-weight:700; font-size:.64rem;
  display:inline-flex; align-items:center; justify-content:center; }
.kanban .vacio-col { border:1.5px dashed #cfc6ea; border-radius:12px; padding:1.1rem .5rem; text-align:center; font-size:.78rem; color:var(--muted); }

/* ── Pantallas pequeñas ──────────────────────────────────────────────────── */
@media (max-width:1280px) {
  header.top .user a.pass { display:none; }
  header.top nav.mods a { padding:0 .65rem; font-size:.84rem; }
  header.top .izq { gap:1.1rem; }
}
@media (max-width:1100px) {
  header.top .user .quien span { display:none; }
  form.styled .seccion .rejilla { grid-template-columns:repeat(2,minmax(0,1fr)); }
  form.styled .seccion .rejilla .dos { grid-column:1 / -1; }
}
@media (max-width:900px) {
  .grid.k4 { grid-template-columns:repeat(2,1fr); }
  .menu-btn { display:inline-flex; }
  header.top { padding:0 .9rem; gap:.6rem; }
  header.top .izq { gap:.8rem; }
  header.top nav.mods { display:none; }
  header.top .user .quien, header.top .user a.pass { display:none; }
  header.top .izq { min-width:0; }
  nav.side { position:fixed; left:-260px; top:0; height:100vh; z-index:50; width:250px; padding-top:1.4rem; transition:left .2s; }
  .menu-abierto nav.side { left:0; }
  .menu-abierto .menu-fondo { display:block; position:fixed; inset:0; background:rgba(27,21,51,.5); z-index:40; }
  nav.side .mods-movil { display:flex; flex-direction:column; border-bottom:1px solid rgba(255,255,255,.12); margin-bottom:.8rem; padding-bottom:.6rem; }
  main.content { padding:1.2rem 1rem 2.5rem; }
  .grid.k3, .grid.k4, .grid.dos-col, .grid.mitad { grid-template-columns:1fr; }
  form.styled, .grid2 { grid-template-columns:1fr; }
  form.styled .seccion .rejilla { grid-template-columns:1fr; }
  main.content table { display:block; overflow-x:auto; }
}
@media (max-width:560px) {
  header.top .logo-chip svg { height:30px !important; }
  header.top .logo-chip span[style*="font-size"] { font-size:1.02rem !important; }
  header.top .logo-chip span[style*="italic"] { display:none !important; }
}
@media (min-width:901px) { nav.side .mods-movil { display:none; } }