/* ==========================================================================
   AutoDoc — hoja común.

   Es la base que comparten todas las vistas: la paleta, las tipografías, el
   armazón (cabecera, pie, avisos) y las piezas que se repiten de una pantalla
   a otra (botones, campos, tablas, distintivos, estados vacíos). Cada vista
   añade encima su hoja propia solo con lo que de verdad es suyo.

   El aire es el de las aplicaciones del vicerrectorado —el mismo azul, las
   mismas tipografías y el mismo armazón que Ágora—, con un gesto propio: el
   filo. Lo que en AutoDoc *es* un documento —la tarjeta del acceso, las del
   repositorio— lleva en el borde de arriba un hilo de azul con el arranque en
   dorado; lo que es interfaz —barras, tablas, diálogos, controles— va liso.
   Todo sobre blanco y gris azulado, sin más color que el azul de la casa y el
   dorado en los detalles. Esa es toda la regla, y de ella cuelga el resto.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tipografías. Se sirven desde este mismo dominio y no desde un CDN: son los
   mismos ficheros que Ágora y UNIVERSA, así que las tres aplicaciones se leen
   con la misma letra aunque se abran en la misma sesión.

   Myriad Pro es la institucional y lleva todo el texto. Newsreader se queda
   para los titulares, que es donde se nota que esto es de la Universidad y no
   una herramienta cualquiera.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Myriad Pro';
  src: url("../fonts/myriad-pro-regular.6831f77fdd0e.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Myriad Pro';
  src: url("../fonts/myriad-pro-semibold.f802386ad94b.woff2") format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Myriad Pro';
  src: url("../fonts/myriad-pro-bold.0cf926538095.woff2") format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Newsreader es variable: un fichero por subconjunto cubre de 400 a 600. */
@font-face {
  font-family: 'Newsreader';
  src: url("../fonts/newsreader-latin.0a301b6df4c7.woff2") format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  src: url("../fonts/newsreader-latin-ext.40f89707c10e.woff2") format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   Paleta y medidas
   -------------------------------------------------------------------------- */
:root {
  /* Azul institucional de la Universidad, el mismo que Ágora y UNIVERSA. */
  --azul: #223D71;
  --azul-oscuro: #1A2F57;
  --azul-claro: #E9EEF7;
  --acento: #B4873A;        /* dorado corporativo, para los detalles */

  --texto: #16273F;
  --texto-medio: #44546E;
  --texto-suave: #55647E;
  --texto-tenue: #7383A0;

  --fondo: #F4F5F8;
  --superficie: #FFFFFF;
  --borde: #DDE2EA;
  --borde-suave: #E7EAF0;

  --error: #8C2E33;
  --error-suave: #FDF1F1;
  --error-borde: #F0D2D3;
  --bien: #1F5C4C;
  --bien-suave: #EDF6F2;
  --bien-borde: #C9E2D8;

  --alto-cabecera: 78px;
  --alto-pie: 64px;         /* hueco que reserva el pie fijo */
  --margen-lateral: 48px;

  /* Un solo alto para todo lo que se pulsa o se rellena: un botón y un campo
     con el mismo relleno no acaban midiendo lo mismo —cada uno interpreta a su
     manera la altura de línea— y en una fila de controles esos dos píxeles se
     ven como un error de montaje. */
  --alto-control: 38px;
  --radio-control: 999px;   /* nada de esquinas vivas en lo que se pulsa */
  --radio-caja: 10px;       /* cajas pequeñas que no son controles */

  /* El filo bicolor que remata las superficies de documento: un hilo de azul
     con un arranque dorado. Es el gesto propio de AutoDoc y va siempre igual
     —en la tarjeta del acceso, en las del repositorio—, así que se mide aquí. */
  --filo: 3px;
  --filo-dorado: 56px;

  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Myriad Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, sans-serif;
  /* El monoespaciado es del sistema: aquí solo lleva lo que de verdad se copia
     y se pega —tokens, órdenes de consola, rutas—, y para eso la letra del
     terminal de quien mira es mejor que cualquiera que sirvamos nosotros. */
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
          'Liberation Mono', monospace;
}

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  /* El pie está fuera del flujo (fijo abajo), así que hay que reservarle el
     hueco a mano o taparía el final del contenido. */
  padding-bottom: var(--alto-pie);
}

