/*
 * Las fichas de diseño de Tu Letra Online.
 *
 * Un solo sitio donde viven el color, la tipografía, el espacio, el radio y el
 * movimiento. Las tres superficies —el sitio público, el panel del equipo y el
 * portal del autor— tiran de aquí, así que cambiar la identidad es cambiar este
 * fichero y nada más.
 *
 * Es el primer entregable que pide el briefing v2.0, y no por orden: mientras
 * cada pantalla llevaba sus colores escritos dentro, cambiar un azul eran tres
 * ficheros y la certeza de olvidarse de alguno.
 *
 * **Misma identidad, distinta densidad.** El briefing lo dice y conviene no
 * perderlo de vista: la web pública y el portal comparten paleta y letra, pero
 * no la compostura. Al panel se viene a despachar trabajo; a la web pública, a
 * descubrir. Por eso aquí solo están las fichas, y la escala de cada superficie
 * la pone su propia hoja.
 */

:root {
  /* --- Color -------------------------------------------------------------
   * Paleta del briefing v2.0, aprobada el 19-09-2026. La proporción que pide:
   * 60 % blanco y papel, 25 % noche y tinta, 10 % azul, 5 % acentos.
   */
  --azul:      #063fb8;  /* acción principal, enlaces activos, foco */
  --azul-hondo:#043090;  /* el mismo, pisado */
  --noche:     #071b3a;  /* fondos oscuros, titulares, cierres */
  --papel:     #f7f2e8;  /* fondo de lectura, cálido */
  --papel-hondo:#f0e9dc; /* secciones alternas y tarjetas sobre papel */
  --cielo:     #ddebff;  /* fondos funcionales y descanso visual */
  --conexion:  #29b6d1;  /* estados activos y nodos; nunca texto corrido */
  --oro:       #c89a45;  /* acento cultural, escaso; nunca la acción principal */
  --tinta:     #182233;  /* texto principal */
  --tinta-suave:#4a5568; /* texto atenuado */
  --blanco:    #ffffff;
  /* Texto atenuado sobre fondo oscuro: el gris de siempre no tiene
   * contraste suficiente sobre el azul noche. */
  --sobre-noche: #b9c6dd;
  /* Fondo de lo que hay que mirar con cuidado, como una nota interna. */
  --aviso-fondo: #fdf6e9;

  --borde:      #d7deea;
  --borde-tenue:#e8edf5;

  /* Estados. No se apoyan solo en el color: en la interfaz van siempre con
   * una palabra al lado, porque quien no distingue el rojo del verde también
   * tiene que poder leer si algo ha ido bien. */
  --conforme: #2f6f4e;
  --aviso:    #a06a1f;
  --error:    #a82b22;

  /* --- Tipografía --------------------------------------------------------
   * Cormorant Garamond para lo que se contempla, Inter para lo que se usa.
   * Las dos se sirven desde este servidor y no desde Google Fonts: cargarlas
   * de un tercero le manda la IP de cada visitante sin habérselo preguntado.
   * Si los ficheros faltan, Georgia y Arial toman el relevo sin romper nada.
   */
  --display:  "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --interfaz: Inter, Arial, Helvetica, sans-serif;

  /* --- Espacio -----------------------------------------------------------
   * Escala de ocho en ocho. Que sea una escala y no números sueltos es lo que
   * hace que dos bloques hechos en semanas distintas respiren igual.
   */
  --e1: .5rem;    /*  8 */
  --e2: 1rem;     /* 16 */
  --e3: 1.5rem;   /* 24 */
  --e4: 2rem;     /* 32 */
  --e5: 3rem;     /* 48 */
  --e6: 4rem;     /* 64 */
  --e7: 6rem;     /* 96 */
  --e8: 8rem;     /* 128 */

  /* --- Medidas -----------------------------------------------------------*/
  --ancho:       80rem;   /* 1280 px, el contenedor máximo del briefing */
  --ancho-panel: 76rem;
  --lectura:     44rem;   /* 704 px: la medida cómoda para leer seguido */

  /* --- Forma -------------------------------------------------------------
   * Radio corto en los controles y algo más generoso en las tarjetas
   * editoriales. Nada de píldoras: el briefing lo desaconseja y con razón,
   * porque un botón muy redondeado deja de parecer un botón.
   */
  --radio-control: 12px;
  --radio-tarjeta: 20px;

  /* --- Movimiento --------------------------------------------------------
   * Si una animación no ayuda a entender, orientar o confirmar, se quita.
   */
  --paso-corto: 160ms;   /* botones y estados */
  --paso-medio: 220ms;   /* tarjetas y navegación */
  --paso-largo: 520ms;   /* entrada de secciones */
  --curva: cubic-bezier(.22, .61, .36, 1);
}

