/* ============================================================
   SCAE · Portal del cliente — capa de estilo
   ------------------------------------------------------------
   Hereda marca/scae-design-system.css. NO redefine un solo color:
   todo sale de las variables de la marca.

   MOVIL PRIMERO. Todo lo que sigue esta escrito para 375px. Las
   consultas de medios solo AGREGAN aire hacia arriba; nunca
   reorganizan la pantalla. Un portal que se reordena en
   escritorio se siente como software; uno que no, se siente como
   un documento.

   La pantalla entera es UNA hoja clara sobre el verde. No hay una
   segunda tarjeta: los bloques se separan con aire y una linea de
   1px, nunca con mas cajas.

   El oro aparece exactamente tres veces:
     1. el hilo de 1px del borde superior de la hoja
     2. el boton fijo de "Registrar un caso"
     3. el punto de 5px de un comentario sin leer
   Si aparece una cuarta, algo se rompio.

   Todas las clases llevan el prefijo .portal- salvo las dos
   variantes de modal (.velo-hoja / .modal.hoja), que extienden
   componentes existentes sin tocar css/tablero.css.
   ============================================================ */

/* ============ LA CASCARA ============ */

/* Una sola columna de 560px, centrada, y todo cuelga de ella. La
   hoja, la barra fija y la linea del ciclo heredan este ancho: no
   se repite un max-width por componente ni se compensa el padding
   de la cascara con margenes negativos, que es justo la clase de
   acoplamiento que se rompe el dia que alguien toca tablero.css. */
.portal{
  position:relative;
  max-width:560px;
  margin:0 auto;
  padding:0 0 96px;
}

/* ---- Bloque 0 · la linea del ciclo ----
   REPRESENTA TIEMPO TRANSCURRIDO, JAMAS DESEMPENO.
   No es una barra de progreso del hito y no se debe reutilizar
   como tal: el ciclo avanza aunque no se cierre un solo caso.
   Es lo primero que el ojo registra y lo ultimo que nombraria si
   le preguntaran que vio. */
.portal-ciclo{
  position:sticky;top:0;z-index:20;
  height:2px;width:100%;
  background:rgba(11,31,25,.55);
}
/* portal.html, que no tiene cascara de admin alrededor, puede
   sangrar la linea de lado a lado anadiendo esta clase. Dentro
   del tablero interno NO se usa: la barra lateral hace que 100vw
   se pase de largo. */
.portal-ciclo.a-sangre{
  width:100vw;margin-left:calc(50% - 50vw);
}
.portal-ciclo-avance{
  display:block;height:100%;
  background:rgba(227,197,104,.3);
  transition:width 1.2s var(--ease);
}

/* ---- La hoja: lo unico que existe ---- */
.portal-hoja{
  background:var(--blanco);
  border-radius:0 0 var(--r-card) var(--r-card);
  box-shadow:var(--s-2);
  padding:0 20px 26px;
  position:relative;
  color:var(--verde);
  font-size:15px;
  line-height:1.5;
}
/* Oro nº1 de tres: el hilo superior de la hoja. */
.portal-hoja::before{
  content:'';display:block;height:1px;margin:0 -20px 20px;
  background:linear-gradient(90deg,transparent,var(--oro),transparent);
  opacity:.85;
}

/* Aire entre bloques: una linea, no una caja. */
.portal-hr{
  border:none;height:1px;
  background:var(--borde);opacity:.4;
  margin:26px 0;
}

.portal-bloque{display:block}

/* ============ TIPOGRAFIA DEL PORTAL ============
   Cormorant 600 para cifras y titulos; Inter para todo lo demas.
   Ese contraste es la identidad en miniatura. */

.portal-etiqueta{
  font-family:'Inter',sans-serif;
  font-size:11px;letter-spacing:2.5px;text-transform:uppercase;
  font-weight:700;color:var(--gris);
  display:block;line-height:1.4;
}
.portal-etiqueta-mini{font-size:10px;letter-spacing:2px;color:var(--gris)}
.portal-etiqueta-pie{margin-top:6px;color:var(--neutro);font-weight:600}