/* Las vistas que se reparten la altura de la ventana —el repositorio y el
   editor, donde la lista o las hojas hacen scroll por dentro y las barras se
   quedan quietas— necesitan una altura DEFINIDA en el body: con el
   min-height general el body crece con el contenido y el flex no comprime
   nada. dvh y no vh por las barras de los navegadores móviles. */
body.pagina-alta {
  height: 100vh;
  height: 100dvh;
  min-height: 560px;
}

/* Los controles de formulario no heredan la tipografía del documento: el
   navegador les pone la suya si no se le dice lo contrario, y sin esta regla
   media interfaz se saldría de Myriad Pro. Está aquí, y no repetida en cada
   control, para que un control nuevo no pueda nacer fuera. */
button, input, select, textarea, optgroup, option { font-family: inherit; }
::placeholder { font-family: inherit; }

a { color: var(--azul); text-decoration: none; }
a:hover { color: var(--azul-oscuro); text-decoration: underline; }

code, kbd, samp, pre { font-family: var(--mono); }

/* Un foco visible y uniforme en toda la interfaz: es la única pista de
   navegación para quien usa el teclado. */
:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Enlace de salto: oculto hasta que recibe el foco. */
.salto-contenido {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 18px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-control);
  font-size: 14px;
  font-weight: 600;
  transition: top 140ms ease;
}
.salto-contenido:focus { top: 12px; }

/* Solo para lectores de pantalla. */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   El filo: el gesto propio de AutoDoc.

   Un hilo de azul con el arranque en dorado, sobre el borde de arriba. Se le
   pone a lo que es un documento —la tarjeta del acceso, las del repositorio—,
   y es lo que las distingue de las superficies de interfaz, que son blancas y
   lisas. Va dentro de una caja con `overflow: hidden` para que el hilo siga la
   curva de la esquina.
   -------------------------------------------------------------------------- */
.con-filo {
  position: relative;
  /* Para que el hilo siga la curva de las esquinas de arriba. */
  overflow: hidden;
}

.con-filo::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--filo);
  background: linear-gradient(
    to right,
    var(--acento) 0 var(--filo-dorado),
    var(--azul) var(--filo-dorado)
  );
}

/* --------------------------------------------------------------------------
   Marca de agua: el sello de la Universidad, como en el resto de aplicaciones
   del vicerrectorado. Fijo a la esquina de la ventana y no absoluto dentro del
   contenido, para que se quede quieto aunque la página tenga scroll. El
   contenido pasa por encima y el sello no intercepta el ratón.
   -------------------------------------------------------------------------- */
.sello {
  position: fixed;
  right: -90px;
  bottom: -120px;
  z-index: 0;
  width: 780px;
  height: auto;
  opacity: .5;
  pointer-events: none;
  user-select: none;
}

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */
.cabecera {
  flex-shrink: 0;
  height: var(--alto-cabecera);
  padding: 0 var(--margen-lateral);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  position: relative;
  z-index: 10;
}

.marca {
  display: flex;
  align-items: center;
  gap: 22px;
  color: inherit;
  min-width: 0;
}
.marca:hover { text-decoration: none; }

.marca-logo { display: block; width: 176px; height: auto; }
.marca-separador { width: 1px; height: 34px; background: var(--borde); flex-shrink: 0; }

/* El nombre, en serif y sin ningún dibujo al lado: la marca es la palabra. */
.marca-nombre {
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1;
  color: var(--azul-oscuro);
  white-space: nowrap;
}

