/* Identidad ENDE: crema editorial + tinta + acento naranja, DM Sans y JetBrains
   Mono. Fuente de verdad: manual de marca (skill ende-proposal). El CRM se ve
   como una pieza de ENDE, no como una herramienta genérica.
   Dos temas fieles: claro (crema) y oscuro (tinta #111, la paleta de cierre). */

:root {
  --papel:#f4f2ec; --sup:#ffffff; --sup2:#eeebe2;
  --tinta:#111111; --tinta2:#555555; --tinta3:#888888;
  --linea:#d8d4c8; --linea2:#e6e2d8;
  --acento:#F39325; --acento-bg:#fbe7d1;
  --ok:#2f8f2b; --ok-bg:#e6f1e2;
  --alerta:#9a6a12; --alerta-bg:#faeecb;
  --mal:#d62828; --mal-bg:#f7dede;
  --sans:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --papel:#111111; --sup:#1a1a1a; --sup2:#232120;
    --tinta:#f4f2ec; --tinta2:#b9b4a8; --tinta3:#8b8578;
    --linea:#332f29; --linea2:#26231f;
    --acento:#F39325; --acento-bg:#3a2a15;
    --ok:#5fc257; --ok-bg:#172814;
    --alerta:#e3b23c; --alerta-bg:#2c2410;
    --mal:#f06a6a; --mal-bg:#331818;
  }
}
:root[data-theme="dark"]{
  --papel:#111111; --sup:#1a1a1a; --sup2:#232120;
  --tinta:#f4f2ec; --tinta2:#b9b4a8; --tinta3:#8b8578;
  --linea:#332f29; --linea2:#26231f;
  --acento:#F39325; --acento-bg:#3a2a15;
  --ok:#5fc257; --ok-bg:#172814;
  --alerta:#e3b23c; --alerta-bg:#2c2410;
  --mal:#f06a6a; --mal-bg:#331818;
}
*{box-sizing:border-box}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--sans);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--acento)}
:focus-visible{outline:2px solid var(--acento);outline-offset:2px}

/* barra superior */
.barra{display:flex;flex-wrap:wrap;gap:16px;align-items:baseline;justify-content:space-between;
  padding:16px 28px;background:var(--sup);border-bottom:1px solid var(--linea)}
.marca{font-family:var(--sans);font-weight:700;font-size:20px;letter-spacing:-.01em;
  text-decoration:none;color:var(--tinta)}
.marca span{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tinta3);margin-left:4px}
.barra nav{display:flex;flex-wrap:wrap;gap:20px;align-items:baseline;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.barra nav a,.barra nav .enlace{color:var(--tinta2);text-decoration:none;font-family:var(--mono);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.barra nav a:hover,.barra nav .enlace:hover{color:var(--acento)}
.envoltura{max-width:1180px;margin:0 auto;padding:36px 28px 90px}

/* encabezados */
.encabezado{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;justify-content:space-between;margin-bottom:26px}
h1{font-family:var(--sans);font-weight:500;font-size:38px;line-height:.98;letter-spacing:-.025em;
  margin:0 0 6px;text-wrap:balance}
h2{font-family:var(--sans);font-weight:500;font-size:22px;line-height:1.05;letter-spacing:-.02em;margin:0 0 12px}
.em{font-style:italic;color:var(--acento)}   /* acento editorial ENDE */
.sub{margin:0;color:var(--tinta2);font-size:14px}
.pista{margin:0 0 12px;color:var(--tinta3);font-size:12.5px}

/* eyebrow / chips de filtro */
.filtros{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 12px;border:1px solid var(--linea);background:var(--sup);color:var(--tinta2);
  text-decoration:none;cursor:pointer}
.chip:hover{border-color:var(--acento);color:var(--acento)}
.chip--on{border-color:var(--acento);color:var(--acento);background:var(--acento-bg)}

/* tabla */
.tabla-envoltura{overflow-x:auto;background:var(--sup);border:1px solid var(--linea)}
.tabla{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.tabla th{text-align:left;font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tinta3);padding:16px 14px 10px;border-bottom:1px solid var(--linea);white-space:nowrap}
.tabla td{padding:13px 14px;border-bottom:1px solid var(--linea2);vertical-align:top;color:var(--tinta2)}
.tabla tr:last-child td{border-bottom:0}
.quien{display:block;font-weight:700;color:var(--tinta);text-decoration:none;letter-spacing:-.01em}
.quien:hover{color:var(--acento)}
.org{color:var(--tinta3);font-size:13px}
.num{font-family:var(--mono);font-size:13px;white-space:nowrap}
.paso{min-width:220px;max-width:340px}
.atraso{font-family:var(--mono);color:var(--mal);font-size:12px;margin-left:6px}

/* pastillas de estado */
.pastilla{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;padding:3px 9px;white-space:nowrap}
.pastilla--al_dia{color:var(--ok);background:var(--ok-bg)}
.pastilla--pronto{color:var(--alerta);background:var(--alerta-bg)}
.pastilla--vencido{color:var(--mal);background:var(--mal-bg)}
.pastilla--sin_dato{color:var(--alerta);background:var(--alerta-bg)}
.pastilla--cerrado{color:var(--tinta3);background:var(--sup2)}
/* La tarea es de ENDE y está a tiempo: amarillo, entre el rojo de vencido y el gris de esperar. */
.pastilla--pendiente{color:var(--alerta);background:var(--alerta-bg)}
/* La pelota es de ellos: no hay nada que hacer hoy, así que va en gris. */
.pastilla--esperando{color:var(--tinta2);background:var(--sup2)}
.pastilla--dormido{color:var(--tinta3);background:var(--sup2)}

/* buscador */
.buscador{display:flex;gap:6px;align-items:center}
.buscador input[type=search]{font:inherit;font-size:14px;padding:6px 10px;min-width:190px;
  border:1px solid var(--linea);border-radius:999px;background:var(--sup);color:var(--tinta)}
.buscador input[type=search]:focus{outline:2px solid var(--acento);outline-offset:1px}
@media (max-width:640px){.buscador{width:100%}.buscador input[type=search]{flex:1;min-width:0}}

/* mensaje de búsqueda sin resultados */
.sin-resultados{margin-top:18px}

/* por qué apareció una fila en la búsqueda */
.coincide{display:block;font-family:var(--mono);font-size:11px;color:var(--acento);margin-top:2px}

/* encabezados que ordenan */
.th-orden{color:inherit;text-decoration:none;display:inline-block;white-space:nowrap}
.th-orden:hover{color:var(--acento);text-decoration:underline}
.th-orden--on{color:var(--acento)}

/* ayuda al pasar el mouse */
.ayuda{border-bottom:1px dotted var(--tinta3);cursor:help}
.pastilla[title],.atraso[title]{cursor:help}

/* dirección del movimiento */
.dir{font-family:var(--mono);font-size:12px;margin:0 4px}
.dir--saliente{color:var(--tinta3)}
.dir--entrante{color:var(--ok)}

/* leyenda */
.leyenda{margin-top:26px}
.leyenda dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:14px 0 0}
.leyenda dt{white-space:nowrap}
.leyenda dd{margin:0;color:var(--tinta2);font-size:14px}
@media (max-width:640px){.leyenda dl{grid-template-columns:1fr;gap:2px 0}
  .leyenda dd{margin-bottom:10px}}

/* ficha: dos columnas */
.columnas{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr);gap:22px;align-items:start}
@media (max-width:900px){.columnas{grid-template-columns:1fr}}
.lateral{display:flex;flex-direction:column;gap:22px}