.portal-titulo{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;
  font-size:19px;line-height:1.2;color:var(--verde);
  margin:0 0 4px;
}

.portal-frase{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;
  font-size:20px;line-height:1.32;color:var(--verde);
  margin:8px 0 0;
}
.portal-frase-chica{
  font-family:'Inter',sans-serif;font-weight:400;
  font-size:14px;line-height:1.45;color:var(--gris);
  margin:8px 0 0;
}

/* La lectura de la semana: un humano le habla antes que un
   grafico. Sin comillas, sin firma. */
.portal-lectura{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;
  font-size:20px;line-height:1.34;color:var(--verde);
  margin:0;
}

.portal-dato-linea{
  font-family:'Inter',sans-serif;font-size:14px;color:var(--gris);
  margin:10px 0 0;line-height:1.45;
}
.portal-dato-fuerte{color:var(--verde);font-weight:600;font-size:15px}

.portal-nota{
  font-family:'Inter',sans-serif;font-size:12px;color:var(--neutro);
  margin-top:8px;line-height:1.4;
}

/* ============ BLOQUE 1 · CABECERA ============ */

.portal-cabecera{padding-bottom:2px}
.portal-estudio{
  font-family:'Inter',sans-serif;font-weight:600;font-size:15px;
  color:var(--verde);line-height:1.3;
}
.portal-dia{
  font-family:'Inter',sans-serif;font-size:11px;letter-spacing:2.5px;
  text-transform:uppercase;font-weight:600;color:var(--gris);
  margin-top:3px;font-variant-numeric:tabular-nums;
}

/* ============ BLOQUE 2 · EL HITO ============
   La cifra domina al abrir. Nada compite con ella. */

.portal-b-hito{padding-top:14px;scroll-margin-top:24px}

.portal-cifra-fila{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}

.portal-cifra-grande{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;
  font-size:clamp(44px,13vw,68px);line-height:1;
  letter-spacing:-1px;color:var(--verde);
  font-variant-numeric:tabular-nums;
  margin-top:4px;
}

/* Un solo gesto convierte "llene un formulario" en "movi mi
   numero". Aparece dos segundos y se va. */
.portal-delta{
  font-family:'Inter',sans-serif;font-weight:700;font-size:14px;
  color:var(--ok);font-variant-numeric:tabular-nums;
  transition:opacity .45s var(--ease);
}
.portal-delta.ido{opacity:0}

.portal-cifra-pie{
  font-family:'Inter',sans-serif;font-size:13px;color:var(--gris);
  margin-top:4px;font-variant-numeric:tabular-nums;
}

.portal-barra-hito{margin-top:14px}
.portal-barra-hito .barra{height:6px}

.portal-cifra-media{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;
  font-size:28px;line-height:1.1;color:var(--verde);
  font-variant-numeric:tabular-nums;margin-top:4px;
}
.portal-cifra-media.vacia{font-size:15px;line-height:1.9}
.portal-cifra-media.apagada{color:var(--neutro)}

/* La cifra es el objetivo tactil mas grande: mantenerla pulsada
   abre su hilo. Sin seleccion de texto ni menu contextual. */
.portal-comentable{
  cursor:pointer;-webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;touch-action:manipulation;
}

/* ============ PROYECCIONES ============
   El tamano codifica la certeza: una cifra proyectada va SIEMPRE
   un escalon por debajo de un dato real. Trama, no color: el oro
   no marca proyecciones y el gris dice que es una conjetura. */

