/*
 * SmartBESO — estilos del area de cuenta y de los estados de formulario.
 * Reutiliza las variables de la maquetacion (styles.css); no las redefine.
 */

/*
 * El atributo hidden lo esconde el navegador con una regla propia de peso minimo, asi que
 * cualquier clase que ponga display la gana sin querer: el bloque de generacion llegaba con
 * hidden puesto y se pintaba igual por su display: grid. Con esto hidden manda siempre y los
 * bloques que aparecen y desaparecen se controlan solo poniendo y quitando el atributo.
 */
[hidden] {
  display: none !important;
}

/* --- Estados de formulario, comunes a la web publica y al area de cuenta --- */

.campo-error {
  display: block;
  margin-top: 6px;
  font-family: var(--body);
  font-size: .78rem;
  letter-spacing: 0;
  text-transform: none;
  color: #FF9E8A;
}

.study-form .campo-error,
.partners-page .lead-form .campo-error {
  color: #FF9E8A;
}

.form-msg--error {
  color: #FF9E8A !important;
}

.study-form label:has(.campo-error) input,
.study-form label:has(.campo-error) select,
.study-form label:has(.campo-error) textarea,
.partners-page .lead-form label:has(.campo-error) input,
.partners-page .lead-form label:has(.campo-error) select {
  border-color: rgba(255, 158, 138, .65);
}

.study-form textarea,
.partners-page .lead-form textarea {
  display: block;
  width: 100%;
  margin-top: 7px;
  padding: .85rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(4, 18, 31, .7);
  color: var(--paper);
  font: inherit;
  text-transform: none;
  letter-spacing: 0;
  resize: vertical;
}

.study-form .campo-ancho {
  grid-column: 1 / -1;
}

.campo-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--body) !important;
  font-size: .86rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--mist) !important;
}

.campo-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--teal);
  flex: none;
}

.campo-check span {
  flex: 1;
  min-width: 12ch;
}

.campo-check .campo-error {
  flex-basis: 100%;
}

/* Identidad ya conocida: sustituye a los campos de contacto cuando hay sesion */
.identidad-sesion {
  padding: 16px 18px;
  border: 1px solid rgba(55, 204, 230, .32);
  border-radius: 12px;
  background: rgba(4, 18, 31, .5);
}

.identidad-sesion__etiqueta {
  display: block;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cyan);
}

.identidad-sesion p {
  margin-top: 8px;
  font-family: var(--body);
  font-size: .95rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mist);
}

.identidad-sesion strong {
  color: var(--paper);
}

.identidad-sesion a {
  display: inline-block;
  margin-top: 10px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--cyan);
  text-decoration: none;
  letter-spacing: 0;
  text-transform: none;
}

.identidad-sesion a:hover {
  text-decoration: underline;
}

/* Acuse de recibo tras enviar un formulario */
.form-exito {
  width: min(760px, 100%);
  margin-top: 2.2rem;
  padding: clamp(22px, 3vw, 32px);
  text-align: left;
  border: 1px solid rgba(126, 193, 59, .45);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(10, 42, 71, .62), rgba(4, 18, 31, .5));
}

.form-exito h3 {
  font-family: var(--display);
  color: var(--paper);
  margin-bottom: .7rem;
}

.form-exito p {
  margin-bottom: .8rem;
}

.form-exito strong {
  color: var(--green2);
  font-family: var(--mono);
}

/* --- Paginas de cuenta --- */

body.cuenta-page {
  background: radial-gradient(120% 80% at 50% 0%, rgba(10, 42, 71, .55) 0%, rgba(4, 18, 31, 0) 60%), var(--deep);
}

.cuenta-act {
  min-height: calc(100svh - var(--header-h));
  padding-top: calc(var(--header-h) + clamp(40px, 6vh, 72px));
}

.cuenta-titulo {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--paper);
  max-width: 20ch;
}

.act.center .cuenta-titulo {
  margin-inline: auto;
}

.cuenta-lead {
  max-width: 62ch;
  margin-top: 1rem;
}

.act.center .cuenta-lead {
  margin-inline: auto;
}

.cuenta-form {
  width: min(720px, 100%);
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(10, 42, 71, .58), rgba(4, 18, 31, .48));
}

.cuenta-form--estrecho {
  width: min(460px, 100%);
  grid-template-columns: 1fr;
}

.cuenta-form .form-msg {
  grid-column: 1 / -1;
  color: rgba(233, 242, 247, .78);
}

.cuenta-form .form-msg a {
  color: var(--cyan);
  text-decoration: none;
  font-weight: 600;
}

.cuenta-form .form-msg a:hover {
  text-decoration: underline;
}

.cuenta-aviso {
  width: min(680px, 100%);
  margin-top: 2rem;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(10, 42, 71, .58), rgba(4, 18, 31, .48));
  text-align: left;
}

.act.center .cuenta-aviso {
  margin-inline: auto;
}

.cuenta-aviso--ok {
  border-color: rgba(126, 193, 59, .45);
}

.cuenta-aviso--error {
  border-color: rgba(255, 158, 138, .45);
}

.cuenta-aviso .cta-row {
  margin-top: 1.4rem;
}

