/*
 * Literatorio · interfaz pública común
 * Fecha de elaboración: 2026-09-20
 *
 * Portada, información pública y registro.
 * Las vistas consumen estas reglas; no las redefinen.
 */

.lit-publica {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
}

.lit-publica-hero {
  min-height: 72vh;
  display: grid;
  align-items: center;
  padding: 64px 0 48px;
}

.lit-publica-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: 48px;
  align-items: center;
}

.lit-publica-kicker {
  margin: 0 0 12px;
  font-size: .9rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .72;
}

.lit-publica-titulo {
  margin: 0;
  font-size: clamp(3rem, 8vw, 7.5rem);
  line-height: .9;
  letter-spacing: -.055em;
}

.lit-publica-subtitulo {
  max-width: 760px;
  margin: 24px 0 0;
  font-size: clamp(1.25rem, 2.7vw, 2rem);
  line-height: 1.25;
}

.lit-publica-frase {
  max-width: 720px;
  margin: 22px 0 0;
  font-size: 1.08rem;
  line-height: 1.65;
}

.lit-publica-logo {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  display: block;
}

.lit-publica-logo-espera {
  min-height: 300px;
  display: grid;
  place-items: center;
  border: 1px dashed currentColor;
  border-radius: 24px;
  opacity: .45;
  text-align: center;
  padding: 32px;
}

.lit-publica-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.lit-publica-seccion {
  padding: 72px 0;
}

.lit-publica-seccion h2 {
  max-width: 850px;
  margin: 0 0 28px;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1;
}

.lit-publica-intro {
  max-width: 820px;
  font-size: 1.15rem;
  line-height: 1.7;
}

.lit-publica-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 34px;
}

.lit-publica-tarjeta {
  padding: 28px;
  border: 1px solid currentColor;
  border-radius: 20px;
}

.lit-publica-tarjeta h3 {
  margin-top: 0;
}

.lit-publica-ciclo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  font-size: clamp(1rem, 2vw, 1.3rem);
}

.lit-publica-ciclo span {
  padding: 10px 14px;
  border: 1px solid currentColor;
  border-radius: 999px;
}

.lit-publica-ficha {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 30px;
}

.lit-publica-dato {
  padding: 22px;
  border-top: 1px solid currentColor;
}

.lit-publica-dato strong {
  display: block;
  margin-bottom: 8px;
}

.lit-publica-registro {
  width: min(760px, calc(100% - 32px));
  margin: 0 auto;
  padding: 56px 0 80px;
}

.lit-publica-registro-cabecera {
  margin-bottom: 32px;
}

.lit-publica-registro-cabecera h1 {
  margin-bottom: 12px;
}

.lit-publica-enlace-simple {
  cursor: pointer;
}

@media (max-width: 820px) {
  .lit-publica-hero-grid,
  .lit-publica-grid,
  .lit-publica-ficha {
    grid-template-columns: 1fr;
  }

  .lit-publica-hero {
    min-height: auto;
    padding-top: 40px;
  }
}


/*
 * ================================================================
 * Literatorio · contraste de interfaz pública
 * Fecha de elaboración: 2026-09-20
 *
 * Regla:
 * fondo claro -> texto oscuro
 * fondo oscuro -> texto claro
 * ================================================================
 */

:root {
  --lit-publico-fondo: #f7f4ee;
  --lit-publico-texto: #171717;
  --lit-publico-texto-secundario: #4a4741;
  --lit-publico-borde: rgba(23, 23, 23, .22);
  --lit-publico-acento: #8a6824;
  --lit-publico-boton-fondo: #171717;
  --lit-publico-boton-texto: #ffffff;
}

body {
  background: var(--lit-publico-fondo);
}

.lit-publica,
.lit-publica-registro,
#faqFirebase,
#privacidadFirebase {
  background: var(--lit-publico-fondo);
  color: var(--lit-publico-texto);
}

.lit-publica *,
.lit-publica-registro *,
#faqFirebase *,
#privacidadFirebase * {
  color: inherit;
}

.lit-publica p,
.lit-publica-registro p,
#faqFirebase p,
#privacidadFirebase p,
.lit-publica li,
.lit-publica-registro li,
#faqFirebase li,
#privacidadFirebase li {
  color: var(--lit-publico-texto);
}

.lit-publica-kicker,
.lit-ayuda,
.lit-publica-registro .lit-ayuda,
#faqFirebase .info-kicker,
#privacidadFirebase .info-kicker {
  color: var(--lit-publico-texto-secundario);
}

.lit-publica a:not(.lit-boton),
.lit-publica-registro a:not(.lit-boton),
#faqFirebase a,
#privacidadFirebase a {
  color: var(--lit-publico-texto);
  text-decoration-color: currentColor;
}

.lit-publica .lit-boton,
.lit-publica-registro .lit-boton {
  background: var(--lit-publico-boton-fondo);
  color: var(--lit-publico-boton-texto);
  border-color: var(--lit-publico-boton-fondo);
}

.lit-publica .lit-boton *,
.lit-publica-registro .lit-boton * {
  color: var(--lit-publico-boton-texto);
}

.lit-publica-tarjeta,
.lit-publica-dato,
.lit-publica-logo-espera,
.lit-publica-registro .lit-panel,
.lit-publica-registro .lit-panel-acento {
  border-color: var(--lit-publico-borde);
}

.lit-publica-registro input,
.lit-publica-registro textarea,
.lit-publica-registro select {
  background: #ffffff;
  color: #171717;
  border-color: var(--lit-publico-borde);
}

.lit-publica-registro input::placeholder,
.lit-publica-registro textarea::placeholder {
  color: #68645d;
}

.lit-publica-registro label,
.lit-publica-registro .lit-label,
.lit-publica-registro .lit-check {
  color: var(--lit-publico-texto);
}

@media (prefers-color-scheme: dark) {
  :root {
    --lit-publico-fondo: #111111;
    --lit-publico-texto: #f4f0e8;
    --lit-publico-texto-secundario: #c8c1b5;
    --lit-publico-borde: rgba(244, 240, 232, .25);
    --lit-publico-acento: #d4ad58;
    --lit-publico-boton-fondo: #f4f0e8;
    --lit-publico-boton-texto: #111111;
  }

  .lit-publica-registro input,
  .lit-publica-registro textarea,
  .lit-publica-registro select {
    background: #1b1b1b;
    color: #f4f0e8;
  }

  .lit-publica-registro input::placeholder,
  .lit-publica-registro textarea::placeholder {
    color: #aaa398;
  }
}

