@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@600;700&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* Tokens del ICI Design System (claude.ai/design · proyecto "ICI Design System").
   Se copian aquí para que la aplicación funcione sin conexión; si cambian allá,
   basta con actualizar este bloque. */
:root{
  --red-700:#b8000f; --red-600:#e3001b; --red-500:#ff2d3d; --red-100:#fde5e7;
  --ink-900:#1a1a1a; --charcoal-900:#3d3d3d; --charcoal-700:#5a5a5a;
  --gray-500:#8a8a8a; --gray-300:#d4d4d4; --gray-200:#e6e6e6; --gray-100:#f2f2f2; --white:#fff;
  --safety-green-700:#155c26; --safety-green-600:#1e7a34; --safety-green-100:#e3f2e6;
  --amber-700:#8f5600; --amber-600:#c77700; --amber-100:#fbead1;

  --brand-primary:var(--red-600); --brand-primary-hover:var(--red-700);
  --brand-primary-press:#8f000c; --brand-on-primary:var(--white);
  --surface-page:var(--white); --surface-card:var(--white);
  --surface-muted:var(--gray-100); --surface-inverse:var(--ink-900);
  --text-body:var(--ink-900); --text-heading:var(--charcoal-900);
  --text-muted:var(--charcoal-700); --text-faint:var(--gray-500);
  --text-link:var(--red-600); --text-link-hover:var(--red-700);
  --border-default:var(--gray-300); --border-subtle:var(--gray-200);
  --border-strong:var(--charcoal-700); --focus-ring:var(--red-600);

  --status-danger-fg:var(--red-700); --status-danger-bg:var(--red-100); --status-danger-border:var(--red-500);
  --status-safe-fg:var(--safety-green-700); --status-safe-bg:var(--safety-green-100); --status-safe-border:var(--safety-green-600);
  --status-warning-fg:var(--amber-700); --status-warning-bg:var(--amber-100); --status-warning-border:var(--amber-600);

  --font-display:'Barlow Semi Condensed',Impact,sans-serif;
  --font-body:'Public Sans',-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem;
  --text-xl:1.25rem; --text-2xl:1.5rem; --text-3xl:1.875rem;
  --tracking-wide:.02em; --tracking-wider:.06em;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;

  --radius-sm:4px; --radius-md:8px; --radius-lg:14px; --radius-pill:999px;
  --shadow-card:0 1px 2px rgba(26,26,26,.06),0 4px 14px rgba(26,26,26,.07);
  --shadow-elevated:0 8px 24px rgba(26,26,26,.14),0 2px 6px rgba(26,26,26,.08);
  --ease-standard:cubic-bezier(.2,.8,.2,1); --duration-fast:120ms; --duration-base:200ms;

  /* alias que ya usaba la hoja */
  --azul:var(--ink-900); --azul-claro:var(--red-600); --oro:var(--red-600);
  --tinta:var(--text-body); --gris:var(--text-muted); --linea:var(--border-subtle);
  --fondo:var(--gray-100); --panel:var(--white);
  --ok:var(--status-safe-fg); --ok-bg:var(--status-safe-bg);
  --alerta:var(--status-warning-fg); --alerta-bg:var(--status-warning-bg);
  --error:var(--status-danger-fg); --error-bg:var(--status-danger-bg);
  --info:var(--red-700); --info-bg:var(--red-100);
  --radio:var(--radius-md); --sombra:var(--shadow-card);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:15px/1.5 var(--font-body);color:var(--text-body);
  background:var(--fondo);-webkit-font-smoothing:antialiased}
.oculto{display:none!important}
a{color:var(--azul-claro);cursor:pointer;text-decoration:none}
h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:700;
  letter-spacing:var(--tracking-wide);color:var(--text-heading);text-transform:uppercase}
.mono,.der.mono,td.mono{font-family:var(--font-mono)}

