/* ============================================================================
   EnCore Demo — AWS Student Builder Group UNAM
   Implementa demo-aws/DESIGN.md. Si algo no esta ahi, no deberia estar aqui.
   ========================================================================= */

/* ---- Tipografia -------------------------------------------------------- */
@font-face {
  font-family: "Amazon Ember Duospace";
  src: url("fonts/AmazonEmberDuospace_W_Rg.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Amazon Ember Duospace";
  src: url("fonts/AmazonEmberDuospace_W_Bd.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Amazon Ember";
  src: url("fonts/AmazonEmber_W_Rg.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Amazon Ember";
  src: url("fonts/AmazonEmber_W_RgIt.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Amazon Ember";
  src: url("fonts/AmazonEmber_W_Bd.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Amazon Ember Display";
  src: url("fonts/AmazonEmberDisplay_W_Rg.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---- Tokens ------------------------------------------------------------ */
:root {
  --bg:          #161d26;
  --bg-elev:     #1c242f;
  --bg-sunken:   #10161d;

  --azul:        #44b4ff;
  --azul-tenue:  rgba(68, 180, 255, .14);

  --texto:       #ffffff;
  --texto-2:     #9aa0ab;   /* NO usar #656871 para texto: 3.05:1, falla AA */
  --linea:       #656871;
  --linea-suave: rgba(101, 104, 113, .28);

  --aws:         #ff9900;
  --ok:          #03e582;
  --modelo:      #ad5cff;
  --costo:       #ff57ea;

  --f-titulo: "Amazon Ember Duospace", ui-monospace, SFMono-Regular, Menlo, monospace;
  --f-cuerpo: "Amazon Ember", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-codigo: "Amazon Ember Duospace", ui-monospace, monospace;
  --f-numero: "Amazon Ember Display", "Amazon Ember Duospace", ui-monospace, monospace;

  --r: 10px;
  --r-sm: 6px;

  --esquina: 24px;
  --rejilla: 48px;
  --barra: 44px;
  --ancho: 100%;
  --escala: 1;
  --codigo-size: .8125rem;
  --cuerpo-size: 16px;
}

@media (min-width: 480px)  { :root { --esquina: 28px; --rejilla: 56px; } }
@media (min-width: 768px)  { :root { --esquina: 40px; --rejilla: 72px; --barra: 52px; --ancho: 680px; --cuerpo-size: 17px; } }
@media (min-width: 1024px) { :root { --esquina: 48px; --rejilla: 88px; --barra: 56px; --ancho: 1080px; --codigo-size: .875rem; } }
@media (min-width: 1440px) { :root { --esquina: 56px; --ancho: 1240px; --cuerpo-size: 18px; } }

/* Modo proyeccion: no cambia el layout, cambia la escala y quita ruido. */
:root[data-modo="proyeccion"] {
  --escala: 1.35;
  --codigo-size: 1.125rem;
  --ancho: 1100px;
}

/* ---- Base -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--texto);
  font-family: var(--f-cuerpo);
  font-size: var(--cuerpo-size);
  line-height: 1.65;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--f-titulo); font-weight: 400; line-height: 1.15; margin: 0; }
p { margin: 0 0 1rem; }
a { color: var(--azul); }
b, strong { font-weight: 700; }

button, input {
  font: inherit;
  color: inherit;
}
button { cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 3px;
  border-radius: 3px;
}

/* iOS hace zoom si el input mide menos de 16px */
input, textarea { font-size: 16px; }

/* Todo lo presionable, minimo 44x44 */
button, .ejecutar, .enviar, .punto { min-height: 44px; }

/* ---- Cromo fijo: esquinas, rejilla, marco, barra ----------------------- */
.esquina {
  position: fixed;
  width: var(--esquina);
  height: var(--esquina);
  background: var(--azul);
  z-index: 6;
  pointer-events: none;
}
.esquina.tl { top: 0; left: 0; }
.esquina.tr { top: 0; right: 0; }
.esquina.bl { bottom: 0; left: 0; }
.esquina.br { bottom: 0; right: 0; }

.rejilla {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  var(--linea-suave) 1px, transparent 1px),
    linear-gradient(to bottom, var(--linea-suave) 1px, transparent 1px);
  background-size: var(--rejilla) var(--rejilla);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 35%, transparent 78%);
  mask-image: radial-gradient(ellipse at 50% 40%, #000 35%, transparent 78%);
}

.marco {
  position: fixed;
  inset: var(--esquina);
  border: 1px solid var(--linea-suave);
  z-index: 1;
  pointer-events: none;
}

.barra {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--barra) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex;
  align-items: center;
  z-index: 7;
  background: var(--bg);
  border-top: 1px solid var(--linea-suave);
  font-family: var(--f-titulo);
  font-size: .6875rem;
}
.barra .aws-bloque {
  background: var(--azul);
  height: 100%;
  display: grid;
  place-items: center;
  padding: 0 14px;
}
.barra .chip-marca { width: 22px; height: 22px; display: block; }
.barra .medio { flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 14px; min-width: 0; color: var(--texto-2); }
.barra .grupo {
  background: var(--azul);
  color: var(--bg);
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-weight: 700;
  white-space: nowrap;
}
@media (max-width: 767px) { .barra .grupo span { display: none; } }

/* ---- Riel de progreso -------------------------------------------------- */
.progreso {
  position: fixed;
  z-index: 6;
  display: flex;
  gap: 6px;
}
@media (max-width: 767px) {
  .progreso {
    top: 0; left: 0; right: 0;
    height: 3px;
    gap: 2px;
    padding: 0 var(--esquina);
  }
  .progreso .punto { flex: 1; min-height: 3px; height: 3px; }
}
@media (min-width: 768px) {
  .progreso {
    right: calc(var(--esquina) / 2);
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
    align-items: center;
  }
}

.punto {
  border: 0;
  padding: 0;
  background: var(--linea);
  border-radius: 99px;
  transition: background .2s, height .2s, width .2s;
}
@media (min-width: 768px) {
  .punto { width: 6px; height: 6px; min-height: 6px; }
  .punto[aria-current="true"] { background: var(--azul); height: 26px; }
}
@media (max-width: 767px) {
  .punto[aria-current="true"] { background: var(--azul); }
}

:root[data-modo="proyeccion"] .progreso { display: none; }

/* ---- Escenas ----------------------------------------------------------- */
main {
  position: relative;
  z-index: 2;
  height: 100svh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

.escena {
  min-height: 100svh;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding:
    calc(var(--esquina) + 24px)
    max(20px, env(safe-area-inset-right))
    calc(var(--barra) + 32px)
    max(20px, env(safe-area-inset-left));
}
.escena > .interior {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
}

/* Telefono en horizontal: una escena NO puede medir una pantalla */
@media (max-height: 500px) and (orientation: landscape) {
  main { scroll-snap-type: none; }
  .escena {
    min-height: auto;
    scroll-snap-align: none;
    padding-block: 28px;
  }
  .titulo-acto { font-size: 1.75rem !important; }
}

.numero-acto {
  font-family: var(--f-titulo);
  font-size: calc(.75rem * var(--escala));
  letter-spacing: .12em;
  color: var(--texto-2);
  text-transform: uppercase;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.titulo-acto {
  font-size: calc(clamp(1.9rem, 5.5vw, 3.6rem) * var(--escala));
  letter-spacing: -.02em;
  margin-bottom: .4rem;
}

.subtitulo {
  font-style: italic;
  color: var(--texto-2);
  font-size: calc(clamp(1rem, 2.2vw, 1.35rem) * var(--escala));
  margin-bottom: 1.6rem;
  max-width: 46ch;
}

.cuerpo { font-size: calc(1rem * var(--escala)); max-width: 62ch; }
.cuerpo p:last-child { margin-bottom: 0; }

.nota-porque {
  margin-top: 1.5rem;
  padding: 12px 16px;
  border-left: 3px solid var(--aws);
  background: rgba(255, 153, 0, .08);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: calc(.9375rem * var(--escala));
  max-width: 62ch;
}
.nota-porque strong { color: var(--aws); }
:root[data-modo="proyeccion"] .nota-porque { display: none; }

/* ---- Badge de servicio ------------------------------------------------- */
.badge {
  font-family: var(--f-titulo);
  font-size: calc(.6875rem * var(--escala));
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid currentColor;
  background: color-mix(in srgb, currentColor 12%, transparent);
  white-space: nowrap;
}
.badge.aws     { color: var(--aws); }
.badge.modelo  { color: var(--modelo); }
.badge.azul    { color: var(--azul); }
.badge.costo   { color: var(--costo); }
.badge.ok      { color: var(--ok); }

/* ---- Celda ejecutable -------------------------------------------------- */
.celda {
  background: var(--bg-elev);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color .18s;
  margin-bottom: 1rem;
}
.celda[data-estado="corriendo"] { border-color: var(--azul); animation: pulso .6s ease-in-out infinite alternate; }
.celda[data-estado="ok"]        { border-color: var(--ok); }
.celda[data-estado="error"]     { border-color: var(--costo); }

@keyframes pulso {
  from { box-shadow: 0 0 0 0 var(--azul-tenue); }
  to   { box-shadow: 0 0 0 6px transparent; }
}

.celda-cabeza {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 14px;
  border-bottom: 1px solid var(--linea-suave);
  font-family: var(--f-titulo);
  font-size: calc(.75rem * var(--escala));
  color: var(--texto-2);
  flex-wrap: wrap;
}
/* El nombre del archivo puede recortarse sin perder nada; el boton Ejecutar no. */
.celda-cabeza .archivo {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ejecutar {
  background: var(--azul);
  color: var(--bg);
  border: 0;
  border-radius: var(--r-sm);
  padding: 8px 16px;
  font-family: var(--f-titulo);
  font-size: calc(.8125rem * var(--escala));
  font-weight: 700;
}
.ejecutar:hover:not(:disabled) { filter: brightness(1.1); }
.ejecutar:disabled { opacity: .5; cursor: not-allowed; }

.celda pre {
  margin: 0;
  padding: 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  font-family: var(--f-codigo);
  font-size: var(--codigo-size);
  line-height: 1.55;
  color: #e6e6e6;
  background: var(--bg-sunken);
}
.celda pre .c { color: var(--texto-2); }        /* comentario */
.celda pre .k { color: var(--azul); }           /* palabra clave */
.celda pre .s { color: var(--ok); }             /* cadena */

.salida {
  padding: 10px 14px;
  border-top: 1px solid var(--linea-suave);
  font-family: var(--f-codigo);
  font-size: calc(.75rem * var(--escala));
  color: var(--texto-2);
  white-space: pre-wrap;
  word-break: break-word;
}
.salida:empty { display: none; }
.salida .ok    { color: var(--ok); }
.salida .mal   { color: var(--costo); }
.salida .dato  { color: var(--texto); }
.salida .frio  { color: var(--aws); }

/* ---- Chat -------------------------------------------------------------- */
.chat {
  display: flex;
  flex-direction: column;
  background: var(--bg-elev);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  overflow: hidden;
  max-width: 720px;
  height: min(46svh, 400px);
}
@media (max-width: 767px) { .chat { height: min(44svh, 360px); } }
:root[data-modo="proyeccion"] .chat { max-width: 860px; height: min(48svh, 520px); }

.chat-cabeza {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--linea-suave);
  font-family: var(--f-titulo);
  font-size: calc(.75rem * var(--escala));
  color: var(--texto-2);
}
.chat-cabeza .vivo {
  width: 8px; height: 8px; border-radius: 99px;
  background: var(--ok);
  animation: latir 2s ease-in-out infinite;
}
@keyframes latir { 50% { opacity: .35; } }

.mensajes {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: calc(.9375rem * var(--escala));
}

.burbuja {
  max-width: 88%;
  padding: 9px 13px;
  border-radius: 14px;
  white-space: pre-wrap;
  word-break: break-word;
}
@media (min-width: 768px) { .burbuja { max-width: 70%; } }

.burbuja.mia {
  align-self: flex-end;
  background: var(--azul);
  color: var(--bg);
  border-bottom-right-radius: 4px;
}
.burbuja.suya {
  align-self: flex-start;
  background: var(--bg-sunken);
  border: 1px solid var(--linea-suave);
  border-bottom-left-radius: 4px;
}
.burbuja.suya.escribiendo { border-color: var(--azul); animation: pulso .8s ease-in-out infinite alternate; }

/* Tres puntos del indicador de escritura */
.pensando { padding: 12px 14px; }
.puntos { display: inline-flex; gap: 4px; }
.puntos i {
  width: 6px; height: 6px; border-radius: 99px;
  background: var(--azul);
  animation: rebote 1.2s ease-in-out infinite;
}
.puntos i:nth-child(2) { animation-delay: .15s; }
.puntos i:nth-child(3) { animation-delay: .3s; }
@keyframes rebote { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
.burbuja.mala { align-self: flex-start; background: rgba(255,87,234,.1); border: 1px solid var(--costo); color: var(--texto); }

/* Los eventos de herramienta son maquinaria, no conversacion: sin burbuja. */
.evento-tool {
  align-self: flex-start;
  font-family: var(--f-codigo);
  font-size: calc(.75rem * var(--escala));
  color: var(--azul);
  padding-left: 2px;
}

.tarjeta-accion {
  align-self: flex-start;
  width: 100%;
  border: 1px solid var(--ok);
  border-radius: var(--r-sm);
  background: rgba(3, 229, 130, .08);
  padding: 11px 14px;
  font-size: calc(.875rem * var(--escala));
}
.tarjeta-accion.espera { border-color: var(--azul); background: var(--azul-tenue); }
.tarjeta-accion .estado {
  font-family: var(--f-titulo);
  font-weight: 700;
  color: var(--ok);
  display: block;
  margin-bottom: 3px;
}
.tarjeta-accion.espera .estado { color: var(--azul); }
.tarjeta-accion .motivo { color: var(--texto-2); font-size: .9em; }

.chat-pie {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--linea-suave);
  background: var(--bg-elev);
}
.chat-pie input {
  flex: 1;
  min-width: 0;
  background: var(--bg-sunken);
  border: 1px solid var(--linea);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  color: var(--texto);
}
.chat-pie input::placeholder { color: var(--texto-2); }
.enviar {
  background: var(--azul);
  color: var(--bg);
  border: 0;
  border-radius: var(--r-sm);
  padding: 0 18px;
  font-weight: 700;
  font-family: var(--f-titulo);
}
.enviar:disabled { opacity: .5; cursor: not-allowed; }

.sugerencias { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.sugerencia {
  background: transparent;
  border: 1px solid var(--linea);
  color: var(--texto-2);
  border-radius: 99px;
  padding: 6px 12px;
  font-size: calc(.8125rem * var(--escala));
  min-height: 36px;
}
.sugerencia:hover { border-color: var(--azul); color: var(--azul); }

/* ---- Selector de modelos ----------------------------------------------- */
.modelos { display: grid; gap: 10px; margin-bottom: 1rem; }
@media (min-width: 768px) { .modelos { grid-template-columns: repeat(3, 1fr); } }

.modelo-op {
  text-align: left;
  background: var(--bg-elev);
  border: 1px solid var(--linea);
  border-radius: var(--r-sm);
  padding: 12px 14px;
}
.modelo-op[aria-pressed="true"] { border-color: var(--modelo); background: rgba(173,92,255,.1); }
.modelo-op .nom { font-family: var(--f-titulo); display: block; margin-bottom: 2px; }
.modelo-op .precio { font-size: .8125rem; color: var(--costo); font-family: var(--f-codigo); }
.modelo-op .lat { font-size: .8125rem; color: var(--texto-2); display: block; margin-top: 4px; }

/* En telefono las tres tarjetas apiladas sacan el acto de la pantalla.
   Se aprietan a una linea cada una. */
@media (max-width: 767px) {
  .modelos { gap: 6px; }
  .modelo-op { padding: 8px 12px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .modelo-op .nom { margin: 0; font-size: .875rem; }
  .modelo-op .precio { font-size: .75rem; }
  .modelo-op .lat { margin: 0; font-size: .75rem; }
}

/* ---- Contadores -------------------------------------------------------- */
.contadores {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin-bottom: 1.2rem;
}
.contador {
  border: 1px solid var(--linea);
  border-radius: var(--r);
  padding: 14px;
  background: var(--bg-elev);
}
/* En telefono los contadores son contexto, no protagonistas: el protagonista
   es el chat. Se encogen para que el input quede sobre el pliegue. */
@media (max-width: 767px) {
  .contadores { gap: 6px; grid-template-columns: repeat(3, 1fr); margin-bottom: .8rem; }
  .contador { padding: 8px 6px; min-width: 0; overflow: hidden; }
  /* El costo lleva 4 decimales ($0.0301) y es el mas ancho de los tres. Se
     encoge con el contenedor en vez de desbordarse fuera de la tarjeta. */
  /* Tres tarjetas en una fila de 360-430px: los numeros se escalan con el
     ancho de pantalla para no salirse. "$0.0369" es el mas ancho (7 caracteres). */
  .contador .valor { font-size: 3.4vw; letter-spacing: -.02em; }
  .contador.dinero .valor { font-size: 3vw; }
  .contador .etiqueta { font-size: .5625rem; letter-spacing: .02em; }
}
/* Telefonos angostos (iPhone SE / mini): los numeros grandes ya no caben en
   tres columnas al tamano anterior. */
@media (max-width: 380px) {
  .contadores { gap: 4px; }
  .contador { padding: 7px 5px; }
  .contador .valor { font-size: 3vw; }
  .contador.dinero .valor { font-size: 2.7vw; }
}
.contador .valor {
  font-family: var(--f-numero);
  font-size: calc(clamp(1.8rem, 5vw, 3rem) * var(--escala));
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  display: block;
  white-space: nowrap;
}
.contador .etiqueta {
  font-family: var(--f-titulo);
  font-size: calc(.6875rem * var(--escala));
  color: var(--texto-2);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.contador.dinero .valor { color: var(--costo); }
.contador.ok .valor { color: var(--ok); }

/* ---- Cierre: QR + chat ------------------------------------------------- */
/* El acto 8 apila mucho (contadores, QR, sugerencias, chat). En una columna no
   cabe en pantalla y el input del chat queda debajo del pliegue, que es justo
   lo que la gente necesita alcanzar. En pantallas anchas van a dos columnas. */
.cierre { display: grid; gap: 20px; }
@media (min-width: 1024px) {
  .cierre { grid-template-columns: minmax(220px, 300px) 1fr; align-items: start; }
}
.cierre-izq { display: flex; flex-direction: column; gap: 10px; }
.cierre-der { min-width: 0; }

.qr {
  background: #fff;
  padding: 10px;
  border-radius: var(--r);
  width: clamp(150px, 32vw, 260px);
}
:root[data-modo="proyeccion"] .qr { width: min(34svh, 340px); }
.qr img, .qr svg { width: 100%; height: auto; display: block; }

.dominio { font-family: var(--f-titulo); margin: 0; font-size: calc(.9375rem * var(--escala)); }

/* En telefono el QR sobra —ya estas en el telefono— y el texto de cierre es
   narracion del presentador. Se quitan para que el input del chat quede sobre
   el pliegue, que es lo unico que la persona necesita alcanzar. */
@media (max-width: 767px) {
  .cierre-izq { display: none; }
}

/* ---- Varios ------------------------------------------------------------ */
.aviso {
  border: 1px solid var(--costo);
  background: rgba(255,87,234,.08);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  font-size: calc(.875rem * var(--escala));
  margin-bottom: 1rem;
}
.aviso.oculto { display: none; }

.tabla-scroll { overflow-x: auto; overscroll-behavior-x: contain; }

.ciclo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 1rem 0; font-family: var(--f-titulo); font-size: calc(.8125rem * var(--escala)); }
.ciclo .paso {
  border: 1px solid var(--linea);
  border-radius: 99px;
  padding: 7px 14px;
  color: var(--texto-2);
  transition: all .25s;
}
.ciclo .paso.on { border-color: var(--azul); color: var(--azul); background: var(--azul-tenue); }
.ciclo .paso.modelo.on { border-color: var(--modelo); color: var(--modelo); background: rgba(173,92,255,.12); }
.ciclo .flecha { color: var(--linea); }

.pie-final { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--linea-suave); color: var(--texto-2); font-size: calc(.875rem * var(--escala)); }

/* ---- Movimiento reducido ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html, main { scroll-behavior: auto !important; }
}