/* ============================================================
   AUTENTICACIÓN · ESTADO VISIBLE
   Fecha de elaboración: 2026-09-21
   ============================================================ */

.lit-publica .lit-estado.autenticando {
  display: block;
  width: min(100%, 720px);
  margin-top: 22px;
  padding: 18px 20px;
  border: 1px solid currentColor;
  border-radius: 14px;
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  font-weight: 700;
  line-height: 1.35;
}


/* Literatorio · contraste compartido · 2026-09-30
 *
 * Regla canónica:
 * oscuro por defecto;
 * claro y oscuro cambian fondo y texto en pareja;
 * las vistas no definen colores propios.
 */

:root,
html[data-lit-theme="dark"] {
  color-scheme: dark;

  --lit-fondo: #090a0b;
  --lit-panel: #111316;
  --lit-campo: #181a1e;
  --lit-panel-suave: rgba(255, 255, 255, 0.025);

  --lit-texto: #f4f1ea;
  --lit-texto-suave: #b8b4ab;
  --lit-texto-tenue: #8e8a83;

  --lit-linea: #34383e;
  --lit-acento: #62b9c7;
  --lit-advertencia: #d3ad63;

  /* Variables estructurales compartidas */
  --lit-error: #ffb4ab;

  --lit-ok: #b8e6c1;

  --lit-radio: 18px;

  --lit-radio-campo: 13px;

  --lit-ancho: 760px;

  --lit-ancho-amplio: 1500px;

  --lit-ancho-lectura: 1120px;

  --lit-escala-tipografica: 1;

  --lit-serif:
      Georgia,
      "Times New Roman",
      serif;

  --lit-sans:
      Arial,
      Helvetica,
      sans-serif;

}

html[data-lit-theme="light"] {
  color-scheme: light;

  --lit-fondo: #f7f4ee;
  --lit-panel: #ffffff;
  --lit-campo: #ffffff;
  --lit-panel-suave: rgba(23, 23, 23, 0.035);

  --lit-texto: #171717;
  --lit-texto-suave: #4a4741;
  --lit-texto-tenue: #68645d;

  --lit-linea: rgba(23, 23, 23, 0.22);
  --lit-acento: #397f8a;
  --lit-advertencia: #9a6c16;
}

#trastiendaFirebase {
  background: var(--lit-fondo);
  color: var(--lit-texto);
}

#trastiendaFirebase input,
#trastiendaFirebase select,
#trastiendaFirebase textarea {
  background: var(--lit-campo);
  color: var(--lit-texto);
  border-color: var(--lit-linea);
}


/* LITERATORIO_COMMON_CSS_FIREBASE_2026_09_16 */
<!--
================================================================
Literatorio · Sistema
Archivo: Styles_Common.html
Versión: 2026-09-04 08:30
Zona horaria operativa: America/Mexico_City
================================================================

FUNCIÓN
Contiene los estilos visuales compartidos por las interfaces HTML
de Literatorio.

QUÉ INCLUYE
- Variables visuales globales.
- Fondo y tipografía.
- Contenedor normal, amplio y de lectura.
- Sistema compartido de escala tipográfica.
- Controles visuales de tamaño de texto.
- Formularios.
- Botones.
- Paneles.
- Confirmaciones.
- Pie de página.
- Adaptación para teléfono, portátil y escritorio.
- Corrección de autocompletado Chrome/WebKit.

MODIFICACIONES REALES RESPECTO DE LA VERSIÓN 2026-08-25 22:02
- Se conserva el contenedor normal de 760 px para interfaces que
  todavía lo necesiten, como la inscripción.
- Se añade .lit-contenedor-amplio para Trastienda.
- Se añade .lit-contenedor-lectura para página personal.
- Los contenedores amplios aprovechan monitores grandes sin pegar
  el contenido a los bordes.
- Se introduce --lit-escala-tipografica.
- Se añaden cinco niveles de tamaño entre 85 % y 160 %.
- Se añade componente compartido .lit-control-texto.
- Tipografías comunes pasan a unidades relativas donde conviene.
- Se mejora la adaptación cuando la letra es grande.
- El sistema ya no depende del zoom del navegador.

DEPENDENCIAS
- Ninguna.

REGLA DE MANTENIMIENTO
- Todo estilo compartido se corrige solamente aquí.
- El tamaño de texto se controla mediante
  --lit-escala-tipografica.
