/*
  estilo2026.css -- IP Poetry v3.0
  Hoja de estilos nueva para la carpeta 2026/, separada de la original
  (grafica/rtvn.css e img/ip-poetry.css no se tocan).

  Paleta y tipografia tomadas de ip-poetry.css, el CSS real del sitio:
    - fondo negro (bgcolor #000000 del body original)
    - texto principal #CCCCCC
    - acento amarillo #FFCC66 (.ENTERAmarillo)
    - enlaces #EB4743, hover #968ADB
    - bordes punteados como .bordeTablas

  Nota sobre la tipografia: ip-poetry.css declara @font-face DIN via
  DIN0.eot. El formato .eot es exclusivo de Internet Explorer -- ningun
  navegador moderno (Chrome, Firefox, Safari) lo soporta ni lo soporto
  nunca. En la practica, hace mas de una decada que se esta viendo el
  resto de la pila (Trebuchet MS), no DIN. Por eso se usa directamente
  esa pila aca, sin depender de un archivo que nunca llego a cargar.
  Si aparece el archivo real de DIN (ttf/otf) se puede convertir a woff2
  y agregarlo despues sin tocar el resto de esta hoja.

  El area de los robots (grid, overlay, label-bottom, conectando) usa la
  tipografia Gongora (propia de la pieza) y NO se toca aca.
*/

:root{
  --bg: #000000;
  --texto: #cccccc;
  --amarillo: #ffcc66;
  --link: #eb4743;
  --link-hover: #968adb;
  --borde: #cccccc;
  --muted: #8a8a82;
  --chrome-font: "Trebuchet MS", Trebuchet, Georgia, Verdana, Helvetica, sans-serif;
  --mono: "Courier New", ui-monospace, Consolas, monospace;
  --pieza: 'Gongora', "Courier New", ui-monospace, monospace;
}

*{ box-sizing: border-box; }

html, body{
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--texto);
  font-family: var(--chrome-font);
  height: 100%;
}
html{ height: 100%; }
body{
  min-height: 100vh;
  display: flex; flex-direction: column;
}

a{ color: var(--link); text-decoration: none; }
a:hover{ color: var(--link-hover); text-decoration: underline; }

.topbar{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--bg);
  border-bottom: 1px dashed var(--borde);
  flex: 0 0 auto;
}
.topbar-left{
  display: flex; align-items: center; gap: 14px;
  justify-content: flex-start;
  min-width: 0;
  overflow: hidden;
}
.topbar-center{
  display: flex; align-items: center; gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  min-width: 0;
}
.topbar-right{
  display: flex; align-items: center;
  justify-content: flex-end;
  min-width: 0;
}
.topbar h1{
  font-size: clamp(15px, 2.6vw, 24px);
  font-weight: bold; letter-spacing: -0.02em;
  margin: 0; color: var(--texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar h1 .version{ color: var(--amarillo); font-size: 0.65em; font-weight: bold; }

.topbar .volver{ font-size: clamp(12px, 1.6vw, 14px); font-weight: bold; white-space: nowrap; flex: 0 0 auto; }

@media (max-width: 720px){
  .topbar{
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .topbar-left, .topbar-center, .topbar-right{
    justify-content: center;
  }
}

#poemaSelect{
  font-family: var(--chrome-font);
  font-size: 14px; font-weight: bold;
  background: #1f32ff; color: #00ff33;
 /* border: none; */
  padding: 10px 12px;
  width: min(30vw, 480px);
  min-width: 220px;
}

.playbtn{
  font-family: var(--chrome-font); font-weight: bold; font-size: 14px;
  background: #1f32ff; color: #00ff33; 
 /* border: none; */
  padding: 10px 20px; cursor: pointer;
}
.playbtn:disabled{ background: #333; color: #777; cursor: default; }

.fsbtn{
  font-family: var(--chrome-font); font-size: 14px;
  background: #1f32ff; color: #00ff33;
 /* border: none; */
  padding: 8px 14px; cursor: pointer; line-height: 1;
}
.fsbtn:hover{ filter: brightness(1.2); }

/* --- area de los robots: sin cambios de paleta, se deja como esta --- */
.stage{
  background:#000; padding:2px; position:relative; max-width:980px; margin:0 auto;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex; align-items: center; justify-content: center;
}
.grid{
  display:grid; grid-template-columns:1fr 1fr; gap:2px;
}

@media (max-width:640px){
  /* se mantiene el 2x2 siempre -- la imagen achica, pero nunca hay que scrollear */
  .overlay-top{ font-size: 20px; }
  .label-bottom{ font-size: 18px; }
  .conectando{ font-size: 20px; }
}

.tile{ position:relative; aspect-ratio: 4/3; background:#000; overflow:hidden; border:1px solid #000; }
.tile img{ width:100%; height:100%; object-fit:cover; display:block; }
.overlay-top{
  position:absolute; top:0; left:0; right:0; padding:8px 10px;
  font-family: var(--pieza); font-size:17px; color:#fff; text-transform:uppercase; letter-spacing:.02em;
  background: linear-gradient(rgba(0,0,0,.55), transparent);
  line-height:1.3; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.label-bottom{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  width:65%; text-align:center;
  background:#000; color:#fff; font-family: var(--pieza); font-size:16px; text-transform:uppercase;
  padding:6px 10px; letter-spacing:.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.conectando{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:60%; aspect-ratio: 4 / 3; background:#000; z-index:10;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--pieza); font-weight:700; font-size:26px; color:#fff;
  letter-spacing:.08em; text-transform:uppercase; text-align:center;
}
.conectando.oculto{ visibility:hidden; }

/* --- pantalla completa: dejar que la escena aproveche mas ancho --- */
:fullscreen .grid,
:-webkit-full-screen .grid{
  max-width: 1400px; margin: 0 auto;
}

/* --- header en pantallas medianas (celulares apaisados, tablets chicas):
   el centro (select+boton) no debe pedir tanto espacio que empuje el
   titulo de la izquierda fuera de vista --- */
@media (min-width: 721px) and (max-width: 960px){
  .topbar{ gap: 8px; padding: 10px 12px; }
  .topbar-left{ gap: 8px; }
  .topbar-center{ gap: 8px; }
  #poemaSelect{ width: 28vw; min-width: 130px; padding: 8px 8px; }
  .playbtn{ padding: 8px 12px; }
}