/* ---------- login ---------- */
.login-fondo{min-height:100vh;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--red-700) 0%,#6d0009 100%);padding:24px}
.login-caja{background:#fff;padding:34px 32px;border-radius:14px;width:100%;max-width:370px;
  box-shadow:0 18px 50px rgba(0,0,0,.28)}
.login-logo{height:52px;width:auto;display:block;margin-bottom:18px}
.login-caja h1{font-size:22px}
.login-caja .sub{color:var(--gris);margin:4px 0 22px;font-size:13px}
.login-caja label{display:block;margin-bottom:14px;font-size:12.5px;font-weight:600;color:var(--gris)}
.login-caja input{margin-top:5px}

/* ---------- estructura ---------- */
#pantalla-app{display:grid;grid-template-columns:224px 1fr;min-height:100vh}
.lateral{background:var(--surface-inverse);color:var(--gray-300);display:flex;flex-direction:column;padding:18px 12px;overflow-y:auto}
.marca{display:flex;align-items:center;gap:10px;color:#fff;font-family:var(--font-display);
  font-weight:700;font-size:16px;letter-spacing:var(--tracking-wide);text-transform:uppercase;
  padding:0 6px 20px}
.marca img{height:26px;width:auto;display:block}
.marca-cuadro{background:var(--brand-primary);color:var(--white);border-radius:6px;padding:3px 7px;font-size:12px;font-weight:800}
#menu{display:flex;flex-direction:column;gap:2px}
#menu a{padding:10px 12px;border-radius:var(--radius-sm);color:var(--gray-300);
  font-size:var(--text-sm);font-weight:500;transition:background var(--duration-fast) var(--ease-standard)}
#menu a:hover{background:rgba(255,255,255,.08);color:#fff}
#menu a.activo{background:var(--brand-primary);color:#fff;font-weight:600}

/* Grupos del menú. Abierto queda solo aquel en el que estás trabajando: el
   menú se mantiene corto sin costar un clic en el uso diario. */
.grupo{margin-bottom:2px}
.grupo-tit{display:flex;align-items:center;width:100%;gap:8px;background:none;border:0;
  padding:9px 12px;border-radius:var(--radius-sm);cursor:pointer;text-align:left;
  color:var(--gray-500);font-family:inherit;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  transition:color var(--duration-fast) var(--ease-standard)}