- Los módulos no deben inventar un segundo sistema de accesibilidad.
- Una futura corrección sustituirá COMPLETO este archivo.
================================================================
-->



  /* ============================================================
     VARIABLES
     ============================================================ */




  html[data-lit-texto="85"] {
    --lit-escala-tipografica: 0.85;
  }

  html[data-lit-texto="100"] {
    --lit-escala-tipografica: 1;
  }

  html[data-lit-texto="115"] {
    --lit-escala-tipografica: 1.15;
  }

  html[data-lit-texto="135"] {
    --lit-escala-tipografica: 1.35;
  }

  html[data-lit-texto="160"] {
    --lit-escala-tipografica: 1.60;
  }


  /* ============================================================
     BASE
     ============================================================ */

  * {
    box-sizing: border-box;
  }


  html {
    background: var(--lit-fondo);
  }


  body {

    margin: 0;

    min-height: 100vh;

    background:
      radial-gradient(
        circle at 80% 0%,
        rgba(98, 185, 199, 0.08),
        transparent 32rem
      ),
      var(--lit-fondo);

    color: var(--lit-texto);

    font-family: var(--lit-serif);

    font-size:
      calc(
        16px *
        var(--lit-escala-tipografica)
      );

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;
  }


  button,
  input,
  select,
  textarea {

    font-size:
      inherit;
  }


  /* ============================================================
     CONTENEDORES
     ============================================================ */

  .lit-contenedor {

    width:
      min(
        var(--lit-ancho),
        100%
      );

    margin: 0 auto;

    padding:
      clamp(
        24px,
        4vw,
        56px
      )
      clamp(
        18px,
        4vw,
        42px
      )
      60px;
  }


  /*
   * Trastienda.
   *
   * Aprovecha casi toda una pantalla grande,
   * conservando márgenes cómodos.
   */
  .lit-contenedor-amplio {

    width:
      min(
        var(--lit-ancho-amplio),
        100%
      );

    padding-left:
      clamp(
        16px,
        3vw,
        48px
      );

    padding-right:
      clamp(
        16px,
        3vw,
        48px
      );
  }


  /*
   * Página personal.
   *
   * Más ancha que antes pero conserva una medida
   * agradable para lectura continua.
   */
  .lit-contenedor-lectura {

    width:
      min(
        var(--lit-ancho-lectura),
        100%
      );
  }


  /* ============================================================
     CONTROL DE TAMAÑO DE TEXTO
     ============================================================ */

  .lit-control-texto {

    display:
      inline-flex;

    align-items:
      center;

    gap:
      5px;

    padding:
      5px;

    border:
      1px solid
      var(--lit-linea);

    border-radius:
      999px;

    background:
      rgba(
        17,
        19,
        22,
        0.88
      );

    font-family:
      var(--lit-sans);
  }


  .lit-control-texto-label {

    padding:
      0 7px 0 9px;

    color:
      var(--lit-texto-tenue);

    font-size:
      calc(
        0.72rem *
        var(--lit-escala-tipografica)
      );

    white-space:
      nowrap;
  }


  .lit-control-texto button {

    min-width:
      38px;

    min-height:
      34px;

    border:
      0;

    border-radius:
      999px;

    background:
      transparent;

    color:
      var(--lit-texto);

    font-family:
      var(--lit-sans);

    cursor:
      pointer;
  }


  .lit-control-texto button:hover {

    background:
      rgba(
        98,
        185,
        199,
        0.10
      );
  }


  .lit-control-texto button:focus-visible {

    outline:
      2px solid
      var(--lit-acento);

    outline-offset:
      1px;
  }


  .lit-control-texto-valor {

    min-width:
      46px;

    text-align:
      center;

    color:
      var(--lit-texto-suave);

    font-family:
      var(--lit-sans);

    font-size:
      calc(
        0.72rem *
        var(--lit-escala-tipografica)
      );
  }


  /* ============================================================
     IDENTIDAD
     ============================================================ */

  .lit-marca {

    margin-bottom:
      14px;

    color:
      var(--lit-acento);

    font-family:
      var(--lit-sans);

    font-size:
      calc(
        0.81rem *
        var(--lit-escala-tipografica)
      );

    font-weight:
      600;

    line-height:
      1.2;

    letter-spacing:
      0.16em;

    text-transform:
      uppercase;
  }


  .lit-titulo {

    margin:
      0;

    color:
      var(--lit-texto);

    font-size:
      clamp(
        calc(
          2.35rem *
          var(--lit-escala-tipografica)
        ),
        6vw,
        calc(
          4.25rem *
          var(--lit-escala-tipografica)
        )
      );

    font-weight:
      500;

    line-height:
      0.98;

    letter-spacing:
      -0.035em;
  }


  .lit-subtitulo {

    margin:
      12px 0 0;

    color:
      var(--lit-texto-suave);

    font-size:
      calc(
        1.2rem *
        var(--lit-escala-tipografica)
      );

    line-height:
      1.3;
  }


  /* ============================================================
     PANELES
     ============================================================ */

  .lit-panel {

    margin:
      34px 0 28px;

    padding:
      20px 22px;

    border:
      1px solid
      var(--lit-linea);

    border-radius:
      var(--lit-radio);

    background:
      var(--lit-panel-suave);

    font-size:
      calc(
        1.05rem *
        var(--lit-escala-tipografica)
      );

    line-height:
      1.55;
  }


  .lit-panel-acento {

    margin:
      10px 0 2px;

    padding:
      18px 20px;

    border-left:
      3px solid
      var(--lit-acento);

    background:
      rgba(
        98,
        185,
        199,
        0.06
      );

    color:
      var(--lit-texto-suave);

    font-size:
      calc(
        0.94rem *
        var(--lit-escala-tipografica)
      );

    line-height:
      1.55;
  }


  .lit-panel-acento strong {
    color: var(--lit-texto);
  }


  /* ============================================================
     FORMULARIOS
     ============================================================ */

  .lit-formulario {

    display:
      grid;

    gap:
      20px;
  }


  .lit-campo {

    display:
      grid;

    gap:
      8px;
  }


  .lit-doble {

    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    gap:
      18px;
  }


  .lit-label {

    color:
      var(--lit-texto);

    font-family:
      var(--lit-sans);

    font-size:
      calc(
        0.875rem *
        var(--lit-escala-tipografica)
      );

    font-weight:
      600;

    line-height:
      1.3;

    letter-spacing:
      0.01em;
  }


  .lit-ayuda {

    margin-top:
      -2px;

    color:
      var(--lit-texto-suave);

    font-size:
      calc(
        0.875rem *
        var(--lit-escala-tipografica)
      );

    line-height:
      1.45;
  }


  .lit-input {

    width:
      100%;

    appearance:
      none;

    -webkit-appearance:
      none;

    border:
      1px solid
      var(--lit-linea);

    border-radius:
      var(--lit-radio-campo);

    outline:
      none;

    background:
      var(--lit-campo);

    color:
      var(--lit-texto);

    padding:
      15px 16px;

    font-family:
      var(--lit-sans);

    font-size:
      calc(
        1.06rem *
        var(--lit-escala-tipografica)
      );

    line-height:
      1.3;

    caret-color:
      var(--lit-texto);

    transition:
      border-color 0.15s,
      box-shadow 0.15s,
      background-color 0.15s;
  }


  .lit-input:hover {
    border-color: #444951;
  }


  .lit-input:focus {

    border-color:
      var(--lit-acento);

    box-shadow:
      0 0 0 3px
      rgba(
        98,
        185,
        199,
        0.13
      );
  }


  .lit-input::placeholder {

    color:
      var(--lit-texto-tenue);

    opacity:
      1;
  }


  /* ============================================================
     AUTOCOMPLETADO
     ============================================================ */

  .lit-input:-webkit-autofill,
  .lit-input:-webkit-autofill:hover,
  .lit-input:-webkit-autofill:active {

    -webkit-text-fill-color:
      var(--lit-texto) !important;

    caret-color:
      var(--lit-texto);

    -webkit-box-shadow:
      0 0 0 1000px
      var(--lit-campo)
      inset !important;

    box-shadow:
      0 0 0 1000px
      var(--lit-campo)
      inset !important;

    border:
      1px solid
      var(--lit-linea);

    transition:
      background-color
      9999s
      ease-out
      0s;
  }


  .lit-input:-webkit-autofill:focus {

    -webkit-text-fill-color:
      var(--lit-texto) !important;

    caret-color:
      var(--lit-texto);

    -webkit-box-shadow:
      0 0 0 1000px
      var(--lit-campo)
      inset,
      0 0 0 3px
      rgba(
        98,
        185,
        199,
        0.13
      ) !important;

    box-shadow:
      0 0 0 1000px
      var(--lit-campo)
      inset,
      0 0 0 3px
      rgba(
        98,
        185,
        199,
        0.13
      ) !important;

    border-color:
      var(--lit-acento);
  }


  /* ============================================================
     CHECKBOXES
     ============================================================ */

  .lit-checks {

    display:
      grid;

    gap:
      16px;

    margin-top:
      8px;

    padding-top:
      22px;

    border-top:
      1px solid
      var(--lit-linea);
  }


  .lit-check {

    display:
      grid;

    grid-template-columns:
      24px 1fr;

    gap:
      10px;

    align-items:
      start;

    color:
      var(--lit-texto);

    font-family:
      var(--lit-sans);

    font-size:
      calc(
        0.94rem *
        var(--lit-escala-tipografica)
      );

    line-height:
      1.45;

    cursor:
      pointer;
  }


  .lit-check input {

    width:
      19px;

    height:
      19px;

    margin:
      1px 0 0;

    accent-color:
      var(--lit-acento);
  }


  /* ============================================================
     BOTONES
     ============================================================ */

  .lit-boton {

    min-height:
      52px;

    margin-top:
      8px;

    border:
      0;

    border-radius:
      14px;

    padding:
      16px 22px;

    background:
      var(--lit-acento);

    color:
      #061013;

    font-family:
      var(--lit-sans);

    font-size:
      calc(
        0.94rem *
        var(--lit-escala-tipografica)
      );

    font-weight:
      700;

    line-height:
      1.1;

    cursor:
      pointer;

    transition:
      opacity 0.15s,
      transform 0.1s;
  }


  .lit-boton:hover {
    opacity: 0.94;
  }


  .lit-boton:active {
    transform: translateY(1px);
  }


  .lit-boton:disabled {

    opacity:
      0.55;

    cursor:
      wait;

    transform:
      none;
  }


  /* ============================================================
     ESTADOS
     ============================================================ */

  .lit-estado {

    min-height:
      24px;

    margin:
      2px 0 0;

    font-family:
      var(--lit-sans);

    font-size:
      calc(
        0.94rem *
        var(--lit-escala-tipografica)
      );

    line-height:
      1.45;
  }


  .lit-estado-error {
    color: var(--lit-error);
  }


  .lit-estado-ok {
    color: var(--lit-ok);
  }


  /* ============================================================
     CONFIRMACIÓN
     ============================================================ */

  .lit-confirmacion {

    display:
      none;

    margin-top:
      28px;

    padding:
      28px;

    border:
      1px solid
      rgba(
        184,
        230,
        193,
        0.30
      );

    border-radius:
      var(--lit-radio);

    background:
      rgba(
        184,
        230,
        193,
        0.06
      );
  }


  .lit-confirmacion-titulo {

    margin:
      0 0 10px;

    color:
      var(--lit-texto);

    font-size:
      calc(
        1.75rem *
        var(--lit-escala-tipografica)
      );

    font-weight:
      500;
  }


  .lit-confirmacion-texto {

    margin:
      0;

    color:
      var(--lit-texto-suave);

    font-size:
      calc(
        1rem *
        var(--lit-escala-tipografica)
      );

    line-height:
      1.55;
  }


  /* ============================================================
     PIE
     ============================================================ */

  .lit-footer {

    margin-top:
      34px;

    padding-top:
      20px;

    border-top:
      1px solid
      var(--lit-linea);

    color:
      var(--lit-texto-tenue);

    font-family:
      var(--lit-sans);

    font-size:
      calc(
        0.81rem *
        var(--lit-escala-tipografica)
      );

    line-height:
      1.5;
  }


  /* ============================================================
     UTILIDADES
     ============================================================ */

  .lit-oculto {
    display: none !important;
  }


  .lit-visible {
    display: block;
  }


  /* ============================================================
     LETRA GRANDE
     ============================================================ */

  html[data-lit-texto="135"] .lit-doble,
  html[data-lit-texto="160"] .lit-doble {

    grid-template-columns:
      1fr;
  }


  /* ============================================================
     TELÉFONO
     ============================================================ */

  @media (
    max-width: 560px
  ) {

    .lit-contenedor {

      padding:
        24px
        16px
        40px;
    }


    .lit-doble {

      grid-template-columns:
        1fr;
    }


    .lit-panel {

      padding:
        18px;
    }


    .lit-boton {

      width:
        100%;
    }


    .lit-control-texto-label {

      display:
        none;
    }
  }


