/* ===========================================================================
   myOrla — hoja de estilo del asistente de reserva
   ========================================================================= */

:root{
  --fondo:#F4F7FA;
  --superficie:#FFFFFF;
  --superficie-2:#EDF2F8;
  --tinta:#161A20;
  --apagado:#616974;
  --linea:#D9DFE8;

  /* Azules de MyOrla, tomados del degradado del logotipo:
     va del azul profundo al celeste. */
  --marca-honda:#1350A1;    /* el extremo oscuro del degradado */
  --marca:#236CAF;          /* botones: texto blanco encima con holgura (5,5:1) */
  --marca-oscura:#1350A1;   /* enlaces y cifras sobre blanco */
  --marca-clara:#49ADCF;    /* el extremo claro, sólo como acento */
  --marca-suave:#E8F2FA;
  --sobre-marca:#FFFFFF;
  --degradado:linear-gradient(115deg,#1350A1 0%,#2C7CB6 55%,#49ADCF 100%);

  --exito:#2C6E49;
  --exito-suave:#E3F0E8;

  --laton:#8A6D18;
  --alerta:#8C3A2B;
  --alerta-suave:#F7E7E3;
  --radio:8px;
  --sombra:0 1px 2px rgba(22,26,32,.05), 0 4px 14px rgba(22,26,32,.06);
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--fondo);
  color:var(--tinta);
  font:400 16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

.contenedor{max-width:940px;margin:0 auto;padding:0 20px}

/* --- Cabecera ------------------------------------------------------------ */

/* El logotipo lleva su propio degradado azul, así que la cabecera se queda
   en blanco: sobre un fondo de color la marca perdería fuerza. El acento de
   color lo pone el filete inferior. */
.cabecera{
  background:var(--superficie);
  border-bottom:1px solid var(--linea);
  box-shadow:0 1px 0 rgba(22,26,32,.02);
}
.cabecera::after{content:"";display:block;height:3px;background:var(--degradado)}
.cabecera-fila{display:flex;align-items:center;justify-content:space-between;
               gap:16px;min-height:78px;padding:12px 0}
.marca{display:inline-flex;align-items:center;text-decoration:none;flex:none}
.marca img{display:block;height:46px;width:auto}
.marca-texto{
  font-size:20px;font-weight:700;letter-spacing:-.02em;
  color:var(--marca-oscura);text-decoration:none;
}
.contacto{color:var(--apagado);text-decoration:none;font-size:15px;font-weight:500}
.contacto:hover{color:var(--marca-oscura);text-decoration:underline}

/* --- La cabecera de la pantalla de entrada -------------------------------
   Ahí el logotipo manda: mucha gente llega por un enlace o un código QR sin
   saber del todo dónde está entrando, y lo primero que tiene que reconocer es
   la marca. En el resto de pasos vuelve a su tamaño pequeño, que allí lo que
   importa es el formulario. */

.cabecera-portada .cabecera-fila{
  flex-direction:column;justify-content:center;gap:14px;
  min-height:0;padding:38px 0 32px;
}
.cabecera-portada .marca img{height:132px}
.cabecera-portada .contacto{font-size:16px}

@media (max-width:760px){
  .cabecera-portada .marca img{height:104px}
  .cabecera-portada .cabecera-fila{padding:30px 0 26px}
}

@media (max-width:520px){
  .marca img{height:36px}
  .cabecera-fila{min-height:66px}
  .cabecera-portada .marca img{height:86px}
  .cabecera-portada .cabecera-fila{padding:24px 0 22px;min-height:0}
}

/* --- Barra de progreso --------------------------------------------------- */

.progreso{background:var(--superficie);border-bottom:1px solid var(--linea);overflow-x:auto}
.progreso-lista{
  display:flex;gap:4px;list-style:none;margin:0;padding:14px 0;
  min-width:max-content;
}
.progreso-paso{display:flex;align-items:center;gap:7px;padding-right:14px;color:var(--apagado);font-size:13px}
.progreso-punto{
  display:grid;place-items:center;width:24px;height:24px;flex:none;
  border-radius:50%;border:1.5px solid var(--linea);
  font-size:12px;font-weight:600;background:var(--superficie);
}
.progreso-paso.hecho .progreso-punto{background:var(--marca-suave);border-color:var(--marca);color:var(--marca)}
.progreso-paso.actual .progreso-punto{background:var(--marca);border-color:var(--marca);color:var(--sobre-marca)}
.progreso-paso.actual{color:var(--tinta);font-weight:600}
.progreso-nombre{white-space:nowrap}

@media (max-width:640px){
  .progreso-paso:not(.actual) .progreso-nombre{display:none}
}

/* --- Estructura ---------------------------------------------------------- */

.principal{padding:36px 20px 72px}

h1{font-size:clamp(26px,4vw,34px);line-height:1.15;letter-spacing:-.02em;margin:0 0 10px;text-wrap:balance}
h2{font-size:20px;margin:0 0 8px;letter-spacing:-.01em}
.apoyo{color:var(--apagado);margin:0 0 28px;max-width:62ch}

.tarjeta{
  background:var(--superficie);border:1px solid var(--linea);
  border-radius:var(--radio);padding:26px;box-shadow:var(--sombra);
}
.tarjeta-centrada{max-width:520px;margin:40px auto;text-align:center}

/* --- Opciones en rejilla (universidades, perfil, modalidad) -------------- */

.opciones{display:grid;gap:14px;margin:0 0 28px}
.opciones-2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.opciones-3{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}

.opcion{
  display:block;width:100%;text-align:left;cursor:pointer;
  background:var(--superficie);border:1.5px solid var(--linea);
  border-radius:var(--radio);padding:20px 22px;
  font:inherit;color:inherit;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.opcion:hover{border-color:var(--marca);box-shadow:var(--sombra);transform:translateY(-1px)}
.opcion:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
.opcion-titulo{display:block;font-size:17px;font-weight:600;margin-bottom:3px}
.opcion-detalle{display:block;color:var(--apagado);font-size:14.5px}

/* --- Lotes --------------------------------------------------------------- */

.lotes{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-bottom:28px}

.lote{
  display:flex;flex-direction:column;
  background:var(--superficie);border:1.5px solid var(--linea);
  border-radius:var(--radio);overflow:hidden;position:relative;
}
.lote.destacado{border-color:var(--marca)}
.lote-cinta{
  position:absolute;top:14px;right:-32px;
  background:var(--marca);color:var(--sobre-marca);
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 36px;transform:rotate(45deg);
}
.lote-cuerpo{padding:24px;flex:1}
.lote h2{margin-bottom:6px}
.lote-precio{
  font-size:30px;font-weight:700;letter-spacing:-.02em;color:var(--marca-oscura);
  margin:12px 0 16px;font-variant-numeric:tabular-nums;
}
.lote-descripcion{color:var(--apagado);font-size:15px;margin:0 0 16px}
.lote-incluye{list-style:none;margin:0;padding:0;font-size:15px}
.lote-incluye li{
  padding-left:22px;position:relative;margin-bottom:7px;
}
.lote-incluye li::before{
  content:"";position:absolute;left:2px;top:8px;
  width:9px;height:5px;border-left:2px solid var(--marca);border-bottom:2px solid var(--marca);
  transform:rotate(-45deg);
}
.lote-pie{padding:0 24px 24px}

/* --- Calendario ---------------------------------------------------------- */

.dia{margin-bottom:26px}
.dia-titulo{
  font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--apagado);margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--linea);
}
.horas{display:flex;flex-wrap:wrap;gap:10px}
.hora{
  background:var(--superficie);border:1.5px solid var(--linea);border-radius:6px;
  padding:11px 16px;cursor:pointer;font:inherit;color:inherit;
  font-variant-numeric:tabular-nums;text-align:center;min-width:104px;
  transition:border-color .15s, background .15s;
}
.hora:hover{border-color:var(--marca);background:var(--marca-suave)}
.hora:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
.hora-valor{display:block;font-weight:600}
.hora-plazas{display:block;font-size:12px;color:var(--apagado);margin-top:2px}

