/* Botones de Javi 2.0 (24/10/2026, orden de Nerio) — va DESPUÉS de piel_plata/tema_clasico/temas_extra.
   1. «Salir» siempre como ícono (en 431–480 px se veía «Sa» cortado), ↻ oculto (el logo refresca), logo que gira, globito.
   2. Fila de abajo repartida a lo ancho (antes quedaba pegada a la izquierda con un hueco).
   3. Cuatro diseños de botones (html[data-botones]): redondo (el de siempre, sin atributo), cuadrado_nombre, cuadrado, compacto.
      El color lo da el tema (Actual, Clásico, 6 paletas): estos estilos solo cambian forma, tamaño y nombre.
   4. Panel «Colores y diseño»: flecha ‹ Javi, secciones y vista previa de los diseños. */

/* ---------- 1. cabecera ---------- */
header#cab #brecargar { display: none !important; }
header#cab #insignia { cursor: pointer; -webkit-tap-highlight-color: transparent; }
header#cab #insignia.gira { animation: javi-gira .4s ease-in-out; }
@keyframes javi-gira { to { transform: rotate(360deg); } }
.globo-refresca { position: fixed; z-index: 9000; max-width: 72vw; padding: 8px 12px; border-radius: 12px; font: 600 12px/1.25 var(--f-texto, system-ui); background: #fff; color: #111; box-shadow: 0 4px 16px rgba(0,0,0,.5); transition: opacity .5s; pointer-events: none; }
.globo-refresca::before { content: ""; position: absolute; top: -5px; left: 18px; width: 10px; height: 10px; background: #fff; transform: rotate(45deg); }
.globo-refresca.fuera { opacity: 0; }
@media (max-width: 480px) { header#cab .quien .sub .extra { display: none; } }
@media (max-width: 600px) {
  header#cab .btn-cab.texto { padding: 0 !important; font-size: 0 !important; letter-spacing: 0 !important; position: relative; }
  header#cab .btn-cab.texto::before { content: ""; position: absolute; inset: 0; margin: auto; width: 54%; height: 54%; background: #000;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 2h2v10h-2zM6.4 5.6l1.4 1.4a7 7 0 1 0 8.4 0l1.4-1.4a9 9 0 1 1-11.2 0z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 2h2v10h-2zM6.4 5.6l1.4 1.4a7 7 0 1 0 8.4 0l1.4-1.4a9 9 0 1 1-11.2 0z'/%3E%3C/svg%3E") center / contain no-repeat; }
  /* con ↻ fuera cabe más: botones un poco más grandes (hasta 34) y el estado no se corta */
  header#cab .btn-cab, header#cab .btn-cab:not(.texto), header#cab .btn-cab.texto { width: clamp(30px, 8vw, 36px) !important; height: clamp(30px, 8vw, 36px) !important; }
  header#cab .quien { flex: 1 1 0; min-width: 0; }
}

/* ---------- 2. fila de abajo ordenada ---------- */
form#f .fila-botones { justify-content: space-between; gap: 6px; flex-wrap: nowrap; }
form#f .fila-botones > button:not(.gpt5) { flex: 0 0 auto; }
form#f .fila-botones > button.gpt5 { flex: 0 1 auto; min-width: 0; }
form#f .fila-botones #menu-adjuntar { position: absolute; }

/* ---------- 3. diseños ---------- */
/* nombre debajo del ícono (solo cuadrado_nombre): el ícono sube y el nombre se escribe con el atributo data-nombre */
html[data-botones="cuadrado_nombre"] header#cab .btn-cab::after, html[data-botones="cuadrado_nombre"] form#f .fila-botones > button::after {
  content: attr(data-nombre); position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; font: 700 9px/1 var(--f-texto, system-ui); letter-spacing: .1px; color: inherit; -webkit-text-fill-color: currentColor; text-shadow: none; white-space: nowrap; overflow: hidden; text-overflow: clip; }

/* 3a. cuadrados con nombre (como los del casino): la cabecera pasa a dos filas — arriba logo y estado, abajo los botones repartidos */
html[data-botones="cuadrado_nombre"] header#cab { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px 4px !important; padding-bottom: 8px !important; align-items: center; }
html[data-botones="cuadrado_nombre"] header#cab .insignia { grid-column: 1; justify-self: start; }
html[data-botones="cuadrado_nombre"] header#cab .quien { grid-column: 2 / -1; min-width: 0; }
html[data-botones="cuadrado_nombre"] header#cab .btn-cab, html[data-botones="cuadrado_nombre"] header#cab .btn-cab:not(.texto), html[data-botones="cuadrado_nombre"] header#cab .btn-cab.texto {
  position: relative; width: 100% !important; min-width: 0 !important; height: 50px !important; border-radius: 12px !important; padding: 0 !important; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 6px !important; box-sizing: border-box; line-height: 1; }
html[data-botones="cuadrado_nombre"] header#cab .btn-cab.texto { font-size: 0 !important; }
html[data-botones="cuadrado_nombre"] header#cab #bident img { width: 22px !important; height: 22px !important; margin: 0 !important; }
html[data-botones="cuadrado_nombre"] header#cab .btn-cab::before, html[data-botones="cuadrado_nombre"] header#cab .btn-cab.texto::before { inset: 7px 0 auto 0 !important; width: 22px !important; height: 22px !important; margin: 0 auto !important; }
html[data-botones="cuadrado_nombre"] form#f .fila-botones { gap: 6px; }
html[data-botones="cuadrado_nombre"] form#f .fila-botones > button { position: relative; flex: 1 1 0 !important; width: auto !important; max-width: 76px; min-width: 0 !important; height: 54px !important; border-radius: 12px !important; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 7px 0 0 !important; font-size: 18px; line-height: 1; overflow: hidden; box-sizing: border-box; }
html[data-botones="cuadrado_nombre"] form#f .fila-botones > button::before { inset: 7px 0 auto 0 !important; width: 24px !important; height: 24px !important; margin: 0 auto !important; }
html[data-botones="cuadrado_nombre"] form#f .fila-botones > button.gpt5 { font-size: 0 !important; }
html[data-botones="cuadrado_nombre"] form#f .fila-botones > button.gpt5 .emo { font-size: 18px; }
html[data-botones="cuadrado_nombre"] form#f .fila-botones > button.letra { font-size: 20px; }
html[data-botones="cuadrado_nombre"] form#f .fila-escribir button[type=submit] { border-radius: 14px !important; }

/* 3b. cuadrados sin nombre: solo el ícono, esquinas redondeadas */
html[data-botones="cuadrado"] header#cab .btn-cab, html[data-botones="cuadrado"] header#cab .btn-cab:not(.texto), html[data-botones="cuadrado"] header#cab .btn-cab.texto { border-radius: 10px !important; width: clamp(30px, 8vw, 36px) !important; height: clamp(30px, 8vw, 36px) !important; }
html[data-botones="cuadrado"] form#f .fila-botones > button { border-radius: 12px !important; width: 46px; height: 46px; }
html[data-botones="cuadrado"] form#f .fila-botones > button.gpt5 { width: auto; }
html[data-botones="cuadrado"] form#f .fila-escribir button[type=submit] { border-radius: 13px !important; }

/* 3c. compacto: todo más chico y pegado, para ver más chat */
html[data-botones="compacto"] header#cab { gap: 2px !important; padding-top: 4px !important; padding-bottom: 4px !important; }
html[data-botones="compacto"] header#cab .insignia { width: 34px !important; height: 34px !important; }
html[data-botones="compacto"] header#cab .btn-cab, html[data-botones="compacto"] header#cab .btn-cab:not(.texto), html[data-botones="compacto"] header#cab .btn-cab.texto { width: 26px !important; height: 26px !important; border-radius: 8px !important; }
html[data-botones="compacto"] form#f .fila-botones { gap: 4px; justify-content: flex-start; }
html[data-botones="compacto"] form#f .fila-botones > button { width: 34px !important; height: 34px !important; border-radius: 9px !important; font-size: 14px !important; }
html[data-botones="compacto"] form#f .fila-botones > button.gpt5 { width: auto !important; padding: 0 9px; font-size: 11px !important; }
html[data-botones="compacto"] form#f .fila-escribir button[type=submit] { width: 36px !important; height: 36px !important; border-radius: 10px !important; }

/* ---------- 4. panel «Colores y diseño» ---------- */
#tema-panel .tp-cab2 { gap: 8px; }
#tema-panel .tp-cab2 h3 { flex: 1; text-align: center; font-size: 15px; }
#tema-panel .tp-atras { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 12px 0 8px; border-radius: 999px; border: 1px solid rgba(200,205,214,.4); background: rgba(255,255,255,.08) !important; color: #fff !important; -webkit-text-fill-color: #fff; font: 700 14px var(--f-texto, system-ui); box-shadow: none !important; }
#tema-panel .tp-atras span { font-size: 24px; line-height: 1; margin-top: -3px; }
#tema-panel .tp-sec { margin: 14px 2px 8px; font: 700 12px var(--f-titulo, system-ui); letter-spacing: 1.5px; text-transform: uppercase; color: #b9bec8; }
#tema-panel .tp-bd { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 14px; border: 2px solid rgba(200,205,214,.25); background: rgba(255,255,255,.04) !important; color: #fff !important; -webkit-text-fill-color: #fff; text-align: left; box-shadow: none !important; font: 600 14px var(--f-texto, system-ui); }
#tema-panel .tp-bd.on { border-color: #fff; background: rgba(255,255,255,.12) !important; }
#tema-panel .tp-bv { display: flex; gap: 6px; justify-content: center; align-items: center; height: 64px; border-radius: 10px; background: #0b0b0d; border: 1px solid rgba(200,205,214,.25); }
#tema-panel .tp-bb { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(180deg, #f4f6f9, #aeb4be); color: #000; font-style: normal; }
#tema-panel .tp-bb em { font-style: normal; font-size: 15px; line-height: 1; color: #000; }
#tema-panel .tp-bb u { text-decoration: none; font: 700 8px/1 system-ui; margin-top: 2px; }
#tema-panel .tp-bv-cuadrado_nombre .tp-bb { width: 40px; height: 44px; border-radius: 9px; }
#tema-panel .tp-bv-cuadrado .tp-bb { border-radius: 8px; }
#tema-panel .tp-bv-compacto .tp-bb { width: 22px; height: 22px; border-radius: 6px; }
#tema-panel .tp-bv-compacto .tp-bb em { font-size: 11px; }
#tema-panel .tp-bv-compacto { gap: 3px; }