/* ============================================================
   UX COMPARTIDA
   ============================================================ */
.lit-ux-section{margin-top:2px}
  .lit-ux-section-head{border-top:1px solid var(--lit-linea);padding-top:18px;margin-bottom:14px;display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap}
  .lit-ux-section-head h2{margin:0;font-weight:500}
  .lit-ux-section-sub{margin:5px 0 0;color:var(--lit-texto-suave);font-family:var(--lit-sans);font-size:.85em}
  .lit-ux-list{display:grid;gap:13px}
  .lit-ux-work-card{display:grid;grid-template-columns:92px minmax(0,1fr);border:1px solid var(--lit-linea);border-radius:11px;background:var(--lit-panel-suave);min-width:0;overflow:hidden}
  .lit-ux-rail{min-height:108px;border-right:1px solid var(--lit-linea);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;padding:17px 11px 12px;box-sizing:border-box}
  .lit-ux-number{font-family:var(--lit-sans);font-size:3.35rem;line-height:.9;font-weight:750;min-height:52px;letter-spacing:-.05em}
  .lit-ux-number.is-clickable{cursor:pointer}
  .lit-ux-number.is-empty{cursor:default}
  .lit-ux-date{font-family:var(--lit-sans);font-size:.72em;letter-spacing:.08em;text-transform:uppercase;opacity:.7;min-height:18px;margin-top:9px}
  .lit-ux-main{min-width:0}
  .lit-ux-disclosure{width:100%}
  .lit-ux-disclosure>summary{list-style:none;cursor:pointer;padding:16px 18px 12px;user-select:none}
  .lit-ux-disclosure>summary::-webkit-details-marker{display:none}
  .lit-ux-card-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:start}
  .lit-ux-titleline{font-size:1.03em;line-height:1.35;text-align:center;min-width:0;padding-left:4px}
  .lit-ux-title{font-weight:650}
  .lit-ux-author{font-weight:400}
  .lit-ux-author .lit-ux-surname{font-weight:700;letter-spacing:.025em}
  .lit-ux-meta{font-family:var(--lit-sans);font-size:.76em;color:var(--lit-texto-suave);white-space:nowrap;text-align:right;padding-top:2px}
  .lit-ux-more{font-family:var(--lit-sans);font-size:.79em;color:var(--lit-texto-suave);margin-top:9px;display:inline-flex;align-items:center;gap:6px}
  .lit-ux-more:before{content:'▸';display:inline-block;transition:transform .12s ease}
  .lit-ux-disclosure[open] .lit-ux-more:before{transform:rotate(90deg)}
  .lit-ux-more .lit-ux-less-label{display:none}
  .lit-ux-disclosure[open] .lit-ux-more .lit-ux-more-label{display:none}
  .lit-ux-disclosure[open] .lit-ux-more .lit-ux-less-label{display:inline}
  .lit-ux-details{border-top:1px solid var(--lit-linea);padding:16px 18px 18px}
  .lit-ux-work-card.is-published{border-color:var(--lit-acento)}
  .lit-ux-work-card.is-draft{border-style:dashed}
  .lit-ux-work-card.is-dirty,.lit-ux-work-card.tra-card-dirty{border:2px solid var(--lit-acento);box-shadow:0 0 0 2px rgba(98,185,199,.10)}
  .lit-ux-work-card[draggable=true]{cursor:grab}.lit-ux-work-card.tra-dragging{opacity:.45}

