/* RAAT: Real Academia do Ativo */

:root {
  color-scheme: light;

  --papel: #ffffff;
  --fondo: #f7f5f0;
  --tinta: #1d1d1b;
  --tinta-suave: #5d5a52;
  --apagado: #bdb7aa;
  --granate: #8b1e2d;
  --granate-hover: #6c1522;
  --granate-relleno: #8b1e2d;
  --granate-relleno-hover: #6c1522;
  --foco: rgba(139, 30, 45, 0.12);
  --oro: #b08d3c;
  --linea: #e3ddcf;
  --borde-campo: #c9c2b2;
  --aviso: #fbf4e2;
  --ejemplo: #3f5d7a;
  --error: #a32020;
  --error-fondo: #fdecec;
  --error-borde: #e0b4b4;
  --peligro: #a32020;
  --escudo-crisol: #1d1d1b;
  --escudo-llama: #8b1e2d;
  --escudo-llama-lateral: #a8323f;

  --serif-marca: 'EB Garamond', Garamond, 'Times New Roman', serif;
  --serif-texto: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --ancho: 860px;
}

/* Modo oscuro: lo activa public/js/tema.js con data-tema="oscuro" en <html>. */
:root[data-tema='oscuro'] {
  color-scheme: dark;

  --papel: #1b1a17;
  --fondo: #24221e;
  --tinta: #ebe5d8;
  --tinta-suave: #aaa293;
  --apagado: #57534b;
  --granate: #df7d87;
  --granate-hover: #eea3ab;
  --granate-relleno: #9b2738;
  --granate-relleno-hover: #b13246;
  --foco: rgba(223, 125, 135, 0.22);
  --oro: #c4a256;
  --linea: #3a3731;
  --borde-campo: #4f4a42;
  --aviso: #2c2719;
  --ejemplo: #9fb9d4;
  --error: #f0a0a0;
  --error-fondo: #3b1f1f;
  --error-borde: #6b3434;
  --peligro: #b3302f;
  --escudo-crisol: #d6cdbb;
  --escudo-llama: #c8384b;
  --escudo-llama-lateral: #dc5d6c;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--serif-texto);
  font-size: 1.0625rem;
  line-height: 1.6;
}

a {
  color: var(--granate);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--granate-hover);
}

:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 2px;
}

code {
  font-size: 0.9em;
  background: var(--fondo);
  padding: 0 0.25em;
  border-radius: 3px;
}

sup {
  line-height: 0;
}

abbr[title] {
  text-decoration: underline dotted var(--apagado);
  text-underline-offset: 3px;
  cursor: help;
}

/* En el móvil no hay ratón: al tocar una abreviatura se despliega su significado. */
abbr[title]:focus::after {
  content: '(' attr(title) ')';
  display: inline-block;
  margin-left: 0.3em;
  text-indent: 0;
  font-style: italic;
  color: var(--tinta-suave);
}

/* ---------- Cabecera ---------- */

.cabecera {
  border-top: 4px solid var(--granate-relleno);
  border-bottom: 1px solid var(--linea);
  background: var(--papel);
}

.cabecera-interior {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0.6rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.marca {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--tinta);
  text-decoration: none;
  min-width: 0;
}

.marca:hover {
  color: var(--tinta);
}

.escudo-marca {
  width: 36px;
  height: 42px;
  flex-shrink: 0;
}

.marca-texto {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}

.marca-nombre {
  font-family: var(--serif-marca);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.marca-sub {
  font-family: var(--serif-marca);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--tinta-suave);
}

.menu {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--serif-marca);
  font-size: 1.05rem;
  flex-shrink: 0;
}

.menu a {
  color: var(--tinta);
  text-decoration: none;
}

.menu a:hover {
  color: var(--granate);
  text-decoration: underline;
}

.menu .corto {
  display: none;
}

/* ---------- Escudo y botón de tema ---------- */

.escudo svg {
  display: block;
  width: 100%;
  height: 100%;
}

.escudo .crisol {
  fill: var(--escudo-crisol);
}

.escudo .llama {
  fill: var(--escudo-llama);
}

.escudo .llama-lateral {
  fill: var(--escudo-llama-lateral);
}

.boton-tema {
  display: grid;
  place-items: center;
  padding: 4px;
  border: 1px solid var(--linea);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}