.portal-proy{
  margin-top:14px;padding:11px 13px;
  border:1px dashed var(--borde);border-radius:var(--r-box);
  background-color:transparent;
  background-image:repeating-linear-gradient(45deg,
    rgba(107,122,115,.12) 0 1px, transparent 1px 7px);
}
.portal-etiqueta-proy{color:var(--neutro);margin-bottom:4px}
.portal-proy-txt{
  font-family:'Inter',sans-serif;font-size:13.5px;line-height:1.45;
  color:var(--gris);margin:0;
}
/* Sin base no hay proyeccion que marcar: sin trama, sin borde. */
.portal-proy-nota{
  font-family:'Inter',sans-serif;font-size:13px;line-height:1.45;
  color:var(--neutro);margin:12px 0 0;
}

/* ============ BLOQUE 4 · TRES CIFRAS ============
   Sin tarjetas propias: tres tarjetas pesan demasiado en movil. */

.portal-tres{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;margin-top:10px;
}
.portal-tres-item{min-width:0}
.portal-tres-item .portal-cifra-media{margin-top:0}
.portal-tres-item .portal-etiqueta-mini{margin-top:3px;letter-spacing:1.4px;line-height:1.3}

/* ============ BLOQUE 5 · FLUJO SEMANAL ============
   Las semanas sin datos son HUECOS, no ceros. El grafico no puede
   mentir: se ve de un vistazo que se midio y que no. */

.portal-flujo{
  display:flex;align-items:flex-end;gap:5px;
  height:112px;margin-top:14px;
}
.portal-flujo-col{
  flex:1 1 0;min-width:0;height:100%;
  display:flex;align-items:flex-end;
}
.portal-flujo-barra{
  display:block;width:100%;
  border-radius:3px 3px 0 0;
  background:var(--barra);
  transition:height .6s var(--ease);
}
/* La semana en curso va en contorno y se rellena el lunes. */
.portal-flujo-barra.en-curso{
  background:transparent;
  border:1.5px solid var(--barra);border-bottom:none;
  border-radius:3px 3px 0 0;
}
/* La ranura vacia: una linea base punteada y ninguna etiqueta.
   Alguien decidio no rellenar, y se nota. */
.portal-flujo-hueco{
  display:block;width:100%;height:0;
  border-bottom:1px dashed var(--borde);
  align-self:flex-end;
}
.portal-flujo-eje{
  display:flex;justify-content:space-between;
  margin-top:7px;padding-top:7px;
  border-top:1px solid var(--borde);
  font-family:'Inter',sans-serif;font-size:10px;
  letter-spacing:1.4px;text-transform:uppercase;
  color:var(--neutro);font-weight:600;
}

/* ============ BLOQUE 6 · EL CUELLO DE BOTELLA ============
   Un solo problema, tres partes. Sin fondos de color y sin
   etiquetas gritadas: un abogado no necesita que le griten. */

.portal-cuello{margin-top:10px}
.portal-cuello-pasa{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;
  font-size:19px;line-height:1.32;color:var(--verde);margin:0;
}
.portal-cuello-parte{margin-top:14px}
.portal-cuello-parte p{
  font-family:'Inter',sans-serif;font-size:14px;line-height:1.45;
  color:var(--gris);margin:4px 0 0;
}
.portal-cuello-parte .btn-linea{margin-top:10px}

.portal-limpio{
  display:flex;align-items:center;gap:9px;
  font-family:'Inter',sans-serif;font-size:14px;color:var(--gris);
  line-height:1.4;
}

/* El color vive en un punto de 6px y en ningun otro sitio. */
.portal-punto{
  width:6px;height:6px;border-radius:50%;flex:none;
  display:inline-block;background:var(--neutro);margin-top:7px;
}
.portal-punto.ok{background:var(--ok)}
.portal-punto.alerta{background:var(--alerta)}
.portal-punto.error{background:var(--error)}
.portal-punto.neutro{background:var(--neutro)}
.portal-punto.oro{background:var(--oro)}
.portal-limpio .portal-punto{margin-top:0}

/* ============ BLOQUE 7 · TUS CUATRO PASOS ============ */