.cuenta-nota {
  margin-top: .8rem;
  font-size: .88rem;
  color: rgba(233, 242, 247, .7);
}

/*
 * Requisitos del fichero de curva, arriba del todo del paso 3.
 *
 * Va a ancho completo y no al de .cuenta-aviso (680px): esta pagina es la del proceso, que ocupa
 * todo el ancho, y una caja estrecha centrada partiria la columna en dos.
 */
.requisitos-curva {
  width: 100%;
  margin-top: 1.6rem;
}

.requisitos-curva__titulo {
  margin: 0 0 .9rem;
  font-size: 1.02rem;
  font-weight: 600;
}

.requisitos-curva__lista {
  margin: 0;
  padding-left: 1.15rem;
  display: grid;
  gap: .5rem;
  font-size: .92rem;
  line-height: 1.5;
  color: rgba(233, 242, 247, .82);
}

.requisitos-curva__lista strong {
  color: var(--mist);
  font-weight: 600;
}

.requisitos-curva__pie {
  margin: 1rem 0 0;
  font-size: .88rem;
  color: rgba(233, 242, 247, .7);
}

/* --- Proceso de estudio: pasos, analisis de la curva e incidencias --- */

/*
 * El proceso ocupa el ancho completo y no se centra como el resto de paginas de cuenta: el mapa
 * de pasos arriba y, debajo, el formulario con el resumen de lo ya recogido a su derecha.
 *
 * .act es un contenedor flex en columna, asi que sus hijos se estiran segun su contenido y no
 * segun el ancho disponible. De ahi el align-self y el width de aqui: sin ellos la rejilla de
 * abajo no tiene ancho que repartir y el resumen se cae debajo del formulario.
 */
.proceso {
  align-self: stretch;
  width: 100%;
  text-align: left;
}

/*
 * El proceso empieza arriba, no centrado en la pantalla.
 *
 * .cuenta-act reserva 100svh y centra verticalmente, que funciona para una pantalla de aviso
 * corta. Aqui el contenido es mas alto que la ventana, y centrar lo que ya desborda empuja el
 * mapa de pasos fuera de vista: se entraba a la pagina sin ver en que paso se esta.
 *
 * El ancho y los margenes son los de la cabecera (.header-inner), asi que la columna del
 * formulario arranca en la misma vertical que el logo y el resumen respira por la derecha en
 * lugar de pegarse al borde.
 */
.cuenta-act.proceso {
  min-height: 0;
  justify-content: flex-start;
  width: min(1440px, 100%);
  margin-inline: auto;
  padding-inline: clamp(16px, 2.5vw, 40px);
  padding-top: calc(var(--header-h) + clamp(20px, 3vh, 36px));
  padding-bottom: clamp(40px, 6vh, 72px);
}

/*
 * Cabecera contenida: en el proceso el protagonista es el formulario, no el titular. A tamano de
 * portada se comia media pantalla y dejaba el mapa de pasos por debajo del pliegue.
 */
.proceso-cab {
  max-width: 70ch;
}

.proceso-cab .cuenta-titulo {
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  max-width: 24ch;
}

.proceso-cab .cuenta-lead {
  margin-top: .7rem;
  font-size: clamp(.95rem, 1.05vw, 1.05rem);
}

.proceso .pasos-mapa {
  margin-top: 1.4rem;
}

.act .proceso-cab .cuenta-titulo,
.act .proceso-cab .cuenta-lead {
  margin-inline: 0;
}

/*
 * Dos tercios para el formulario y uno para el resumen. minmax(0,·) deja que las columnas se
 * encojan por debajo de su contenido: sin el, un CUPS largo o el nombre de un fichero ensancharian
 * su columna y se comerian la proporcion.
 */
.proceso-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(20px, 2.4vw, 34px);
  width: 100%;
  margin-top: 2rem;
}

/* Sin nada que resumir todavia, el formulario se queda con todo el ancho */
.proceso-cuerpo:not(:has(.resumen-tarjeta)) {
  grid-template-columns: minmax(0, 1fr);
}

.proceso-cuerpo:not(:has(.resumen-tarjeta)) .resumen-lateral {
  display: none;
}

.proceso-principal {
  min-width: 0;
}

/* Dentro de la columna el formulario manda el ancho: ya no se limita a si mismo */
.proceso-principal .cuenta-form,
.proceso-principal .cuenta-aviso {
  width: 100%;
  margin-top: 0;
}

/*
 * El boton cierra el formulario, asi que ocupa la fila entera y no se cuela en la segunda columna
 * al lado del ultimo campo. El texto de apoyo que lo sigue hace lo mismo.
 */
.proceso-principal .study-form > button[type="submit"] {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 4px;
}

.proceso-principal > * + * {
  margin-top: 18px;
}

.cuenta-form--una-columna {
  grid-template-columns: 1fr;
}

/* Mapa de pasos: donde estas, por donde has pasado y a que puedes volver */

.pasos-mapa {
  margin-top: 1.8rem;
  padding-bottom: 4px;
  overflow-x: auto;
}

.pasos {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px;
  list-style: none;
}

/*
 * Un paso pendiente se distingue por ser mas apagado, pero tiene que seguir leyendose sobre el
 * fondo oscuro: por debajo de este tono el texto deja de tener contraste suficiente.
 */