.boton-tema:hover {
  border-color: var(--granate);
}

.bandera {
  display: block;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

/* En claro se ve la bandera española (pasa a oscuro); en oscuro, la argentina (vuelve a claro). */
.bandera-ar,
[data-tema='oscuro'] .bandera-es {
  display: none;
}

[data-tema='oscuro'] .bandera-ar {
  display: block;
}

/* ---------- Buscador ---------- */

.barra-busqueda {
  background: var(--fondo);
  border-bottom: 1px solid var(--linea);
  padding: 0.9rem 1rem;
}

.buscador {
  display: flex;
  max-width: 560px;
  margin: 0 auto;
  border: 1px solid var(--borde-campo);
  border-radius: 4px;
  background: var(--papel);
  overflow: hidden;
}

.buscador:focus-within {
  border-color: var(--granate);
  box-shadow: 0 0 0 3px var(--foco);
}

.buscador input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 0.6rem 0.9rem;
  font: inherit;
  font-size: 1.05rem;
  color: var(--tinta);
  background: transparent;
}

.buscador input:focus {
  outline: none;
}

.buscador button {
  border: 0;
  background: var(--granate-relleno);
  color: #fff;
  padding: 0 1rem;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.buscador button:hover {
  background: var(--granate-relleno-hover);
}

.buscador-grande {
  max-width: 620px;
}

.buscador-grande input {
  padding: 0.85rem 1.1rem;
  font-size: 1.2rem;
}

.buscador-grande button {
  padding: 0 1.3rem;
}

/* ---------- Contenido ---------- */

.contenido {
  flex: 1;
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

.pagina-titulo {
  font-family: var(--serif-marca);
  font-weight: 600;
  font-size: 1.9rem;
  line-height: 1.2;
  margin: 0.5rem 0 1rem;
}

.pagina-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.pagina-estrecha {
  max-width: 420px;
  margin: 1rem auto;
}

.ayuda {
  color: var(--tinta-suave);
  font-size: 0.92rem;
  font-weight: normal;
}

.vacio {
  color: var(--tinta-suave);
  font-style: italic;
}

.aviso {
  background: var(--aviso);
  border-left: 4px solid var(--oro);
  padding: 0.75rem 1rem;
  margin: 0.5rem 0 1.25rem;
}

.aviso p {
  margin: 0.3rem 0;
}

.error {
  background: var(--error-fondo);
  border-left: 4px solid var(--error);
  color: var(--error);
  padding: 0.6rem 1rem;
}

/* ---------- Portada ---------- */

.portada {
  text-align: center;
  padding: 1.5rem 0 2rem;
}

.portada-escudo {
  width: 104px;
  height: 122px;
  margin: 0 auto 0.5rem;
}

.portada-titulo {
  font-family: var(--serif-marca);
  font-weight: 600;
  font-size: clamp(1.6rem, 6vw, 2.6rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.15;
  margin: 0;
}

.portada-divisa {
  font-family: var(--serif-marca);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--tinta-suave);
  margin: 0.35rem 0 1.6rem;
}

.portada-divisa::before,
.portada-divisa::after {
  content: '';
  display: inline-block;
  width: 2.2rem;
  height: 1px;
  background: var(--oro);
  vertical-align: middle;
  margin: 0 0.75rem;
}

.portada-columnas {
  display: grid;
  gap: 1.25rem;
}

.tarjeta {
  border: 1px solid var(--linea);
  border-top: 3px solid var(--granate-relleno);
  background: var(--papel);
  padding: 1.1rem 1.25rem 1.25rem;
}

.tarjeta-titulo {
  font-family: var(--serif-marca);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 0 0 0.6rem;
}

.palabra-dia-lema {
  display: inline-block;
  font-family: var(--serif-marca);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.2;
  color: var(--granate);
  text-decoration: none;
}

.palabra-dia-def {
  margin: 0.4rem 0 0.8rem;
}

.mas {
  font-size: 0.95rem;
}

.mas::after {
  content: ' →';
}

/* ---------- Listas de palabras ---------- */

.lista-palabras {
  list-style: none;
  padding: 0;
  margin: 0 0 0.9rem;
  columns: 2;
  column-gap: 1.5rem;
}

.lista-palabras li {
  break-inside: avoid;
  padding: 0.15rem 0;
}

.lista-palabras a {
  font-weight: 600;
  text-decoration: none;
}

.lista-palabras a:hover {
  text-decoration: underline;
}

.lista-resultados {
  columns: 1;
}

.abecedario {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0 0 1.5rem;
  font-family: var(--serif-marca);
  font-size: 1.1rem;
}

.abecedario a,
.abecedario span {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid var(--linea);
}

.abecedario a {
  color: var(--granate);
  font-weight: 600;
  text-decoration: none;
}

.abecedario a:hover {
  background: var(--granate-relleno);
  color: #fff;
}

.abecedario span {
  color: var(--apagado);
}

.grupo-letra h2 {
  font-family: var(--serif-marca);
  font-size: 1.6rem;
  color: var(--granate);
  border-bottom: 1px solid var(--linea);
  margin: 1.5rem 0 0.6rem;
  padding-bottom: 0.2rem;
}

/* ---------- Entrada ---------- */

.entrada {
  padding-top: 0.5rem;
}

.entrada-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.lema {
  font-family: var(--serif-marca);
  font-weight: 700;
  font-size: clamp(2.2rem, 8vw, 3rem);
  line-height: 1.1;
  color: var(--granate);
  margin: 0 0 0.5rem;
  overflow-wrap: anywhere;
}

.etimologia {
  color: var(--tinta-suave);
  font-size: 0.97rem;
  margin: 0 0 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--linea);
}

.acepciones {
  list-style: none;
  padding: 0;
  margin: 0;
}

.acepcion {
  margin: 0 0 0.9rem;
  padding-left: 1.9rem;
  text-indent: -1.9rem;
}

.acepcion .num {
  display: inline-block;
  width: 1.9rem;
  text-indent: 0;
  font-weight: 600;
  color: var(--granate);
}

.cat abbr {
  font-style: italic;
  color: var(--tinta-suave);
}

.cat {
  margin-right: 0.15rem;
}

.ejemplo {
  display: block;
  text-indent: 0;
  font-style: italic;
  color: var(--ejemplo);
  margin-top: 0.15rem;
}

/* Dentro del ejemplo, que ya va en cursiva, lo marcado como cursiva va en redonda. */
.ejemplo em {
  font-style: normal;
}

a.ref {
  font-weight: 600;
}

.nota-entrada {
  margin-top: 2rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--linea);
  font-size: 0.88rem;
  color: var(--tinta-suave);
}