.portal-plegado{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;gap:10px;padding:6px 0;min-height:44px;
  background:none;border:none;cursor:pointer;text-align:left;
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;
  font-size:19px;color:var(--verde);
}
.portal-plegado-ico{
  color:var(--neutro);line-height:0;
  transform:rotate(90deg);
  transition:transform .3s var(--ease);
}
.portal-plegado-ico.abierto{transform:rotate(-90deg)}

.portal-pasos{margin-top:6px}
.portal-paso{
  display:grid;grid-template-columns:6px 1fr auto;
  gap:11px;align-items:start;
  padding:11px 0;border-bottom:1px solid rgba(198,198,189,.4);
}
.portal-paso:last-child{border-bottom:none}
.portal-paso-cuerpo{min-width:0}
.portal-paso-nombre{
  font-family:'Inter',sans-serif;font-size:14px;font-weight:600;
  color:var(--verde);line-height:1.3;
}
.portal-paso-frase{
  font-family:'Inter',sans-serif;font-size:13px;color:var(--gris);
  line-height:1.4;margin-top:2px;
}
/* El porcentaje existe, pero es la nota al pie, no el titular. */
.portal-paso-pie{
  display:block;font-size:11.5px;color:var(--neutro);
  font-variant-numeric:tabular-nums;margin-top:2px;
}
.portal-paso-num{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;
  font-size:22px;line-height:1.1;color:var(--verde);
  font-variant-numeric:tabular-nums;
}

/* ============ BLOQUE 9 · CONTENIDO ============ */

.portal-devolucion{
  display:flex;gap:9px;align-items:flex-start;
  margin-top:12px;font-family:'Inter',sans-serif;
  font-size:13.5px;color:var(--gris);line-height:1.45;
}

/* ============ BLOQUE 10 · PREGUNTAS ============ */

.portal-preguntas{
  list-style:none;margin:12px 0 0;padding:0;
}
.portal-preguntas li{
  position:relative;padding-left:16px;margin-bottom:8px;
  font-family:'Inter',sans-serif;font-size:14px;
  color:var(--gris);line-height:1.45;
}
.portal-preguntas li::before{
  content:'';position:absolute;left:0;top:8px;
  width:5px;height:5px;border-radius:50%;background:var(--borde);
}

/* ============ BLOQUE 11 · DOCUMENTOS ============ */

.portal-docs{margin:8px 0 16px}
.portal-doc{
  display:flex;align-items:center;gap:9px;
  padding:11px 0;border-bottom:1px solid rgba(198,198,189,.4);
  font-family:'Inter',sans-serif;font-size:14px;
  color:var(--verde);text-decoration:none;
  min-height:44px;
}
.portal-doc:last-child{border-bottom:none}
.portal-doc svg{color:var(--neutro);flex:none}
.portal-doc.sin-enlace{color:var(--neutro);cursor:default}

/* ============ BLOQUE 12 · PIE ============ */

.portal-pie{
  margin-top:26px;padding-top:18px;
  border-top:1px solid var(--borde);
}
.portal-pie-linea{
  font-family:'Inter',sans-serif;font-size:12px;color:var(--neutro);
}
/* Nunca un numero viejo presentandose como fresco. */
.portal-pie-stale{
  font-family:'Inter',sans-serif;font-size:12px;font-weight:600;
  color:var(--alerta);
}

/* ============ ACCIONES DE LINEA ============
   No son botones: son lineas. Area tactil real de 44px, invisible. */

.portal-linea-accion{
  display:flex;align-items:center;gap:6px;
  background:none;border:none;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:12px;font-weight:500;
  color:var(--neutro);
  padding:14px 10px;margin:2px -10px -10px;
  min-height:44px;
}
.portal-linea-accion:hover{color:var(--verde)}
.portal-linea-accion svg{flex:none}

/* Los .btn del tablero interno miden 32px de alto: en un pulgar
   eso no es un boton. Aqui todos llegan a 48px. */
.portal-btn-ancho{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:48px;margin-top:14px;text-align:center;
}

/* ============ COMENTAR ============
   El disparador no es un boton: es una linea en la esquina
   inferior derecha. Con conversacion empezada cambia de forma,
   no de lugar, y el bloque no cambia de color ni de borde: un
   dato con conversacion no es un dato en alerta. */