.pasos li {
  position: relative;
  color: rgba(233, 242, 247, .75);
}

/* La linea que une un paso con el siguiente, para que se lea como un recorrido */
.pasos li + li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -12px;
  width: 12px;
  height: 1px;
  background: var(--line);
}

.paso-cuerpo {
  display: flex;
  align-items: center;
  gap: 11px;
  height: 100%;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(10, 42, 71, .5), rgba(4, 18, 31, .4));
  color: inherit;
  text-decoration: none;
  transition: border-color .25s ease, background .25s ease;
}

.paso-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-family: var(--mono);
  font-size: .78rem;
}

.paso-etiqueta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.paso-txt {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* La descripcion es de apoyo, pero se lee: no baja del umbral de contraste sobre el fondo */
.paso-ayuda {
  font-family: var(--body);
  font-size: .74rem;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(233, 242, 247, .68);
}

.pasos .paso--activo {
  color: var(--cyan);
}

.paso--activo .paso-cuerpo {
  border-color: rgba(55, 204, 230, .55);
  background: rgba(55, 204, 230, .08);
}

.paso--activo .paso-num {
  border-color: rgba(55, 204, 230, .7);
  color: var(--cyan);
}

.pasos .paso--hecho {
  color: var(--green2);
}

.paso--hecho .paso-cuerpo {
  border-color: rgba(126, 193, 59, .32);
}

/* Un paso cubierto se marca como tal: el numero deja paso a la senal de hecho */
.paso--hecho .paso-num {
  border-color: rgba(126, 193, 59, .55);
  color: var(--green2);
  font-size: 0;
}

.paso--hecho .paso-num::after {
  content: "✓";
  font-size: .85rem;
}

a.paso-cuerpo:hover {
  border-color: rgba(55, 204, 230, .5);
  background: rgba(55, 204, 230, .07);
}

a.paso-cuerpo:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* Lo que ya nos has contado: una tarjeta por paso cubierto */

.resumen-lateral {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  position: sticky;
  top: calc(var(--header-h) + 16px);
}

/*
 * Mismo material que los paneles del resto de la web: el degradado de .panel, el borde de --line
 * y la linea de acento superior de .opps .col. Cambia la escala, no el lenguaje.
 */
.resumen-tarjeta {
  position: relative;
  overflow: hidden;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(10, 42, 71, .62), rgba(4, 18, 31, .46));
  backdrop-filter: blur(10px);
}

.resumen-tarjeta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
  opacity: .85;
}

.resumen-cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

/* El mismo tono de etiqueta que las columnas de oportunidades */
.resumen-paso {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green2);
}

/* h2 dentro de la tarjeta: hay que bajarlo del tamano de titular de seccion */
.resumen-lateral .resumen-titulo {
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  max-width: none;
  color: var(--paper);
}

.resumen-datos {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

/* Etiqueta pequena y en mayusculas: necesita mas contraste que un texto corrido, no menos */
.resumen-datos dt {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(233, 242, 247, .72);
}

.resumen-datos dd {
  margin-top: 2px;
  font-size: .88rem;
  line-height: 1.4;
  color: var(--paper);
  overflow-wrap: anywhere;
}

.resumen-cups {
  font-family: var(--mono);
  font-size: .78rem;
}

/* El correo se resume con su sello: se ve, pero se entiende que no se toca */
.resumen-fijo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.resumen-sello {
  padding: 2px 8px;
  border: 1px solid rgba(126, 193, 59, .45);
  border-radius: 99px;
  background: rgba(126, 193, 59, .1);
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--green2);
  white-space: nowrap;
}

/* Mismo boton fantasma que el resto de la web, en la escala de la tarjeta */
.btn-revisar {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin-top: 16px;
  padding: .55em 1.15em;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(233, 242, 247, .06);
  font-family: var(--body);
  font-weight: 600;
  font-size: .84rem;
  color: var(--mist);
  text-decoration: none;
  transition: transform .25s ease, border-color .25s ease, color .25s ease;
}

.btn-revisar::after {
  content: "→";
  font-size: .9em;
}

.btn-revisar:hover {
  transform: translateY(-2px);
  border-color: var(--cyan);
  color: var(--paper);
}

.btn-revisar:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* Dato que se muestra pero no se edita: el correo del primer paso */
.campo-fijo {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(4, 18, 31, .45);
}

.campo-fijo__etiqueta {
  display: block;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cyan);
}

.campo-fijo__valor {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-family: var(--body);
  font-size: .95rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--paper);
  overflow-wrap: anywhere;
}

/*
 * En pantallas estrechas el resumen pasa a ir debajo del formulario, no al lado: en una columna de
 * un tercio los datos se romperian palabra a palabra. Se corta en el mismo punto en el que el
 * resto de la web cambia la navegacion.
 */