/* ---------- Formularios y botones ---------- */

.formulario {
  display: grid;
  gap: 1rem;
}

.formulario label {
  display: grid;
  gap: 0.3rem;
  font-weight: 600;
}

.campo {
  display: grid;
  gap: 0.3rem;
}

.campo label {
  display: block;
}

.campo .ayuda {
  margin: 0;
}

.formulario input,
.formulario textarea {
  font: inherit;
  font-weight: normal;
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--borde-campo);
  border-radius: 3px;
  background: var(--papel);
  color: var(--tinta);
}

.formulario textarea {
  resize: vertical;
}

.formulario input:focus,
.formulario textarea:focus {
  outline: none;
  border-color: var(--granate);
  box-shadow: 0 0 0 3px var(--foco);
}

.acepciones-campos {
  border: 1px solid var(--linea);
  padding: 0.75rem 1rem 1rem;
  margin: 0;
  min-width: 0;
}

.acepciones-campos legend {
  font-weight: 600;
  padding: 0 0.35rem;
}

.acepciones-campos .ayuda {
  margin: 0 0 0.75rem;
}

.fila-acepcion {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 0.6rem;
  padding: 0.75rem 0;
  border-bottom: 1px dashed var(--linea);
}

.fila-acepcion:first-child {
  padding-top: 0;
}

.fila-acepcion .num {
  font-weight: 600;
  color: var(--granate);
  padding-top: 0.5rem;
  min-width: 1.5rem;
}

.fila-acepcion .campos {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
}

.acciones-fila {
  grid-column: 2;
  display: flex;
  gap: 0.35rem;
}

.barra-formato {
  display: flex;
  gap: 0.35rem;
}