.tra-drag-handle{
  font-family:var(--lit-sans);
  font-size:1.15rem;
  line-height:1;
  letter-spacing:-.12em;
  opacity:.55;
  cursor:grab;
  user-select:none;
  margin-bottom:8px;
}

.tra-drag-handle:hover{
  opacity:1;
}

.lit-ux-work-card.tra-dragging .tra-drag-handle{
  cursor:grabbing;
}
  .lit-ux-empty{color:var(--lit-texto-suave);font-family:var(--lit-sans);font-size:.88em;padding:7px 0}
  .lit-ux-antojo{border:1px solid var(--lit-linea);border-radius:10px;background:var(--lit-panel-suave);padding:0 16px}
  .lit-ux-antojo>summary{list-style:none;cursor:pointer;padding:13px 0;font-family:var(--lit-sans);font-weight:700}
  .lit-ux-antojo>summary::-webkit-details-marker{display:none}
  .lit-ux-antojo>summary:before{content:'▸';display:inline-block;margin-right:8px;transition:transform .12s ease}
  .lit-ux-antojo[open]>summary:before{transform:rotate(90deg)}
  .lit-ux-antojo-line{margin:0;padding:0 0 14px;line-height:1.75}
  .lit-ux-antojo-author{white-space:nowrap}
  @media(max-width:680px){
    .lit-ux-work-card{grid-template-columns:72px minmax(0,1fr)}
    .lit-ux-rail{padding-left:7px;padding-right:7px}
    .lit-ux-number{font-size:2.75rem}
    .lit-ux-card-top{grid-template-columns:1fr;gap:6px}
    .lit-ux-titleline{text-align:left}
    .lit-ux-meta{text-align:left;white-space:normal}
  }



/* ============================================================
   MENÚ INFERIOR COMPARTIDO
   ============================================================ */
.lit-menu-inferior{
  margin-top:38px;
  padding:20px 0 8px;
  border-top:1px solid var(--lit-linea);
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  font-family:var(--lit-sans);
}
.lit-menu-inferior a{
  color:inherit;
  text-decoration:none;
  border:1px solid var(--lit-linea);
  border-radius:999px;
  padding:8px 12px;
  font-size:.82em;
}
.lit-menu-inferior a:hover{border-color:var(--lit-acento)}
.lit-menu-fecha{
  width:100%;
  text-align:center;
  font-size:.72em;
  opacity:.52;
  margin-top:5px;
}



/* ============================================================
   PÁGINAS INFORMATIVAS COMPARTIDAS
   ============================================================ */
.info-wrap{
  max-width:940px;
  margin:0 auto;
  padding:34px 20px 70px;
}
.info-nav{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:20px 0 32px;
}
.info-nav a{
  color:inherit;
  text-decoration:none;
  border:1px solid var(--lit-linea);
  border-radius:999px;
  padding:8px 12px;
  font-family:var(--lit-sans);
  font-size:.84em;
}
.info-section{
  border-top:1px solid var(--lit-linea);
  padding:25px 0;
}
.info-section p,
.info-section li{
  line-height:1.65;
}
.info-note{
  border-left:3px solid var(--lit-acento);
  padding:13px 15px;
  background:var(--lit-panel-suave);
  margin:17px 0;
}



/* ============================================================
   REGISTRO · CONFIRMACIÓN
   ============================================================ */
.lit-confirmacion-acciones{
  margin-top:26px;
  margin-bottom:24px;
}
.lit-liga-personal{
  display:inline-block;
  text-decoration:none;
}
.lit-confirmacion-correo{
  margin-top:20px;
  line-height:1.6;
}



/* ============================================================
   PÁGINA PERSONAL
   ============================================================ */
