/* ═══════════════════════════════════════════════════
   GESTUALFABETO — estilos.css
   Todas las variables al principio para ajuste rápido.
═══════════════════════════════════════════════════ */

/* ── VARIABLES ──────────────────────────────────────
   Modificar aquí para cambiar la apariencia global.
─────────────────────────────────────────────────── */
:root {
  /* Tipografía */
  --fuente:           'JetBrains Mono', 'Courier New', monospace;
  --tam-base:         0.875rem;
  --tam-s:            0.795rem;
  --tam-l:            0.985rem;
  /* Tipografía móvil (≤ 540px) — editar aquí para ajustar tamaño en móvil */
  --tam-base-movil:   0.625rem;   /* 0.875 - 0.25  (≈ 4pt menos) */
  --tam-s-movil:      0.545rem;   /* 0.795 - 0.25  */
  --tam-l-movil:      0.735rem;   /* 0.985 - 0.25  */
  --peso-normal:      400;
  --peso-medio:       500;
  --peso-fuerte:      700;

  /* Colores — modo claro */
  --fondo:            #f3f2f0;
  --superficie:       #e8e7e4;
  --tecla-frente:     #eceae7;
  --tecla-lado:       #ccc9c4;
  --texto:            #1a1917;
  --subtexto:         #8a8680;
  --borde:            #cac7c2;
  --acento:           #1a1917;
  --peligro:          #c0392b;

  /* ── Botones (teclas) ────────────────────────────
     Ajustar radio-btn, alto-btn y sombras aquí.   */
  --radio-btn:        3px;
  --alto-btn:         28px;   /* altura unificada de todos los botones */
  --sombra-btn:       0 3px 0 var(--tecla-lado), 0 4px 10px rgba(0,0,0,.12);
  --sombra-btn-pres:  0 1px 0 var(--tecla-lado), 0 1px 4px rgba(0,0,0,.10);

  /* ── Cajas semánticas ────────────────────────────
     Ajustar radio-caja y sombras de cajas aquí.   */
  --radio-caja:       3px;
  --sombra-caja:      0 3px 0 var(--tecla-lado), 0 4px 10px rgba(0,0,0,.12);
  --sombra-caja-pres: 0 1px 0 var(--tecla-lado), 0 1px 4px rgba(0,0,0,.10);

  /* ── Pestañas de grupo ───────────────────────────
     radio-tab: esquinas superiores redondeadas.   */
  --radio-tab:        5px;

  /* Miscelánea */
  --radio:            3px;   /* fallback / modales */
  --pad-lateral:      .8rem; /* padding lateral unificado — barra sup, admin-wrap, barra-guardar */
  --circulo-toggle:   var(--tecla-frente); /* color del círculo del toggle */
  --trans:            .11s ease;
  --alto-barra:       40px;  /* altura de tabs y barra-inf */
  --alto-barra-sup:   var(--alto-barra); /* altura de la barra superior — editar aquí para cambiarla */
  --gap-ranuras:      5px;
}

/* Modo oscuro — grises oscuros cálidos, sin negro puro */
[data-tema=oscuro] {
  --fondo:            #1e1d1b;
  --superficie:       #2e2d2a;   /* +8 vs fondo: hover de botones */
  --tecla-frente:     #3d3c38;   /* +19 vs fondo: botones claramente visibles */
  --tecla-lado:       #141412;
  --texto:            #f0ede6;   /* más brillante: mejor legibilidad en botones */
  --subtexto:         #686560;
  --borde:            #3a3936;
  --acento:           #f0ede6;   /* acento sigue al texto */
  --sombra-btn:       none;
  --sombra-btn-pres:  none;
  --sombra-caja:      none;
  --sombra-caja-pres: none;
  --circulo-toggle:   var(--texto); /* círculo claro sobre track siempre activo */
}

/* ── RESET ──────────────────────────────────────────*/
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body               { height: 100%; overflow: hidden; }
body {
  font-family:    var(--fuente);
  font-size:      var(--tam-base);
  background:     var(--fondo);
  color:          var(--texto);
  transition:     background .22s, color .22s;
  height:         100dvh;
  display:        flex;
  flex-direction: column;
}

/* ═══════════════════════════════════════════════════
   COMPONENTES REUTILIZABLES
═══════════════════════════════════════════════════ */

/* ── Botón tecla ────────────────────────────────────*/
.tecla {
  font-family:     var(--fuente);
  font-size:       var(--tam-base);
  font-weight:     var(--peso-medio);
  letter-spacing:  .05em;
  text-transform:  uppercase;
  color:           var(--texto);
  background:      var(--tecla-frente);
  border:          1px solid var(--borde);
  border-radius:   var(--radio-btn);
  padding:         0 .65rem;
  height:          var(--alto-btn);
  box-shadow:      var(--sombra-btn);
  cursor:          pointer;
  user-select:     none;
  white-space:     nowrap;
  line-height:     1;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             .28rem;
  transition:      box-shadow var(--trans), transform var(--trans),
                   background var(--trans), color var(--trans), opacity var(--trans);
}
.tecla:hover             { background: var(--superficie); }
.tecla.presada           { box-shadow: var(--sombra-btn-pres); transform: translateY(2px); }
.tecla:disabled          { opacity: .22; cursor: default; pointer-events: none; }
.tecla.acento            {
  background: var(--acento); color: var(--fondo); border-color: var(--acento);
  box-shadow: var(--sombra-btn);
}
.tecla.acento:hover      { opacity: .86; }
.tecla.peligro           { color: var(--peligro); }

