/* Prometeo, el panel del agente de ventas de Leasein, con el aspecto de Corein (guia: docs/especificacion/
   panel-diseno-como-corein.md, valores medidos en las capturas de Diego, 15-10 noche). Corein no usa tarjetas sueltas:
   una sola HOJA blanca de trabajo con el titulo naranja dentro, tablas planas de letra chica con cabecera gris, radios
   chicos, boton principal indigo y el menu agrupado. Se conservan los colores de marca, Poppins y los iconos.
   Contraste: el titulo naranja va a ~19 px y 700 (texto grande, 3:1 basta: da 3.3); el blanco sobre la barra naranja
   da 3.3:1, como en Corein (pendiente escrito en ESTADO.md); el resto pasa AA. Nada en linea: CSP estricta. */

/* Poppins, la letra del menu de Corein, servida desde el panel: OFL-1.1, @fontsource/poppins 5.3.0
   (fuentes/LICENSE-Poppins-OFL.txt). Solo el juego latino: cubre tildes, ene y signos. */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("fuentes/poppins-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("fuentes/poppins-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("fuentes/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("fuentes/poppins-latin-700-normal.woff2") format("woff2"); }

:root {
  --fondo: #f4f4f4;
  --hoja: #ffffff;
  --tinta: #212529;
  --tenue: #6c757d;
  --borde-hoja: #dee2e6;
  --separador: #e5e3e3;
  --cabecera: #f0f0f0;
  --campo: #ced4da;
  --naranja: #fe5000;
  --naranja-texto: #b23a00;
  --naranja-claro: #fff1e8;
  --morado: #231552;
  --indigo: #5461c9;
  --indigo-hondo: #4451b5;
  --lila: #f8f0ff;
  --lila-texto: #5461c9;
  --verde: #1e7a4a;
  --verde-claro: #e4f3ea;
  --ambar: #8a6500;
  --ambar-texto: #6e5100;
  --ambar-claro: #fdf3d0;
  --rojo: #b42318;
  --rojo-claro: #fbe7e5;
  --radio: 6px;
  --radio-chico: 4px;
  --letra: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { font-size: 13.5px; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: var(--letra); line-height: 1.55; }
a { color: var(--naranja-texto); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--indigo); outline-offset: 2px;
}
/* el titulo de la pagina, como en Corein: naranja, dentro de la hoja, arriba a la izquierda */
h1 { font-size: 1.3rem; font-weight: 600; margin: 0; color: var(--naranja); letter-spacing: 0; line-height: 1.3; }
h2 { font-size: 1.05rem; font-weight: 600; margin: 1.8rem 0 .7rem; color: var(--tinta); }
h3 { font-size: .98rem; font-weight: 600; margin: 1.2rem 0 .5rem; color: var(--tinta); }
.nota-pie { margin: 1.1rem 0 0; color: var(--tenue); font-size: .82rem; }
p { margin: .35rem 0; max-width: 78ch; }
.tenue { color: var(--tenue); }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* ---------- armazon: lateral naranja y barra morada (los de Corein, con radio de 12 px y sombra leve) ---------- */
.armazon { display: grid; grid-template-columns: 14.5rem minmax(0, 1fr); gap: .9rem; min-height: 100vh; padding: .9rem; }
.lateral { background: var(--naranja); color: #fff; border-radius: 12px; box-shadow: 2px 2px 8px rgba(0, 0, 0, .18);
  padding: 1.1rem .6rem; position: sticky; top: .9rem; align-self: start; min-height: calc(100vh - 1.8rem); }
.lateral .marca { display: flex; align-items: center; gap: .5rem; padding: 0 .5rem; color: #fff; text-decoration: none; }
.lateral .marca .simbolo { width: 30px; height: 30px; flex: none; }
.lateral .marca .nombre { font-size: 1.55rem; font-weight: 600; letter-spacing: -.01em; line-height: 1; }
.lateral .lema { margin: .4rem .5rem .8rem; font-size: .8rem; font-weight: 500; opacity: .95; }
/* el menu agrupado como el de Corein: titulos de grupo y separadores finos; el activo sin pildora blanca */
.lateral .grupo { border-top: 1px solid rgba(255, 255, 255, .3); padding-top: .7rem; margin-top: .7rem; }
.lateral .grupo-titulo { margin: .15rem .6rem .45rem; font-size: 13px; font-weight: 500; }
.lateral nav a { display: flex; align-items: center; gap: .7rem; padding: .6rem .6rem .6rem .75rem; margin: .15rem 0; color: #fff;
  font-size: 13.5px; font-weight: 400; text-decoration: none; border-radius: var(--radio); }
.lateral .grupo-titulo ~ a { padding-left: 1.35rem; }
.lateral nav a svg { width: 16px; height: 16px; flex: none; }
.lateral nav a:hover { background: rgba(255, 255, 255, .12); }
.lateral nav a[aria-current="page"] { background: rgba(255, 255, 255, .2); font-weight: 500; }
.cuerpo { min-width: 0; display: flex; flex-direction: column; gap: .9rem; }
.barra { background: var(--morado); color: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  display: flex; justify-content: flex-end; align-items: center; gap: 1rem; padding: .65rem 1.2rem; min-height: 3.4rem; }
.barra .quien { display: flex; align-items: center; gap: 1rem; text-align: right; }
.barra .quien b { display: block; font-size: .92rem; font-weight: 600; }
.barra .quien small { display: block; font-size: .78rem; opacity: .85; }
.barra .quien button { background: none; border: 1px solid rgba(255, 255, 255, .45); border-radius: var(--radio-chico); color: #fff;
  padding: .3rem .75rem; cursor: pointer; font: inherit; font-size: .82rem; opacity: .9; }
.barra .quien button:hover { opacity: 1; background: rgba(255, 255, 255, .1); }

/* ---------- la hoja de trabajo: una sola, blanca, sin sombra pesada ---------- */
.contenido { background: var(--hoja); border: 1px solid var(--borde-hoja); border-radius: var(--radio); box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  padding: 1.5rem 1.75rem 2rem; min-width: 0; }
/* titulo a la izquierda y acciones a la derecha, en la misma linea; la ayuda, si hace falta, una linea gris debajo */
.encabezado { display: flex; justify-content: space-between; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.encabezado > * { min-width: 0; overflow-wrap: anywhere; }
.encabezado > p.tenue { flex-basis: 100%; max-width: none; order: 3; margin: 0; font-size: .85rem; }
.encabezado div > p.tenue { margin: .15rem 0 0; font-size: .85rem; }

/* ---------- avisos ---------- */
.avisos { list-style: none; padding: 0; margin: 0 0 .9rem; }
.avisos li { padding: .55rem .8rem; border-radius: var(--radio-chico); margin-bottom: .35rem; border: 1px solid var(--separador); background: var(--hoja); }
.avisos .success { border-color: #b7dcc6; background: var(--verde-claro); }
.avisos .error { border-color: #efb8b1; background: var(--rojo-claro); }
.avisos .warning { border-color: #ecd9a3; background: var(--ambar-claro); }

/* ---------- la cinta del embudo: las diez etapas en orden; la barra de cada una recorre el degradado de la esfera de
   Leasein por el camino principal (de amarillo hasta el WIN); las salidas, en gris ---------- */
.cinta { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); border: 1px solid var(--separador); border-radius: var(--radio-chico);
  margin: 0 0 1.6rem; overflow: hidden; }
.cinta div { padding: .7rem .65rem .75rem; border-right: 1px solid var(--separador); border-top: 4px solid #cfcbc6; min-width: 0; }
.cinta div:last-child { border-right: 0; }
.cinta .e1 { border-top-color: #f4b819; }
.cinta .e2 { border-top-color: #ed9e1a; }
.cinta .e3 { border-top-color: #e7851c; }
.cinta .e4 { border-top-color: #e06b1d; }
.cinta .e6 { border-top-color: #d96623; }
.cinta .e7 { border-top-color: #d2622a; }
.cinta .e8 { border-top-color: #cb5d30; }
.cinta .e5, .cinta .e9, .cinta .e10 { background: #fafafa; }
.cinta b { display: block; font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.15; color: var(--tinta); }
.cinta span { display: block; font-size: 11.5px; color: var(--tenue); line-height: 1.25; }
.cinta .vacia b { color: #c4c4c4; }

/* ---------- tablas planas, como las de Corein ---------- */
.tabla { width: 100%; border-collapse: collapse; background: var(--hoja); font-size: 12.5px; }
.tabla th, .tabla td { padding: .75rem .85rem; border-bottom: 1px solid var(--separador); text-align: left; vertical-align: top; }
.tabla th { font-weight: 600; color: var(--tinta); background: var(--cabecera); border-bottom: 0; padding-top: .65rem; padding-bottom: .65rem; }
.tabla tbody tr:hover { background: #fafafa; }
.tabla tbody th { background: none; font-weight: 400; color: var(--tenue); border-bottom: 1px solid var(--separador); }
.tabla td a { font-weight: 500; text-decoration: none; }
.tabla td a:hover { text-decoration: underline; }
.envoltura { overflow-x: auto; }
/* vacios con direccion: texto gris a la izquierda, sin tarjeta */
.vacio { margin: .5rem 0; padding: 0; text-align: left; color: var(--tenue); }

/* ---------- pie de las listas largas, como Corein: paginas, «Registros del 1 al 10 de N» y «Mostrar» ---------- */
.pie-lista { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; font-size: 12px; color: var(--tenue); }
.paginas { display: flex; gap: .25rem; align-items: center; }
.paginas a, .paginas span { min-width: 1.9rem; height: 1.9rem; display: inline-flex; align-items: center; justify-content: center; padding: 0 .35rem;
  border-radius: var(--radio-chico); color: var(--tinta); text-decoration: none; }
.paginas a:hover { background: var(--cabecera); }
.paginas span.actual { background: var(--indigo); color: #fff; font-weight: 600; }
.paginas span.gris { color: #c4c4c4; }
.mostrar { display: flex; align-items: center; gap: .5rem; }
.mostrar label { margin: 0; font-size: 12px; }
.mostrar select { width: auto; padding: .25rem .5rem; font-size: 12px; }

/* ---------- etiquetas de etapa y de estado ---------- */
.etiqueta { display: inline-block; padding: .1rem .45rem; border-radius: var(--radio-chico); font-size: 11.5px; font-weight: 500; white-space: nowrap;
  background: var(--lila); color: var(--lila-texto); }
.etiqueta.bien { background: var(--verde-claro); color: var(--verde); }
.etiqueta.espera { background: var(--ambar-claro); color: var(--ambar-texto); }
.etiqueta.mal { background: var(--rojo-claro); color: var(--rojo); }
.etiqueta.neutra { background: #eeeeee; color: var(--tenue); }

/* ---------- detalle en dos columnas y fichas de lectura (dos columnas con linea entre filas) ---------- */
.dos { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1.75rem; align-items: start; }
.dos h2:first-child { margin-top: 0; }
.dos > * { min-width: 0; }
.ficha { background: var(--hoja); border: 1px solid var(--separador); border-radius: var(--radio-chico); padding: 1rem 1.2rem; }
.ficha dl, .campos-eva { display: grid; grid-template-columns: auto 1fr; gap: 0 1.1rem; margin: 0; }
.ficha dt, .ficha dd, .campos-eva dt, .campos-eva dd { padding: .5rem 0; border-bottom: 1px solid var(--cabecera); }
.ficha dt, .campos-eva dt { color: var(--tenue); font-size: .88rem; }
.ficha dd, .campos-eva dd { margin: 0; overflow-wrap: anywhere; }
.ficha dl > :nth-last-child(-n+2), .campos-eva > :nth-last-child(-n+2) { border-bottom: 0; }
.ficha + .ficha { margin-top: .9rem; }

/* ---------- conversacion ---------- */
.chat { display: flex; flex-direction: column; gap: .45rem; border: 1px solid var(--separador); border-radius: var(--radio-chico); padding: .9rem; }
.burbuja { max-width: 75%; padding: .5rem .75rem; border-radius: 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.burbuja.cliente { align-self: flex-start; background: #f1f1f1; }
.burbuja.agente { align-self: flex-end; background: var(--naranja-claro); }
.burbuja.interno { align-self: center; max-width: 90%; background: none; color: var(--tenue); font-size: .85rem; padding: .1rem .55rem; border: 1px dashed #d5d5d5; }
.burbuja small { display: block; font-size: .75rem; color: var(--tenue); margin-bottom: .1rem; }

/* ---------- replicas de demostracion: marco discontinuo y su aviso ---------- */
.replica { border: 1px dashed #b9b9b9; border-radius: var(--radio-chico); padding: .9rem 1rem; }
.replica > .aviso-replica { font-size: .85rem; color: var(--tenue); margin: 0 0 .7rem; }
.informe { white-space: pre-wrap; font-family: var(--letra); font-size: .9rem; line-height: 1.55; margin: 0; overflow-wrap: anywhere; }

/* ---------- pestanas del caso y ficha EVA ---------- */
.pestanas { display: flex; gap: .3rem; margin: 0 0 1.4rem; border-bottom: 1px solid var(--separador); }
.pestanas a { padding: .55rem 1rem; color: var(--tenue); font-weight: 400; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pestanas a[aria-current="page"] { color: var(--naranja-texto); border-bottom-color: var(--naranja); font-weight: 500; }
.bloque-eva { margin-bottom: 1rem; }
.bloque-eva h2 { margin-top: 0; color: var(--naranja-texto); }
.bloque-eva h3 { color: var(--lila-texto); font-size: .92rem; margin: .9rem 0 .4rem; }
.bloque-eva .tabla { border: 1px solid var(--separador); }
.campos-eva { grid-template-columns: 17rem 1fr; }
.campos-eva dd small { color: var(--tenue); font-size: .78rem; margin-left: .35rem; }
.campos-eva dd.falta { color: #6f6f6f; font-style: italic; }
.notas-eva { color: var(--tenue); font-size: .85rem; padding-left: 1.1rem; }

/* ---------- formularios como los de Bootstrap (Corein) y botones ---------- */
label { display: block; font-size: .85rem; color: var(--tenue); margin: .55rem 0 .2rem; }
input[type=text], input[type=password], input[type=number], select, textarea {
  width: 100%; padding: .375rem .65rem; border: 1px solid var(--campo); border-radius: var(--radio-chico); font: inherit; background: var(--hoja); color: var(--tinta);
}
input:focus, select:focus, textarea:focus { border-color: #a8b0e8; box-shadow: 0 0 0 .2rem rgba(84, 97, 201, .2); outline: 0; }
textarea { resize: vertical; }
.boton { display: inline-block; padding: .4rem .8rem; border-radius: var(--radio-chico); border: 1px solid var(--indigo); background: var(--indigo);
  color: #fff; font: inherit; font-size: .9rem; font-weight: 500; cursor: pointer; text-decoration: none; }
.boton:hover { background: var(--indigo-hondo); border-color: var(--indigo-hondo); }
.boton.secundario { background: var(--morado); border-color: var(--morado); }
.boton.secundario:hover { background: #3a2a75; }
.boton.verde { background: var(--verde); border-color: var(--verde); }
.boton.ambar { background: var(--ambar); border-color: var(--ambar); }
.boton.peligro { background: var(--rojo); border-color: var(--rojo); }
.boton:disabled { opacity: .45; cursor: not-allowed; }
.errores { color: var(--rojo); font-size: .85rem; margin: .2rem 0; padding-left: 1.1rem; }
.decidir { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; align-items: start; margin-top: 1rem; }
.decidir form { border: 1px solid var(--separador); border-radius: var(--radio-chico); padding: .9rem 1rem; }
.decidir form h3 { margin-top: 0; }
.decidir .campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .75rem; }
.casilla { display: flex; gap: .5rem; align-items: center; color: var(--tinta); }
.casilla input { width: auto; accent-color: var(--indigo); }

/* ---------- el interruptor del agente ---------- */
.interruptor { display: flex; gap: 2rem; align-items: center; border: 1px solid var(--separador); border-left: 5px solid var(--verde);
  border-radius: var(--radio-chico); padding: 1.3rem 1.5rem; max-width: 54rem; }
.interruptor.apagado { border-left-color: var(--rojo); }
.interruptor .estado { font-size: 1.1rem; font-weight: 600; color: var(--tinta); margin-bottom: .2rem; }
.interruptor .boton { white-space: nowrap; }

/* ---------- matriz de permisos ---------- */
.matriz td, .matriz th { text-align: center; }
.matriz td:first-child, .matriz th:first-child { text-align: left; }
.matriz .gris { color: #c4c4c4; }
.matriz input { width: 1.05rem; height: 1.05rem; accent-color: var(--indigo); }

/* ---------- ingreso: el degradado del login de Corein, el logo blanco de Leasein y la tarjeta ---------- */
/* ---------- portada (ingreso, bloqueo, invitaciones y paginas de error): como la de Corein, 15-10 noche ----------
   Degradado morado-naranja a pantalla completa, la marca arriba a la izquierda con su lema, «Bienvenido» grande y fino
   y los campos blancos directamente sobre el fondo (sin tarjeta). Las paginas de aviso conservan su hoja blanca. */
.ingreso { min-height: 100vh; display: flex; align-items: flex-start; padding: 3.2rem 4.6rem; color: #fff;
  background: linear-gradient(120deg, #231552 0%, #3b2370 38%, #a8390f 78%, #fe5000 100%); }
.ingreso .portada { width: 100%; max-width: 24rem; }
.ingreso .marca-portada { display: flex; align-items: center; gap: .75rem; margin-bottom: 4.2rem; }
.ingreso .marca-portada img { width: 48px; height: 48px; flex: none; }
.ingreso .marca-portada .nombre { display: block; font-size: 2.15rem; font-weight: 500; line-height: 1; letter-spacing: -.01em; }
.ingreso .marca-portada .lema { display: block; margin-top: .3rem; font-size: .68rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; opacity: .92; }
.ingreso .portada > h1 { color: #fff; font-size: 2.5rem; font-weight: 400; line-height: 1.15; margin: 0 0 1.4rem; }
.ingreso form { max-width: 20rem; }
.ingreso form label { color: rgba(255, 255, 255, .92); font-size: .9rem; margin-top: .9rem; }
.ingreso form input[type=text], .ingreso form input[type=password] { border: 0; background: #fff; padding: .55rem .7rem; }
.ingreso form input:focus { box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .45); }
.ingreso .boton { display: block; width: 100%; margin-top: 1.3rem; padding: .6rem .8rem; background: #fff; border-color: #fff; color: var(--morado); font-weight: 500; }
.ingreso .boton:hover { background: #f1eefb; border-color: #f1eefb; }
.ingreso .errores { background: #fff; color: var(--rojo); border-radius: var(--radio-chico); padding: .5rem .7rem; margin: .4rem 0 0; }
.ingreso .etiqueta.bien { margin-top: .4rem; }
/* las paginas de aviso (bloqueo, invitacion, 403/404/500/503): hoja blanca bajo la misma marca */
.ingreso .ficha { background: var(--hoja); border: 0; border-radius: var(--radio); box-shadow: 0 10px 30px rgba(0, 0, 0, .3); padding: 1.6rem 1.7rem; color: var(--tinta); }
.ingreso .ficha h1 { font-size: 1.1rem; color: var(--tinta); font-weight: 600; margin: .2rem 0 .3rem; }
.ingreso .ficha .boton { color: #fff; background: var(--indigo); border-color: var(--indigo); }
@media (max-width: 600px) {
  .ingreso { padding: 2rem 1.25rem; }
  .ingreso .marca-portada { margin-bottom: 2.6rem; }
  .ingreso .portada > h1 { font-size: 2.1rem; }
}

@media (max-width: 900px) {
  .armazon { grid-template-columns: minmax(0, 1fr); padding: .5rem; gap: .5rem; }
  .lateral { position: static; min-height: 0; padding: .7rem .5rem .45rem; }
  .lateral .marca .nombre { font-size: 1.35rem; }
  .lateral .lema { margin: .3rem .5rem .45rem; }
  .lateral nav { display: flex; overflow-x: auto; gap: .2rem; align-items: center; }
  .lateral .grupo { display: contents; }
  .lateral .grupo-titulo { display: none; }
  .lateral nav a, .lateral .grupo-titulo ~ a { white-space: nowrap; padding-left: .6rem; }
  .barra { padding: .5rem .9rem; min-height: 0; }
  .contenido { padding: .9rem .8rem 1.4rem; }
  .dos, .decidir, .decidir .campos, .campos-eva { grid-template-columns: 1fr; }
  .cinta { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); }
  .cinta div { border-bottom: 1px solid var(--separador); }
  .burbuja { max-width: 90%; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }