/* Estilos de bin/letra.php — sitio 5toB (se carga después de mostrar.css, que aporta el menú lateral) */

:root { --azul:#0b3d91; --azul-suave:#4a6aa5; --verde:#4e8a1f; --fs:1.45rem; --alto:78px; }
* { box-sizing:border-box; }
html, body { margin:0; }
body { font-family:"Segoe UI","Trebuchet MS",Roboto,Arial,sans-serif; color:var(--azul); min-height:100vh;
       background:#eef5df url('../imagenes/Fondo.png') center/cover fixed; }

/* ---------- Franja superior con el título ---------- */
header { position:sticky; top:0; z-index:5; min-height:var(--alto); margin-left:var(--menu);
         display:flex; align-items:center; gap:1rem; padding:.5rem clamp(.8rem, 2vw, 1.6rem);
         background:linear-gradient(90deg, #2f5e10 0%, #3f7a17 60%, #6aa52b 100%);
         color:#fff; box-shadow:0 3px 14px rgba(0,0,0,.25); }
.tit { flex:1; min-width:0; }
.tit small { display:block; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; opacity:.85; }
.tit h1 { margin:0; font-size:clamp(1.6rem, 3.4vw, 2.6rem); line-height:1.1; font-weight:800;
          text-shadow:0 2px 8px rgba(0,0,0,.3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.controles { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.4rem; flex:none; }
.controles button, .controles a { font:inherit; font-size:.95rem; cursor:pointer; border:0; border-radius:8px;
           padding:.45rem .75rem; background:rgba(255,255,255,.16); color:#fff; text-decoration:none; white-space:nowrap; }
.controles button:hover, .controles a:hover { background:rgba(255,255,255,.32); }

/* ---------- Estrofas: tantas columnas como quepan ---------- */
main { margin-left:var(--menu); padding:1.2rem clamp(.8rem, 2vw, 1.6rem); }
.estrofas { columns:17rem; column-gap:1.2rem; }
.estrofa { break-inside:avoid; margin:0 0 1.2rem; padding:.85rem 1.1rem;
           background:rgba(255,255,255,.95); border-left:6px solid var(--verde); border-radius:10px;
           box-shadow:0 3px 12px rgba(0,0,0,.1);
           font-size:var(--fs); line-height:1.5; font-weight:500; white-space:pre-line; }
.estrofa:nth-child(even) { border-left-color:#8bc34a; }

/* Celular: el menú lateral se abre con el botón ☰ (definido en mostrar.css) */
@media (max-width:760px) {
  header { flex-wrap:wrap; padding-left:3.8rem; }
  .tit h1 { white-space:normal; }
  .controles { width:100%; justify-content:flex-start; }
}