.per-grid{display:grid;gap:18px}.per-card{border:1px solid var(--lit-linea);border-radius:var(--lit-radio);background:var(--lit-panel-suave);padding:22px}
    .per-card h2{margin:0 0 10px;font-weight:500}.per-muted{color:var(--lit-texto-suave);font-family:var(--lit-sans);font-size:.9em}
    .per-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.per-btn,.per-link{border:1px solid var(--lit-linea);background:transparent;color:inherit;border-radius:8px;padding:10px 14px;text-decoration:none;cursor:pointer;font:inherit}
    .per-primary{border-color:var(--lit-acento)}.per-input,.per-textarea{width:100%;box-sizing:border-box;background:var(--lit-campo);color:inherit;border:1px solid var(--lit-linea);border-radius:7px;padding:11px 12px;font:inherit}
    .per-textarea{min-height:110px;resize:vertical}.per-field{margin-top:12px}.per-field label{display:block;margin-bottom:6px;font-family:var(--lit-sans);font-size:.8em;opacity:.75}
    .per-table{width:100%;border-collapse:collapse;font-family:var(--lit-sans);font-size:.88em}.per-table td,.per-table th{padding:9px 7px;border-bottom:1px solid var(--lit-linea);text-align:left}
    .per-status{margin-top:10px;min-height:22px;font-family:var(--lit-sans);font-size:.86em;color:var(--lit-texto-suave)}
    .per-hidden{display:none!important}
    .per-note-wrap{margin-top:14px;border-top:1px solid var(--lit-linea);padding-top:14px}
    .per-note-head{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
    .per-note-title{font-family:var(--lit-sans);font-size:.82em;opacity:.82;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
    .per-note-status{font-family:var(--lit-sans);font-size:.78em;color:var(--lit-texto-suave)}
    .per-note-textarea{width:100%;box-sizing:border-box;min-height:130px;background:var(--lit-campo);color:inherit;border:1px solid var(--lit-linea);border-radius:8px;padding:12px;font:inherit;resize:vertical}
    .per-note-wrap.maximizada{position:fixed;inset:4vh 4vw;z-index:9999;background:var(--lit-fondo);border:1px solid var(--lit-linea);border-radius:12px;padding:20px;overflow:auto;box-shadow:0 20px 80px rgba(0,0,0,.45)}
    .per-note-wrap.maximizada .per-note-textarea{min-height:65vh}
    .per-comment-sent{border-left:3px solid var(--lit-acento);padding-left:12px;margin-top:12px}
    .per-thread{display:grid;gap:10px;margin-bottom:18px}
    .per-bubble{padding:12px 14px;border:1px solid var(--lit-linea);border-radius:10px}
    .per-bubble.propio{margin-left:0;background:var(--lit-panel-suave)}
    .per-bubble.coord{margin-left:14%;margin-right:0;border-color:var(--lit-linea)}
    .per-bubble.mensaje-pendiente{border-left:3px solid var(--lit-acento)}
    .tra-card.mensaje-pendiente{border-left:3px solid var(--lit-acento)}
    .per-bubble .meta{font-family:var(--lit-sans);font-size:.75em;opacity:.65;margin-bottom:6px}
    .per-section-heading{border-top:1px solid var(--lit-linea);padding-top:18px;margin-top:2px}.per-section-heading h2{margin:0;font-weight:500}.per-lecturas-lista{display:grid;gap:14px}.per-reading-card{padding:20px}.per-reading-card p:first-child{margin-top:0}.per-antojo{padding:14px 18px}.per-antojo summary{cursor:pointer;font-family:var(--lit-sans);font-weight:700;list-style:none}.per-antojo summary::-webkit-details-marker{display:none}.per-antojo summary::before{content:"▸";display:inline-block;margin-right:8px;transition:.12s}.per-antojo[open] summary::before{transform:rotate(90deg)}.per-antojo-linea{margin:12px 0 0;line-height:1.75}.per-antojo-autor{white-space:nowrap}.per-adjunto{display:inline-block;margin-top:8px}



/* ============================================================
   TRASTIENDA
   ============================================================ */
.tra-oculto{display:none!important}
    .tra-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;flex-wrap:wrap;margin-bottom:20px}
    .tra-head-right,.tra-actions,.tra-nav,.tra-chips,.tra-timer-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
    .tra-nav{overflow-x:auto;margin:18px 0 26px;padding-bottom:6px}
    .tra-nav button,.tra-btn,.tra-link{border:1px solid var(--lit-linea);background:transparent;color:inherit;border-radius:999px;padding:9px 13px;cursor:pointer;text-decoration:none;font-family:var(--lit-sans)}
    .tra-nav button.activo,.tra-btn.principal{border-color:var(--lit-acento)}
    .tra-vista{display:none}.tra-vista.activa{display:block}
    .tra-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px}
    .tra-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:18px 0 26px}
    .tra-card{border:1px solid var(--lit-linea);border-radius:10px;background:var(--lit-panel);padding:18px;min-width:0}