/* ---- Sesión iniciada ---- */
.sesion { display: flex; align-items: center; gap: 14px; min-width: 0; }

.sesion-usuario {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--texto-medio);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Distintivo del rol: solo con administrador, que es el único que se
   distingue en algo (el resto comparte repositorio y permisos). */
.sesion-rol {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: var(--radio-control);
  background: var(--azul-claro);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--azul);
  white-space: nowrap;
}

.boton-salir {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: var(--alto-control);
  padding: 0 16px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-control);
  background: var(--superficie);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--azul-oscuro);
  cursor: pointer;
  transition: background 140ms ease;
}
.boton-salir:hover { background: var(--azul-claro); }

.sesion-form { margin: 0; display: flex; }

/* Selector de idioma: dos botones pegados dentro de una cápsula, como un
   interruptor de dos posiciones. Cada uno es un submit de verdad (la CSP no
   deja manejadores en línea), así que sin JavaScript funciona igual. Con la
   sesión cerrada es lo único que hay a la derecha de la marca. */
.idioma {
  margin: 0;
  display: flex;
  flex-shrink: 0;
  border: 1px solid var(--borde);
  border-radius: var(--radio-control);
  overflow: hidden;
}

.idioma-opcion {
  display: inline-flex;
  align-items: center;
  height: calc(var(--alto-control) - 2px);
  padding: 0 10px;
  border: 0;
  background: var(--superficie);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--texto-medio);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.idioma-opcion + .idioma-opcion { border-left: 1px solid var(--borde); }
.idioma-opcion:hover { background: var(--azul-claro); color: var(--azul-oscuro); }

/* El activo no se puede pulsar para nada, pero sigue siendo un botón: dejarlo
   `disabled` lo sacaría del recorrido del teclado y de los lectores, que es
   justo donde hace falta que se lea cuál está puesto (aria-current). */
.idioma-opcion.es-actual {
  background: var(--azul);
  color: var(--superficie);
  cursor: default;
}
.idioma-opcion.es-actual:hover { background: var(--azul); color: var(--superficie); }

/* --------------------------------------------------------------------------
   Pie, común a los servicios del vicerrectorado: fijo abajo y en dos líneas.
   El hueco que necesita lo reserva el padding del body.
   -------------------------------------------------------------------------- */