/* --- Formularios --------------------------------------------------------- */

.campos{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
/* Los .campo son flex y eso gana al display:none de [hidden]: sin esta línea,
   ocultar el desplegable de especialidad no surtiría efecto. */
[hidden]{display:none !important}
.campo{display:flex;flex-direction:column;gap:6px}
.campo-ancho{grid-column:1/-1}
.campo label{font-size:14px;font-weight:600}
.campo .pista{font-size:13px;color:var(--apagado);font-weight:400}

input[type=text],input[type=email],input[type=tel],input[type=password],
input[type=number],input[type=date],input[type=time],select,textarea{
  font:inherit;color:inherit;
  background:var(--superficie);
  border:1.5px solid var(--linea);border-radius:6px;
  padding:11px 13px;width:100%;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--marca);box-shadow:0 0 0 3px var(--marca-suave);
}
textarea{min-height:110px;resize:vertical}

.error-campo{color:var(--alerta);font-size:13.5px}
input.mal,select.mal,textarea.mal{border-color:var(--alerta)}

/* --- Botones ------------------------------------------------------------- */

.boton{
  display:inline-block;border:none;cursor:pointer;
  background:var(--marca);color:var(--sobre-marca);
  font:600 16px/1 inherit;font-family:inherit;
  padding:14px 24px;border-radius:6px;text-decoration:none;text-align:center;
  transition:opacity .15s;
}
.boton:hover{opacity:.9}
.boton:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}
.boton:disabled{opacity:.4;cursor:not-allowed}
.boton-ancho{width:100%}
.boton-suave{background:var(--superficie);color:var(--tinta);border:1.5px solid var(--linea)}
.boton-suave:hover{border-color:var(--marca);opacity:1}