.portal-comentar{
  display:flex;align-items:center;gap:5px;
  width:-moz-fit-content;width:fit-content;margin:2px 0 -14px auto;
  background:none;border:none;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:11px;font-weight:500;
  color:var(--neutro);
  padding:14px 10px;
  min-height:44px;
}
.portal-comentar:hover{color:var(--verde)}
.portal-comentar.tiene{color:var(--verde);font-weight:600}
.portal-comentar svg{flex:none}
/* Oro nº3 de tres: hay una respuesta de SCAE sin leer. Marca
   atencion sobre un mensaje nuevo, que es jerarquia. NO codifica
   ningun dato ni ningun valor. */
.portal-punto-nuevo{
  width:5px;height:5px;border-radius:50%;
  background:var(--oro);flex:none;
}

/* ============ LA BARRA FIJA ============
   Oro nº2 de tres. Es la unica accion que sostiene el hito y el
   unico elemento dorado accionable de la pantalla. */

.portal-barra{
  position:sticky;bottom:0;z-index:15;
  padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));
  background:var(--blanco);
  border-top:1px solid var(--borde);
  box-shadow:0 -10px 30px -12px rgba(0,0,0,.42);
}
.portal-btn-registrar{
  width:100%;height:48px;padding:0;
  font-size:15px;letter-spacing:.4px;
}

/* ============ VISTA PREVIA (solo Sebastian) ============
   Deliberadamente FUERA de la hoja y en color funcional, no en
   oro: tiene que quedar claro de un vistazo que ese aviso no es
   parte de lo que ve el cliente. */

.portal-previa{
  margin:14px 0;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 14px;border-radius:var(--r-box);
  background:rgba(184,121,28,.14);
  border:1px solid rgba(184,121,28,.42);
}
.portal-previa-txt{
  flex:1 1 240px;min-width:0;
  font-family:'Inter',sans-serif;font-size:12.5px;line-height:1.45;
  color:#F5DCB4;
}
.portal-previa-txt b{color:var(--champan)}
.portal-previa .btn-mini{min-height:36px;padding:0 14px;flex:none}