.pie {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 1000;
  padding: 12px 0;
  background: var(--azul);
  color: #FFFFFF;
  text-align: center;
}
.pie-contenido { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.pie p { margin: 0 0 3px; }
.pie p:last-child { margin-bottom: 0; }
.pie-principal { font-size: .8em; }
.pie-linea { font-size: .7em; }
.pie-separador { padding: 0 .5em; }
.pie a { color: #FFFFFF; text-decoration: underline; }
.pie a:hover { color: #FFFFFF; text-decoration: none; }

/* --------------------------------------------------------------------------
   Avisos (mensajes de Django).

   Flotan bajo la cabecera en vez de ocupar sitio en el flujo: dentro del
   contenido, al aparecer empujaban la página entera hacia abajo, y en el
   editor —que reparte la altura de la ventana entre la barra y las hojas—
   cada aviso le robaba alto a las hojas.
   -------------------------------------------------------------------------- */
.avisos {
  position: fixed;
  top: calc(var(--alto-cabecera) + 16px);
  right: var(--margen-lateral);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(400px, calc(100vw - 2 * var(--margen-lateral)));
  margin: 0;
  padding: 0;
  list-style: none;
  /* La columna ocupa una franja alta de la ventana aunque los avisos sean
     bajitos: sin esto se quedaría con los clics de lo que hay debajo. Cada
     aviso vuelve a admitirlos. */
  pointer-events: none;
}

.aviso {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--radio-caja);
  font-size: 14px;
  line-height: 1.45;
  background: var(--azul-claro);
  color: var(--azul);
  border: 1px solid #D3DEEE;
  box-shadow: 0 16px 36px -20px rgba(26, 47, 87, .5);
  animation: aviso-entra 200ms ease both;
}

.aviso--warning { background: #FBF3E4; color: #7A5716; border-color: #E9D8B4; }
.aviso--error   { background: var(--error-suave); color: var(--error); border-color: var(--error-borde); }
.aviso--success { background: var(--bien-suave); color: var(--bien); border-color: var(--bien-borde); }

.aviso-texto { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* El botón de cerrar lo pone static/js/avisos.js: sin JavaScript sería un
   control muerto, y el aviso se retira solo de todos modos. */
.aviso-cerrar {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 17px;
  line-height: 1;
  opacity: .6;
  cursor: pointer;
  transition: opacity 140ms ease, background 140ms ease;
}
.aviso-cerrar:hover { opacity: 1; background: rgba(26, 47, 87, .08); }

/* Al retirarse, el aviso se va por donde vino y deja de contar para la pila:
   los que queden debajo suben sin salto. */
.aviso.se-va {
  animation: aviso-sale 180ms ease forwards;
  pointer-events: none;
}

@keyframes aviso-entra {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes aviso-sale {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-10px); }
}

/* --------------------------------------------------------------------------
   Armazón de las vistas de trabajo

   Todas se montan igual: una barra fina de vuelta y acciones, el titular de la
   pantalla debajo y el contenido, que es lo único que hace scroll.
   -------------------------------------------------------------------------- */
.workspace {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--margen-lateral);
}

/* El editor compone hojas A4 y no cabe en 1200 px: se le deja toda la ventana
   y solo conserva el margen lateral. */
.workspace--ancho { max-width: none; }

.topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  min-height: 74px;
}

.backlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--alto-control);
  padding: 0 16px 0 13px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-control);
  background: var(--superficie);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--azul-oscuro);
  white-space: nowrap;
  transition: background 140ms ease;
}
.backlink:hover { background: var(--azul-claro); text-decoration: none; color: var(--azul); }

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* ---- Titular de la pantalla ---- */
.pagehead {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 22px;
}

.pagehead__title { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* El antetítulo: la regla dorada corta y el rótulo en versalitas, el mismo
   gesto con el que se presentan las pantallas en Ágora. */
.pagehead__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--azul);
}
.pagehead__eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  flex-shrink: 0;
  background: var(--acento);
}

.pagehead__heading {
  margin: 0;
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--azul-oscuro);
  word-break: break-word;
}

.pagehead__sub {
  margin: 0;
  font-size: 14px;
  color: var(--texto-suave);
  word-break: break-all;
}

.pagehead__tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.pagehead__count {
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-tenue);
  white-space: nowrap;
}

/* ---- El contenido, que es lo único que hace scroll ---- */
.content {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  /* Las tarjetas —proyectos, carpetas, manuales— se levantan al pasar por
     encima y su sombra se derrama fuera de la caja. Como esto es lo único que
     hace scroll, lo que asome se recorta: sin holgura, el gesto se cortaba en
     seco por arriba y por los costados. Se le da el respiro por dentro y se le
     quita por fuera, así que la retícula no se mueve ni un pixel. */
  margin: -10px calc(var(--margen-lateral) / -2);
  padding: 10px calc(var(--margen-lateral) / 2) 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.lead {
  margin: 0;
  max-width: 68ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--texto-suave);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Controles
   -------------------------------------------------------------------------- */
.button-solid {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--alto-control);
  padding: 0 20px;
  border: 1px solid var(--azul);
  border-radius: var(--radio-control);
  background: var(--azul);
  color: #FFFFFF;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.button-solid:hover {
  background: var(--azul-oscuro);
  border-color: var(--azul-oscuro);
  color: #FFFFFF;
  text-decoration: none;
}