.acciones{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:26px}
.enlace-atras{color:var(--apagado);text-decoration:none;font-size:15px}
.enlace-atras:hover{color:var(--marca);text-decoration:underline}

/* --- Resumen lateral ----------------------------------------------------- */

.con-resumen{display:grid;gap:28px;grid-template-columns:1fr}
@media (min-width:860px){
  .con-resumen{grid-template-columns:1fr 300px;align-items:start}
}

.resumen{
  background:var(--superficie);border:1px solid var(--linea);
  border-radius:var(--radio);padding:22px;font-size:15px;
}
.resumen h2{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--apagado);margin-bottom:14px}
/* El repaso de datos antes de confirmar: la misma pinta que el resumen
   lateral, pero dentro de la tarjeta. */
.datos-repaso{margin:0 0 20px;display:grid;gap:12px}
.datos-repaso dt{font-size:12.5px;color:var(--apagado);text-transform:uppercase;letter-spacing:.05em}
.datos-repaso dd{margin:2px 0 0;font-weight:500}

.resumen dl{margin:0;display:grid;gap:10px}
.resumen dt{font-size:12.5px;color:var(--apagado);text-transform:uppercase;letter-spacing:.05em}
.resumen dd{margin:2px 0 0;font-weight:500}
.resumen-total{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--linea);
  display:flex;justify-content:space-between;align-items:baseline;
}
.resumen-total span{font-size:13px;color:var(--apagado);text-transform:uppercase;letter-spacing:.06em}
.resumen-total strong{font-size:24px;color:var(--marca-oscura);font-variant-numeric:tabular-nums}

/* --- Condiciones una a una ----------------------------------------------- */

.condicion{
  background:var(--superficie);border:1.5px solid var(--linea);
  border-radius:var(--radio);padding:24px;margin-bottom:16px;
  transition:border-color .2s, opacity .2s;
}
.condicion[data-estado="pendiente"]{opacity:.45;pointer-events:none}
.condicion[data-estado="activa"]{border-color:var(--marca);box-shadow:var(--sombra)}
.condicion[data-estado="aceptada"]{border-color:var(--exito-suave);background:var(--exito-suave)}

.condicion-numero{
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--apagado);margin:0 0 8px;
}
.condicion h2{margin-bottom:10px}
.condicion-texto{margin:0 0 18px;color:var(--tinta)}
.condicion-aceptar{display:flex;align-items:flex-start;gap:11px;cursor:pointer;font-size:15px;font-weight:500}
.condicion-aceptar input{width:19px;height:19px;margin-top:2px;flex:none;accent-color:var(--marca)}
.condicion-hecha{
  display:none;align-items:center;gap:8px;
  color:var(--exito);font-weight:600;font-size:15px;
}
.condicion[data-estado="aceptada"] .condicion-hecha{display:flex}
.condicion[data-estado="aceptada"] .condicion-aceptar{display:none}

/* --- Métodos de pago ----------------------------------------------------- */

.pagos{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-bottom:26px}
.pago{
  background:var(--superficie);border:1.5px solid var(--linea);
  border-radius:var(--radio);padding:24px;display:flex;flex-direction:column;
}
.pago h2{margin-bottom:8px}
.pago p{color:var(--apagado);font-size:15px;margin:0 0 20px;flex:1}
.pago-nota{
  font-size:13px;color:var(--apagado);
  margin-top:14px;padding-top:14px;border-top:1px solid var(--linea);
}