.acciones-fila button,
.barra-formato button {
  font: inherit;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--linea);
  background: var(--fondo);
  color: var(--tinta-suave);
  cursor: pointer;
  border-radius: 3px;
}

.barra-formato button {
  width: auto;
  min-width: 2rem;
  padding: 0 0.45rem;
  font-size: 0.9rem;
}

.acciones-fila button:hover,
.barra-formato button:hover {
  border-color: var(--granate);
  color: var(--granate);
}

#js-anadir {
  margin-top: 0.75rem;
}

.botones {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.boton,
.boton-sec,
.boton-peligro {
  display: inline-block;
  font: inherit;
  font-size: 0.95rem;
  padding: 0.45rem 1rem;
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.4;
}

.boton {
  background: var(--granate-relleno);
  border: 1px solid var(--granate-relleno);
  color: #fff;
}

.boton:hover {
  background: var(--granate-relleno-hover);
  color: #fff;
}

.boton-sec {
  background: var(--papel);
  border: 1px solid var(--borde-campo);
  color: var(--tinta);
}

.boton-sec:hover {
  border-color: var(--granate);
  color: var(--granate);
}

.boton-peligro {
  background: var(--papel);
  border: 1px solid var(--error-borde);
  color: var(--error);
}

.boton-peligro:hover {
  background: var(--peligro);
  border-color: var(--peligro);
  color: #fff;
}

.enlace {
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  color: var(--granate);
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- Administración ---------- */

.tabla-admin {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--linea);
}

.tabla-admin li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.25rem 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--linea);
}

.tabla-lema {
  font-weight: 600;
  text-decoration: none;
}

.tabla-fecha {
  grid-row: 2;
  font-size: 0.85rem;
  color: var(--tinta-suave);
}

.tabla-acciones {
  grid-row: 1 / span 2;
  grid-column: 2;
  display: flex;
  gap: 0.4rem;
}

.tabla-acciones form {
  margin: 0;
}

.fila-abreviatura {
  grid-template-columns: 7rem 1fr auto auto;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--linea);
}

.fila-nueva {
  margin-bottom: 0.75rem;
  border-bottom: 2px solid var(--linea);
}

/* ---------- Tabla pública de abreviaturas ---------- */

.tabla-abreviaturas {
  margin: 0;
}

.tabla-abreviaturas div {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 1rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--linea);
  break-inside: avoid;
}

.tabla-abreviaturas dt {
  font-weight: 600;
}

.tabla-abreviaturas dd {
  margin: 0;
  color: var(--tinta-suave);
}

/* ---------- Pie ---------- */

.pie {
  border-top: 1px solid var(--linea);
  background: var(--fondo);
  padding: 1.5rem 1rem;
  text-align: center;
  font-size: 0.88rem;
  color: var(--tinta-suave);
}

.pie p {
  margin: 0.25rem 0;
}

.pie-divisa {
  font-family: var(--serif-marca);
  font-style: italic;
  font-size: 1.05rem;
}

.pie-acceso {
  margin-top: 0.6rem;
}

.pie-acceso form {
  display: inline;
  margin: 0;
}

/* ---------- Pantallas grandes ---------- */

@media (min-width: 700px) {
  .contenido {
    padding: 2rem 1.5rem 4rem;
  }

  .portada {
    padding: 2.5rem 0 3rem;
  }

  .portada-columnas {
    grid-template-columns: 1fr 1fr;
  }

  .lista-palabras {
    columns: 3;
  }

  .portada-columnas .lista-palabras {
    columns: 2;
  }

  .lista-resultados {
    columns: 2;
  }

  .tabla-abreviaturas {
    columns: 2;
    column-gap: 2.5rem;
  }
}

@media (max-width: 520px) {
  .marca-sub {
    display: none;
  }

  .marca-nombre {
    font-size: 0.8rem;
    letter-spacing: 0.1em;
  }

  .menu {
    gap: 0.75rem;
  }

  .menu .largo {
    display: none;
  }

  .menu .corto {
    display: inline;
  }

  .fila-abreviatura {
    grid-template-columns: 6rem 1fr;
  }

  .fila-abreviatura button {
    justify-self: start;
  }

  .portada-divisa::before,
  .portada-divisa::after {
    width: 1.2rem;
    margin: 0 0.5rem;
  }
}