@media (max-width: 1100px) {
  .proceso-cuerpo,
  .proceso-cuerpo:not(:has(.resumen-tarjeta)) {
    grid-template-columns: minmax(0, 1fr);
  }

  .resumen-lateral {
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

@media (max-width: 700px) {
  .pasos {
    grid-template-columns: 1fr;
  }

  .pasos li + li::before {
    top: -12px;
    left: 30px;
    width: 1px;
    height: 12px;
  }
}

/* --- Graficas de la curva interpretada --- */

/*
 * Las dos graficas van una al lado de otra cuando hay sitio: cuentan cosas distintas del mismo
 * fichero y se leen mejor juntas. En una columna estrecha se apilan.
 */
.grafica-curva {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  margin-top: 1.6rem;
}

.grafica-bloque {
  min-width: 0;
  padding: 16px 18px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(4, 18, 31, .38);
}

.grafica-titulo {
  font-family: var(--display);
  font-size: .98rem;
  font-weight: 600;
  color: var(--paper);
}

.grafica-ayuda {
  margin-top: 4px;
  font-size: .82rem;
  line-height: 1.45;
  color: rgba(233, 242, 247, .68);
}

/* El lienzo lo dimensiona la libreria; aqui solo se le da sitio y se evita que desborde */
.grafica-lienzo {
  margin-top: 10px;
  min-height: 260px;
}

.grafica-lienzo .apexcharts-canvas {
  max-width: 100%;
}

/* Conclusion en una linea bajo el perfil diario: lo que hay que mirar si no se mira nada mas */
.grafica-pie {
  margin: 2px 0 8px;
  font-size: .84rem;
  line-height: 1.45;
  color: rgba(233, 242, 247, .78);
}

.grafica-pie:empty {
  display: none;
}

.grafica-pie--aviso {
  color: #E8A33D;
  font-weight: 600;
}

/* Texto de apoyo bajo un campo, en el tono del formulario y no en el de la etiqueta */
.campo-ayuda {
  display: block;
  margin-top: 6px;
  font-family: var(--body);
  font-size: .78rem;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(233, 242, 247, .6);
}

.study-form input[type="file"] {
  padding: .7rem;
  font-size: .88rem;
  cursor: pointer;
}

.study-form input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: .45rem .9rem;
  border: 1px solid rgba(55, 204, 230, .45);
  border-radius: 7px;
  background: rgba(55, 204, 230, .1);
  color: var(--cyan);
  font: inherit;
  cursor: pointer;
}

/* Subida de la curva: barra mientras el fichero viaja, espera mientras se interpreta */

.subida-estado {
  margin-top: 4px;
}

.subida-barra {
  height: 6px;
  border-radius: 99px;
  background: rgba(233, 242, 247, .14);
  overflow: hidden;
}

.subida-barra__relleno {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  box-shadow: 0 0 18px rgba(55, 204, 230, .45);
  transition: width .15s linear;
}

.subida-texto {
  margin-top: 10px;
  font-family: var(--body);
  font-size: .84rem;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(233, 242, 247, .78);
}

/*
 * Interpretando: ya no hay porcentaje que enseñar. La barra se queda llena y se recorre con un
 * reflejo, que dice "seguimos trabajando" sin fingir que se sabe cuanto queda.
 */
.subida-estado--interpretando .subida-barra__relleno {
  position: relative;
  overflow: hidden;
}

.subida-estado--interpretando .subida-barra__relleno::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4, 18, 31, 0), rgba(4, 18, 31, .55), rgba(4, 18, 31, 0));
  animation: subida-recorrido 1.4s ease-in-out infinite;
}

.subida-estado--interpretando .subida-texto::before {
  content: '';
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 9px;
  vertical-align: -2px;
  border: 2px solid rgba(55, 204, 230, .3);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: subida-giro .8s linear infinite;
}

@keyframes subida-recorrido {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

@keyframes subida-giro {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .subida-barra__relleno { transition: none; }

  .subida-estado--interpretando .subida-barra__relleno::after,
  .subida-estado--interpretando .subida-texto::before {
    animation: none;
  }
}

.analisis-titulo {
  margin-top: .6rem;
  margin-bottom: .8rem;
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  color: var(--paper);
}

.analisis-datos {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}

.analisis-datos .dato-fuerte {
  font-family: var(--mono);
  color: var(--paper);
}

.analisis-datos .dato-aviso {
  color: #FFD9A0;
}

.incidencias {
  margin-top: 1.2rem;
  display: grid;
  gap: 8px;
  list-style: none;
}

.incidencia {
  padding: 10px 12px 10px 14px;
  border-left: 3px solid var(--line);
  border-radius: 0 8px 8px 0;
  background: rgba(4, 18, 31, .45);
  font-size: .88rem;
  color: rgba(233, 242, 247, .82);
}

.incidencia strong {
  color: var(--paper);
}

.incidencia--ERROR {
  border-left-color: #FF9E8A;
}

.incidencia--AVISO {
  border-left-color: #FFD9A0;
}

.incidencia--INFO {
  border-left-color: rgba(55, 204, 230, .7);
}

.cuenta-panel .grid {
  margin-top: 2rem;
}

.cuenta-datos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 18px;
  margin-top: 1rem;
}

.cuenta-datos dt {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cyan);
}

.cuenta-datos dd {
  color: var(--mist);
  word-break: break-word;
}

.cuenta-salir {
  margin-top: 2rem;
}

@media (max-width: 860px) {
  .cuenta-form {
    grid-template-columns: 1fr;
  }

  .cuenta-datos {
    grid-template-columns: 1fr;
    gap: 2px 0;
  }

  .cuenta-datos dd {
    margin-bottom: 10px;
  }
}

