/* Ágora · ajustes propios de la aplicación real, sobre publico.css (heredado del prototipo) */

/* Campo trampa contra bots: fuera de la vista y del foco, pero presente para quien rellena todo */
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.codigo-unico { text-align: center; font: 600 1.8rem/1 var(--f-titular); letter-spacing: .4em; }
.cabecera form { display: inline; margin: 0; }
.proveedores form { display: grid; margin: 0; }
.proveedores .proveedor { width: 100%; }
.formas-ingreso .fila { padding: 10px 0; border-bottom: 1px solid var(--borde-suave); }
.formas-ingreso .fila:last-child { border-bottom: 0; }
.formas-ingreso form { display: inline; margin: 0; }

/* ---------- Idioma ---------- */
.selector-idioma { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.selector-idioma select { width: auto; padding: 4px 8px; font-size: .82rem; background: transparent; color: inherit; border-color: var(--pie-linea); }
select option { background: var(--marfil); color: var(--tinta); }   /* la lista desplegable, legible en claro y oscuro */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Novedades y descargas ---------- */
ul.cambios-version { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
ul.cambios-version li { display: flex; gap: 10px; align-items: baseline; }
.tipo-cambio { flex: none; display: inline-flex; gap: 4px; align-items: center; font: 600 .7rem var(--f-ui); letter-spacing: .08em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 99px; background: var(--papiro-2); color: var(--bronce-osc); min-width: 110px; }
.tipo-cambio.novedad { background: color-mix(in srgb, var(--oro) 22%, var(--marfil)); }
.tipo-cambio.correccion { background: color-mix(in srgb, var(--egeo) 18%, var(--marfil)); color: var(--egeo); }
.tipo-cambio.seguridad { background: color-mix(in srgb, var(--olivo) 20%, var(--marfil)); color: var(--olivo); }
.aviso-idioma { font-size: .8rem; color: var(--tinta-3); display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.tarjeta.descarga { margin-bottom: 18px; }
.tarjeta.descarga .cab { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.botones-descarga { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
/* El tamaño se lee sobre el dorado: hereda la tinta del botón en vez de un gris que ahí se perdía */
.botones-descarga .btn small { color: inherit; opacity: .85; font-weight: 600; margin-left: 4px; }
.tarjeta.instalar summary { cursor: pointer; font-weight: 600; display: flex; gap: 8px; align-items: center; }
.tarjeta.instalar ol { margin: 12px 0 10px; padding-left: 1.3em; display: grid; gap: 8px; line-height: 1.55; }
.otros-idiomas summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.otros-idiomas ul { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
ul.huellas li.suya span { font-weight: 700; }
ul.huellas li.suya em { font-style: normal; color: var(--oro, inherit); }
.tarjeta.descarga details summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
ul.huellas { list-style: none; padding: 0; display: grid; gap: 6px; font-size: .8rem; }
ul.huellas li { display: grid; gap: 2px; }
ul.huellas code { word-break: break-all; color: var(--tinta-3); }
.contenedor.angosto { max-width: 820px; }

/* ---------- Segundo factor (/Seguridad) ---------- */
.pasos-factor { padding-left: 1.2em; display: grid; gap: 22px; }
.qr-factor { display: grid; gap: 10px; justify-items: start; margin-top: 12px; }
.codigo-qr { width: 220px; max-width: 100%; height: auto; border-radius: 6px; }
.clave-manual { display: block; font-size: 1.05rem; letter-spacing: .08em; word-break: break-all; }
ul.codigos-recuperacion { list-style: none; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
ul.codigos-recuperacion code { display: block; text-align: center; padding: 8px; font-size: 1.05rem; letter-spacing: .06em; border: 1px solid var(--borde-suave); border-radius: 6px; }
.plan .precio.pronto { font-family: var(--f-inscripcion); letter-spacing: .12em; font-size: 1.6rem; color: var(--bronce-osc); }
.plan .renovacion { margin: 6px 0 0; font-size: .85rem; line-height: 1.35; color: var(--tinta-2); }
.plan .compra-pronto { margin: 6px 0 0; font-family: var(--f-inscripcion); letter-spacing: .08em; font-size: .85rem; color: var(--bronce-osc); }

/* ---------- Textos legales ---------- */
.texto-legal h2 { font-size: 1.6rem; margin-top: 2.2em; }
.texto-legal ul { padding-left: 1.2em; display: grid; gap: .5em; }
.texto-legal p, .texto-legal li { line-height: 1.7; }

/* ---------- Idioma en la cabecera: botón discreto y panel con los seis idiomas ---------- */
.boton-idioma { height: 40px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--borde); background: transparent; color: var(--tinta-2);
  display: inline-flex; align-items: center; gap: 6px; font: 600 .74rem var(--f-ui); letter-spacing: .1em; cursor: pointer; }
.boton-idioma i { font-size: 17px; }
.boton-idioma:hover { border-color: var(--bronce); color: var(--tinta); }
.cabecera.sobre-oscuro:not(.compacta) .boton-idioma { color: var(--cine-texto); border-color: var(--cine-linea); }
.panel-idiomas { position: fixed; inset: auto; top: calc(var(--alto-cab) + 4px); right: max(16px, calc((100vw - 1320px) / 2));
  margin: 0; width: min(360px, calc(100vw - 32px)); padding: 16px; border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--marfil); color: var(--tinta); box-shadow: var(--sombra-alta); }
.panel-idiomas::backdrop { background: transparent; }
.panel-idiomas h2 { font: 600 .7rem var(--f-inscripcion); letter-spacing: .22em; text-transform: uppercase; color: var(--bronce-osc); margin: 2px 4px 12px; }
.opciones-idioma { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; }
.opciones-idioma button { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 11px 12px; text-align: left;
  border: 1px solid var(--borde-suave); border-radius: var(--radio-s); background: var(--papiro); color: var(--tinta); font: 500 .95rem var(--f-ui); cursor: pointer; }
.opciones-idioma button:hover { border-color: var(--bronce); }
/* Enlaces a la empresa (adaptive-brain.com) dentro de textos con color propio */
.firma a, .pie .base a { color: inherit; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, currentColor 40%, transparent); }
.firma a:hover, .pie .base a:hover { border-bottom-color: currentColor; }
.opciones-idioma button[aria-current=true] { border-color: var(--bronce); background: var(--fondo-realce); font-weight: 600; }
.opciones-idioma small { font-size: .66rem; letter-spacing: .1em; color: var(--tinta-3); }
.opciones-idioma i { color: var(--bronce-osc); }
@media (max-width: 560px) { .boton-idioma { padding: 0 10px; } }
/* Celulares angostos: la cabecera cabe entera con el botón de idioma (logo, idioma, tema y menú) */
@media (max-width: 480px) {
  .cabecera .contenedor { gap: 10px; }
  .cabecera .acciones { gap: 6px; }
  .cabecera .logo { gap: 10px; }
  .cabecera .logo span { font-size: 1.05rem; letter-spacing: .16em; }
  .boton-idioma { padding: 0 9px; gap: 4px; }
}

/* ---------- Los doce estilos visuales de la app (muestras de la ayuda, «Conoce Exaratio» y la portada) ---------- */
/* Los mismos colores que las muestras del cuadro «Estilo visual» de la app */
.estilo-fantasy    { --m-editor: #4b2f20; --m-panel: #e9cfa2; --m-papel: #f7ead0; }
.estilo-scifi      { --m-editor: #071017; --m-panel: #102836; --m-papel: #f8ffff; }
.estilo-noir       { --m-editor: #11151a; --m-panel: #242a32; --m-papel: #e3ded1; }
.estilo-romance    { --m-editor: #6d3948; --m-panel: #f0cbd1; --m-papel: #fff1ee; }
.estilo-horror     { --m-editor: #170d0f; --m-panel: #221114; --m-papel: #e3d8cb; }
.estilo-academic   { --m-editor: #d8dde3; --m-panel: #e2e7ed; --m-papel: #ffffff; }
.estilo-minimal    { --m-editor: #f1f0ed; --m-panel: #efeeeb; --m-papel: #fffefd; }
.estilo-typewriter { --m-editor: #51483b; --m-panel: #d2bc92; --m-papel: #f2e3bd; }
.estilo-cyberpunk  { --m-editor: #090611; --m-panel: #160b27; --m-papel: #f7f9ff; }
.estilo-epic       { --m-editor: #24304f; --m-panel: #e2e6ef; --m-papel: #f5f3ec; }
.estilo-young      { --m-editor: #4c8cb3; --m-panel: #d7eff7; --m-papel: #fffdf4; }
.estilo-editorial  { --m-editor: #2f3439; --m-panel: #d6dadf; --m-papel: #fffefc; }

/* ---------- La invitación a la beta cerrada (docs/BETA-CERRADA.md §10): un estandarte con Darío ----------
   Lapislázuli del emblema con filete de oro: se lee igual en el tema claro y en el oscuro. */
.convocatoria-beta { padding: 56px 0 8px; }
.estandarte {
  --e-fondo: #152340; --e-fondo-2: #0b1428; --e-oro: #d8b46a; --e-oro-tenue: rgba(216, 180, 106, .28); --e-texto: #f3ecdc; --e-texto-2: #c9c0ad;
  position: relative; overflow: hidden; border-radius: 18px; color: var(--e-texto);
  background:
    radial-gradient(circle at 14% 50%, rgba(216, 180, 106, .22), transparent 42%),
    linear-gradient(135deg, var(--e-fondo) 0%, var(--e-fondo-2) 100%);
  border: 1px solid var(--e-oro-tenue);
  box-shadow: inset 0 0 0 6px rgba(11, 20, 40, .5), inset 0 0 0 7px var(--e-oro-tenue), 0 24px 60px rgba(8, 12, 24, .35);
  display: grid; grid-template-columns: 240px 1fr; gap: 36px; align-items: center; padding: 44px 48px;
}
.estandarte::after {   /* filete dorado arriba, como la cabecera de los correos */
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, transparent, var(--e-oro), transparent);
}
.estandarte .antetitulo { color: var(--e-oro); margin: 0 0 10px; }
.estandarte .antetitulo .griego { color: var(--e-oro); opacity: .8; }
.estandarte h2 { color: var(--e-texto); font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.08; margin: 0 0 14px; }
.estandarte-dario { display: grid; justify-items: center; gap: 14px; text-align: center; }
.estandarte .dario {
  width: 168px; height: 168px; border-radius: 50%; object-fit: cover; object-position: 50% 28%; background: #fff;
  border: 3px solid var(--e-oro); box-shadow: 0 0 0 8px rgba(216, 180, 106, .12), 0 18px 40px rgba(0, 0, 0, .45);
}
.estandarte-voz {
  position: relative; margin: 0; padding: 10px 14px; border-radius: 12px; font-family: var(--f-titular); font-style: italic;
  font-size: 1.08rem; line-height: 1.35; color: var(--e-texto); background: rgba(255, 255, 255, .06); border: 1px solid var(--e-oro-tenue);
}
.estandarte-voz::before {
  content: ""; position: absolute; left: 50%; top: -7px; width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg);
  background: #1a2847; border-left: 1px solid var(--e-oro-tenue); border-top: 1px solid var(--e-oro-tenue);
}
.estandarte-texto { color: var(--e-texto-2); font-size: 1.08rem; line-height: 1.6; margin: 0 0 18px; max-width: 46em; }
.estandarte-sellos { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.estandarte-sellos li {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: .95rem;
  color: var(--e-texto); background: rgba(216, 180, 106, .08); border: 1px solid var(--e-oro-tenue);
}
.estandarte-sellos i { color: var(--e-oro); font-size: 1.2rem; }
.estandarte-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.estandarte-plazo { display: inline-flex; align-items: center; gap: 6px; color: var(--e-texto-2); font-size: .95rem; }
.estandarte-plazo i { color: var(--e-oro); }

/* Compacta: en Mi biblioteca y Novedades */
.estandarte.compacto { grid-template-columns: auto 1fr auto; gap: 18px; padding: 18px 22px; border-radius: 14px; }
.estandarte.compacto .dario { width: 64px; height: 64px; border-width: 2px; box-shadow: 0 0 0 5px rgba(216, 180, 106, .12); }
.estandarte.compacto .antetitulo { margin-bottom: 4px; font-size: .7rem; }
.estandarte.compacto .estandarte-texto { margin: 0; font-size: 1rem; }
.estandarte.compacto .estandarte-texto b { color: var(--e-texto); font-family: var(--f-titular); font-size: 1.2rem; font-weight: 600; margin-right: 6px; }

@media (max-width: 760px) {
  .estandarte { grid-template-columns: 1fr; gap: 22px; padding: 30px 22px; text-align: center; }
  .estandarte .dario { width: 132px; height: 132px; }
  .estandarte-sellos, .estandarte-acciones { justify-content: center; }
  .estandarte-texto { margin-inline: auto; }
  .estandarte.compacto { grid-template-columns: auto 1fr; text-align: left; }
  .estandarte.compacto .btn { grid-column: 1 / -1; justify-self: start; }
}

/* Botones que van juntos bajo un campo: en fila, del mismo alto (Mi biblioteca, agradecimientos) */
.fila-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }

/* ---------- Espacio de la beta (docs/ESPACIO-BETA.md) ---------- */
.espacio-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 20px; }
.espacio-quien { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.espacio-filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0 16px; align-items: end;
  padding: 16px 18px 0; margin-bottom: 20px; border: 1px solid var(--borde); border-radius: 14px; background: var(--fondo-2, transparent); }
.espacio-filtros .buscar { grid-column: 1 / -1; }
.espacio-casillas { display: flex; flex-wrap: wrap; gap: 4px 18px; align-self: center; margin-bottom: 16px; }
.espacio-filtros > .fila-botones { margin-bottom: 16px; }
.temas-beta { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tema-beta { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; padding: 14px 16px;
  border: 1px solid var(--borde); border-radius: 14px; background: var(--fondo-tarjeta, transparent); }
.tema-beta.fijado { border-color: var(--oro-claro); background: var(--fondo-realce); }
.tema-beta.oculto { opacity: .6; }
.tema-beta .clase-icono { font-size: 1.4rem; color: var(--bronce); margin-top: 2px; }
.tema-titulo { font-weight: 600; font-size: 1.05rem; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.tema-titulo:hover { text-decoration: underline; }
.tema-datos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 6px; font-size: .85rem; color: var(--tinta-3); }
.tema-datos .equipo { color: var(--bronce); margin-left: 3px; }
.tema-cifras { display: flex; gap: 12px; color: var(--tinta-3); font-size: .9rem; white-space: nowrap; }
.tema-cifras i { margin-right: 3px; }
.tema-h1 { font-size: clamp(1.4rem, 3vw, 1.9rem); overflow-wrap: anywhere; }
.mensaje-autor { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.texto-beta { overflow-wrap: anywhere; line-height: 1.6; }
.texto-beta h4 { font-size: 1rem; margin: 1em 0 .4em; }
.texto-beta pre { overflow-x: auto; padding: 10px 12px; border-radius: 8px; background: var(--fondo-realce); }
.texto-beta blockquote { margin: .6em 0; padding-left: 12px; border-left: 3px solid var(--borde); color: var(--tinta-2); }
.tema-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.tema-acciones form { margin: 0; }
.tema-acciones details.borrar summary { list-style: none; }
.tema-acciones details.borrar summary::-webkit-details-marker { display: none; }
.tema-acciones details.borrar[open] form { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; }
.mensaje-beta { margin-top: 10px; }
.mensaje-beta.de-equipo { border-color: var(--oro-claro); }
.mensaje-beta.oculto { opacity: .65; }
.clases-beta { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.clase-beta { position: relative; cursor: pointer; }
.clase-beta input { position: absolute; opacity: 0; }
.clase-beta span { display: grid; gap: 4px; height: 100%; padding: 12px 14px; border: 1px solid var(--borde); border-radius: 12px; font-weight: 400; }
.clase-beta span i { font-size: 1.3rem; color: var(--bronce); }
.clase-beta small { color: var(--tinta-3); font-size: .82rem; line-height: 1.35; }
.clase-beta input:checked + span { border-color: var(--bronce); box-shadow: 0 0 0 2px color-mix(in srgb, var(--bronce) 30%, transparent); }
.clase-beta input:focus-visible + span { outline: 2px solid var(--bronce); outline-offset: 2px; }
fieldset.campo { border: 0; padding: 0; margin: 0 0 16px; }
fieldset.campo legend { font-weight: 600; font-size: .88rem; color: var(--tinta-2); margin-bottom: 8px; }
@media (max-width: 560px) {
  .tema-beta { grid-template-columns: 1fr; }
  .tema-beta .clase-icono { display: none; }
}
.historial-beta { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-size: .88rem; color: var(--tinta-2); }
.historial-beta i { color: var(--bronce); margin-right: 4px; }
.moderacion-beta { margin-top: 14px; border-color: var(--oro-claro); }
.moderacion-beta summary { cursor: pointer; font-weight: 600; color: var(--bronce-osc); margin-bottom: 4px; }
.moderacion-beta[open] summary { margin-bottom: 14px; }
.moderacion-beta form { margin: 0 0 6px; }
.moderacion-mensaje { margin-top: 8px; }
.moderacion-mensaje details.borrar[open] form input { min-width: 220px; }
.capturas-beta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.capturas-beta a { display: block; border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; background: var(--fondo-realce); }
.capturas-beta img { display: block; width: auto; height: auto; max-width: min(320px, 100%); max-height: 220px; object-fit: contain; }
.capturas-beta img.giro-90 { transform: rotate(90deg); }
.capturas-beta img.giro-180 { transform: rotate(180deg); }
.capturas-beta img.giro-270 { transform: rotate(270deg); }
.traduccion-beta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; font-size: .85rem; }
.traduccion-beta .traduccion-externa { flex-basis: 100%; margin: 4px 0 0; }
.detectado { display: block; margin-top: 4px; }

/* Mi biblioteca: las estrellas de reconocimiento, con la estrella de ocho puntas que dibuja Exaratio en el título */
.estrella-cuenta { display: flex; gap: 16px; align-items: flex-start; }
.estrella-ocho { flex: none; width: 44px; height: 44px; stroke: rgba(0, 0, 0, .28); stroke-width: .5; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .18)); }
.estrella-oro { fill: #c9a45c; }
.estrella-plata { fill: #b9bfc8; }
.estrella-bronce { fill: #a8703f; }
.estrella-lapislazuli { fill: #26478f; }
.estrella-rubi { fill: #a5203a; }
.estrella-esmeralda { fill: #1f7a5a; }
.estrella-purpura { fill: #6b3a8c; }

/* La organización (docs/ORGANIZACIONES.md): formularios de una fila —el campo y su botón al pie— y listas sin viñetas. */
.organizacion .fila-campos, .seccion .fila-campos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.organizacion .fila-campos .campo { flex: 1 1 240px; margin: 0; }
/* Sin el margen inferior del diseño común, que el campo de al lado ya no tiene: el botón queda a ras del campo, y el grande, de su alto. */
.organizacion .fila-campos > .btn, .organizacion .fila-campos > .fila-casilla { margin-bottom: 0; }
.organizacion .fila-campos > .btn:not(.chico) { min-height: 44px; }
/* Texto, lista y fecha del mismo alto: si no, sus etiquetas quedan a distinta altura en la misma fila. */
.organizacion .fila-campos .campo :is(input, select) { height: 44px; }
.organizacion .lista-plana { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.organizacion .lista-plana li { flex-wrap: wrap; gap: 8px; }
.organizacion .lista-plana form { margin: 0; }
.organizacion .tenue, .seccion .tenue { opacity: .72; }
.organizacion .ayuda, .seccion .ayuda { margin: 6px 0 0; font-size: .86rem; opacity: .78; }
.organizacion details.facultades { flex-basis: 100%; }
.organizacion details.dejar summary { list-style: none; cursor: pointer; }
.organizacion details.dejar summary::-webkit-details-marker { display: none; }
.organizacion details.dejar[open] { flex-basis: 100%; }
.organizacion details.dejar form { margin-top: 8px; }
.organizacion details.facultades summary { cursor: pointer; font-weight: 600; padding: 2px 0; }
.organizacion .casillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 16px; margin-top: 8px; }
.organizacion .chips { gap: 6px; }
.organizacion .chips form { display: inline; }