.portal-selector{display:block}
.portal-selector-tit{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;
  font-size:27px;color:#F4F2EA;margin:6px 0 4px;
}
.portal-selector-sub{
  font-family:'Inter',sans-serif;font-size:13.5px;line-height:1.5;
  color:rgba(231,234,228,.66);margin:0 0 18px;max-width:460px;
}
.portal-selector-lista{display:flex;flex-direction:column;gap:8px}
.portal-selector-item{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:14px 16px;min-height:56px;cursor:pointer;text-align:left;
  background:linear-gradient(180deg,#FCFCFA,#F5F5F0);
  border:1px solid rgba(200,160,59,.22);
  border-radius:var(--r-box);box-shadow:var(--s-1);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.portal-selector-item:hover{transform:translateY(-1px);box-shadow:var(--s-2)}
.portal-selector-nombre{
  font-family:'Inter',sans-serif;font-weight:600;font-size:14.5px;
  color:var(--verde);flex:1 1 auto;min-width:0;
}
.portal-selector-meta{
  font-family:'Inter',sans-serif;font-size:11.5px;color:var(--neutro);
  white-space:nowrap;
}
.portal-selector-item svg{color:var(--neutro);flex:none}

/* ============ FORMULARIOS DEL PORTAL ============
   Abrir + un gesto + guardar. Cualquier accion que pase de tres
   toques y un campo obligatorio esta mal disenada. */

.portal-form{display:block}
.portal-campo{display:block;margin-bottom:16px}
.portal-campo .portal-etiqueta{margin-bottom:6px}
.portal-campo input[type=text],
.portal-campo input[type=number],
.portal-campo input[type=date],
.portal-campo input[type=file],
.portal-campo textarea{
  /* 16px o iOS hace zoom al enfocar y saca la hoja de cuadro. */
  font-size:16px;padding:12px 13px;border-radius:var(--r-box);
}
.portal-campo textarea{resize:vertical}
.portal-campo .mal{border-color:var(--error)}

.portal-monto-caja{
  display:flex;align-items:center;gap:8px;
  border:1px solid var(--borde);border-radius:var(--r-box);
  background:#fff;padding:0 13px;
}
.portal-monto-caja:focus-within{border-color:var(--oro);box-shadow:0 0 0 3px rgba(200,160,59,.16)}
.portal-monto-simbolo{
  font-family:'Inter',sans-serif;font-size:16px;font-weight:600;
  color:var(--neutro);flex:none;
}
.portal-monto{
  flex:1 1 auto;min-width:0;
  border:none !important;background:none !important;
  box-shadow:none !important;outline:none;
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;
  font-size:30px !important;padding:10px 0 !important;
  color:var(--verde);font-variant-numeric:tabular-nums;
}
.portal-monto::-webkit-outer-spin-button,
.portal-monto::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.portal-monto[type=number]{-moz-appearance:textfield;appearance:textfield}
.portal-monto.mal{color:var(--error)}

.portal-chips{display:flex;gap:8px;flex-wrap:wrap}
.portal-chip{
  font-family:'Inter',sans-serif;font-size:13px;font-weight:600;
  padding:0 16px;min-height:44px;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--borde);color:var(--gris);
  cursor:pointer;transition:all .2s var(--ease);
}
.portal-chip:hover{border-color:var(--neutro)}
/* Seleccionado en verde institucional, no en oro: es un dato que
   el cliente declara, no la accion principal de la hoja. */
.portal-chip.activo{
  background:var(--verde);border-color:var(--verde);color:var(--champan);
}

/* ============ HOJA DESDE ABAJO ============
   Variante de .modal. NO toca el comportamiento de .modal, que el
   tablero interno usa en veinte sitios. */

.velo.velo-hoja{
  align-items:flex-end;justify-content:center;
  padding:0;overflow:hidden;
}
.modal.hoja{
  max-width:560px;width:100%;
  border-radius:var(--r-card) var(--r-card) 0 0;
  border-bottom:none;
  max-height:92vh;overflow-y:auto;
  padding:14px 20px calc(20px + env(safe-area-inset-bottom,0px));
  animation:portal-hoja-sube .34s var(--ease);
  will-change:transform;
}
.modal.hoja::before{
  margin:-14px -20px 6px;
  border-radius:var(--r-card) var(--r-card) 0 0;
}
@keyframes portal-hoja-sube{
  from{transform:translateY(100%)}
  to{transform:none}
}
.portal-tirador{
  display:flex;justify-content:center;
  padding:4px 0 12px;cursor:grab;touch-action:none;
  margin:0 -20px;
}
.portal-tirador i{
  display:block;width:38px;height:4px;border-radius:2px;
  background:var(--borde);
}
.modal.hoja .modal-pie{
  position:sticky;bottom:0;
  background:linear-gradient(180deg,rgba(248,248,245,.6),#F5F5F0 40%);
  margin:0 -20px -20px;padding:14px 20px 20px;
}
.modal.hoja .modal-pie .btn{flex:1 1 auto;min-height:48px;display:flex;align-items:center;justify-content:center}

/* Hoja alta: el hilo de conversacion. La caja de respuesta se
   queda abajo y solo scrollean los mensajes. */
.modal.hoja.hoja-alta{
  height:90vh;max-height:90vh;overflow:hidden;
  display:flex;flex-direction:column;
}
.modal.hoja.hoja-alta > .portal-hilo{flex:1 1 auto;min-height:0}

/* ============ EL HILO ============ */

.portal-hilo{display:flex;flex-direction:column;min-height:0}

/* La conversacion nunca pierde su sujeto. */
.portal-hilo-mini{
  flex:none;
  background:var(--lienzo);border-radius:var(--r-box);
  padding:10px 14px;margin-bottom:12px;
}
.portal-hilo-mini-valor{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;
  font-size:22px;line-height:1.1;color:var(--verde);
  font-variant-numeric:tabular-nums;
}

.portal-hilo-msgs{
  flex:1 1 auto;min-height:0;overflow-y:auto;
  display:flex;flex-direction:column;gap:8px;
  padding:2px 0 10px;
}
.portal-hilo-dia{
  align-self:center;
  font-family:'Inter',sans-serif;font-size:10px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;color:var(--neutro);
  margin:8px 0 2px;
}

.portal-msg{
  max-width:82%;padding:10px 13px;
  font-family:'Inter',sans-serif;font-size:14px;line-height:1.45;
}
.portal-msg.mio{
  align-self:flex-end;background:var(--lienzo);color:var(--verde);
  border-radius:12px 12px 4px 12px;
}
.portal-msg.scae{
  align-self:flex-start;background:var(--crema);color:var(--verde);
  border:1px solid var(--borde);
  border-radius:12px 12px 12px 4px;
}
.portal-msg-autor{
  font-size:10px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--neutro);margin-bottom:3px;
}
.portal-msg-cuerpo{white-space:pre-wrap;overflow-wrap:anywhere}
.portal-msg-hora{
  font-size:10px;color:var(--neutro);margin-top:4px;
  font-variant-numeric:tabular-nums;
}
.portal-hilo-sla{
  align-self:flex-end;
  font-family:'Inter',sans-serif;font-size:11px;color:var(--neutro);
  margin-top:-2px;
}

.portal-hilo-caja{
  flex:none;display:flex;align-items:flex-end;gap:8px;
  padding-top:12px;border-top:1px solid var(--borde);
}
.portal-hilo-caja-txt{
  flex:1 1 auto;min-width:0;resize:none;
  font-size:16px !important;padding:11px 14px !important;
  border-radius:20px !important;
  max-height:96px;line-height:1.4;
}
.portal-hilo-enviar{
  flex:none;width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--borde);color:var(--borde);
  cursor:pointer;transition:all .2s var(--ease);
}
/* El boton se activa solo con texto: pasa de --borde a --verde. */
.portal-hilo-enviar.listo{border-color:var(--verde);color:var(--verde)}
.portal-hilo-enviar:disabled{cursor:not-allowed}