/*
 * Quien ha pedido menos movimiento en su sistema lo ha pedido por algo: mareos,
 * migrañas, dificultad para seguir la pantalla. Se apaga todo lo que se
 * desplaza y se conservan los cambios de estado, que son información.
 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --paso-corto: 0ms;
    --paso-medio: 0ms;
    --paso-largo: 0ms;
  }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Tipografías del servidor --------------------------------------------
 * Tres ficheros, no siete. Las dos familias son **variables**: un mismo fichero
 * contiene toda la escala de grosores y el navegador interpola el que se le
 * pida dentro del rango. Declarar un peso por fichero obligaría al navegador a
 * descargar lo mismo tres veces.
 *
 * Se sirven desde aquí y no desde Google: cargarlas de un tercero le manda la
 * IP de cada lector sin habérselo preguntado. Se bajan una vez con
 * `python ops/traer-fuentes.py` y viajan con el despliegue.
 *
 * Las dos llevan licencia SIL Open Font, que exige que el aviso de copyright y
 * el texto de la licencia acompañen a la fuente. Están al lado, en
 * `/static/fuentes/*-OFL.txt`, y se sirven en abierto como el resto.
 *
 * Si los ficheros faltan, Georgia y Arial toman el relevo sin romper nada.
 */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/static/fuentes/cormorant-garamond.c47ff12887a3.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/static/fuentes/cormorant-garamond-italic.aa6bdaf51a40.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/static/fuentes/inter.260c81a4759b.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/*
 * La cursiva de Inter existe y se declara. Sin ella el navegador inclina las
 * letras rectas por su cuenta —una cursiva falsa— y se nota: las formas de la
 * «a» y la «f» de una cursiva de verdad no son las rectas torcidas. El fichero
 * solo se descarga si alguna parte de la página la usa.
 */
@font-face {
  font-family: "Inter";
  src: url("/static/fuentes/inter-italic.abfa19127a95.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* --- Lo mínimo que comparten las tres superficies ------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/*
 * El foco se ve siempre y en todas partes. Es la única forma de usar el sitio
 * con el teclado, y quitarlo «porque afea» deja fuera a quien no usa ratón.
 * Tres píxeles y separado del borde, como pide el briefing.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Para lo que solo tiene que leer un lector de pantalla. */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/*
 * El salto al contenido. Escondido hasta que el teclado lo alcanza, y entonces
 * bien visible: sin él, llegar al texto exige pasar por toda la navegación en
 * cada página.
 */
.saltar {
  position: absolute;
  left: var(--e2);
  top: -4rem;
  z-index: 100;
  background: var(--azul);
  color: var(--blanco);
  padding: var(--e1) var(--e3);
  border-radius: var(--radio-control);
  font-family: var(--interfaz);
  font-size: .9rem;
  text-decoration: none;
  transition: top var(--paso-corto) var(--curva);
}
.saltar:focus { top: var(--e2); }

/*
 * El ojo de las contraseñas.
 *
 * Vive en las fichas y no en la hoja del panel o la del portal porque el campo
 * de contraseña aparece en los dos, y en la invitación, y donde haga falta
 * mañana. Una copia por superficie es una copia que se queda vieja.
 *
 * El botón lo crea `base/ver-clave.js`; estas reglas solo lo colocan. Si el
 * guion no se ejecuta, `.con-ojo` no existe y el campo se ve como siempre.
 */
.con-ojo { position: relative; display: block; }

.con-ojo input {
  /* Sitio para el botón, para que el texto no pase por debajo. */
  padding-right: 2.9rem;
  width: 100%;
}

.con-ojo__boton {
  position: absolute;
  right: .55rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  /* 40px de lado: lo que hace falta para acertarle con el dedo. */
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tinta-suave);
  cursor: pointer;
  border-radius: var(--radio-control);
}

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

.con-ojo__boton:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 1px;
  color: var(--tinta);
}

/*
 * Lo que se copia entero o no sirve: un enlace de invitación, un mensaje listo
 * para pegar. El botón lo crea `base/copiar.js`; esto solo lo coloca.
 */
.con-copiar { position: relative; display: block; margin-bottom: var(--e2); }

.con-copiar input,
.con-copiar textarea {
  width: 100%;
  /* Sitio para el botón, para que el texto no pase por debajo. */
  padding-right: 6.5rem;
  font-family: var(--interfaz);
  font-size: .9rem;
  background: var(--blanco);
}

.con-copiar textarea { resize: vertical; padding-right: 1rem; padding-top: 2.6rem; }

.con-copiar__boton {
  position: absolute;
  right: .5rem;
  top: .5rem;
  padding: .4rem .8rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-control);
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--interfaz);
  font-size: .82rem;
  cursor: pointer;
}

.con-copiar__boton:hover { background: var(--papel-hondo); }

.con-copiar__boton:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }

.con-copiar__boton--hecho {
  background: var(--azul);
  border-color: var(--azul);
  color: var(--blanco);
}