.grupo-tit:hover{color:#fff}
.grupo.abierto>.grupo-tit{color:rgba(255,255,255,.92)}
/* La flecha apunta a la derecha cuando está cerrado y baja al abrirse. */
.flecha{margin-left:auto;width:0;height:0;flex:none;
  border-left:4px solid currentColor;border-top:3.5px solid transparent;
  border-bottom:3.5px solid transparent;
  transition:transform var(--duration-fast) var(--ease-standard)}
.grupo.abierto .flecha{transform:rotate(90deg)}
.grupo-items{display:none;flex-direction:column;gap:2px;padding-left:8px}
.grupo.abierto>.grupo-items{display:flex}
/* Un grupo cerrado que contiene la vista actual deja una marca, para que el
   menú nunca esté sin señal de dónde estás. */
.grupo:not(.abierto)>.grupo-tit.contiene-activo{color:#fff}
.grupo:not(.abierto)>.grupo-tit.contiene-activo::before{content:"";width:4px;height:4px;
  border-radius:50%;background:var(--brand-primary);flex:none;margin-left:-8px;margin-right:4px}
.lateral-pie{margin-top:auto;padding:14px 8px 0;border-top:1px solid rgba(255,255,255,.14)}
.usuario-nombre{color:#fff;font-size:13px;font-weight:600}
.usuario-rol{color:var(--gray-500);font-size:11.5px;text-transform:capitalize;margin-bottom:9px}
.contenido{padding:26px 30px 60px;overflow-x:hidden}

/* ---------- encabezado de vista ---------- */
.cabecera{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.cabecera h2{font-size:var(--text-2xl);letter-spacing:var(--tracking-wide)}
.cabecera .desc{color:var(--gris);font-size:13px;margin-top:3px}
.acciones{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- tarjetas ---------- */
.tarjeta{background:var(--panel);border:1px solid var(--linea);border-radius:var(--radio);
  box-shadow:var(--sombra);padding:18px}
.tarjeta + .tarjeta{margin-top:16px}
.tarjeta h3{font-family:var(--font-display);font-size:14px;text-transform:uppercase;
  letter-spacing:var(--tracking-wider);color:var(--text-muted);margin-bottom:14px;
  padding-bottom:9px;border-bottom:1px solid var(--border-subtle)}
.rejilla{display:grid;gap:14px}
.rejilla.k4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.rejilla.k2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.kpi .etq{font-size:12px;color:var(--gris);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.kpi .val{font-family:var(--font-display);font-size:34px;font-weight:700;margin-top:4px;color:var(--brand-primary)}
.kpi .pie{font-size:12px;color:var(--gris);margin-top:2px}

/* ---------- formularios ---------- */
input,select,textarea{width:100%;padding:9px 11px;border:1px solid var(--border-default);border-radius:var(--radius-sm);
  font:inherit;font-size:13.5px;background:#fff;color:var(--tinta)}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(227,0,27,.28);outline-offset:1px;border-color:var(--focus-ring)}
input:disabled,textarea:disabled,select:disabled{background:var(--gray-100);color:var(--text-faint)}
textarea{resize:vertical;min-height:76px;line-height:1.5}
.campo{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.campo > span{font-size:12.5px;font-weight:600;color:var(--gris)}
.campo .ayuda{font-size:11.5px;color:var(--gris);font-weight:400}
.fila{display:grid;gap:14px}
.fila.c2{grid-template-columns:1fr 1fr}
.fila.c3{grid-template-columns:1fr 1fr 1fr}
.fila.c4{grid-template-columns:repeat(4,1fr)}

/* ---------- botones ---------- */
.btn{border:1px solid var(--border-default);background:#fff;color:var(--charcoal-900);
  padding:9px 18px;border-radius:var(--radius-sm);font:inherit;font-size:var(--text-sm);
  font-weight:600;letter-spacing:.01em;cursor:pointer;white-space:nowrap;
  transition:background var(--duration-fast) var(--ease-standard),
             transform var(--duration-fast) var(--ease-standard)}
.btn:hover{background:#F7F9FB}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.primario{background:var(--brand-primary);border-color:var(--brand-primary);color:var(--brand-on-primary)}
.btn.primario:hover{background:var(--brand-primary-hover);border-color:var(--brand-primary-hover)}
.btn:active{transform:scale(.97)}
.btn.exito{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.exito:hover{filter:brightness(1.1)}
.btn.peligro{background:#fff;border-color:#E4B6B6;color:var(--error)}
.btn.peligro:hover{background:var(--error-bg)}
.btn.plano{background:transparent;border-color:rgba(255,255,255,.25);color:#CFDCE7}
.btn.plano:hover{background:rgba(255,255,255,.1);color:#fff}
.btn.peq{padding:5px 10px;font-size:12px}
.btn.ancho{width:100%}

/* ---------- tablas ---------- */
.tabla-caja{overflow-x:auto;border:1px solid var(--linea);border-radius:var(--radio);background:#fff;
  box-shadow:var(--sombra)}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{background:var(--surface-muted);text-align:left;padding:10px 12px;font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;color:var(--gris);border-bottom:1px solid var(--linea);white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid var(--linea);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--gray-100)}
.der{text-align:right}
.cen{text-align:center}
.mono{font-variant-numeric:tabular-nums}
.vacio{padding:38px;text-align:center;color:var(--gris);font-size:13.5px}

/* ---------- etiquetas de estado ---------- */
.etiqueta{display:inline-block;padding:2.5px 9px;border-radius:99px;font-size:11px;font-weight:700;
  letter-spacing:.03em;white-space:nowrap}
.e-BORRADOR{background:var(--gray-200);color:var(--charcoal-700)}
.e-PENDIENTE{background:var(--alerta-bg);color:var(--alerta)}
.e-APROBADA{background:var(--ok-bg);color:var(--ok)}
.e-RECHAZADA{background:var(--error-bg);color:var(--error)}
.e-ENVIADA{background:var(--red-100);color:var(--red-700)}
/* Facturación. FACTURADA reusa el verde de APROBADA porque significa lo
   mismo para quien mira: ya salió. ANULADA va en gris, no en rojo: no es
   un error, es un corte que dejó de contar. */
.e-FACTURADA{background:var(--ok-bg);color:var(--ok)}
.e-ANULADA{background:var(--gray-200);color:var(--charcoal-700);text-decoration:line-through}
.e-VENCIDA{background:var(--error-bg);color:var(--error)}
tr.vencida td{background:var(--error-bg)}
/* Las cifras no se parten: '$ 11.980.000' en dos renglones se lee como
   dos números distintos. */
td.der.mono,td.mono{white-space:nowrap}
/* Semáforo de cartera en la barra lateral. Va sobre el fondo oscuro, así que
   los colores de tramo se usan como punto y el texto queda claro: el mismo
   rojo que en el PDF sería ilegible aquí. */
.semaforo{margin:16px 2px 4px;padding:10px;border-radius:8px;background:rgba(255,255,255,.06);cursor:pointer}
.semaforo:hover{background:rgba(255,255,255,.11)}
.semaforo .etq{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:rgba(255,255,255,.55);font-weight:700}
.semaforo .val{font-family:var(--font-display);font-size:19px;font-weight:700;color:#fff;margin:2px 0 6px;line-height:1.1}
.semaforo .tramo{display:flex;align-items:center;gap:6px;font-size:11.5px;color:rgba(255,255,255,.8);padding:1px 0}
.semaforo .punto{width:9px;height:9px;border-radius:50%;flex:none}
.semaforo .cifra{margin-left:auto;font-variant-numeric:tabular-nums}
/* Filas del listado de cartera: el fondo lo pone el tramo desde el servidor. */
tr.cart td{border-bottom:1px solid rgba(0,0,0,.06)}
/* Grados de certeza de la conciliación. El color dice cuánto hay que
   mirar antes de confirmar, no si algo está bien o mal. */
.e-CIERTO{background:var(--ok-bg);color:var(--ok)}
.e-PROBABLE{background:var(--alerta-bg);color:var(--alerta)}
.e-POSIBLE{background:var(--gray-200);color:var(--charcoal-700)}
.e-HISTORICA{background:var(--gray-200);color:var(--charcoal-700)}
.e-SINCANDIDATO{background:var(--gray-200);color:var(--gris)}
.conc-fila{border-bottom:1px solid var(--linea);padding:14px 0}
.conc-fila:last-child{border:none}
.conc-obs{font-size:12px;color:var(--gris);white-space:pre-line;max-height:3.4em;overflow:hidden;margin-top:4px}
.marca-vencida{background:var(--error-bg);color:var(--error);padding:1px 7px;border-radius:99px;
  font-size:10.5px;font-weight:700;margin-left:6px}

/* ---------- editor de ítems ---------- */
.items th:last-child,.items td:last-child{width:36px}
.items input,.items textarea{border:1px solid transparent;background:transparent;padding:6px 7px;
  border-radius:5px;font-size:13.5px}
.items textarea{min-height:0;resize:none;overflow:hidden;line-height:1.4;display:block}
.items input:hover,.items textarea:hover{border-color:var(--linea)}
.items input:focus,.items textarea:focus{background:#fff;border-color:var(--brand-primary)}
.items td{padding:3px 5px}
.icono{background:none;border:none;cursor:pointer;color:var(--gris);font-size:16px;line-height:1;padding:4px 7px;border-radius:5px}
.icono:hover{background:var(--error-bg);color:var(--error)}
.totales{margin-left:auto;width:330px;max-width:100%}
.totales .lin{display:flex;justify-content:space-between;padding:6px 0;font-size:13.5px}
.totales .lin.total{border-top:2px solid var(--brand-primary);margin-top:6px;padding-top:10px;
  font-size:17px;font-weight:700;color:var(--brand-primary)}

/* ---------- avisos ---------- */
.avisos{position:fixed;top:16px;right:16px;display:flex;flex-direction:column;gap:8px;z-index:200;max-width:390px}
.aviso{background:#fff;border-left:4px solid var(--brand-primary);border-radius:6px;padding:11px 15px;
  box-shadow:0 6px 22px rgba(16,24,40,.16);font-size:13.5px;animation:entra .18s ease}
.aviso.ok{border-color:var(--ok)}.aviso.err{border-color:var(--error)}.aviso.warn{border-color:var(--amber-600)}
@keyframes entra{from{opacity:0;transform:translateX(16px)}}

/* ---------- modal ---------- */
.modal-fondo{position:fixed;inset:0;background:rgba(15,25,38,.5);display:grid;place-items:center;
  z-index:150;padding:24px;overflow-y:auto}
.modal{background:#fff;border-radius:12px;width:100%;max-width:600px;padding:24px;
  box-shadow:0 24px 60px rgba(0,0,0,.3);max-height:90vh;overflow-y:auto}
.modal h3{font-size:17px;margin-bottom:4px;text-transform:none;letter-spacing:0;color:var(--tinta)}
.modal .sub{color:var(--gris);font-size:13px;margin-bottom:18px}
.modal-pie{display:flex;justify-content:flex-end;gap:8px;margin-top:20px;
  border-top:1px solid var(--linea);padding-top:16px}

/* ---------- varios ---------- */
.error{color:var(--error);font-size:12.5px;min-height:18px;margin-bottom:6px}
.aviso-linea{padding:11px 14px;border-radius:6px;font-size:13px;margin-bottom:16px;border:1px solid}
.aviso-linea.info{background:var(--info-bg);border-color:#C5D9E9;color:var(--info)}
.aviso-linea.warn{background:var(--alerta-bg);border-color:#EEDCA8;color:var(--alerta)}
.aviso-linea.ok{background:var(--ok-bg);border-color:#BFE0CD;color:var(--ok)}
.barra-filtros{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;align-items:center}
.barra-filtros input,.barra-filtros select{width:auto;min-width:180px}
.historial{list-style:none;padding:0;margin:0;font-size:13px}
.historial li{padding:8px 0;border-bottom:1px solid var(--linea);display:flex;justify-content:space-between;gap:12px}
.historial li:last-child{border:none}
.historial .meta{color:var(--gris);font-size:12px;white-space:nowrap}
.sobre-previo{background:#F7F9FB;border:1px solid var(--linea);border-radius:6px;padding:14px;
  font-size:13px;white-space:pre-wrap;max-height:230px;overflow-y:auto;line-height:1.55}
.pila{display:flex;flex-direction:column;gap:2px}
.pila small{color:var(--gris);font-size:12px}
@media(max-width:820px){
  #pantalla-app{grid-template-columns:1fr}
  .lateral{flex-direction:row;flex-wrap:wrap;align-items:center;padding:10px 12px}
  /* La barra se vuelve una franja horizontal. Marca, semáforo y usuario van
     en la primera línea; el menú toma la segunda entera, porque compartiendo
     fila le quedaba un cuarto del ancho y los enlaces se apilaban en dos
     columnas torcidas. */
  .marca{padding:0 6px;flex:1;order:1}
  .semaforo{order:1;margin:0;padding:6px 10px;display:flex;align-items:center;gap:10px}
  .semaforo .val{margin:0;font-size:15px}
  .semaforo .etq,.semaforo .tramo{display:none}  /* solo la cifra: no hay sitio */
  .lateral-pie{order:1;margin:0;border:none;padding:0;display:flex;gap:10px;align-items:center}
  #menu{flex-direction:row;flex-wrap:wrap;flex:1 0 100%;order:2;gap:2px 4px}
  /* En franja no hay acordeón: se ven todas las entradas. `display:contents`
     disuelve las cajas de los grupos para que los enlaces fluyan directamente
     dentro del menú. Hay que repetir el selector del acordeón porque el suyo
     es más específico y si no, el grupo abierto se queda en columna. El
     `!important` de .oculto sigue ganando, así que los permisos se respetan. */
  .grupo-tit{display:none}
  .grupo,.grupo-items,
  .grupo.abierto>.grupo-items{display:contents}
  .contenido{padding:18px 14px 50px}
  .fila.c2,.fila.c3,.fila.c4{grid-template-columns:1fr}
}

/* Agregar un aspecto no incluido propio, además de los de la plantilla. */
.agregar-ni{display:flex;gap:8px;margin-top:8px}
.agregar-ni input{flex:1;min-width:0}
.norma.propia{background:var(--surface-muted);border-radius:5px}
.quitar-ni{margin-left:auto;background:none;border:0;cursor:pointer;padding:0 4px;
  font-size:17px;line-height:1;color:var(--text-faint)}
.quitar-ni:hover{color:var(--brand-primary)}

/* Aviso de maquetación bajo las notas de la cotización. Discreto cuando sobra
   sitio, visible cuando no: es la diferencia entre una propuesta bien armada y
   una con un recuadro solo en una página. */
.maqueta{font-size:11.5px;margin-top:6px;line-height:1.45}
.maqueta:empty{display:none}
.maqueta.bien{color:var(--text-faint)}
.maqueta.justo{color:var(--status-warning-fg)}
.maqueta.mal{color:var(--status-danger-fg);font-weight:600;
  background:var(--status-danger-bg);border-radius:5px;padding:8px 10px;margin-top:8px}

/* ---------- inicio: la portada ---------- */
/* Las áreas se acomodan solas: hoy son tres, mañana cuatro cuando entre la
   gestión de proyectos. Nada aquí sabe cuántas hay. */
.areas{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.tarjeta.area{padding:0;overflow:hidden}
.cab-area{display:flex;align-items:center;gap:8px;padding:14px 18px;cursor:pointer;
  border-bottom:1px solid var(--border-subtle);font-family:var(--font-display);
  font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--text-heading)}
.cab-area:hover{background:var(--surface-muted)}
.ir-area{margin-left:auto;font-family:var(--font-body);font-size:12px;font-weight:500;
  text-transform:none;letter-spacing:0;color:var(--text-link)}
.cifras-area{display:grid;gap:1px;background:var(--border-subtle)}
/* Un conteo cabe al lado de su etiqueta; una cifra en pesos no. Por eso las de
   dinero se apilan: en una tarjeta de 300px la etiqueta se partía en tres
   renglones para dejarle sitio al número. */
.cifras-area .cifra{background:var(--surface-card);padding:11px 18px;cursor:pointer;
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.cifras-area .cifra:hover{background:var(--surface-muted)}
.cifras-area .etq{font-size:12.5px;color:var(--text-muted);flex:1;min-width:0}
.cifras-area .val{font-family:var(--font-display);font-size:19px;font-weight:700;
  color:var(--text-heading);line-height:1;white-space:nowrap}
.cifras-area .pie{font-size:11px;color:var(--text-faint);text-align:right}
.cifras-area .cifra.apilada{align-items:baseline}
.cifras-area .cifra.apilada .etq{flex:1 1 100%;margin-bottom:5px}
.cifras-area .cifra.apilada .val{font-size:21px;flex:1}

/* Lo que pide acción. El color lo pone la urgencia, no el área de donde venga. */
.tarjeta.atencion{padding:0;margin-bottom:18px;overflow:hidden}
.cab-seccion{padding:13px 18px;border-bottom:1px solid var(--border-subtle);
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--text-faint)}
.linea-at{display:flex;align-items:center;gap:12px;padding:13px 18px;cursor:pointer;
  border-bottom:1px solid var(--border-subtle)}
.linea-at:last-child{border-bottom:0}
.linea-at:hover{background:var(--surface-muted)}
.punto-at{width:9px;height:9px;border-radius:50%;flex:none;background:var(--gray-300)}
.linea-at.u-urgente .punto-at{background:var(--brand-primary)}
.linea-at.u-alerta  .punto-at{background:var(--amber-600)}
.cuerpo-at{flex:1;min-width:0}
.texto-at{font-size:14px;color:var(--text-body)}
.linea-at.u-urgente .texto-at{font-weight:600}
.det-at{font-size:12px;color:var(--text-faint);margin-top:2px}
.lado-at{text-align:right;flex:none}
.val-at{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--text-heading)}
.area-at{font-size:11px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.04em}
.tarjeta.despejado{padding:20px 22px;margin-bottom:18px}
.tarjeta.despejado .tit{font-family:var(--font-display);font-size:16px;font-weight:700;
  color:var(--status-safe-fg);margin-bottom:4px}

/* Inicio no vive en ningún grupo: se separa de ellos con una línea. */
#menu a.suelto{margin-bottom:8px;padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.12);border-radius:var(--radius-sm)}

/* ---------- cotización de diseños ---------- */
.serv{display:flex;align-items:center;gap:9px;padding:11px 13px;border:1px solid var(--linea);
  border-radius:7px;cursor:pointer;font-size:14px;background:#fff;transition:border-color .12s}
.serv:hover{border-color:var(--brand-primary)}
.serv:has(input:checked){border-color:var(--brand-primary);background:var(--red-100)}
.serv input{width:auto;margin:0}
.recargos{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:2px}
.recargo{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:6px;
  cursor:pointer;font-size:13px}
.recargo:hover{background:var(--surface-muted)}
.recargo input{width:auto;margin:0;flex:none}
.recargo span{flex:1;line-height:1.35}
.recargo .pct{color:var(--gris);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.recargo:has(input:checked){background:var(--red-100)}
.recargo:has(input:checked) .pct{color:var(--brand-primary);font-weight:700}
.normas{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:1px;
  max-height:280px;overflow-y:auto;border:1px solid var(--linea);border-radius:7px;padding:8px}
.norma{display:flex;align-items:flex-start;gap:8px;padding:5px 7px;border-radius:5px;
  cursor:pointer;font-size:12.5px;line-height:1.35}
.norma:hover{background:var(--surface-muted)}
.norma input{width:auto;margin:2px 0 0;flex:none}
details summary::-webkit-details-marker{color:var(--brand-primary)}

/* Casilla suelta dentro de un formulario (p. ej. "Requiere aprobación"). */
.campo-check{display:flex;align-items:center;gap:9px;margin:2px 0 14px;
  padding:11px 13px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);
  background:var(--surface-muted);cursor:pointer;font-size:13px}
.campo-check input{width:auto;margin:0;flex:none;accent-color:var(--brand-primary)}
.campo-check input:disabled{cursor:default}
.campo-check:has(input:disabled){cursor:default;opacity:.7}

/* Cabecera de disciplina dentro de la lista de entregables. */
.disciplina{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text-muted);margin:10px 0 4px;padding:0 7px}
.disciplina:first-child{margin-top:0}

/* ---- documentos de referencia ---------------------------------------- */
.zona-soltar{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:22px; text-align:center; cursor:pointer;
  border:2px dashed var(--border-default); border-radius:8px;
  background:var(--surface-muted); color:var(--text-muted);
  transition:border-color .15s, background .15s;
}
.zona-soltar b{ color:var(--text-heading); font-size:14px; }
.zona-soltar small{ color:var(--text-faint); }
.zona-soltar.encima{ border-color:var(--brand-primary); background:var(--red-100); }
.zona-soltar.ocupada{ cursor:progress; border-style:solid; }
#lista-adjuntos td small.desc{ display:block; }