/* --- Paso 2: potencias por periodo y generacion propia --- */

/*
 * Los dos bloques se separan del resto del formulario con el mismo recuadro que la identidad ya
 * conocida: son conjuntos de campos que solo tienen sentido juntos, y verlos sueltos entre los
 * demas hacia parecer que se pedian seis potencias sin relacion entre si.
 */
.study-form .bloque-periodos,
.study-form .bloque-generacion {
  margin: 0;
  padding: 16px 18px 18px;
  border: 1px solid rgba(55, 204, 230, .32);
  border-radius: 12px;
  background: rgba(4, 18, 31, .5);
}

.study-form .bloque-periodos legend,
.study-form .bloque-generacion legend {
  padding: 0 8px;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cyan);
}

/*
 * Seis columnas cuando caben y las que quepan cuando no. Con auto-fit no hace falta un punto de
 * ruptura propio: los periodos pasan a tres y luego a dos segun se estrecha la pantalla, y se
 * siguen leyendo como una fila de valores y no como seis campos independientes.
 */
.rejilla-periodos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.study-form .bloque-generacion {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* El texto de apoyo explica el bloque entero, no el campo que le toque al lado. */
.study-form .bloque-generacion > .campo-ayuda {
  grid-column: 1 / -1;
  margin-top: 0;
}

@media (max-width: 860px) {
  .study-form .bloque-generacion {
    grid-template-columns: 1fr;
  }
}

/* --- Curva de generacion medida, dentro del bloque de generacion --- */

/*
 * Se separa de los cuatro campos con una linea en vez de con otro recuadro. Un recuadro dentro de
 * otro sugiere un bloque aparte, y esto no lo es: es la alternativa medida a lo que esos campos
 * sirven para estimar, y tiene que leerse como parte de la misma pregunta.
 */
.curva-produccion {
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.curva-produccion__titulo {
  font-family: var(--display);
  font-size: .96rem;
  font-weight: 600;
  color: var(--paper);
}

/*
 * El campo y el boton van en linea cuando caben. El boton no encoge: "Subir curva"
 * partido en dos lineas junto a un selector de fichero es justo lo que hace que un bloque opcional
 * parezca un formulario a medio hacer.
 */
.curva-produccion__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.curva-produccion__acciones input[type="file"] {
  flex: 1 1 260px;
  min-width: 0;
  padding: .7rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(4, 18, 31, .7);
  color: var(--mist);
  font: inherit;
  font-size: .88rem;
  cursor: pointer;
}

.curva-produccion__acciones input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: .45rem .9rem;
  border: 1px solid rgba(55, 204, 230, .45);
  border-radius: 7px;
  background: rgba(55, 204, 230, .1);
  color: var(--cyan);
  font: inherit;
  cursor: pointer;
}

.curva-produccion__acciones .btn {
  flex: 0 0 auto;
}

/* El aviso del fichero se cuela en la fila y ocupa el ancho, debajo del campo y del boton. */
.curva-produccion__acciones .campo-error {
  flex: 1 0 100%;
}

.curva-produccion .subida-estado {
  margin-top: 14px;
}

.curva-produccion .produccion-panel:empty {
  display: none;
}

.curva-produccion .produccion-panel {
  margin-top: 16px;
}

/*
 * El panel de resultado usa el mismo marcado que el de la curva de consumo, pero aqui esta dentro
 * de un formulario y hereda su tipografia de etiqueta: se devuelve a la del cuerpo, o el texto sale
 * en mayusculas y espaciado.
 */
.curva-produccion .produccion-panel .panel {
  padding: 16px 18px;
  font-family: var(--body);
  font-size: .9rem;
  letter-spacing: 0;
  text-transform: none;
}

.curva-produccion .produccion-panel .lead {
  font-size: .92rem;
}

.curva-produccion .produccion-panel .analisis-titulo {
  font-size: 1.05rem;
}

/* Dentro de una columna estrecha las dos graficas se apilan y se leen mejor. */
.curva-produccion .grafica-curva {
  grid-template-columns: 1fr;
  margin-top: 1.2rem;
}

/* --- Predictivo de texto de los campos de catalogo --- */

/*
 * El contenedor lo crea el propio script alrededor del campo. Es relativo para que la lista se
 * cuelgue justo debajo sin calcular posiciones: asi sigue al campo al desplazar la pagina y no se
 * despega al cambiar el tamano de la ventana.
 */
.autocompletar {
  position: relative;
}

.autocompletar-lista {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  right: 0;
  margin: 4px 0 0;
  padding: 4px;
  list-style: none;
  max-height: 17rem;
  overflow-y: auto;
  border: 1px solid rgba(55, 204, 230, .45);
  border-radius: 9px;
  background: var(--navy2, #0A2334);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
}

.autocompletar-lista li {
  padding: .55rem .7rem;
  border-radius: 6px;
  font-family: var(--body);
  font-size: .88rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--paper);
  cursor: pointer;
}

/* La coincidencia en negrita y en el color de acento: es lo que explica por que sale esa opcion. */
.autocompletar-lista strong {
  font-weight: 700;
  color: var(--cyan);
}

.autocompletar-lista li:hover,
.autocompletar-lista li.marcada {
  background: rgba(55, 204, 230, .14);
}

/*
 * El dato que acompana al nombre, como la provincia del municipio. Va apagado y algo mas pequeno:
 * sirve para distinguir dos sugerencias que se llaman igual, pero no es lo que se esta buscando.
 */
.autocompletar-detalle {
  margin-left: .5em;
  font-size: .8rem;
  color: rgba(233, 242, 247, .55);
}

/* --- Tablas del area de administracion --- */

/* La tabla decide su ancho; el contenedor absorbe el desborde para no romper la pagina. */
.tabla-envuelta {
  overflow-x: auto;
}

.tabla-admin {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}

.tabla-admin th {
  padding: 8px 10px;
  text-align: left;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cyan);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.tabla-admin td {
  padding: 7px 10px;
  border-bottom: 1px solid rgba(233, 242, 247, .08);
  color: var(--mist);
}

/*
 * Columnas de cifras.
 *
 * A la derecha y con cifras de ancho fijo, que es lo unico que deja las unidades unas debajo de
 * otras: asi un CAPEX de 24.000 y otro de 240.000 se distinguen por donde empiezan, sin leerlos. La
 * cabecera acompana a su columna, y los campos editables tambien, para que el borrador y la version
 * en lectura se lean igual.
 */
.tabla-admin th.num,
.tabla-admin td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tabla-admin td.num input {
  text-align: right;
}

/* Campos dentro de la tabla: mas prietos que en un formulario normal. */
.tabla-admin td input {
  width: 100%;
  min-width: 72px;
  padding: .45rem .5rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(4, 18, 31, .7);
  color: var(--paper);
  font: inherit;
}

.tabla-admin td:first-child input {
  min-width: 160px;
}

.btn-sm {
  padding: .3rem .6rem;
  font-size: .8rem;
}


/* Tambien hay selects dentro de las tablas de normativa. */
.tabla-admin td select {
  width: 100%;
  min-width: 120px;
  padding: .45rem .5rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(4, 18, 31, .7);
  color: var(--paper);
  font: inherit;
}

/*
 * El calendario tarifario son doce meses por veinticuatro horas. Con el ancho normal de la tabla
 * no cabe en una pantalla, asi que se aprieta: la celda solo lleva "P3" y el color hace el resto.
 */
.tabla-calendario th,
.tabla-calendario td {
  padding: 5px 6px;
  text-align: center;
  font-size: .72rem;
  white-space: nowrap;
}

.tabla-calendario tbody th {
  color: var(--mist);
  text-transform: none;
}

/* Del periodo caro al barato. Se distingue por color y tambien por texto: el color solo ayuda. */
.periodo-p1 { background: rgba(255, 106, 106, .22); }
.periodo-p2 { background: rgba(255, 163, 102, .20); }
.periodo-p3 { background: rgba(255, 214, 102, .16); }
.periodo-p4 { background: rgba(150, 214, 140, .14); }
.periodo-p5 { background: rgba(102, 190, 214, .14); }
.periodo-p6 { background: rgba(55, 204, 230, .10); }


/* ---------------------------------------------------------------------------
   Pantalla de resultados del estudio
   --------------------------------------------------------------------------- */

/* El lienzo lo dimensiona ApexCharts; aqui solo se le reserva sitio y se evita el desborde. */
.grafica {
  margin-top: 12px;
  min-height: 280px;
}

.grafica .apexcharts-canvas {
  max-width: 100%;
}

/* Las cifras que hay que ver primero. Van grandes porque son la respuesta a la pregunta. */
.resultados-kpis {
  margin-top: 1.2rem;
}

.kpi {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(4, 18, 31, .38);
}

.kpi-titulo {
  display: block;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cyan);
}