.tra-card.lectura-publicada{border:2px solid var(--lit-acento);box-shadow:0 0 0 1px rgba(98,185,199,.18) inset}
    .tra-card.lectura-borrador{border-style:dashed}
    .tra-estado-lectura{display:inline-block;margin-left:10px;padding:4px 9px;border-radius:999px;font-family:var(--lit-sans);font-weight:700;font-size:.78em;letter-spacing:.03em;text-transform:uppercase}
    .tra-estado-publicada{border:1px solid var(--lit-acento);color:var(--lit-acento)}
    .tra-estado-borrador{border:1px solid var(--lit-linea);opacity:.72}
    .tra-estado-programada{border:1px solid var(--lit-linea)}
    .tra-estado-retirada{border:1px solid var(--lit-linea);text-decoration:line-through;opacity:.68}
    .tra-title{font-size:1.18em;margin-bottom:5px}.tra-muted{opacity:.7;font-family:var(--lit-sans);font-size:.86em;overflow-wrap:anywhere}
    .tra-number{font-size:1.8em;display:block;margin-bottom:5px}
    .tra-list{display:grid;gap:14px}.tra-section{margin-top:28px}
    .tra-field label{display:block;opacity:.72;font-family:var(--lit-sans);font-size:.78em;margin-bottom:6px}
    .tra-input,.tra-select,.tra-textarea{width:100%;box-sizing:border-box;background:var(--lit-campo);color:inherit;border:1px solid var(--lit-linea);border-radius:7px;padding:11px 12px;font:inherit}
    .tra-textarea{min-height:92px;resize:vertical}
    .tra-chip{border:1px solid var(--lit-linea);border-radius:999px;padding:5px 9px;font-family:var(--lit-sans);font-size:.75em}
    .tra-dirty{border-color:var(--lit-acento)!important;box-shadow:0 0 0 1px var(--lit-acento) inset;background:rgba(98,185,199,.06)!important}
    .tra-unsaved{font-family:var(--lit-sans);font-size:.82em;color:var(--lit-acento);min-height:20px;margin-top:8px}
    .tra-months{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;border:1px solid var(--lit-linea);border-radius:8px;padding:12px}
    .tra-months label{display:flex;gap:8px;align-items:center;font-family:var(--lit-sans);font-size:.84em}
    .tra-empty{opacity:.65;padding:15px 0}
    .tra-msg-reply{margin-top:14px;padding-top:14px;border-top:1px solid var(--lit-linea)}
    .tra-msg-existing{margin-top:12px;margin-left:14%;padding:12px;background:rgba(98,185,199,.05);border:1px solid var(--lit-linea);border-radius:6px}
    .tra-btn[disabled]{opacity:.6;cursor:wait}
    .tra-table{width:100%;border-collapse:collapse;font-family:var(--lit-sans);font-size:.87em}
    .tra-table th,.tra-table td{border-bottom:1px solid var(--lit-linea);padding:10px 8px;text-align:left;vertical-align:top}
    .tra-timer-shell{position:sticky;top:8px;z-index:5;display:flex;justify-content:flex-end;margin-bottom:12px;pointer-events:none}
    .tra-timer{pointer-events:auto;width:min(100%,690px);border:1px solid color-mix(in srgb,var(--lit-linea) 72%,transparent);background:color-mix(in srgb,var(--lit-fondo) 94%,transparent);border-radius:10px;padding:8px 10px;opacity:.78;transition:opacity .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}
    .tra-timer-main{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
    .tra-timer .tra-input{max-width:190px;padding:8px 10px}
    .tra-timer .tra-btn{padding:7px 10px;font-size:.84em}
    .tra-timer-display{font-family:var(--lit-sans);font-size:1.25em;min-width:78px;text-align:center;font-variant-numeric:tabular-nums}
    .tra-timer.corriendo{opacity:1;border-color:var(--lit-acento);box-shadow:0 0 0 1px rgba(98,185,199,.08)}
    .tra-timer.vencido{opacity:1;border-width:2px;border-color:var(--lit-acento);box-shadow:0 0 0 3px rgba(98,185,199,.10);transform:translateY(1px)}
    .tra-timer.vencido .tra-timer-display{font-size:1.48em;font-weight:800}
    .tra-timer-alert{display:none;margin-top:8px;padding:9px 11px;border-top:1px solid var(--lit-acento);font-family:var(--lit-sans);font-size:.86em;align-items:center;justify-content:space-between;gap:10px}
    .tra-timer.vencido .tra-timer-alert.activa{display:flex}
    .tra-timer-alert strong{letter-spacing:.04em}
    .tra-login{max-width:480px;margin-top:28px}

    .tra-card.tra-card-dirty{border:2px solid var(--lit-acento);box-shadow:0 0 0 2px rgba(98,185,199,.10)}
    .tra-dirty-banner{display:none;margin:10px 0 0;padding:7px 10px;border:1px solid var(--lit-acento);border-radius:7px;font-family:var(--lit-sans);font-size:.8em;color:var(--lit-acento)}
    .tra-card-dirty .tra-dirty-banner{display:block}
    .tra-months input{position:absolute;opacity:0;pointer-events:none}
    .tra-months label{justify-content:center;cursor:pointer;border:1px solid var(--lit-linea);border-radius:999px;padding:9px 12px;min-height:20px;transition:.12s ease}
    .tra-months label.seleccionado{background:var(--lit-acento);border-color:var(--lit-acento);color:#071014;font-weight:700}
    .tra-months label:focus-within{outline:2px solid var(--lit-acento);outline-offset:2px}
    .tra-participant-block{margin-top:15px;padding-top:14px;border-top:1px solid var(--lit-linea)}
    .tra-participant-block-title{font-family:var(--lit-sans);font-weight:700;font-size:.82em;text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px}
    .tra-lectura-layout{display:grid;grid-template-columns:88px minmax(0,1fr);gap:16px;align-items:start}
    .tra-lectura-index{min-height:110px;text-align:center;border-right:1px solid var(--lit-linea);padding-right:14px;display:flex;flex-direction:column;align-items:center}
    .tra-lectura-numero{font-family:var(--lit-sans);font-size:3.8rem;line-height:.95;font-weight:700;min-height:58px;cursor:pointer}
    .tra-lectura-numero.vacio{cursor:default}
    .tra-lectura-fecha{font-family:var(--lit-sans);font-size:.76em;letter-spacing:.08em;text-transform:uppercase;opacity:.72;margin-top:7px;min-height:18px}
    .tra-sesion-grupo{border:1px solid var(--lit-linea);border-radius:12px;padding:14px;margin-bottom:16px}
    .tra-sesion-cabecera{font-family:var(--lit-sans);font-weight:700;letter-spacing:.04em;margin:2px 0 12px}
    .tra-sesion-items{display:grid;gap:12px}
    .tra-card[draggable=true]{cursor:grab}.tra-card.tra-dragging{opacity:.45}
    .tra-tech{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--lit-campo);border-radius:7px;padding:10px;font-family:monospace;font-size:.78em;margin-top:10px}
    @media(max-width:650px){.tra-table{display:block;overflow-x:auto}.tra-card{padding:15px}.tra-lectura-layout{grid-template-columns:68px minmax(0,1fr)}.tra-lectura-numero{font-size:3rem}}



/* ============================================================
   AJUSTES DE COMPOSICIÓN DE PÁGINA
   ============================================================ */
.per-page-header{margin-bottom:26px}
.tra-actions-separadas{margin-top:12px}
.tra-busqueda-participante{margin-bottom:14px}
.tra-list-separada{margin-top:14px}



/* ============================================================
   EJERCICIOS · PRESENTACIÓN
   ============================================================ */
.per-ejercicio-texto{
  white-space:pre-wrap;
  margin-top:8px;
}

.per-grupo-header{
  align-items:center;
  margin-top:14px;
}



/* ============================================================
   TRASTIENDA · ESTADOS Y SEPARACIONES DINÁMICAS
   ============================================================ */
.tra-separacion-8{margin-top:8px}
.tra-separacion-10{margin-top:10px}
.tra-separacion-12{margin-top:12px}
.tra-procesando{opacity:.65;cursor:wait}
.tra-resolviendo{opacity:.72}



/* ============================================================
   REGISTRO · ENLACES DE CONFIRMACIÓN
   ============================================================ */
.lit-enlace-pendiente{
  opacity:.55;
}

.lit-enlace-disponible{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
}
/* /LITERATORIO_COMMON_CSS_FIREBASE_2026_09_16 */

/* ============================================================
   Literatorio · Sesión incrustada / flotante
   ============================================================ */

.per-sesion{
  position:relative;
  overflow:visible;
}

.per-sesion-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.per-sesion-head h2{
  margin:0;
}

.per-sesion-head .per-actions{
  margin-top:0;
}

.per-sesion-sentinel{
  width:1px;
  height:1px;
  pointer-events:none;
}

#meet{
  min-width:0;
}