/* --- Avisos -------------------------------------------------------------- */

.aviso{border-radius:6px;padding:14px 18px;margin-bottom:22px;font-size:15px}
.aviso-error{background:var(--alerta-suave);border-left:3px solid var(--alerta);color:var(--alerta)}
.aviso-ok{background:var(--exito-suave);border-left:3px solid var(--exito);color:var(--exito)}
.aviso-info{background:var(--superficie-2);border-left:3px solid var(--apagado)}

.vacio{
  text-align:center;padding:52px 24px;color:var(--apagado);
  background:var(--superficie);border:1px dashed var(--linea);border-radius:var(--radio);
}

/* --- Confirmación -------------------------------------------------------- */

.exito-marca{
  width:60px;height:60px;margin:0 auto 20px;border-radius:50%;
  background:var(--exito-suave);display:grid;place-items:center;
}
.exito-marca::after{
  content:"";width:20px;height:11px;
  border-left:3px solid var(--exito);border-bottom:3px solid var(--exito);
  transform:rotate(-45deg) translate(2px,-3px);
}
.codigo-reserva{
  font-size:26px;font-weight:700;letter-spacing:.04em;color:var(--marca-oscura);
  font-variant-numeric:tabular-nums;margin:6px 0 0;
}

.ficha{display:grid;gap:14px;text-align:left;margin:28px 0}
.ficha div{display:flex;justify-content:space-between;gap:16px;padding-bottom:12px;border-bottom:1px solid var(--linea)}
.ficha dt{color:var(--apagado);font-size:14px}
.ficha dd{margin:0;font-weight:500;text-align:right}

/* --- Pie ----------------------------------------------------------------- */

/* --- «¿Ya tienes cita?» de la portada ------------------------------------- */

.ya-tengo-cita{
  margin:36px 0 8px;padding:22px 24px;
  background:var(--superficie);border:1.5px solid var(--linea);
  border-radius:var(--radio);
  display:flex;flex-wrap:wrap;gap:18px;
  align-items:center;justify-content:space-between;
}
.ya-tengo-cita h2{margin:0 0 4px;font-size:18px}
.ya-tengo-cita p{margin:0;color:var(--apagado);font-size:14.5px;max-width:46ch}
.ya-tengo-cita .boton{flex:none}

@media (max-width:560px){
  .ya-tengo-cita{flex-direction:column;align-items:stretch}
  .ya-tengo-cita .boton{width:100%;text-align:center}
}

/* --- Confirmar el correo -------------------------------------------------- */