/* ── Título de sección ──────────────────────────────*/
.seccion-titulo {
  font-size:      var(--tam-s);
  font-weight:    var(--peso-fuerte);
  letter-spacing: .1em;
  color:          var(--subtexto);
  margin-bottom:  .5rem;
  text-transform: uppercase;
}

/* ── Toggle con etiquetas ───────────────────────────*/
.toggle-etiquetas {
  display:     flex;
  align-items: center;
  gap:         .35rem;
  cursor:      pointer;
  user-select: none;
}
.etq {
  font-size:      var(--tam-s);
  font-weight:    var(--peso-normal);
  letter-spacing: .06em;
  text-transform: uppercase;
  color:          var(--subtexto);
  transition:     color var(--trans), font-weight var(--trans);
  white-space:    nowrap;
  line-height:    1;
  padding-top:    .15em;   /* compensa descender de tipografía monospace */
}
.etq.activa { color: var(--texto); font-weight: var(--peso-fuerte); }
.toggle-visual {
  width:        34px;
  height:       17px;
  background:   var(--subtexto);
  border-radius: 8.5px;
  position:     relative;
  border:       1px solid var(--subtexto);
  flex-shrink:  0;
}
.toggle-circulo {
  position:     absolute;
  top: 2px; left: 2px;
  width: 11px; height: 11px;
  background:   var(--circulo-toggle);
  border-radius: 50%;
  transition:   transform .2s;
  box-shadow:   0 1px 3px rgba(0,0,0,.2);
}
.toggle-visual.encendido .toggle-circulo { transform: translateX(17px); }

/* ── Toggle de forma (iconos en vez de etiquetas) ───*/
.forma-toggle {
  display:     flex;
  align-items: center;
  gap:         .5rem;
  cursor:      pointer;
  user-select: none;
  margin-top:  .1rem;
}
.forma-icono {
  color:       var(--subtexto);
  transition:  color var(--trans);
  display:     flex;
  align-items: center;
}
.forma-icono.activo { color: var(--texto); }

/* ═══════════════════════════════════════════════════
   LAYOUT PRINCIPAL
═══════════════════════════════════════════════════ */

/* ── Barra superior ─────────────────────────────────*/
.barra-sup-izq {
  display:     flex;
  align-items: center;
}
.barra-sup-der {
  display:       flex;
  align-items:   center;
  gap:           .7rem;
  padding-right: var(--pad-lateral);
}
.titulo-app {
  user-select: none;
  flex-shrink: 0;
}
/* Cuando es <span> (texto fallback) */
.titulo-app-txt {
  font-size:      var(--tam-base);
  font-weight:    var(--peso-fuerte);
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          var(--texto);
  padding-left:   var(--pad-lateral);
}
/* Cuando es <img> (logo GIF) — ocupa toda la altura, sin padding */
img.titulo-app {
  height:     var(--alto-barra-sup);
  width:      auto;
  display:    block;
  object-fit: contain;
}
.barra-sup {
  height:          var(--alto-barra-sup);
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  border-bottom:   1px solid var(--borde);
  padding:         0;
}

.area-principal {
  flex:           1;
  display:        flex;
  flex-direction: column;
  min-height:     0;
  overflow:       hidden;
}

/* ── Sección frase 38% ──────────────────────────────*/
.seccion-frase {
  flex:            38;
  min-height:      0;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  padding:         .4rem .8rem .2rem;
  gap:             .3rem;
  overflow:        hidden;
  position:        relative;
}
.contador {
  font-size:      var(--tam-s);
  color:          var(--subtexto);
  letter-spacing: .07em;
  position:       absolute;
  top:            .35rem;
  right:          .8rem;
}
.contador.lleno { color: var(--peligro); }

/* Contenedor de la pista — centra el grupo lleno */
.contenedor-frase {
  flex:            1;
  min-height:      0;
  width:           100%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  position:        relative;
  overflow:        hidden;
}
/* Grupo de ranuras llenas */
.pista-llena {
  display:     flex;
  align-items: flex-end;
  gap:         var(--gap-ranuras);
  flex-shrink: 0;
}
/* Ranura individual */
.ranura {
  flex-shrink:    0;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            3px;
}
/* Cuerpo de ranura */
.cuerpo-ranura {
  display:         flex;
  align-items:     center;
  justify-content: center;
  position:        relative;
  overflow:        hidden;
}
.cuerpo-ranura img,
.cuerpo-ranura video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* ── Base compartida: botón × en esquina ────────────
   Usada por .quitar-ranura (frase) y .tarjeta-x (admin).
   Cada clase solo declara sus diferencias de tamaño
   y los selectores de contexto propios.             */
