@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}
.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}
.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)}
.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}
  #menu{flex-direction:row;flex-wrap:wrap;flex:1}
  .lateral-pie{margin:0;border:none;padding:0;display:flex;gap:10px;align-items:center}
  .contenido{padding:18px 14px 50px}
  .fila.c2,.fila.c3,.fila.c4{grid-template-columns:1fr}
}

/* ---------- 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)}