.verificar-correo{
  margin-top:10px;padding:12px 14px;border-radius:var(--radio);
  background:var(--superficie-2);border:1px solid var(--linea);
}
.verificar-fila{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* Los input de esta hoja son width:100%, que aquí partiría la fila en dos.
   La casilla del código sólo necesita seis cifras. */
input.verificar-codigo{
  width:9ch;flex:none;text-align:center;letter-spacing:.28em;font-weight:600;
  font-variant-numeric:tabular-nums;padding:9px 6px;
}

/* Para las etiquetas que sólo tienen que leer los lectores de pantalla. En la
   hoja del panel ya estaba; en ésta faltaba, y salían a la vista. */
.oculto-visualmente{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.verificar-aviso{margin:0 0 10px;font-size:14px;line-height:1.5}
.verificar-ok   {color:var(--exito)}
.verificar-error{color:var(--alerta)}
.verificar-hecho{margin:0;color:var(--exito);font-weight:600;font-size:14.5px}

/* --- Páginas legales ------------------------------------------------------ */
/* Columna estrecha y renglones sueltos: son textos largos que hay que poder
   leer de arriba abajo sin cansarse. */
.texto-legal{max-width:70ch;margin:0 auto}
.texto-legal h1{margin-bottom:6px}
.texto-legal-cuerpo{
  margin-top:26px;line-height:1.75;font-size:15.5px;color:var(--tinta);
}

.pie{border-top:1px solid var(--linea);padding:34px 0 26px;background:var(--superficie)}
.pie p{margin:0;color:var(--apagado);font-size:14px}

.pie-columnas{
  display:grid;gap:28px;align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.pie h2{
  font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--apagado);margin:0 0 12px;
}
.pie-nombre{font-weight:600;color:var(--tinta) !important;font-size:15px !important}
.pie-direccion{margin-top:6px !important;line-height:1.6}
/* Teléfono y correo, uno debajo de otro y grandes de tocar en el móvil. */
.pie-vias{display:flex;flex-direction:column;gap:4px;margin-top:10px !important}
.pie-vias a,.pie-legal a{color:var(--marca-oscura);text-decoration:none}
.pie-vias a:hover,.pie-legal a:hover{text-decoration:underline}
.pie-legal ul{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:14px}
.pie-firma{
  margin-top:26px !important;padding-top:18px;
  border-top:1px solid var(--linea);font-size:13px !important;
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
}

/* ===========================================================================
   Asistente flotante
   La ventana es deliberadamente grande: en un chat pequeño no se lee nada
   y la conversación se vuelve incómoda en cuanto pasa de dos frases.
   ========================================================================= */

/* El ancho de la ventana y el hueco que se le reserva al lado del contenido.
   En un sitio para no repetir el número por media hoja. */
:root{ --ia-ancho:400px; --ia-hueco:24px }

/* --- La pestaña -------------------------------------------------------------
   Pegada al borde derecho y a media altura, con el texto en vertical. Ahí no
   se cruza con nada: el contenido va en una columna centrada de 940px, así
   que en cualquier pantalla de portátil le sobra margen por ese lado. */
.ia-boton{
  position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:900;
  display:inline-flex;flex-direction:column;align-items:center;gap:10px;
  background:var(--degradado);color:#fff;border:none;cursor:pointer;
  font:600 14.5px/1 inherit;font-family:inherit;
  padding:18px 12px;border-radius:14px 0 0 14px;
  box-shadow:-4px 0 20px rgba(19,80,161,.28);
  transition:padding-right .18s, box-shadow .18s;
}
/* El texto de arriba abajo, que es lo que permite que la pestaña sea
   estrecha y quepa en el margen sin comerse ni un píxel de la página. El
   birrete se queda derecho: girado no se reconoce, parece una mancha. */
.ia-boton-texto{ writing-mode:vertical-rl; letter-spacing:.01em }
.ia-boton svg{ flex:none }
.ia-boton:hover{ padding-right:16px;box-shadow:-6px 0 26px rgba(19,80,161,.4) }
.ia-boton:focus-visible{ outline:3px solid var(--marca-honda);outline-offset:3px }
.ia-boton[hidden]{ display:none !important }

/* --- La ventana ------------------------------------------------------------
   También a la derecha y centrada. Y cuando se abre, la página se aparta:
   body coge un margen derecho del ancho de la ventana, la columna de
   contenido se recoloca sola —va centrada— y no queda nada debajo. */
.ia-ventana{
  position:fixed;right:var(--ia-hueco);top:50%;transform:translateY(-50%);
  z-index:901;
  width:var(--ia-ancho);
  /* Alto generoso: en una conversación corta, un panel pequeño obliga a
     desplazarse cada dos respuestas. */
  height:min(720px, calc(100vh - 48px));
  display:flex;flex-direction:column;
  background:var(--superficie);
  border:1px solid var(--linea);border-radius:16px;
  box-shadow:0 24px 60px rgba(22,26,32,.26), 0 2px 8px rgba(22,26,32,.08);
  overflow:hidden;
  animation:ia-entrar .18s ease-out;
}
@keyframes ia-entrar{
  from{opacity:0;transform:translate(14px,-50%)}
  to{opacity:1;transform:translateY(-50%)}
}
.ia-ventana[hidden]{ display:none !important }

/* El hueco que se le hace a la ventana. La transición es del mismo tiempo que
   la animación de entrada, para que las dos cosas ocurran a la vez. */
body{ transition:padding-right .18s ease-out }
.ia-abierta body{ padding-right:calc(var(--ia-ancho) + var(--ia-hueco) * 2) }

/* Las bandas de ancho completo —cabecera, barra de progreso y pie— se estiran
   otra vez hasta el borde. Con sólo el margen del body se quedaban cortadas
   por la mitad y se veía la costura contra el fondo de la página; así el
   color sigue llegando de lado a lado y lo único que se aparta es el texto,
   que es lo que hay que apartar. */
.cabecera, .progreso, .pie{ transition:margin-right .18s ease-out, padding-right .18s ease-out }
.ia-abierta .cabecera,
.ia-abierta .progreso,
.ia-abierta .pie{
  margin-right:calc(-1 * (var(--ia-ancho) + var(--ia-hueco) * 2));
  padding-right:calc(var(--ia-ancho) + var(--ia-hueco) * 2);
}

@media (prefers-reduced-motion:reduce){
  .ia-ventana{ animation:none }
  body{ transition:none }
}

/* En pantallas medianas el panel se estrecha un poco: lo que importa es que
   la columna de contenido siga siendo cómoda de leer. */
@media (max-width:1400px){
  :root{ --ia-ancho:340px }

  /* Y los nueve pasos de la barra ya no caben con su nombre. Se deja sólo el
     del paso en curso, igual que en el móvil. Esto hay que decirlo a mano
     porque las media queries miran el ancho de la ventana, no el que queda
     libre al lado del panel. */
  .ia-abierta .progreso-paso:not(.actual) .progreso-nombre{ display:none }

  /* Lo mismo con los pasos que llevan el resumen de la compra al lado: en el
     ancho que queda no caben dos columnas, así que el resumen se pone debajo
     en vez de estrujar el formulario. */
  .ia-abierta .con-resumen{ grid-template-columns:1fr }
}

/* Por debajo de esto no caben las dos cosas a la vez: la columna de contenido
   se quedaría en nada. Ahí la ventana vuelve a ir por encima, que es lo
   único que cabe, y la página no se aparta. */
@media (max-width:1100px){
  .ia-abierta body{ padding-right:0 }
  .ia-abierta .cabecera,
  .ia-abierta .progreso,
  .ia-abierta .pie{ margin-right:0;padding-right:0 }
}

@media (max-width:560px){
  .ia-ventana{
    right:0;top:0;bottom:0;transform:none;
    width:100vw;height:100dvh;border-radius:0;border:none;
  }
  @keyframes ia-entrar{
    from{opacity:0;transform:translateY(10px)}
    to{opacity:1;transform:none}
  }
  /* En el móvil la pestaña lateral estorbaría al leer, así que ahí vuelve
     abajo a la derecha, que es donde se la espera. */
  .ia-boton{
    right:16px;bottom:16px;top:auto;transform:none;
    padding:16px;border-radius:50%;
  }
  .ia-boton:hover{ padding:16px }
  .ia-boton-texto{ display:none }
  .ia-boton svg{ transform:none }
}

.ia-cabecera{
  display:flex;align-items:center;gap:13px;
  padding:16px 18px;background:var(--degradado);color:#fff;flex:none;
}
.ia-marca{
  flex:none;width:40px;height:40px;border-radius:12px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.18);color:#fff;
}
.ia-cabecera-texto{flex:1;min-width:0}
.ia-titulo{margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em}
.ia-subtitulo{margin:2px 0 0;font-size:12.5px;opacity:.82}
.ia-cerrar{
  background:rgba(255,255,255,.16);border:none;color:#fff;cursor:pointer;
  width:34px;height:34px;border-radius:10px;flex:none;
  display:grid;place-items:center;
}
.ia-cerrar:hover{background:rgba(255,255,255,.3)}
.ia-cerrar:focus-visible{outline:2px solid #fff;outline-offset:2px}

.ia-mensajes{
  flex:1;overflow-y:auto;padding:20px;
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  background:var(--fondo);
}
.ia-mensaje{
  max-width:88%;padding:12px 16px;border-radius:16px;
  font-size:15.5px;line-height:1.55;white-space:pre-wrap;word-wrap:break-word;
  box-shadow:0 1px 2px rgba(22,26,32,.05);
}
.ia-mensaje-asistente{
  align-self:flex-start;background:var(--superficie);
  border:1px solid var(--linea);border-bottom-left-radius:5px;
}
.ia-mensaje-cliente{
  align-self:flex-end;background:var(--marca);color:#fff;
  border-bottom-right-radius:5px;
}
.ia-mensaje-error{
  align-self:flex-start;background:var(--alerta-suave);color:var(--alerta);
  border:1px solid var(--alerta);
}

.ia-escribiendo{align-self:flex-start;display:flex;gap:5px;padding:14px 16px}
.ia-escribiendo span{
  width:8px;height:8px;border-radius:50%;background:var(--apagado);
  animation:ia-latido 1.3s infinite ease-in-out;
}
.ia-escribiendo span:nth-child(2){animation-delay:.18s}
.ia-escribiendo span:nth-child(3){animation-delay:.36s}
@keyframes ia-latido{
  0%,60%,100%{opacity:.25;transform:translateY(0)}
  30%{opacity:1;transform:translateY(-4px)}
}

.ia-sugerencias{
  display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  margin-top:6px;max-width:88%;
}
.ia-sugerencias[hidden]{display:none !important}
.ia-sugerencias-titulo{
  margin:0 0 1px;font-size:11.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--apagado);
}
.ia-sugerencia{
  text-align:left;background:var(--superficie);border:1px solid var(--marca-suave);
  border-radius:14px;border-bottom-left-radius:5px;padding:10px 15px;cursor:pointer;
  font:inherit;font-size:14.5px;line-height:1.4;color:var(--marca-oscura);
  transition:border-color .12s, background .12s;
}
.ia-sugerencia:hover{border-color:var(--marca);background:var(--marca-suave)}
.ia-sugerencia:focus-visible{outline:2px solid var(--marca);outline-offset:2px}

.ia-formulario{
  display:flex;gap:10px;align-items:flex-end;
  padding:14px 16px 8px;border-top:1px solid var(--linea);
  background:var(--superficie);flex:none;
}
.ia-formulario textarea{
  flex:1;resize:none;max-height:150px;min-height:48px;
  border:1.5px solid var(--linea);border-radius:12px;padding:13px 15px;
  font:inherit;font-size:15.5px;line-height:1.4;
}
.ia-formulario textarea:focus{
  outline:none;border-color:var(--marca);box-shadow:0 0 0 3px var(--marca-suave);
}
.ia-enviar{
  flex:none;width:48px;height:48px;border-radius:12px;border:none;cursor:pointer;
  background:var(--marca);color:#fff;display:grid;place-items:center;
}
.ia-enviar:hover{background:var(--marca-oscura)}
.ia-enviar:disabled{opacity:.45;cursor:not-allowed}
.ia-enviar:focus-visible{outline:2px solid var(--marca-oscura);outline-offset:2px}

.ia-nota{
  margin:0;padding:0 16px 12px;font-size:12px;color:var(--apagado);
  background:var(--superficie);flex:none;
}
.ia-etiqueta-oculta{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}

/* --- Logotipos de universidad ----------------------------------------------

   Un logotipo lo sube quien sea, con la forma que sea: uno panorámico de
   1200x240, otro vertical, otro cuadrado. Para que todos convivan sin que la
   pantalla parezca un collage, cada uno va dentro de un marco de medida fija
   y se encaja dentro sin recortarse ni deformarse.

   El marco es apaisado, no cuadrado, porque casi todos los escudos y logos
   institucionales lo son: en un cuadrado, uno panorámico quedaba reducido a
   una raya de tres píxeles de alto.

   La imagen lleva width y height al 100 %, no max-width. Con max-width en
   porcentaje el navegador no siempre encuentra contra qué medirlo y el logo
   se salía del marco: uno vertical se plantaba a tamaño completo encima del
   pie de página. Con object-fit:contain sobre una caja de medida definida no
   hay forma de que se desborde.
   -------------------------------------------------------------------------- */

.marco-logo{
  display:flex;align-items:center;justify-content:center;
  flex:none;overflow:hidden;
}
.marco-logo img{
  width:100%;height:100%;
  object-fit:contain;object-position:center;
  display:block;
}

/* Tres medidas, las mismas en la web y en el panel. */
.marco-logo-s{width:46px;height:26px}
.marco-logo-m{width:78px;height:48px}
.marco-logo-l{width:124px;height:72px}

/* El hueco vacío se reserva igual, para que los nombres queden alineados
   entre tarjetas con logotipo y sin él. */
.marco-logo-vacio{border:1px dashed var(--linea);border-radius:5px}

/* Salvaguarda general: ninguna imagen puede sobresalir de su contenedor,
   suba quien suba el archivo. */
img{max-width:100%}

@media (max-width:520px){
  .marco-logo-m{width:62px;height:40px}
}

.opcion-con-logo{display:flex;align-items:center;gap:16px}
.opcion-texto{display:block;min-width:0}
.dd-con-logo{display:flex;align-items:center;gap:9px}


/* El emplazamiento en la cita: varias líneas, al revés que los demás datos. */
.cita-emplazamiento dd{white-space:normal;line-height:1.55}