.kpi-valor {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--paper);
  line-height: 1.1;
}

.kpi-unidad {
  margin-left: 5px;
  font-size: .82rem;
  color: rgba(233, 242, 247, .6);
}

/* El ahorro es la cifra por la que se abre esta pantalla: se distingue del resto. */
.kpi--destacado {
  border-color: rgba(55, 204, 230, .45);
  background: rgba(55, 204, 230, .09);
}

.kpi--destacado .kpi-valor {
  color: var(--cyan);
}

.resultados-espera {
  text-align: center;
}

/* La fila del equipo recomendado y la del total del desglose: se leen sin buscarlas. */
.tabla-admin tr.fila-recomendada td {
  background: rgba(55, 204, 230, .08);
  font-weight: 600;
}

/*
 * La fila del equipo que trae el solicitante. Se distingue de la recomendada, no solo del resto:
 * comparar esas dos es a lo que ha venido quien declara un equipo, y con el mismo realce las dos
 * habria que buscarlas para saber cual es cual.
 */
.tabla-admin tr.fila-declarada td {
  background: rgba(240, 180, 41, .10);
  box-shadow: inset 3px 0 0 rgba(240, 180, 41, .55);
}

/* La comparación entre lo propuesto y lo óptimo, junto a la tabla que la sostiene. */
.resultados-propuesta {
  margin-top: 1rem;
}

.resultados-avisos ul {
  margin: 0;
  padding-left: 1.1rem;
}