.button-solid--danger { background: var(--error); border-color: var(--error); }
.button-solid--danger:hover { background: #74262A; border-color: #74262A; }

.button-ghost {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--alto-control);
  padding: 0 16px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-control);
  background: var(--superficie);
  color: var(--azul-oscuro);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.button-ghost:hover {
  background: var(--azul-claro);
  border-color: var(--azul-claro);
  color: var(--azul);
  text-decoration: none;
}

/* Cuando lleva un icono y nada más: sin texto que separar, sobra el aire de
   los lados (el nombre va en `title` y `aria-label`). */
.button-ghost--icon { padding: 0 13px; }

.button-ghost--danger { color: var(--error); }
.button-ghost--danger:hover {
  background: var(--error-suave);
  border-color: var(--error-borde);
  color: var(--error);
}

.button-ghost[disabled] {
  opacity: .4;
  cursor: default;
}
.button-ghost[disabled]:hover {
  background: var(--superficie);
  border-color: var(--borde);
  color: var(--azul-oscuro);
}

/* Los formularios que solo envuelven a un botón (borrar, revocar, cambiar el
   rol) no tienen que empujar nada: son el botón. */
.form-boton { margin: 0; display: inline-flex; }

/* --------------------------------------------------------------------------
   Campos
   -------------------------------------------------------------------------- */
.fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px 24px;
}

.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }

.field__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-medio);
}

.field__input {
  width: 100%;
  height: var(--alto-control);
  padding: 0 16px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-control);
  background: var(--superficie);
  font-size: 15px;
  color: var(--texto);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.field__input:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(34, 61, 113, .14);
}
.field__input::placeholder { color: var(--texto-tenue); }

.field.is-invalid .field__input,
.field__input[aria-invalid="true"] { border-color: #D8A3A6; }
.field.is-invalid .field__input:focus {
  border-color: #C0787C;
  box-shadow: 0 0 0 3px rgba(140, 46, 51, .14);
}

.field__hint { font-size: 12.5px; line-height: 1.45; color: var(--texto-tenue); }
.field__error { font-size: 12.5px; line-height: 1.45; color: var(--error); }

/* ---- Desplegable de la casa ----
   El <select> del navegador no se deja vestir por dentro: ni la lista, ni la
   marca de lo elegido, ni la flecha —que cada navegador dibuja a su manera y
   pega casi al borde—. Así que el nativo se queda en el formulario, oculto,
   porque es quien lleva el valor y quien responde si no hay JavaScript, y
   delante va esto: un botón con lo elegido y la lista escrita por nosotros.
   Lo monta picker.js (base.html lo carga en todas las páginas); sin él no
   aparece y se ve el nativo de siempre. */

.picker { position: relative; }

/* Oculto pero PRESENTE: un control con display:none sigue enviando su valor. */
.picker__nativo { display: none; }

.picker__boton {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: var(--alto-control);
  padding: 0 15px 0 16px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-control);
  background: var(--superficie);
  font-family: inherit;
  font-size: 15px;
  color: var(--texto);
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.picker__boton:hover { border-color: #C3D0E4; }
.picker__boton:focus-visible,
.picker.is-abierto .picker__boton {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(34, 61, 113, .14);
}
.picker__boton:disabled { cursor: default; }

.picker__valor {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* La flecha, a la misma distancia del borde que el texto del otro lado, y
   girada mientras la lista está abierta. */
.picker__flecha {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: var(--texto-tenue);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 140ms ease, stroke 140ms ease;
}
.picker.is-abierto .picker__flecha { transform: rotate(180deg); stroke: var(--azul); }

.picker__lista {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  max-height: 252px;
  margin: 0;
  padding: 5px;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--borde);
  border-radius: var(--radio-caja);
  background: var(--superficie);
  box-shadow: 0 24px 48px -22px rgba(26, 47, 87, .5);
}
.picker__lista[hidden] { display: none; }

/* Cuando debajo no queda sitio —el diálogo cae bajo en la ventana—, la lista
   se despliega hacia arriba en lugar de salirse por el pie. */
.picker__lista--arriba { top: auto; bottom: calc(100% + 6px); }

/* Y sale del diálogo de verdad: como popover, la lista vive en la capa de
   arriba del navegador, por encima del modal y sin que la recorte nadie por
   el camino —el <dialog> recorta, que la hoja de fábrica le pone
   overflow:auto y la lista se cortaba en seco en su borde—. Aquí solo se
   desmonta el sitio que le da el navegador por defecto: dónde va exactamente
   lo calcula el JS a partir del botón. */
.picker__lista:popover-open {
  position: fixed;
  inset: auto;
  margin: 0;
}

.picker__opcion {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--texto);
  cursor: pointer;
}

/* Una sola señal para el ratón y para el teclado: la opción «en el punto de
   mira» se marca igual venga de donde venga, así que no hay dos resaltes
   compitiendo cuando se mezclan los dos. */
.picker__opcion.es-tanteo { background: var(--azul-claro); color: var(--azul-oscuro); }
.picker__opcion[aria-selected="true"] { font-weight: 600; color: var(--azul-oscuro); }

/* El palito de la elegida. Ocupa su sitio siempre, aunque esté apagado: si
   apareciera y desapareciera, los nombres bailarían al cambiar de opción. */
.picker__marca {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: var(--azul);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}
.picker__opcion[aria-selected="true"] .picker__marca { opacity: 1; }

.picker__texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* El aviso de todo el formulario (credenciales que no casan, contraseñas que
   no coinciden): la misma caja que un aviso de Django, pero anclada donde se
   ha fallado y no flotando en la esquina. */
.form__alert {
  margin: 0;
  padding: 11px 16px;
  border: 1px solid var(--error-borde);
  border-radius: var(--radio-caja);
  background: var(--error-suave);
  color: var(--error);
  font-size: 13.5px;
  line-height: 1.45;
}
.form__alert p { margin: 0; }

.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }

.check input[type="checkbox"] {
  margin: 2px 0 0;
  width: 16px;
  height: 16px;
  accent-color: var(--azul);
  cursor: pointer;
  flex-shrink: 0;
}

.check__text { display: flex; flex-direction: column; gap: 3px; }
.check__label { font-size: 14.5px; font-weight: 600; color: var(--texto-medio); }
.check__hint { font-size: 12.5px; line-height: 1.45; color: var(--texto-tenue); }

/* --------------------------------------------------------------------------
   Tablas

   Una tarjeta blanca con las filas dentro, no una retícula suelta sobre el
   fondo: así el listado es un objeto y no una lista de rayas, que es lo que
   permite que las tarjetas de documento, con su filo, se lean como otra cosa
   distinta.
   -------------------------------------------------------------------------- */
.table {
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-caja);
  box-shadow: 0 18px 44px -32px rgba(26, 47, 87, .3);
  overflow: hidden;
}

.table__head,
.table__row {
  display: grid;
  gap: 20px;
  align-items: center;
  padding: 0 22px;
}

.table__head {
  padding-top: 13px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--borde-suave);
  background: #FAFBFD;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.table__row {
  min-height: 60px;
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--borde-suave);
  color: inherit;
  transition: background 140ms ease;
}
.table__row:last-child { border-bottom: 0; }

a.table__row:hover { background: var(--azul-claro); text-decoration: none; color: inherit; }

.table__row.is-inactive,
.table__row.is-revoked { opacity: .55; }

.table__cell--end { justify-self: end; text-align: right; }

.table__name { display: flex; align-items: center; min-width: 0; }

.table__name-text,
.table__author,
.table__label,
.table__user {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table__name-text { font-size: 15.5px; font-weight: 600; color: var(--azul-oscuro); }
.table__label { font-size: 14.5px; }
.table__user { font-size: 14.5px; font-weight: 600; color: var(--azul-oscuro); }
.table__author { font-size: 14px; color: var(--texto-suave); }
.table__type,
.table__role { font-size: 13.5px; color: var(--texto-suave); }
.table__date {
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  color: var(--texto-tenue);
}
.table__prefix {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--azul-oscuro);
}