.tarjeta{background:var(--sup);border:1px solid var(--linea);padding:24px 26px}
.tarjeta--peligro{border-color:var(--linea2)}
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:15px 18px}
.rejilla--corta{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.ancho{grid-column:1/-1}
label{display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tinta3)}
input,select,textarea{font-family:var(--sans);font-size:15px;color:var(--tinta);background:var(--papel);
  border:1px solid var(--linea);padding:9px 11px;width:100%;text-transform:none;letter-spacing:normal}
textarea{resize:vertical;line-height:1.5}
input:focus,select:focus,textarea:focus{border-color:var(--acento);outline:none;box-shadow:0 0 0 3px var(--acento-bg)}

.acciones{display:flex;gap:18px;align-items:center;margin-top:22px;padding-top:20px;border-top:1px solid var(--linea2)}
.boton{display:inline-block;font-family:var(--sans);font-size:15px;font-weight:700;cursor:pointer;
  background:var(--acento);color:#fff;border:1px solid var(--acento);padding:10px 22px;text-decoration:none;letter-spacing:-.01em}
.boton:hover{filter:brightness(1.05)}
.boton--sec{background:transparent;color:var(--acento);margin-top:14px}
.enlace{background:none;border:0;padding:0;font:inherit;color:var(--acento);cursor:pointer;text-decoration:underline}
.enlace--peligro{color:var(--mal)}
.en-linea{display:inline}

.aviso{padding:11px 16px;margin:0 0 22px;font-size:14px;border-left:3px solid}
.aviso--ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok)}
.aviso--mal{background:var(--mal-bg);color:var(--mal);border-color:var(--mal)}
.vacio{color:var(--tinta2)}

.historial{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:15px}
.historial li{border-left:2px solid var(--acento);padding-left:15px}
.historial p{margin:3px 0 0;font-size:14px;color:var(--tinta2)}

.portada{max-width:460px;margin:9vh auto 0}
.portada .tarjeta{display:flex;flex-direction:column;gap:15px;margin-top:22px}
code{font-family:var(--mono);font-size:12.5px;background:var(--sup2);padding:1px 5px;word-break:break-all}

/* Campo de usuario para el autocompletado: presente en el DOM, invisible en pantalla.
   No se usa `display:none` ni `hidden` porque el autocompletado ignora esos campos. */
.fuera-de-pantalla{position:absolute;left:-10000px;width:1px;height:1px;opacity:0;pointer-events:none}