.resultados-avisos li + li {
  margin-top: .5rem;
}

/*
 * El chat del informe. El hilo tiene altura maxima y scroll propio para que no empuje hacia abajo
 * el descargo, que tiene que seguir viendose sin buscarlo.
 */
.chat-hilo {
  max-height: 24rem;
  overflow-y: auto;
  margin-bottom: 1rem;
}

.chat-hilo:empty {
  display: none;
}

.chat-mensaje {
  padding: .75rem 1rem;
  border-radius: .6rem;
  margin-bottom: .75rem;
}

.chat-mensaje p {
  margin: .25rem 0 0;
  white-space: pre-wrap;
}

.chat-autor {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .65;
}

.chat-mensaje--tuyo {
  background: rgba(255, 255, 255, .04);
}

.chat-mensaje--asistente {
  background: rgba(55, 204, 230, .07);
}

/* Cuando el contexto no daba para responder: se distingue de una respuesta con contenido. */
.chat-mensaje--sin-respuesta {
  background: rgba(240, 180, 41, .08);
}

.chat-mensaje--pendiente {
  opacity: .6;
}

/*
 * El formulario del chat no es un formulario de estudio: no cuelga de .study-form y por tanto no
 * hereda nada de su rejilla ni de sus campos. Se coloca aqui, con los mismos valores, y en columna.
 */
.chat-form {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

.chat-form label {
  display: block;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cyan);
}

/*
 * A varias lineas y de ancho entero a proposito: una pregunta sobre el estudio no cabe en un
 * renglon, y un campo estrecho invita a resumirla hasta dejarla sin contexto.
 */
.chat-form textarea {
  display: block;
  width: 100%;
  margin-top: 7px;
  padding: .85rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(4, 18, 31, .7);
  color: var(--paper);
  font: inherit;
  text-transform: none;
  letter-spacing: 0;
  resize: vertical;
  min-height: 5.5rem;
}

.chat-form .cta-row {
  align-items: center;
}

.tabla-admin tr.fila-total td {
  border-top: 1px solid var(--line);
  font-weight: 600;
  color: var(--paper);
}

/* El descargo no es letra pequena: es parte del resultado y se lee igual que lo demas. */
.resultados-descargo p {
  font-size: .9rem;
  line-height: 1.6;
  color: rgba(233, 242, 247, .78);
}

/* --- Precios de energia: el año cargado, en cifras y en graficas --- */

/*
 * El selector de año va en la cabecera del panel y no dentro de una grafica: filtra las dos y la
 * tabla a la vez, asi que tiene que verse por encima de todas ellas y no pertenecer a ninguna.
 */
.panel-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 18px;
}

.panel-cabecera h3 {
  margin: 0;
}

.filtro-anio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cyan);
}

.filtro-anio select {
  margin: 0;
  padding: .3rem .5rem;
  font-family: var(--body);
  font-size: .85rem;
  letter-spacing: 0;
  text-transform: none;
}

/* La tabla es la lectura exacta, no la principal: se abre cuando hace falta un valor concreto. */
.tabla-grafica {
  margin-top: 1.4rem;
}

.tabla-grafica summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cyan);
}

.tabla-grafica[open] summary {
  margin-bottom: 12px;
}

/*
 * Salida dentro de un aviso: descartar el fichero de generacion elegido y sin analizar. Va como
 * boton y no como enlace porque no lleva a ningun sitio, y se pinta como texto porque compite con
 * el boton de analizar, que es la accion que de verdad se espera.
 */
.campo-error__accion {
  margin-left: 8px;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  background: none;
  border: 0;
  cursor: pointer;
}

.campo-error__accion:hover,
.campo-error__accion:focus-visible {
  color: var(--paper);
}

/* --- Importar el catalogo BESS de un fichero --- */

/*
 * Va despues de la tabla y visiblemente separado: no es otro campo del formulario, es una
 * herramienta que rellena la tabla de arriba. Que se vea que son dos cosas evita que alguien
 * espere que pulsar "Leer fichero" guarde algo.
 */
.importador {
  margin-top: 1.6rem;
  padding: 1.1rem 1.2rem;
  border: 1px dashed rgba(233, 242, 247, .22);
  border-radius: 8px;
  background: rgba(255, 255, 255, .02);
}

.importador__titulo {
  margin: 0 0 .4rem;
  font-size: .95rem;
}

.importador__controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: .9rem 0 .6rem;
}

.importador__controles input[type="file"] {
  flex: 1 1 240px;
  min-width: 0;
}

.importador__modo {
  margin: 0;
  padding: 0;
  border: 0;
}

.importador__modo legend {
  padding: 0;
  margin-bottom: .3rem;
}

.importador__modo label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 18px;
  font-size: .9rem;
}

/* Vacio no ocupa: el aviso solo empuja la pagina cuando tiene algo que decir. */
.importador__resultado:empty {
  display: none;
}

.importador__resultado {
  margin-top: .9rem;
  padding: .7rem .9rem;
  border-left: 3px solid rgba(233, 242, 247, .3);
  border-radius: 4px;
  background: rgba(0, 0, 0, .16);
  font-size: .88rem;
}

.importador__resultado--bien {
  border-left-color: var(--cyan);
}