#meet iframe,
#meet video,
#meet .meet-embed,
#meet [data-meet-embed]{
  display:block;
  width:100%;
  max-width:100%;
  aspect-ratio:16 / 9;
  border:0;
  border-radius:10px;
  background:#000;
}

.per-meet-placeholder{
  color:var(--lit-texto-suave);
  font-family:var(--lit-sans);
  font-size:.9em;
  line-height:1.5;
}

.per-sesion.is-floating{
  position:fixed;
  top:18px;
  right:18px;
  width:min(430px,calc(100vw - 36px));
  z-index:9000;
  padding:14px;
  background:var(--lit-panel);
  border:1px solid var(--lit-linea);
  border-radius:12px;
  box-shadow:0 18px 60px rgba(0,0,0,.34);
}

.per-sesion.is-floating .per-sesion-head{
  margin-bottom:8px;
}

.per-sesion.is-floating #meet iframe,
.per-sesion.is-floating #meet video,
.per-sesion.is-floating #meet .meet-embed,
.per-sesion.is-floating #meet [data-meet-embed]{
  border-radius:8px;
}

@media (max-width:700px){
  .per-sesion.is-floating{
    top:auto;
    right:10px;
    bottom:10px;
    width:calc(100vw - 20px);
    max-height:48vh;
    overflow:auto;
  }
}


Literatorio · visibilidad inicial común
*/
.lit-hidden-initial {
  display: none;
}

/*
================================================================
Literatorio · Resultado de acceso
Componente compartido
================================================================
*/

.lit-resultado {
  display: none;
  margin-top: 24px;
  padding: 20px 22px;
  max-width: 720px;

  border: 1px solid var(--lit-linea);
  border-radius: 14px;

  background: var(--lit-panel);
  color: var(--lit-texto);
}

.lit-resultado.visible {
  display: block;
}

.lit-resultado.gracia {
  border-color: var(--lit-advertencia);
}

.lit-resultado.error {
  border-color: var(--lit-error);
}

.lit-resultado.activo h2,
.lit-resultado.coordinacion h2 {
  color: var(--lit-acento);
}

.lit-resultado.gracia h2 {
  color: var(--lit-advertencia);
}

.lit-resultado.error h2 {
  color: var(--lit-error);
}

.lit-resultado h2 {
  margin: 0 0 8px;
  font-family: var(--lit-sans);
  font-size: 18px;
}

.lit-resultado p {
  margin: 0;
  font-family: var(--lit-sans);
  color: var(--lit-texto-suave);
  font-size: 15px;
  line-height: 1.55;
}


/*
================================================================
Literatorio · iframe técnico invisible
================================================================
*/

#respuestaFrame {
  position: absolute;
  width: 1px;
  height: 1px;
  border: 0;
  opacity: 0;
  pointer-events: none;
  left: -10000px;
  top: -10000px;
}

/* ============================================================
   LECTOR INLINE COMPARTIDO · Literatorio
   Word afuera · Web ahí mismito
   ============================================================ */

.lit-inline-reading{
  --lit-reader-scale:1;
  margin-top:14px;
}

.lit-inline-reading-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

.lit-inline-reading-button,
.lit-inline-reading-size-button{
  appearance:none;
  border:1px solid var(--lit-linea);
  background:transparent;
  color:inherit;
  border-radius:999px;
  padding:8px 12px;
  font-family:var(--lit-sans);
  font-size:.8rem;
  line-height:1;
  cursor:pointer;
  text-decoration:none;
}

.lit-inline-reading-button:hover,
.lit-inline-reading-size-button:hover{
  border-color:var(--lit-acento);
}

.lit-inline-reading-button:disabled,
.lit-inline-reading-size-button:disabled{
  opacity:.35;
  cursor:default;
}

.lit-inline-reading-size{
  display:inline-flex;
  gap:5px;
  margin-left:auto;
}

.lit-inline-reading-size-button{
  min-width:38px;
  padding-left:9px;
  padding-right:9px;
}

.lit-inline-reading-panel{
  margin-top:18px;
  padding:clamp(18px,4vw,42px);
  border:1px solid var(--lit-linea);
  border-radius:12px;
  background:var(--lit-fondo);
}

.lit-inline-reading-panel[hidden]{
  display:none;
}

.lit-inline-reading-head{
  margin:0 auto 30px;
  max-width:46rem;
  text-align:center;
}

.lit-inline-reading-title{
  margin:0;
  font-family:var(--lit-serif);
  font-size:clamp(1.85rem,5vw,3.45rem);
  line-height:.98;
  font-weight:800;
  letter-spacing:-.035em;
}

.lit-inline-reading-author{
  margin-top:12px;
  font-family:var(--lit-sans);
  font-size:.82rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.68;
}

.lit-inline-reading-text{
  max-width:46rem;
  margin:0 auto;
  font-family:var(--lit-serif);
  font-size:calc(1.08rem * var(--lit-reader-scale));
  line-height:1.72;
  overflow-wrap:anywhere;
}

.lit-inline-reading-text p{
  margin:0 0 1.05em;
}

.lit-inline-reading-text > p:first-of-type::first-letter{
  float:left;
  font-size:4.35em;
  line-height:.74;
  font-weight:800;
  padding:.07em .08em 0 0;
  color:var(--lit-acento);
}

.lit-inline-reading-text h1,
.lit-inline-reading-text h2,
.lit-inline-reading-text h3{
  line-height:1.08;
  margin:1.4em 0 .65em;
}

.lit-inline-reading-text img{
  max-width:100%;
  height:auto;
}

.lit-inline-reading-text blockquote{
  margin:1.3em 0;
  padding-left:1.15em;
  border-left:2px solid var(--lit-linea);
}

.lit-inline-reading-error{
  margin:0;
  font-family:var(--lit-sans);
  font-size:.86rem;
  color:var(--lit-acento);
}

@media(max-width:680px){
  .lit-inline-reading-size{
    margin-left:0;
  }

  .lit-inline-reading-panel{
    padding:20px 16px 28px;
  }

  .lit-inline-reading-title{
    font-size:2.15rem;
  }
}


/* ============================================================
   Literatorio · cabecera interactiva de Trastienda
   Fecha de elaboración: 2026-10-12
   ============================================================ */

.tra-head{
  position:relative;
  z-index:20;
  pointer-events:auto;
}

.tra-head-right{
  position:relative;
  z-index:21;
  pointer-events:auto;
}

#salirTrastienda{
  position:relative;
  z-index:22;
  pointer-events:auto;
  cursor:pointer;
}