/* --------------------------------------------------------------------------
   Distintivos de estado
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border: 1px solid transparent;
  border-radius: var(--radio-control);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Los tres estados de un documento, contados con la misma forma y solo con el
   peso del relleno: recién llegado de la ingesta, el filo dorado sobre blanco;
   en marcha, el gris que no compite; cerrado, el azul sólido. */
.badge--generado { background: var(--superficie); color: #8A6520; border-color: var(--acento); }
.badge--borrador { background: transparent; color: var(--texto-tenue); border-color: var(--borde); }
.badge--revisado { background: var(--azul); color: #FFFFFF; border-color: var(--azul); }

.badge--activo { background: var(--bien-suave); color: var(--bien); border-color: var(--bien-borde); }
.badge--admin  { background: var(--azul-claro); color: var(--azul); border-color: #D3DEEE; }

/* El manual es de otra persona: aquí solo se lee. Discreto a propósito —dice
   por qué no hay botones, no reclama atención—. */
.badge--lectura { background: transparent; color: var(--texto-tenue); border-color: var(--borde); }

/* --------------------------------------------------------------------------
   Estados vacíos y sin resultados
   -------------------------------------------------------------------------- */
.noresults {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 56px 24px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-caja);
  background: var(--superficie);
  box-shadow: 0 18px 44px -32px rgba(26, 47, 87, .3);
  text-align: center;
}

.noresults__eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.noresults__title {
  margin: 0;
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--azul-oscuro);
}

.noresults__note {
  margin: 0;
  max-width: 44ch;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--texto-suave);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Diálogos: blancos, redondeados y con sombra.
   -------------------------------------------------------------------------- */
.dialogo {
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--superficie);
  color: var(--texto);
  box-shadow: 0 32px 64px -28px rgba(26, 47, 87, .45);
}
.dialogo::backdrop { background: rgba(26, 47, 87, .45); }

/* El de preguntar, que sale en cualquier página (templates/base.html): la
   anchura va aquí y no en la hoja del editor, que solo se sirve en el detalle. */
.dialogo--estrecho { width: min(430px, calc(100vw - 48px)); }

.dialogo__body { display: flex; flex-direction: column; gap: 14px; padding: 28px; }

.dialogo__title {
  margin: 0;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--azul-oscuro);
}

.dialogo__note {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--texto-suave);
  text-wrap: pretty;
}

.dialogo__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 6px;
}

/* --------------------------------------------------------------------------
   Adaptación a pantallas menores
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  :root { --margen-lateral: 24px; }

  .cabecera { height: auto; padding: 14px var(--margen-lateral); flex-wrap: wrap; gap: 14px; }
  .marca { gap: 14px; }
  .marca-logo { width: 132px; }
  .marca-nombre { font-size: 21px; }
  .sesion-usuario { display: none; }

  .avisos { top: 92px; }

  .pagehead { flex-direction: column; align-items: flex-start; }
  .pagehead__heading { font-size: 32px; }

  /* El sello no se va, se encoge: en una pantalla estrecha ocuparía media
     vista, pero sigue siendo la marca de la casa. */
  .sello { width: 520px; right: -130px; bottom: -150px; opacity: .4; }
}

@media (max-width: 640px) {
  body, body.pagina-alta { height: auto; min-height: 100vh; }
  .content { overflow: visible; }
  .topbar { flex-wrap: wrap; min-height: 0; }
  .topbar__actions { margin-left: 0; flex-wrap: wrap; }
  .sello { width: 400px; right: -120px; bottom: -130px; }
}

@media (prefers-reduced-motion: reduce) {
  .aviso, .aviso.se-va { animation-duration: 1ms; }
  * { scroll-behavior: auto; }
}