.btn-x-esquina {
  position:        absolute;
  background:      rgba(0,0,0,.45);
  border-radius:   2px;
  border:          none;
  padding:         0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--fuente);
  font-weight:     700;
  color:           rgba(255,255,255,.75);
  opacity:         0;
  transition:      opacity .14s, background .11s;
  cursor:          pointer;
  line-height:     1;
}
.btn-x-esquina:hover {
  background: rgba(185,0,0,.9);
  color:      #fff;
  opacity:    1 !important;
}

/* .quitar-ranura — X en ranura de la frase */
.quitar-ranura {
  top:       2px;
  right:     2px;
  width:     16px;
  height:    16px;
  font-size: .7rem;
  z-index:   3;
}
.ranura.llena:hover .quitar-ranura { opacity: 1; }
.ranura.llena:has(.quitar-ranura:hover) .cuerpo-ranura {
  background:     rgba(185,0,0,.25);
  outline:        2px solid rgba(185,0,0,.7);
  outline-offset: -2px;
}
.linea-ranura {
  width:      100%;
  height:     2px;
  background: var(--borde);
  transition: background .22s;
}
/* Botón aspect ratio dentro de la ranura en la línea de frase */
.ranura-btn-ancho {
  position:        absolute;
  bottom:          2px;
  left:            2px;
  width:           14px;
  height:          14px;
  background:      rgba(0,0,0,.4);
  border-radius:   2px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       .52rem;
  color:           rgba(255,255,255,.8);
  opacity:         0;
  transition:      opacity .14s, background .11s;
  cursor:          pointer;
  z-index:         3;
  line-height:     1;
}
.ranura.llena:hover .ranura-btn-ancho { opacity: 1; }
.ranura-btn-ancho:hover {
  background: rgba(0,0,0,.75);
  color:      #fff;
  opacity:    1 !important;
}
/* Botón reflejar dentro de la ranura en la línea de frase */
.ranura-btn-flip {
  position:        absolute;
  bottom:          2px;
  right:           2px;
  width:           14px;
  height:          14px;
  background:      rgba(0,0,0,.4);
  border-radius:   2px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       .52rem;
  color:           rgba(255,255,255,.8);
  opacity:         0;
  transition:      opacity .14s, background .11s;
  cursor:          pointer;
  z-index:         3;
  line-height:     1;
}
.ranura.llena:hover .ranura-btn-flip { opacity: 1; }
.ranura-btn-flip:hover { background: rgba(0,0,0,.75); color: #fff; opacity: 1 !important; }
.ranura-btn-flip.activo { background: var(--acento); color: #fff; opacity: 1; }
.ranura.llena .linea-ranura { background: var(--acento); }
/* Drag-to-reorder de ranuras */
.ranura.llena            { cursor: grab; }
.ranura.llena:active     { cursor: grabbing; }
.ranura.arrastrando      { opacity: .35; }
.ranura.drop-sobre .linea-ranura {
  background: var(--acento);
  box-shadow: 0 0 0 2px var(--acento);
}
.ranura.drop-sobre .cuerpo-ranura {
  outline:        2px solid var(--acento);
  outline-offset: -2px;
}
/* Ranura pendiente */
.ranura-pendiente {
  position:       absolute;
  opacity:        .32;
  pointer-events: none;
}

/* ── Sección teclado 62% ────────────────────────────*/
.seccion-teclado {
  flex:           62;
  min-height:     0;
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
}

/* ── Pestañas de grupo ──────────────────────────────*/
.tabs-grupo {
  display:          flex;
  flex-shrink:      0;
  align-items:      flex-end;
  height:           var(--alto-barra);
  background:       var(--fondo);
  overflow-x:       auto;
  scrollbar-width:  none;
  padding:          0 .3rem;
  gap:              2px;
  position:         relative;  /* para el ::after */
}
.tabs-grupo::-webkit-scrollbar { display: none; }
/* Línea inferior simulada con ::after — así la pestaña activa (z-index:1)
   queda POR ENCIMA de la línea y la tapa con su border-bottom */
.tabs-grupo::after {
  content:    '';
  position:   absolute;
  bottom:     0; left: 0; right: 0;
  height:     1px;
  background: var(--borde);
  z-index:    0;
}

.tab-btn {
  flex:            1;
  min-width:       0;
  font-family:     var(--fuente);
  font-size:       clamp(0.5rem, 1.9vw, var(--tam-base));
  font-weight:     var(--peso-medio);
  letter-spacing:  clamp(0em, 0.3vw, .05em);
  text-transform:  uppercase;
  color:           var(--subtexto);
  background:      var(--superficie);

  /* Borde completo en inactiva */
  border:          1px solid var(--borde);
  border-radius:   0 0 0 0;          /* sin redondeo en inactiva */

  /* Altura menor que la barra: pestaña hundida (= tecla presada) */
  height:          calc(var(--alto-barra) - 8px);
  padding:         0 .3rem;
  box-shadow:      inset 0 -2px 5px rgba(0,0,0,.07);

  cursor:          pointer;
  overflow:        hidden;
  text-overflow:   ellipsis;
  white-space:     nowrap;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  user-select:     none;
  transition:      color var(--trans), background var(--trans),
                   box-shadow var(--trans), height var(--trans);
}
.tab-btn:hover {
  color:      var(--texto);
  background: var(--tecla-frente);
  box-shadow: inset 0 -1px 3px rgba(0,0,0,.04);
}
/* Activa: borde completo, border-bottom del color del fondo tapa la línea
   horizontal del contenedor gracias al margin-bottom: -1px            */
.tab-btn.activo {
  color:        var(--texto);
  font-weight:  var(--peso-fuerte);
  background:   var(--fondo);

  border:          1px solid var(--borde);
  border-bottom:   2px solid var(--fondo);  /* tapa la línea ::after del padre */
  border-radius:   var(--radio-tab) var(--radio-tab) 0 0;

  height:          100%;
  padding-top:     8px;   /* compensa la diferencia de altura con las inactivas */
  margin-bottom:   0;
  box-shadow:      none;
  position:        relative;
  z-index:         1;
}

/* ── Botón reflejar (flip 3D) ───────────────────────*/
.btn-reflejar {
  position:        absolute;
  top:             3px;
  right:           3px;
  width:           16px;
  height:          16px;
  border-radius:   1px;
  border:          1px solid var(--borde);
  background:      var(--superficie);
  color:           var(--subtexto);
  font-family:     var(--fuente);
  font-size:       .745rem;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  opacity:         0;
  transition:      opacity .13s, background .11s, color .11s;
  z-index:         2;
  line-height:     1;
  padding:         0;
}
.caja-semantica:hover .btn-reflejar { opacity: 1; }
.btn-reflejar:hover { background: var(--tecla-frente); color: var(--texto); }
.caja-semantica.reflejada .btn-reflejar {
  opacity:      1;
  background:   var(--acento);
  color:        var(--fondo);
  border-color: var(--acento);
}
.caja-semantica.reflejada .medio-caja { transform: scaleX(-1); }

.scroll-teclado {
  flex:            1;
  overflow-y:      auto;
  padding:         .4rem .35rem 0;
  scrollbar-width: thin;
  scrollbar-color: var(--borde) transparent;
}
.scroll-teclado::-webkit-scrollbar       { width: 3px; }
.scroll-teclado::-webkit-scrollbar-thumb { background: var(--borde); }

/* Cuadrícula de cajas */
.cuadricula-teclas {
  display:               grid;
  gap:                   4px;
  grid-auto-flow:        dense;
  grid-template-columns: repeat(5, 1fr);
  padding-bottom:        .35rem;
}
@media (min-width: 600px)  { .cuadricula-teclas { grid-template-columns: repeat(7, 1fr); } }
@media (min-width: 960px)  { .cuadricula-teclas { grid-template-columns: repeat(9, 1fr); } }

/* ── Caja semántica ─────────────────────────────────*/
.caja-semantica {
  aspect-ratio:    1;
  background:      var(--tecla-frente);
  border:          1px solid var(--borde);
  border-radius:   var(--radio-caja);
  box-shadow:      var(--sombra-caja);
  display:         flex;
  align-items:     stretch;
  justify-content: stretch;
  cursor:          pointer;
  position:        relative;
  overflow:        hidden;
  transition:      box-shadow var(--trans), transform var(--trans),
                   background var(--trans), opacity var(--trans);
  user-select:     none;
  -webkit-tap-highlight-color: transparent;
  padding:         0;
}
.caja-semantica.ancha    { aspect-ratio: 2; grid-column: span 2; }
.caja-semantica:hover    { background: var(--superficie); }
.caja-semantica.presada  { box-shadow: var(--sombra-caja-pres); transform: translateY(2px); }
.caja-semantica.bloqueada { opacity: .2; pointer-events: none; }

/* Cuadrícula: spinner global mientras se obtiene la lista del servidor */
.cajas-semanticas.cargando-inicial {
  display:         flex;
  align-items:     center;
  justify-content: center;
}
.cajas-semanticas.cargando-inicial::before {
  content:       '';
  width:         32px;
  height:        32px;
  border-radius: 50%;
  border:        2px solid var(--borde);
  border-top-color: var(--subtexto);
  animation:     girar .7s linear infinite;
}

/* Estado de carga: spinner centrado, imagen aún invisible */
.caja-semantica.cargando .medio-caja img,
.caja-semantica.cargando .medio-caja video { opacity: 0; }
.caja-semantica.cargando::after {
  content:       '';
  position:      absolute;
  inset:         0;
  margin:        auto;
  width:         22px;
  height:        22px;
  border-radius: 50%;
  border:        2px solid var(--borde);
  border-top-color: var(--subtexto);
  animation:     girar .7s linear infinite;
  pointer-events: none;
}

/* Medio: llena toda la caja */
.medio-caja {
  width:           100%;
  height:          100%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  overflow:        hidden;
}
.medio-caja img,
.medio-caja video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Pista de tecla (solo escritorio) */
.pista-tecla {
  position:       absolute;
  top:            3px;
  left:           4px;
  font-size:      .545rem;
  color:          var(--subtexto);
  opacity:        .28;
  pointer-events: none;
  line-height:    1;
}

/* Controles de caja de usuario */
.controles-caja {
  position:       absolute;
  top:            0;
  right:          0;
  display:        flex;
  flex-direction: column;
  gap:            2px;
  padding:        3px;
  opacity:        0;
  transition:     opacity .13s;
}
.caja-semantica:hover .controles-caja { opacity: 1; }
.btn-control-caja {
  width:           16px;
  height:          16px;
  border-radius:   1px;
  border:          1px solid var(--borde);
  background:      var(--superficie);
  color:           var(--subtexto);
  font-family:     var(--fuente);
  font-size:       .625rem;
  font-weight:     var(--peso-fuerte);
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      all .12s;
}
.btn-control-caja:hover          { background: var(--tecla-frente); color: var(--texto); }
.btn-control-caja.eliminar:hover { background: rgba(185,0,0,.15); color: var(--peligro); border-color: var(--peligro); }

/* Botón subir (↑) */
.caja-semantica.subir       { border-style: dashed; opacity: .5; }
.caja-semantica.subir:hover { opacity: 1; }
.icono-subir {
  font-size:       2rem;
  line-height:     1;
  color:           var(--subtexto);
  pointer-events:  none;
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           100%;
  height:          100%;
}

/* ── Barra inferior: ESC | ESPACIO | DEL | DESCARGAR ─*/
.barra-inferior {
  flex-shrink: 0;
  display:     flex;
  align-items: center;
  gap:         .35rem;
  padding:     0 .35rem;
  border-top:  1px solid var(--borde);
  height:      var(--alto-barra);
}
.tecla-espacio {
  flex:            1;
  font-family:     var(--fuente);
  font-size:       var(--tam-base);
  font-weight:     var(--peso-medio);
  letter-spacing:  .16em;
  text-transform:  uppercase;
  color:           var(--subtexto);
  background:      var(--tecla-frente);
  border:          1px solid var(--borde);
  border-radius:   var(--radio-btn);
  padding:         0 .5rem;
  height:          var(--alto-btn);
  box-shadow:      var(--sombra-btn);
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      box-shadow var(--trans), transform var(--trans), background var(--trans);
}
.tecla-espacio:hover          { background: var(--superficie); }
.tecla-espacio.presada        { box-shadow: var(--sombra-btn-pres); transform: translateY(2px); }
.tecla-espacio:disabled       { opacity: .2; pointer-events: none; }

/* ═══════════════════════════════════════════════════
   MODALES
═══════════════════════════════════════════════════ */
.capa {
  position:        fixed;
  inset:           0;
  z-index:         200;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         1rem;
  background:      rgba(0,0,0,.52);
  backdrop-filter: blur(5px);
}
.capa[hidden] { display: none !important; }
@keyframes entrar-modal {
  from { transform: scale(.93) translateY(10px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.modal {
  width: 100%; max-width: 420px; max-height: 92dvh; overflow-y: auto;
  background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 1.3rem 1.4rem; animation: entrar-modal .2s ease both; position: relative;
}
.modal::-webkit-scrollbar       { width: 3px; }
.modal::-webkit-scrollbar-thumb { background: var(--borde); }
.modal h2 {
  font-size: .945rem; font-weight: var(--peso-fuerte); letter-spacing: .1em;
  margin-bottom: .9rem; padding-right: 1.5rem;
}
/* Logo en modal Acerca / bienvenida */
.logo-modal {
  flex-shrink: 0;
}
img.logo-modal {
  height:     var(--alto-barra-sup); /* igual que barra superior */
  width:      auto;
  display:    block;
  object-fit: contain;
}
.logo-modal-txt {
  font-size:      .945rem;
  font-weight:    var(--peso-fuerte);
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          var(--texto);
  margin:         0;
}
.cerrar-modal {
  position: absolute; top: .85rem; right: .85rem;
  background: none; border: none; font-size: 1.2rem;
  color: var(--subtexto); cursor: pointer; font-family: var(--fuente); line-height: 1;
}
.cerrar-modal:hover { color: var(--texto); }

/* Campos de formulario */
.campo { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .6rem; }
.campo label {
  font-size: var(--tam-s); font-weight: var(--peso-fuerte);
  letter-spacing: .1em; text-transform: uppercase; color: var(--subtexto);
}
.campo input, .campo textarea {
  font-family: var(--fuente); font-size: var(--tam-base);
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 2px;
  color: var(--texto); padding: .34rem .52rem; outline: none; resize: none;
  transition: border-color var(--trans);
}
.campo input:focus, .campo textarea:focus { border-color: var(--acento); }

/* Zona de arrastre de archivos */
.zona-soltar {
  border: 1px dashed var(--borde); padding: .75rem .6rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: .3rem; background: var(--superficie); min-height: 50px;
  font-size: var(--tam-base); color: var(--subtexto); text-align: center;
  transition: border-color var(--trans), background var(--trans);
}
.zona-soltar.arrastrando { border-color: var(--acento); background: var(--fondo); }
.zona-soltar > span:first-child { font-size: 1.2rem; width: 100%; text-align: center; }
.enlace {
  background: none; border: none; color: var(--texto);
  font-weight: var(--peso-fuerte); cursor: pointer;
  font-family: var(--fuente); font-size: var(--tam-base); text-decoration: underline;
}
.vista-previa {
  display: flex; align-items: center; gap: .45rem;
  background: var(--superficie); border: 1px solid var(--borde);
  padding: .28rem .5rem; font-size: var(--tam-s); color: var(--subtexto); margin-top: .3rem;
}
.vista-previa img, .vista-previa video { width: 32px; height: 32px; object-fit: cover; }
.cuadro-limites {
  background: var(--superficie); border: 1px solid var(--borde);
  padding: .5rem .7rem; margin-bottom: .7rem;
  font-size: var(--tam-s); color: var(--subtexto); line-height: 1.75;
}
.cuadro-limites strong { color: var(--texto); display: block; margin-bottom: .18rem; }
.cuadro-limites ul { padding-left: 1rem; }
.error-modal {
  background: rgba(192,0,0,.07); border: 1px solid rgba(192,0,0,.28);
  padding: .32rem .52rem; font-size: var(--tam-base); color: #a00; margin-bottom: .5rem;
}
.error-modal[hidden] { display: none; }
.acciones-modal { display: flex; gap: .45rem; justify-content: flex-end; padding-top: .35rem; }
.fila-radio     { display: flex; gap: .75rem; flex-wrap: wrap; padding: .28rem 0; }
.opcion-radio   {
  font-size: var(--tam-base); color: var(--texto);
  cursor: pointer; display: flex; align-items: center; gap: .3rem;
}
.opcion-radio input { accent-color: var(--acento); cursor: pointer; }
.cuerpo-acerca  { font-size: var(--tam-base); color: var(--subtexto); line-height: 1.8; }
.cuerpo-acerca p      { margin-bottom: .7rem; }
.cuerpo-acerca strong { color: var(--texto); }
.cuerpo-acerca code   {
  font-family: var(--fuente); font-size: var(--tam-s);
  background: var(--superficie); padding: .1rem .32rem; border: 1px solid var(--borde);
}

/* Cabecera del modal de bienvenida: título + toggle de idioma en la misma fila */
.modal-acerca-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             1rem;
  margin-top:      -.25rem;
  margin-bottom:   1rem;
  padding-right:   2.2rem;
}
.modal-acerca-header .logo-modal,
.modal-acerca-header .logo-modal-txt { margin: 0; }

/* ── Modal de contacto ──────────────────────────────*/
.campo-hp {
  position:       absolute;
  left:           -9999px;
  opacity:        0;
  height:         0;
  overflow:       hidden;
  pointer-events: none;
}
.captcha-wrap {
  display:     flex;
  align-items: center;
  gap:         .5rem;
}
.captcha-q {
  font-size:      var(--tam-base);
  font-weight:    var(--peso-fuerte);
  color:          var(--texto);
  letter-spacing: .04em;
  min-width:      3.5rem;
}
.captcha-sep {
  color:     var(--subtexto);
  font-size: var(--tam-base);
}
.captcha-input {
  font-family:  var(--fuente) !important;
  font-size:    var(--tam-base) !important;
  width:        4rem;
  text-align:   center;
  background:   var(--superficie);
  border:       1px solid var(--borde);
  border-radius: 2px;
  color:        var(--texto);
  padding:      .34rem .4rem;
  outline:      none;
  transition:   border-color var(--trans);
}
.captcha-input:focus { border-color: var(--acento); }
.captcha-input::-webkit-outer-spin-button,
.captcha-input::-webkit-inner-spin-button,
.login-captcha input::-webkit-outer-spin-button,
.login-captcha input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.captcha-input[type=number],
.login-captcha input[type=number]               { -moz-appearance: textfield; }
.contacto-ok {
  text-align: center;
  padding:    1.5rem 0 .5rem;
}
.contacto-ok-icono {
  font-size:     2.4rem;
  color:         var(--acento);
  margin-bottom: .6rem;
  line-height:   1;
}
.contacto-ok p {
  font-size:      var(--tam-base);
  font-weight:    var(--peso-fuerte);
  letter-spacing: .06em;
  margin-bottom:  .2rem;
}
.contacto-ok-sub {
  font-size:      var(--tam-s) !important;
  font-weight:    var(--peso-normal) !important;
  color:          var(--subtexto);
  letter-spacing: .03em !important;
}

/* ═══════════════════════════════════════════════════
   OVERLAY DE EXPORTACIÓN
═══════════════════════════════════════════════════ */
.cuadro-exportar { }
.spinner-exportar {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--borde); border-top-color: var(--acento);
  animation: girar .65s linear infinite; margin: 0 auto .6rem;
}
@keyframes girar { to { transform: rotate(360deg); } }
.mensaje-exportar {
  font-size: var(--tam-base); letter-spacing: .06em; color: var(--subtexto);
}

/* ═══════════════════════════════════════════════════
   ADMIN — estilos exclusivos de admin.php
   (admin.php solo sobreescribe `body` para scroll)
═══════════════════════════════════════════════════ */

/* ── Layout general ─────────────────────────────────*/
.admin-wrap           { max-width: 100%; padding: .8rem var(--pad-lateral) 4rem; }

/* ── Cabecera ───────────────────────────────────────*/
.admin-header         {
  display:         flex;
  flex-shrink:     0;
  align-items:     center;
  justify-content: space-between;
  height:          var(--alto-barra-sup);
  border-bottom:   1px solid var(--borde);
  padding:         0;
}
.admin-header-izq     { display:flex; align-items:center; gap:.8rem; padding-left:var(--pad-lateral); }
.admin-header-der     { display:flex; gap:.5rem; align-items:center; padding-right:var(--pad-lateral); }
.admin-titulo-sep     { font-size: var(--tam-base); font-weight: var(--peso-fuerte); letter-spacing: .12em; color: var(--subtexto); }
.admin-logo           { display: block; height: var(--alto-barra-sup); width: auto; object-fit: contain; flex-shrink: 0; }
.admin-logo-txt       { font-size: var(--tam-base); font-weight: var(--peso-fuerte); letter-spacing: .12em; color: var(--texto); }

/* ── Toolbar ────────────────────────────────────────*/
.toolbar              { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; margin-bottom:.55rem; }
.total-global         { font-size:var(--tam-s); color:var(--subtexto); margin-left:auto; }

/* ── Pestañas de grupo — idénticas a index.html ────
   El .tabs-grupo está fuera del .admin-wrap para que
   no herede su padding lateral.                    */
#tabsAdmin { margin-bottom: .7rem; }
.tab-count {
  font-size:    .565rem;
  font-weight:  400;
  color:        var(--subtexto);
  display:      inline-block;
  margin-left:  .2em;
}

/* ── Grilla de tarjetas ─────────────────────────────*/
.grilla {
  display:               grid;
  gap:                   .55rem;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}

/* ── Tarjeta ────────────────────────────────────────*/
.tarjeta         { border:1px solid var(--borde); border-radius:var(--radio-caja);
                   padding:.45rem; background:var(--tecla-frente); cursor:grab; }
.tarjeta:active  { cursor: grabbing; }
.tarjeta.arr     { opacity:.4; border-style:dashed; }
.tarjeta.sobre   { border-color:var(--acento); box-shadow:0 0 0 2px var(--acento); }

/* ── Miniatura ──────────────────────────────────────*/
.miniatura       { width:100%; aspect-ratio:1; background:var(--superficie);
                   display:flex; align-items:center; justify-content:center;
                   overflow:hidden; margin-bottom:.4rem; position:relative;
                   border-radius:calc(var(--radio-caja) - 1px); }
.miniatura.ancha { aspect-ratio: 2; }
.miniatura img, .miniatura video { width:100%; height:100%; object-fit:cover; }

/* ── Badge de tipo (GIF · MP4 · SVG…) ──────────────*/
.tipo-badge      { position:absolute; top:3px; left:3px; background:rgba(0,0,0,.55);
                   color:#fff; font-size:.605rem; padding:.08rem .22rem;
                   letter-spacing:.04em; border-radius:1px; }

/* ── Textos de tarjeta ──────────────────────────────*/
.tarjeta-nombre  { font-size:.775rem; font-weight:700; letter-spacing:.04em;
                   white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
                   margin-bottom:.1rem; }
.tarjeta-meta    { font-size:.695rem; color:var(--subtexto); line-height:1.5; }
.tarjeta-acciones{ display:flex; gap:.25rem; margin-top:.35rem; flex-wrap:wrap; }

/* .tarjeta-x — X en tarjeta de admin (hereda .btn-x-esquina) */
.tarjeta-x {
  top:       3px;
  right:     3px;
  width:     18px;
  height:    18px;
  font-size: .72rem;
  z-index:   4;
}
.tarjeta:hover .tarjeta-x { opacity: 1; }
.tarjeta:has(.tarjeta-x:hover) .miniatura {
  outline:        2px solid rgba(185,0,0,.6);
  outline-offset: -2px;
}

/* ── Select mover grupo ─────────────────────────────*/
.sel-grupo       { font-family:var(--fuente); font-size:.695rem; background:var(--tecla-frente);
                   color:var(--texto); border:1px solid var(--borde); border-radius:var(--radio-btn);
                   padding:.15rem .28rem; cursor:pointer; }

/* ── Tarjeta "subir" ────────────────────────────────*/
.tarjeta-subir                  { cursor:default; }
.tarjeta-subir .miniatura       { border:1.5px dashed var(--borde)!important; opacity:.6;
                                  transition:opacity .14s; cursor:pointer; }
.tarjeta-subir .miniatura:hover { opacity:1; }
.icono-subir-admin              { font-size:2rem; color:var(--subtexto);
                                  display:flex; align-items:center;
                                  justify-content:center; width:100%; height:100%; }

/* ── Panel de grupo (visibilidad por tab) ───────────*/
.panel-grupo        { display: none; }
.panel-grupo.activo { display: block; }

/* ── Barra inferior fija (guardar orden) ────────────*/
.icono-guardar {
  width:          1em;
  height:         1em;
  vertical-align: -0.15em;
  flex-shrink:    0;
}
.barra-guardar {
  position:   fixed;
  bottom:     0; left: 0; right: 0;
  display:    flex;
  align-items:center;
  gap:        .5rem;
  height:     var(--alto-barra);
  background: var(--fondo);
  border-top: 1px solid var(--borde);
  padding:    0 var(--pad-lateral);
  z-index:    100;
}

/* ── Login ──────────────────────────────────────────*/
.login-wrap  { min-height:100vh; display:flex; align-items:center; justify-content:center; }
.login-box   { border:1px solid var(--borde); padding:2rem 2.5rem; background:var(--tecla-frente);
               border-radius:var(--radio-btn); min-width:280px; text-align:center; }
.login-box h2     { margin-bottom:1.2rem; font-size:var(--tam-l); letter-spacing:.08em; }
/* .login-box input hereda tipografía de .campo input; solo diferenciales: */
.login-box input  { width:100%; background:var(--fondo); border-radius:var(--radio-btn);
                    padding:.4rem .6rem; margin-bottom:.7rem;
                    font-family:var(--fuente); font-size:var(--tam-base);
                    color:var(--texto); border:1px solid var(--borde); outline:none; }
.error-login   { color:var(--peligro); font-size:var(--tam-s); margin-bottom:.5rem; }
.login-locked  { color:var(--subtexto); font-size:var(--tam-s); margin-bottom:.8rem;
                 border:1px solid var(--borde); padding:.5rem .7rem;
                 border-radius:var(--radio-btn); }

/* ── Honeypot y captcha del login ───────────────────*/
/* .campo-hp-login — ver .campo-hp en sección MODALES (mismo estilo, clase unificada) */
.login-captcha   { display:flex; align-items:center; justify-content:center;
                   gap:.5rem; margin-bottom:.7rem; }
.login-captcha-q { font-size:var(--tam-base); font-weight:700;
                   color:var(--texto); white-space:nowrap; }
.login-captcha input { width:3.5rem !important; text-align:center; margin-bottom:0 !important; }
/* spinner removal — ver reglas .captcha-input en sección MODALES */

/* ═══════════════════════════════════════════════════
   RESPONSIVE — MÓVIL  (≤ 540 px)
═══════════════════════════════════════════════════ */
@media (max-width: 540px) {

  /* 1. Tipografía móvil: reasignar a las variables --tam-*-movil definidas en :root */
  :root {
    --tam-base: var(--tam-base-movil);
    --tam-s:    var(--tam-s-movil);
    --tam-l:    var(--tam-l-movil);
  }

  /* 2. Barra superior index: dos filas — logo arriba, controles abajo */
  .barra-sup {
    height:     auto;
    flex-wrap:  wrap;
    padding:    0;
  }
  .barra-sup-izq {
    width:         100%;
    border-bottom: 1px solid var(--borde);
    flex-shrink:   0;
  }
  img.titulo-app {
    height: var(--alto-barra);
  }
  .barra-sup-der {
    width:           100%;
    height:          var(--alto-barra);
    padding-right:   .6rem;
    padding-left:    .6rem;
    gap:             .5rem;
    justify-content: flex-end;
  }

  /* 3. Admin header: logo solo en fila 1; toggle + fecha + salir en fila 2 */
  .admin-header {
    height:    auto;
    flex-wrap: wrap;
  }
  .admin-header-izq {
    width:         100%;
    border-bottom: 1px solid var(--borde);
    padding-left:  0;
    flex-shrink:   0;
  }
  .admin-logo { height: var(--alto-barra); }
  .admin-header-der {
    width:           100%;
    height:          var(--alto-barra);
    padding-right:   .6rem;
    padding-left:    .6rem;
    gap:             .4rem;
    justify-content: flex-end;
  }

  /* 4. Botones con texto ocultable en móvil (solo ícono en móvil) */
  .espacio-txt,
  .borrar-txt,
  .descargar-txt { display: none; }

  /* 5. Botón reflejar en cajas: siempre visible en móvil (no hay hover) */
  .caja-semantica .btn-reflejar { opacity: .7; }

  /* 6. Botón × y reflejar en ranuras de la frase: siempre visible en móvil */
  .ranura.llena .quitar-ranura  { opacity: .85; }
  .ranura.llena .ranura-btn-flip { opacity: .7; }

  /* 7. Modal Acerca: logo y toggle en filas separadas */
  .modal-acerca-header {
    flex-wrap:     wrap;
    padding-right: 2.4rem;  /* espacio para el × de cerrar */
    gap:           .5rem;
  }
  .modal-acerca-header .logo-modal {
    width: auto;            /* no forzar ancho completo — respeta proporción */
  }
  .modal-acerca-header .toggle-etiquetas {
    width: 100%;            /* toggle pasa a segunda fila */
  }

}