/* ============ ESTADOS VACIOS ============ */

.portal-bloque .vacio{margin-top:12px;text-align:left}
.portal-bloque .vacio p{font-size:18px}
.portal-bloque .vacio small{margin-bottom:0}

/* ============ HACIA ARRIBA ============
   La misma hoja, centrada, con mas aire. Nunca dos columnas: un
   portal que se reorganiza en escritorio se siente como software.
   ============================================================ */

@media (min-width:600px){
  .portal{padding-bottom:110px}
  .portal-hoja{padding:0 36px 34px;border-radius:0 0 var(--r-card) var(--r-card)}
  .portal-hoja::before{margin:0 -36px 26px}
  .portal-hr{margin:32px 0}
  .portal-barra{padding:14px 36px}
  .portal-lectura,.portal-frase{font-size:22px}
  .portal-cuello-pasa{font-size:20px}
  .portal-flujo{height:132px}
}

@media (min-width:901px){
  .portal{margin:-22px -26px -60px}
  .portal-hoja{margin-top:10px;border-radius:var(--r-card)}
  .portal-hoja::before{
    margin:0 -36px 26px;
    border-radius:var(--r-card) var(--r-card) 0 0;
  }
}

/* Sin movimiento para quien lo pidio apagado: la cifra del hito
   aparece en su valor final y las barras no crecen. */
@media (prefers-reduced-motion:reduce){
  .portal-ciclo-avance,
  .portal-flujo-barra,
  .portal-delta,
  .portal-plegado-ico,
  .modal.hoja{transition-duration:.01ms !important;animation-duration:.01ms !important}
}