.importador__resultado--error {
  border-left-color: #e08472;
}

.importador__mensaje {
  margin: 0;
  font-weight: 600;
}

.importador__resultado ul {
  margin: .5rem 0 0;
  padding-left: 1.1rem;
  color: rgba(233, 242, 247, .78);
}

.importador__resultado li {
  margin-bottom: .25rem;
}

/* --- Paneles apilados y tablas anchas en administracion --- */

/*
 * Los paneles no traen margen propio: en las paginas de marketing van dentro de un .grid con gap y
 * no hace falta. Apilados uno tras otro, como en administracion, quedaban pegados y las tablas de
 * uno y otro se leian como una sola.
 */
.cuenta-panel > .panel {
  margin-top: 1.7rem;
}

/*
 * Los de resultados van dos niveles mas adentro, dentro del armazon que rellena resultados.js, asi
 * que el selector de arriba no los alcanzaba y salian pegados unos a otros.
 */
.resultados .panel {
  margin-top: 1.7rem;
}

/*
 * La barra de desplazamiento de una tabla ancha es parte del diseño, no un widget del sistema
 * operativo encima de el. Se afina y se tiñe, y se le deja aire para que no toque la ultima fila.
 */
.tabla-envuelta {
  padding-bottom: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(55, 204, 230, .42) rgba(233, 242, 247, .07);
}

.tabla-envuelta::-webkit-scrollbar {
  height: 8px;
}

.tabla-envuelta::-webkit-scrollbar-track {
  background: rgba(233, 242, 247, .07);
  border-radius: 99px;
}

.tabla-envuelta::-webkit-scrollbar-thumb {
  background: rgba(55, 204, 230, .42);
  border-radius: 99px;
}

.tabla-envuelta::-webkit-scrollbar-thumb:hover {
  background: rgba(55, 204, 230, .62);
}

/*
 * El catalogo BESS son once columnas: no es un formulario, es una rejilla de datos, y con el ancho
 * de un formulario no cabia nunca. Con esto entra entero en un portatil y la barra solo aparece
 * cuando de verdad hace falta.
 */
.cuenta-form--ancho {
  width: min(1060px, 100%);
}

/* Celdas mas prietas: en estas columnas caben "96" y "45.000", no hace falta mas hueco. */
.tabla-admin--compacta th,
.tabla-admin--compacta td {
  padding: 6px 7px;
}

.tabla-admin--compacta td input {
  min-width: 58px;
  padding: .4rem .45rem;
}

.tabla-admin--compacta td:first-child input {
  min-width: 150px;
}

/*
 * Lo que redacta el modelo cuando la importacion sale incompleta. Va en su propio bloque y con su
 * rotulo: lo de arriba son cosas que hemos medido en el fichero, y esto es una interpretacion.
 * Mezclarlas haria que las dos se leyeran con la misma confianza, y no la merecen.
 */
.importador__ayuda {
  margin-top: .9rem;
  padding: .7rem .9rem;
  border: 1px dashed rgba(55, 204, 230, .3);
  border-radius: 6px;
  background: rgba(55, 204, 230, .05);
}

.importador__ayuda p {
  margin: 0 0 .4rem;
}

.importador__ayuda-rotulo {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan);
}

/* --- Pagina publica del precio final cuartohorario ------------------------ */

/*
 * Los dos selectores en linea, y el boton con ellos. Con JavaScript el boton se esconde porque los
 * campos ya recargan solos; sin el sigue ahi y es la unica forma de cambiar de dia, asi que el
 * hueco tiene que estar reservado igual.
 */
.filtros-precio {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
}

.filtros-precio label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cyan);
}

.filtros-precio input,
.filtros-precio select {
  margin: 0;
  padding: .45rem .6rem;
  font-family: var(--body);
  font-size: .9rem;
  letter-spacing: 0;
  text-transform: none;
}

.filtros-precio button {
  margin: 0;
}

/* La ayuda ocupa su propia linea debajo de los campos, no una columna mas. */
.filtros-precio .campo-ayuda {
  flex-basis: 100%;
  margin: 0;
}

/*
 * Las cuatro cifras del dia en fila, y no en la rejilla de dos columnas del resto de la cuenta:
 * aqui son el titular de la pagina y se comparan entre si, no se leen una por una.
 *
 * El flujo por columnas coloca cada dt encima de su dd sin envolver cada par en un div: la lista
 * sigue siendo un dl plano, que es lo que corresponde a pares de rotulo y valor.
 */
.panel-precios .analisis-datos {
  grid-auto-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: repeat(auto-fit, minmax(140px, max-content));
  justify-content: start;
  gap: 4px 32px;
}

.panel-precios .analisis-datos dd {
  font-size: 1.05rem;
}

/* Las cifras del desglose se leen en columna, y son muchas: mas estrechas y en monoespaciada. */
.panel-precios .tabla-admin td.num {
  font-family: var(--mono);
  font-size: .78rem;
  white-space: nowrap;
}

/* En estrecho vuelven a la lectura vertical: cuatro columnas no caben sin partir las cifras. */
@media (max-width: 860px) {
  .panel-precios .analisis-datos {
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-template-columns: auto 1fr;
    gap: 8px 18px;
  }
}