/* ==========================================================================
   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; }

/* --------------------------------------------------------------------------
   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;
  padding-bottom: 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;
}

.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); }

/* 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__mail {
  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__mail { 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); }

.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; }
}