/* =========================================================================
   SANKUMA — hoja de estilos base (login, recuperación de contraseña,
   escritorio mínimo). Fuente empaquetada localmente (@font-face), no
   depende de que el navegador/sistema tenga Poppins instalada.
   ========================================================================= */

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Azul de marca, extraído del logo SANKUMA */
  --sankuma-azul: #312783;
  --sankuma-azul-hover: #251d63;

  /* Escala de grises: solo se combinan pares con contraste comprobado.
     Nunca texto sobre gris medio (--gris-400/500). */
  --gris-900: #1a1a1e;   /* texto principal sobre fondos claros */
  --gris-600: #57575f;   /* texto secundario sobre fondos claros */
  --gris-300: #d7d7dc;   /* bordes */
  --gris-100: #f4f4f6;   /* fondo de página */
  --blanco: #ffffff;

  --radio: 2px;
  --sombra: 0 4px 24px rgba(26, 26, 30, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Poppins', 'Century Gothic', 'Futura', sans-serif;
  background: var(--gris-100);
  color: var(--gris-900);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* Login y recuperación de contraseña (páginas con .sankuma-card):
   fondo de PÁGINA blanco, invertido respecto al resto (que sigue en
   gris-100 por defecto, ej. detrás del escritorio). */
body:has(.sankuma-card) {
  background: var(--blanco);
}

.sankuma-card {
  background: var(--gris-100);
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 40px 36px;
  width: 100%;
  max-width: 380px;
}

.sankuma-logo {
  text-align: center;
  margin-bottom: 32px;
}

.sankuma-logo img {
  max-width: 220px;
  height: auto;
}

.sankuma-form label {
  display: block;
  font-weight: 500;
  font-size: 14px;
  color: var(--gris-900);
  margin-bottom: 6px;
}

.sankuma-form .campo {
  margin-bottom: 20px;
}

.sankuma-form input[type="text"],
.sankuma-form input[type="email"],
.sankuma-form input[type="password"],
.sankuma-form input[type="datetime-local"],
.sankuma-form select,
.sankuma-form textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--gris-900);
  background: var(--blanco);
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  outline: none;
}

.sankuma-form textarea {
  resize: vertical;
}

.sankuma-form input:focus,
.sankuma-form select:focus,
.sankuma-form textarea:focus {
  border-color: var(--sankuma-azul);
}

/* Casilla (ej. "Fijar en el panel"): en línea con su propia etiqueta,
   no apilada como el resto de campos — .campo ya le da separación
   respecto al campo siguiente. */
.sankuma-form .campo-casilla {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sankuma-form .campo-casilla label {
  margin-bottom: 0;
}

/* Lista de casillas de un ModelMultipleChoiceField (ej. "Acceso a
   módulos" al crear un usuario, Fase D3.1) — Django la renderiza como
   un <ul> con un <li><label><input>...</label></li> por opción; se
   quita el estilo de lista y cada opción se trata como una mini
   .campo-casilla (checkbox + etiqueta en línea, no apiladas). */
.sankuma-form .campo-casillas-lista ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sankuma-form .campo-casillas-lista li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sankuma-form .campo-casillas-lista li label {
  display: inline;
  margin-bottom: 0;
  font-weight: 400;
}

.sankuma-form .campo-ayuda {
  margin-top: 6px;
  margin-bottom: 0;
  font-size: 13px;
  color: var(--gris-600);
}

/* Mismo tono que .sankuma-error, pero por campo en vez de un único
   aviso arriba del formulario — para que el error quede pegado al
   campo que lo causó. */
.sankuma-form .campo-error {
  margin-top: 6px;
  font-size: 13px;
  color: #8a1f13;
}

.sankuma-boton {
  display: block;
  width: 100%;
  padding: 13px 14px;
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.5px;
  color: var(--blanco);
  background: var(--sankuma-azul);
  border: none;
  border-radius: var(--radio);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}

.sankuma-boton:hover {
  background: var(--sankuma-azul-hover);
}

/* Acción irreversible (vaciar la papelera): mismo tono que
   .sankuma-error, pero como botón sólido en vez de aviso de texto —
   suficientemente distinto del azul para no confundirse con una
   acción normal. */
.sankuma-boton-peligro {
  background: #8a1f13;
}

.sankuma-boton-peligro:hover {
  background: #6e190f;
}

.sankuma-titulo-confirmacion {
  font-size: 20px;
  font-weight: 700;
  color: var(--gris-900);
  text-align: center;
  margin: 0 0 16px;
}

.sankuma-enlace-secundario {
  display: block;
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: var(--sankuma-azul);
  text-decoration: none;
}

.sankuma-enlace-secundario:hover {
  text-decoration: underline;
}

.sankuma-error {
  background: #fdeceb;
  color: #8a1f13;
  border: 1px solid #f3b9b1;
  border-radius: var(--radio);
  padding: 12px 14px;
  font-size: 14px;
  margin-bottom: 20px;
}

/* Mensajes de confirmación (django.contrib.messages) — tarea 3.11,
   primer sitio que los usa. .sankuma-mensaje-error reutiliza EXACTAMENTE
   los mismos tonos que .sankuma-error (es el mismo tipo de aviso, solo
   que llega vía messages en vez de errores de formulario);
   -success usa el mismo verde ya establecido en .prioridad-baja-suave/
   .prioridad-badge.prioridad-baja, no un tono nuevo. */
.sankuma-mensaje {
  border-radius: var(--radio);
  padding: 12px 14px;
  font-size: 14px;
  margin-bottom: 20px;
}

.sankuma-mensaje-success {
  background: #e9f5ed;
  color: #2f7a3d;
  border: 1px solid #b7ddbc;
}

.sankuma-mensaje-error {
  background: #fdeceb;
  color: #8a1f13;
  border: 1px solid #f3b9b1;
}

/* Warning (3.12): primer uso, para el aviso de "cliente creado pero
   el correo de bienvenida falló" — mismo ámbar ya establecido en
   .prioridad-media-suave/.prioridad-badge.prioridad-media, no un tono
   nuevo. */
.sankuma-mensaje-warning {
  background: #fbefdc;
  color: #9c5b00;
  border: 1px solid #f0c98a;
}

.sankuma-ayuda,
.sankuma-texto-secundario {
  color: var(--gris-600);
  font-size: 14px;
  text-align: center;
  line-height: 1.5;
}

/* =========================================================================
   Escritorio (Fase F) — layout ancho, distinto de la tarjeta estrecha de
   login/recuperación. sobrescribe {% block body %} en vez de "content".
   ========================================================================= */

body:has(.sankuma-escritorio) {
  background: var(--blanco);
  align-items: flex-start;
  padding-top: 48px;
}

.sankuma-escritorio {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

.sankuma-header {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  background: var(--sankuma-azul);
  color: var(--blanco);
  padding: 16px 24px;
  border-radius: var(--radio);
  margin-bottom: 28px;
}

/* =========================================================================
   Mi perfil (3.11) — página propia, layout ancho igual que el
   escritorio (fondo blanco, misma cabecera), pero de una sola columna
   y más estrecha: es un formulario de ajustes, no un panel con varias
   secciones lado a lado.
   ========================================================================= */

body:has(.sankuma-perfil) {
  background: var(--blanco);
  align-items: flex-start;
  padding-top: 48px;
}

.sankuma-perfil {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

.perfil-titulo {
  font-size: 22px;
  font-weight: 700;
  color: var(--gris-900);
  margin: 4px 0 20px;
}

.perfil-seccion {
  margin-bottom: 20px;
}

.perfil-valor-fijo {
  margin: 0;
  padding: 12px 14px;
  font-size: 15px;
  color: var(--gris-600);
  background: var(--gris-100);
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
}

/* Izquierda: logo + nombre del cliente (o "Acceso máster..."). */
.cabecera-izquierda {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.cabecera-logo {
  display: block;
  height: 24px;
  width: auto;
}

.cabecera-cliente {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--blanco);
}

/* Centro: nombre y apellidos del usuario (+ " · Responsable" si aplica). */
.cabecera-centro {
  flex: 1 1 auto;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--blanco);
}

/* Derecha: Avisos, Perfil, Salir. */
.cabecera-derecha {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.cabecera-enlace {
  color: var(--blanco);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

.cabecera-enlace:hover {
  text-decoration: underline;
}

/* Avisos/Perfil (tareas 3.9 y 3.11): preparados visualmente, sin
   destino funcional todavía. Opacidad reducida para no aparentar más
   actividad de la real; el href="#" nunca da 404. */
.cabecera-enlace-pendiente {
  opacity: 0.7;
}

.cabecera-form-salir {
  margin: 0;
  display: flex;
}

.sankuma-boton-salir {
  font-family: inherit;
  font-weight: 500;
  font-size: 14px;
  color: var(--blanco);
  background: transparent;
  border: 1px solid var(--blanco);
  border-radius: var(--radio);
  padding: 9px 18px;
  cursor: pointer;
}

.sankuma-boton-salir:hover {
  background: rgba(255, 255, 255, 0.12);
}

.sankuma-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

/* Blancas de nuevo: "Mis aplicaciones" ahora vive dentro de su propia
   caja-gris (gris-100), así que una tarjeta también gris-100 se
   fundiría con su contenedor — el mismo problema que ya resolvimos
   una vez para las franjas, ahora reaparecido un nivel más adentro.
   Las tres se siguen distinguiendo por el color del borde y de la
   insignia de estado, igual que antes. */
.sankuma-modulo-card {
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 22px 18px;
  text-align: center;
  border: 1px solid var(--gris-300);
}

.sankuma-modulo-card.activo {
  border-color: var(--sankuma-azul);
}

/* Caducada: ni azul (ya no es un acceso pleno) ni gris de "no
   contratado" (el cliente SÍ tuvo/tiene derecho a consultar). Ámbar
   sobrio, mismo patrón de contraste que .sankuma-error (texto oscuro
   sobre fondo claro del mismo tono, nunca sobre el gris intermedio). */
.sankuma-modulo-card.caducado {
  border-color: #f0c987;
}

/* No contratada: borde gris — igual que el borde por defecto, así que
   no necesita regla propia; queda documentado aquí para que se note
   que es una decisión, no un olvido. */

.sankuma-modulo-card .nombre {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 12px;
  color: var(--gris-900);
}

/* Insignias: SIEMPRE texto oscuro/azul/ámbar sobre fondo blanco, nunca
   sobre un gris intermedio, para no arriesgar el contraste — y ahora
   son la principal seña de identidad de cada estado, junto al borde. */
.sankuma-modulo-card .estado-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 4px 12px;
  border-radius: var(--radio);
  background: var(--blanco);
}

.sankuma-modulo-card.activo .estado-badge {
  color: var(--sankuma-azul);
  border: 1px solid var(--sankuma-azul);
}

.sankuma-modulo-card.no-contratado .estado-badge {
  color: var(--gris-600);
  border: 1px solid var(--gris-300);
}

.sankuma-modulo-card.caducado .estado-badge {
  color: #8a5a00;
  border: 1px solid #f0c987;
  background: #fdf3e0;
}

.modulo-aviso-caducado {
  margin: 8px 0 0;
  font-size: 12px;
  color: #8a5a00;
}

.modulo-contador {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--gris-600);
}

.modulo-enlace-provisional {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--sankuma-azul);
}

.etiqueta-provisional {
  font-weight: 400;
  opacity: 0.75;
}

.modulo-enlace-info {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--sankuma-azul);
  text-decoration: none;
}

.modulo-enlace-info:hover,
.modulo-enlace-provisional:hover {
  text-decoration: underline;
}

/* =========================================================================
   Franjas del escritorio (avisos, notas) — encima de las tarjetas de
   módulos. Mismo gris que las tarjetas de módulo (--gris-100), para
   que resalten contra el fondo BLANCO de la página (antes eran
   blancas sobre blanco, solo se notaban por el borde). Avisos y notas
   comparten el mismo tratamiento de contenedor, coherentes entre sí;
   se distinguen por el título de cada una y por el color de sus
   líneas (prioridad en avisos, amarillo fijo en notas).
   ========================================================================= */
.sankuma-franja {
  background: var(--gris-100);
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  padding: 14px 18px;
  margin-bottom: 16px;
}

.franja-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.franja-titulo {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--gris-600);
}

.franja-ver-todos {
  font-size: 13px;
  color: var(--sankuma-azul);
  text-decoration: none;
}

.franja-ver-todos:hover {
  text-decoration: underline;
}

/* Cada línea es un bloque redondeado con su propio fondo suave (según
   prioridad en avisos, amarillo fijo en notas) en vez de filas
   separadas por una línea divisoria — con fondos de color distintos
   entre líneas, un borde superior habría quedado raro cruzando dos
   tonos distintos. El hueco entre líneas lo da el margin-top. */
.franja-linea {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--radio);
}

.franja-linea + .franja-linea {
  margin-top: 4px;
}

.franja-texto {
  font-size: 14px;
  color: var(--gris-900);
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}

.franja-detalle {
  color: var(--gris-600);
  font-size: 13px;
}

/* Prioridad de avisos: fondo desaturado, la insignia de abajo aporta
   el contraste fuerte y el texto por escrito.

   DOS variantes por prioridad — no leído vs. leído — a partir del
   mismo tinte base, sin colores nuevos:
     -intenso: más saturado. Reutiliza justo los valores de una ronda
       anterior que habíamos descartado por "gritar demasiado" para un
       uso general — aquí son exactamente lo que hace falta para un
       aviso SIN LEER (contraste 1.17–1.24 contra el contenedor
       gris-100). Se usa también en la franja de arriba, que por
       definición solo enseña avisos sin leer. SIN TOCAR en este ajuste.
     -suave: apenas insinúa el tinte — mismo nivel de sutileza que el
       amarillo de notas (1.043) o un pelín menos (1.02–1.034), para
       que el salto respecto a -intenso se note de un vistazo. Se usa
       para avisos YA leídos en la bandeja, y en la ventana emergente
       (que solo se muestra después de marcar como leído).
   gris-900 en negrita (no leído) o gris-600 normal (leído) — la regla
   de peso/color del texto está más abajo — mantienen contraste alto
   de sobra en las seis combinaciones (6.3–13.46:1). */
.prioridad-alta-intenso {
  background: #f6d5d5;
}

.prioridad-media-intenso {
  background: #f7dfba;
}

.prioridad-baja-intenso {
  background: #cfe9d7;
}

.prioridad-alta-suave {
  background: #fbeeee;
}

.prioridad-media-suave {
  background: #fbefdc;
}

.prioridad-baja-suave {
  background: #e9f5ed;
}

/* Notas: amarillo, fijo para todas (Nota no tiene prioridad). El más
   discreto de los cuatro con diferencia, a propósito: apenas un tinte,
   más claro que el gris-100 del contenedor (los otros tres son más
   oscuros que el contenedor; este es más CLARO — un blanco cálido, no
   un amarillo con cuerpo). Contraste 1.043 contra gris-100, claramente
   por debajo del 1.085 del naranja de media. */
.franja-linea-nota {
  background: #fefade;
}

/* Insignia de prioridad: mismo patrón de contraste que el resto de la
   app (texto/borde de color sobre fondo BLANCO, nunca color sobre
   color) — aquí es aún más importante porque el fondo de la línea ya
   está teñido; poner la insignia también en color sobre color habría
   arriesgado el contraste. */
.prioridad-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 2px 8px;
  margin-right: 6px;
  border-radius: var(--radio);
  background: var(--blanco);
}

.prioridad-badge.prioridad-alta {
  color: #a3242c;
  border: 1px solid #f0b8bc;
}

.prioridad-badge.prioridad-media {
  color: #9c5b00;
  border: 1px solid #f0c98a;
}

.prioridad-badge.prioridad-baja {
  color: #2f7a3d;
  border: 1px solid #b7ddbc;
}

/* Licencia caducada/expirada (Fase D4.1): dos tonos nuevos, ninguno
   de los tres de arriba encajaba — no son una prioridad, son un
   periodo del ciclo de vida distinto entre sí (uno con acceso de
   solo lectura, el otro sin ninguno), así que necesitan poder
   distinguirse a simple vista sin depender solo del texto. */
.prioridad-badge.licencia-caducada {
  color: #6b21a8;
  border: 1px solid #d8b4f0;
}

.prioridad-badge.licencia-expirada {
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

/* --- Pestaña Soporte (3.10) --- */
/* Incidencia no tiene prioridad que colorear (decisión de la tarea
   3.10) — blanca por defecto como una nota, con un tinte azul tenue
   cuando hay_novedad (respuesta de SANKUMA sin ver): la insignia de
   estado ya aporta el contraste fuerte, esto es solo la señal de
   "algo ha cambiado aquí". */
.incidencia-item {
  background: var(--blanco);
}

.incidencia-item.hilo-no-leido {
  background: #eeeef9;
}

/* Reutiliza la forma de .prioridad-badge (mismo elemento, dos clases),
   con su propio color por estado: rojo "necesita atención" (mismo
   tono que prioridad-alta), naranja "en marcha" (mismo tono que
   prioridad-media), gris "ya resuelta". */
.incidencia-estado-abierta {
  color: #a3242c;
  border: 1px solid #f0b8bc;
}

.incidencia-estado-en_progreso {
  color: #9c5b00;
  border: 1px solid #f0c98a;
}

.incidencia-estado-cerrada {
  color: var(--gris-600);
  border: 1px solid var(--gris-300);
}

.franja-form-x {
  margin: 0;
  flex: 0 0 auto;
}

.franja-boton-x {
  background: transparent;
  border: none;
  color: var(--gris-600);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radio);
}

.franja-boton-x:hover {
  background: var(--gris-100);
  color: var(--gris-900);
}

/* =========================================================================
   Estructura de dos columnas (3.9, segunda tanda): pestañas (2/3) +
   Mis aplicaciones (1/3). En pantallas estrechas pasa a una columna,
   con las pestañas primero — ya son las primeras en el HTML, así que
   solo hace falta colapsar el grid, sin reordenar nada.
   ========================================================================= */
.sankuma-dos-columnas {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  align-items: start;
}

.columna-titulo {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--gris-600);
  margin: 0 0 10px;
}

/* Caja gris compartida por los cuatro bloques (avisos, notas, soporte,
   Mis aplicaciones) — mismo tratamiento que las franjas de arriba:
   gris-100 sobre el fondo BLANCO de la página. Dentro de esta caja,
   cada elemento va en blanco por defecto y solo se tiñe cuando tiene
   un color propio que mostrar (la prioridad del raíz de un hilo). */
.caja-gris {
  background: var(--gris-100);
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  padding: 14px 18px;
}

.pestanas-nav {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--gris-300);
  margin-bottom: 16px;
}

.pestana-enlace {
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gris-600);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.pestana-enlace:hover {
  color: var(--gris-900);
}

.pestana-enlace.activa {
  color: var(--sankuma-azul);
  border-bottom-color: var(--sankuma-azul);
  font-weight: 700;
}

/* Botón de crear CON TEXTO ("+ Nuevo aviso"/"+ Nueva nota"/"+ Nueva
   incidencia") — lo primero bajo la barra de pestañas, dentro de la
   caja. Uno solo visible, el de la pestaña abierta (por eso vive
   dentro del if/elif de cada pestaña en la plantilla, no en el nav).
   Preparado visualmente (parte 2a), sin funcionalidad todavía —
   opacidad reducida y title explicativo, mismo lenguaje que los
   enlaces "pendientes" ya usados en la cabecera. */
.boton-crear {
  display: inline-block;
  margin-bottom: 14px;
  padding: 7px 14px;
  border: 1px solid var(--sankuma-azul);
  border-radius: var(--radio);
  color: var(--sankuma-azul);
  background: var(--blanco);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  opacity: 0.7;
}

.boton-crear:hover {
  opacity: 1;
}

/* Fila de acciones sobre la bandeja: "+ Nuevo aviso" (botón, arriba)
   junto a Archivados/Papelera (enlaces de texto, menor peso — no son
   la acción principal de la pantalla). */
.avisos-acciones-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}

.avisos-vista-enlace {
  font-size: 13px;
  color: var(--gris-600);
  text-decoration: none;
}

.avisos-vista-enlace:hover {
  color: var(--gris-900);
  text-decoration: underline;
}

.avisos-vista-enlace.activa {
  color: var(--sankuma-azul);
  font-weight: 600;
}

.avisos-vaciar-papelera {
  color: #8a1f13;
}

.avisos-volver-bandeja {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--sankuma-azul);
  text-decoration: none;
}

.avisos-volver-bandeja:hover {
  text-decoration: underline;
}

/* Acciones dentro de la ventana emergente (archivar/borrar o
   desarchivar/restaurar, según el estado actual del hilo). Aquí y no
   como botón suelto en cada fila de la bandeja: la fila ya es un
   <button> entero para abrir el hilo. */
.dialogo-acciones {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--gris-300);
}

/* text-decoration/display: la mayoría de estos botones son <button>
   dentro de un <form> (archivar/borrar de un aviso), pero "Borrar
   nota" es un <a href> a la página de confirmación (no un POST
   directo) — el mismo reset que ya lleva .sankuma-boton para poder
   usarse indistintamente como botón o como enlace. */
.dialogo-boton-secundario {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  background: var(--blanco);
  color: var(--gris-900);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.dialogo-boton-secundario:hover {
  background: var(--gris-100);
}

.dialogo-boton-peligro {
  border-color: #f3b9b1;
  color: #8a1f13;
}

.dialogo-boton-peligro:hover {
  background: #fdeceb;
}

/* --- Pestaña Avisos: bandeja completa (leídos y no leídos mezclados) --- */
.hilo-item {
  margin-bottom: 10px;
}

/* Bug de maquetación DE RAÍZ (ya salió dos veces en sitios distintos:
   la bandeja y la ventana emergente — de ahí esta clase compartida en
   vez de otro parche por ubicación).

   Cuando franja-texto/hilo-contexto comparten fila flex con VARIOS
   metadatos hermanos (insignia, remitente, fecha, acuse...) y alguno
   es largo (un remitente = email + cliente, por ejemplo), sin
   flex-wrap el navegador exprime el texto a un ancho casi nulo y lo
   parte letra a letra (min-width:0 permite encogerse, pero nada le
   daba una línea propia). En la franja de arriba esto NO pasa porque
   la insignia va ANIDADA dentro de franja-texto, no al lado — es la
   única fila de mensaje que no necesita esta clase.

   Cualquier fila NUEVA que combine texto de mensaje + metadatos como
   hermanos flex debe llevar esta clase — no reinventar el arreglo por
   ubicación cada vez. */
.fila-con-metadatos {
  flex-wrap: wrap;
}

.fila-con-metadatos .franja-texto,
.fila-con-metadatos .hilo-contexto {
  flex-basis: 100%;
  min-width: 0;
}

/* La fila raíz es un <button> real (dentro de un <form method="post">)
   para abrir la ventana emergente — pinchar el aviso escribe (marca
   como leído), nunca puede ser un <a href>. Reset de los estilos
   nativos de <button> para que siga siendo visualmente idéntica a la
   fila de antes; el resto (fondo, borde, tipografía) ya lo pone
   .franja-linea/.prioridad-X, que se siguen aplicando igual. */
.hilo-abrir {
  border: none;
  margin: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.hilo-abrir:hover {
  filter: brightness(0.98);
}

.hilo-remitente {
  font-size: 13px;
  font-weight: 600;
  color: var(--gris-600);
}

.hilo-fecha {
  font-size: 12px;
  color: var(--gris-600);
  flex: 0 0 auto;
}

.hilo-acuse {
  font-size: 12px;
  color: var(--gris-600);
  flex: 0 0 auto;
}

/* Línea de contexto ("licitaIA · Expediente 3291/2026 · Punto 5"):
   menor jerarquía que el mensaje — más pequeña, sin negrita nunca
   (ni siquiera en un hilo no leído, a propósito: es información de
   apoyo, no el contenido en sí). Su propia línea (flex-basis: 100%
   arriba), justo debajo del mensaje. */
.hilo-contexto {
  display: block;
  font-size: 12px;
  color: var(--gris-600);
}

/* Leído: peso normal, contraste reducido. No leído (hilo-no-leido,
   aplicada junto a franja-linea o a hilo-respuesta): negrita y
   contraste alto — la comprobación es sobre CADA mensaje individual,
   no sobre el hilo entero. Todo esto va con el prefijo ".hilo-item"
   para no afectar a la franja de arriba (que reutiliza las mismas
   clases franja-linea/franja-texto pero solo enseña avisos sin leer,
   así que no necesita esta distinción y su estilo debe quedar tal
   como estaba). */
.hilo-item .franja-linea .franja-texto,
.hilo-item .hilo-respuesta .franja-texto {
  font-weight: 400;
  color: var(--gris-600);
}

.hilo-item .hilo-no-leido .franja-texto {
  font-weight: 700;
  color: var(--gris-900);
}

.hilo-respuestas {
  margin: 8px 0 0 16px;
  padding-left: 12px;
  border-left: 2px solid var(--gris-300);
}

.hilo-respuestas summary {
  font-size: 12px;
  color: var(--gris-600);
  cursor: pointer;
  margin-bottom: 6px;
}

/* Sin color propio (el color del hilo lo marca solo el raíz, nunca
   una respuesta) — blanca dentro de la caja gris, como pedido. */
.hilo-respuesta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 6px 10px;
}

.hilo-respuesta + .hilo-respuesta {
  margin-top: 4px;
}

/* --- Pestaña Notas --- */
/* Nota no tiene un atributo tipo "prioridad" que colorear — siempre
   blanca dentro de la caja gris, como el resto de líneas "sin color".
   Es un <a href> (abrir una nota no escribe nada, a diferencia de un
   aviso), así que hacen falta el reset de subrayado/color heredado y
   un cursor/hover que la sigan mostrando como una fila pinchable —
   mismo tratamiento que .hilo-abrir, adaptado a enlace en vez de
   botón. */
.nota-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 8px 10px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.nota-item:hover {
  filter: brightness(0.98);
}

.nota-item + .nota-item {
  margin-top: 4px;
}

.nota-estado {
  font-size: 12px;
  color: var(--gris-600);
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Cabecera del escritorio en móvil: los 3 bloques (izquierda/centro/
   derecha) se apilan en vertical y se centran, en vez de intentar
   mantener las 3 columnas de escritorio en un ancho que no les cabe. */
@media (max-width: 640px) {
  .sankuma-header {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .cabecera-izquierda,
  .cabecera-derecha {
    justify-content: center;
  }

  .cabecera-centro {
    order: 2;
  }
}

/* Dos columnas -> una sola en pantallas estrechas. Umbral algo mayor
   que el de la cabecera: con 2/3 + 1/3 el punto en el que se sienten
   apretadas llega antes que con la cabecera (3 bloques flexibles). */
/* Altura máxima del listado (avisos: bandeja, Archivados y Papelera
   comparten esta misma clase; notas) con su propio scroll — SOLO el
   listado, no la caja entera: nav, botón de crear y enlaces de
   Archivados/Papelera quedan fuera de este div (ver la plantilla), así
   que se quedan fijos y visibles al desplazar. ~600px es "generosa" a
   propósito: unas 3-4 tarjetas de Mis aplicaciones (≈150px cada una
   con su gap) caben a su lado, para que las dos columnas queden más o
   menos igualadas por abajo. min() con vh evita que sea excesiva en
   una ventana baja. overflow-x:hidden, por si acaso: no debe aparecer
   ningún desplazamiento horizontal aquí, solo vertical.

   Va ANTES de la media query de abajo a propósito: con la misma
   especificidad, la regla que aparece más tarde en la hoja gana, así
   que la excepción de móvil (que quita el límite) tiene que venir
   DESPUÉS de esta para poder anularla — si el orden fuera al revés,
   esta regla ganaría siempre y la excepción no haría nada. */
.lista-con-scroll {
  max-height: min(600px, 65vh);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

@media (max-width: 780px) {
  .sankuma-dos-columnas {
    grid-template-columns: 1fr;
  }

  /* En una sola columna, el límite de altura estorba más que ayuda
     (nadie necesita "alinear" nada con Mis aplicaciones si ya no
     están lado a lado, y un scroll interno dentro del scroll de la
     página es una experiencia rara en móvil) — se quita del todo. */
  .lista-con-scroll {
    max-height: none;
    overflow-y: visible;
  }
}

/* =========================================================================
   Ventana emergente de un hilo (3.9, parte 2b) — <dialog> nativo.
   ========================================================================= */
.dialogo-hilo {
  width: min(600px, 92vw);
  max-height: min(80vh, 720px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  font-family: 'Poppins', 'Century Gothic', 'Futura', sans-serif;
}

.dialogo-hilo::backdrop {
  background: rgba(26, 26, 30, 0.5);
}

.dialogo-cerrar-form {
  display: flex;
  justify-content: flex-end;
  margin: 0;
  padding: 8px 12px 0;
}

.dialogo-cerrar {
  background: transparent;
  border: none;
  color: var(--gris-600);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radio);
}

.dialogo-cerrar:hover {
  background: var(--gris-100);
  color: var(--gris-900);
}

.dialogo-contenido {
  padding: 4px 20px 20px;
  overflow-y: auto;
  max-height: calc(min(80vh, 720px) - 44px);
}

.dialogo-contenido .franja-linea,
.dialogo-contenido .hilo-respuesta {
  margin-bottom: 8px;
}

/* Diálogos de crear aviso/nota (3.9, parte 2c): reutilizan
   .dialogo-hilo/.dialogo-contenido/.dialogo-cerrar-form enteros (misma
   ventana, mismo cierre), solo añaden un título y, en el caso de la
   nota, el aviso de privacidad. */
.dialogo-titulo {
  margin: 4px 0 16px;
  font-size: 18px;
  font-weight: 700;
  color: var(--gris-900);
}

.dialogo-nota-privada {
  margin: -8px 0 20px;
  font-size: 13px;
  color: var(--gris-600);
}

/* Diálogo de crear cliente (3.12, Fase C): primer diálogo con dos
   grupos de campos distintos dentro del mismo formulario (datos del
   cliente / primer usuario responsable) — .dialogo-subtitulo los
   separa visualmente sin ser tan grande como .dialogo-titulo. */
.dialogo-subtitulo {
  margin: 24px 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--gris-900);
}

.dialogo-subtitulo:first-of-type {
  margin-top: 4px;
}

/* Aviso de "esta nota está en la papelera" dentro de su ventana: tono
   ámbar (ni el rojo de .sankuma-error, que sugeriría que algo ha ido
   mal, ni gris neutro, que pasaría desapercibido) — se puede seguir
   editando con normalidad, pero hay que dejar claro que, hasta que se
   restaure, no aparecerá en ningún otro sitio. */
.dialogo-aviso-papelera {
  background: #fdf6ec;
  color: #7a5b0f;
  border: 1px solid #f0dfb4;
  border-radius: var(--radio);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  margin: -8px 0 20px;
}

.dialogo-sin-respuesta {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--gris-300);
  font-size: 13px;
  color: var(--gris-600);
}

.dialogo-form-responder {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--gris-300);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dialogo-form-responder textarea {
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--gris-900);
  background: var(--blanco);
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  resize: vertical;
}

.dialogo-form-responder textarea:focus {
  outline: none;
  border-color: var(--sankuma-azul);
}

/* Móvil: la ventana ocupa casi todo el ancho (92vw ya cubre esto,
   pero se reduce el margen lateral efectivo aún más) y el contenido
   sigue con scroll propio en vez de desbordar la pantalla. */
@media (max-width: 640px) {
  .dialogo-hilo {
    width: 96vw;
    max-height: 90vh;
  }

  .dialogo-contenido {
    max-height: calc(90vh - 44px);
  }
}

/* =========================================================================
   Panel máster (3.12, rehecho como panel ÚNICO) — marca visual
   INVERTIDA a propósito: fondo azul SANKUMA, cabecera BLANCA con el
   logo azul (no la versión blanca del símbolo, que aquí no se vería).
   Para que de un vistazo se distinga sin ninguna duda del panel de
   usuario (blanco) — nunca confundir en qué lado se está.

   .caja-gris se reutiliza TAL CUAL dentro de este panel, sin ninguna
   variante nueva: gris-100 sobre azul saturado ya tiene contraste de
   sobra por sí solo (una caja clara flotando sobre un fondo oscuro),
   no hace falta tocarla.
   ========================================================================= */

body:has(.master-layout) {
  background: var(--sankuma-azul);
  align-items: flex-start;
  padding-top: 32px;
}

/* Ancho PROPIO del panel máster, más amplio que el resto del portal
   (960px) — tiene su propia hoja de estilos invertida y sus tablas
   (clientes, usuarios de la ficha) necesitan más sitio del que cabía
   sin scroll horizontal. Escrito aquí, en un único punto: todo lo
   demás dentro de .master-layout (cabecera, indicadores, cajas,
   ficha) usa ancho relativo/flex/grid, así que crece con este valor
   sin tocar nada más. El scroll horizontal de .master-tabla-scroll
   sigue existiendo como red de seguridad en pantallas estrechas. */
.master-layout {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
}

.master-header {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  background: var(--blanco);
  padding: 16px 24px;
  border-radius: var(--radio);
  margin-bottom: 28px;
}

/* Izquierda/derecha con el mismo flex-basis (0, crecen igual) para
   que el nombre del centro quede REALMENTE centrado en la cabecera,
   no solo "entre los otros dos" — con justify-content: space-between
   a secas, un lado más ancho que el otro descentra visualmente el
   texto de en medio. */
.master-header-izquierda,
.master-header-derecha {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 0;
}

.master-header-derecha {
  justify-content: flex-end;
}

.master-header-logo {
  height: 28px;
  width: auto;
}

/* Nivel de acceso (Máster/Agente/...) junto al logo — ver
   Usuario.nivel_panel_master, extensible a más niveles sin tocar esta
   regla: es solo texto, el mismo estilo sirve para cualquier etiqueta
   que llegue. */
.master-header-nivel {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--sankuma-azul);
  background: var(--gris-100);
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  padding: 3px 8px;
}

.master-header-centro {
  flex: 1 1 0;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--gris-900);
}

.master-header-enlace {
  color: var(--sankuma-azul);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.master-header-enlace:hover {
  text-decoration: underline;
}

.master-header-form-salir {
  margin: 0;
}

.master-boton-salir {
  background: transparent;
  border: 1px solid var(--sankuma-azul);
  color: var(--sankuma-azul);
  padding: 6px 14px;
  border-radius: var(--radio);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.master-boton-salir:hover {
  background: var(--sankuma-azul);
  color: var(--blanco);
}

/* --- Franja de indicadores: UNA caja, los 4 datos en línea (no
   cuatro tarjetas grandes separadas) --- */
.master-indicadores {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 16px;
  margin-bottom: 20px;
}

.master-indicador {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  text-decoration: none;
}

.master-indicadores-separador {
  color: var(--gris-300);
}

.master-indicador-clicable {
  cursor: pointer;
  border-radius: var(--radio);
}

.master-indicador-clicable:hover {
  text-decoration: underline;
}

.master-indicador-etiqueta {
  font-size: 13px;
  font-weight: 600;
  color: var(--gris-900);
}

.master-indicador-valor {
  font-size: 18px;
  font-weight: 700;
  color: var(--sankuma-azul);
}

.master-indicador-nota {
  font-size: 11px;
  color: var(--gris-600);
}

/* --- Caja Clientes (central, la más grande) --- */
.master-caja-clientes {
  margin-bottom: 20px;
}

/* flex-end, no space-between: ahora solo tiene un hijo (el buscador +
   botón), sin título a la izquierda que equilibrar — todo el bloque
   va pegado a la esquina superior derecha de la caja. */
/* space-between con dos hijos directos (buscador, botón): cada uno a
   un extremo — buscador pegado a la izquierda, "+ Cliente nuevo"
   pegado a la derecha. Con un único hijo (sin el botón, agente sin
   permiso de crear), ese hijo se queda a la izquierda igualmente. */
.master-caja-cabecera {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.master-caja-titulo {
  font-size: 16px;
  font-weight: 700;
  color: var(--gris-900);
  margin: 0;
}

.master-boton-secundario {
  display: inline-block;
  background: var(--sankuma-azul);
  color: var(--blanco);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: var(--radio);
}

.master-boton-secundario:hover {
  background: var(--sankuma-azul-hover);
}

/* --- Fila Soporte (alta, izquierda) + Avisos/Notas apiladas (derecha,
   más pequeñas) --- */
.master-fila-soporte {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.master-caja-soporte {
  min-height: 284px;
}

.master-columna-avisos-notas {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.master-caja {
  min-height: 134px;
  margin-bottom: 20px;
}

/* Dentro de master-fila-soporte/master-columna-avisos-notas el
   espaciado ya lo dan sus propios gap — el margin-bottom de arriba es
   solo para cuando .master-caja aparece SUELTA (ej. Avisos/Notas
   apiladas a ancho completo si no hay permiso de Soporte). */
.master-fila-soporte .master-caja,
.master-columna-avisos-notas .master-caja {
  margin-bottom: 0;
}

/* Ancho completo, separada del resto a propósito — ver el comentario
   en index.html: así el panel de un agente es "el mismo quitando esta
   caja", nunca un hueco raro en medio de una fila. */
.master-caja-equipo {
  margin-top: 8px;
}

.master-proximamente {
  color: var(--gris-600);
  font-size: 14px;
  margin: 0;
}

/* --- Buscador + tabla de clientes (pieza 2) --- */
.master-buscador {
  margin: 0;
}

.master-buscador-input {
  padding: 8px 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--gris-900);
  background: var(--blanco);
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  outline: none;
  min-width: 200px;
}

.master-buscador-input:focus {
  border-color: var(--sankuma-azul);
}

/* Scroll horizontal PROPIO de la tabla (nunca el body entero) en
   pantallas estrechas — mismo criterio que .lista-con-scroll en el
   panel de usuario, adaptado a horizontal en vez de vertical. */
.master-tabla-scroll {
  overflow-x: auto;
}

.master-tabla {
  width: 100%;
  border-collapse: collapse;
  background: var(--blanco);
  border-radius: var(--radio);
  overflow: hidden;
}

.master-tabla th,
.master-tabla td {
  padding: 10px 12px;
  text-align: left;
  font-size: 13px;
  white-space: nowrap;
  border-bottom: 1px solid var(--gris-300);
  /* top, no el "middle" por defecto de las celdas: "Expedientes" mide
     dos líneas (su aclaración debajo) y las demás cabeceras solo una
     — con vertical-align:top, la PRIMERA línea de todas queda a la
     misma altura y la aclaración cuelga por debajo sin descolocar la
     fila; con "middle" (el valor por defecto), la cabecera de dos
     líneas empuja su propio texto más arriba que las de una sola. */
  vertical-align: top;
}

.master-tabla th {
  font-weight: 700;
  color: var(--gris-900);
  background: var(--gris-100);
}

.master-tabla th a {
  color: var(--gris-900);
  text-decoration: none;
}

.master-tabla th a:hover {
  color: var(--sankuma-azul);
  text-decoration: underline;
}

.master-tabla tbody tr:last-child td {
  border-bottom: none;
}

.master-tabla tbody tr:hover {
  background: var(--gris-100);
}

.master-tabla-pendiente {
  color: var(--gris-600);
  font-style: italic;
}

/* Selector compuesto (.master-tabla th/td + .master-tabla-centro), no
   .master-tabla-centro sola: la regla base ".master-tabla th, .master-tabla
   td" (arriba) tiene MÁS especificidad que una clase suelta (dos
   selectores encadenados frente a uno), así que una clase sola nunca
   le habría ganado — por eso los números no se centraban aunque la
   clase ya estaba puesta. */
.master-tabla th.master-tabla-centro,
.master-tabla td.master-tabla-centro {
  text-align: center;
}

.master-tabla th.master-tabla-centro a {
  display: block;
}

/* Segunda línea de la cabecera "Expedientes" ("en curso / cerrados")
   — el elemento de MENOR peso visual de toda la cabecera: sin
   negrita, más pequeña y más tenue que el resto (que hereda 13px en
   gris-900 desde .master-tabla th). */
.master-tabla-subcabecera {
  display: block;
  font-weight: 400;
  font-size: 10px;
  color: var(--gris-600);
}

/* --- Ficha desplegable de cliente (Fase D, D1) --- */
.master-enlace-cliente {
  color: var(--gris-900);
  text-decoration: none;
  font-weight: 600;
}

.master-enlace-cliente:hover {
  color: var(--sankuma-azul);
  text-decoration: underline;
}

.master-ficha-flecha {
  display: inline-block;
  width: 10px;
  color: var(--gris-600);
}

/* Fondo distinto para saber de un vistazo qué fila está desplegada,
   incluso con el scroll bajado y la cabecera fuera de vista. */
.master-fila-cliente-abierta td {
  background: var(--gris-100);
}

/* La fila de la ficha no es una fila de datos normal (es una única
   celda colspan) — sin el hover gris de .master-tabla tbody tr:hover,
   que no pinta nada aquí y solo confundiría. */
.master-fila-ficha:hover {
  background: none;
}

.master-fila-ficha td {
  white-space: normal;
  padding: 0;
  border-bottom: 1px solid var(--gris-300);
}

.master-ficha {
  margin: 10px;
}

.master-ficha-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}

.master-ficha-titulo {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--gris-900);
}

.master-ficha-cerrar {
  color: var(--gris-600);
  font-size: 13px;
  text-decoration: none;
}

.master-ficha-cerrar:hover {
  color: var(--sankuma-azul);
  text-decoration: underline;
}

/* Enlace de acción por fila dentro de una tabla anidada de la ficha
   (ej. "Editar" en Usuarios del cliente, D3.2) — deliberadamente más
   discreto que .master-boton-secundario: son muchas filas, un botón
   con fondo de color en cada una sería demasiado ruido visual. */
.master-enlace-accion {
  color: var(--sankuma-azul);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.master-enlace-accion:hover {
  text-decoration: underline;
}

/* El interruptor de rol (Fase D3.3) es un <button> dentro de un
   <form>, no un <a> — sin este reset arrastraría el fondo/borde/
   padding por defecto del navegador y no se vería como el resto de
   enlaces de acción de la tabla. */
.master-boton-como-enlace {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  cursor: pointer;
}

/* El <form> del interruptor de rol vive DENTRO de una celda de
   tabla — sin esto se comporta como bloque y añade un salto de línea
   que no pinta nada en una celda de una sola palabra. */
.master-form-en-linea {
  display: inline;
  margin: 0;
}

/* Tres acciones apiladas por fila (Fase D3.5: Editar · Desactivar/
   Activar · Borrar) — una por línea, centradas, con un gap pequeño
   entre ellas. La celda ya viene con master-tabla-centro (text-align),
   esto solo ordena verticalmente sus tres hijos (el <a> de Editar y
   los dos <form>). */
.master-acciones-usuario {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* Mismo tono que .prioridad-badge.prioridad-alta — reutiliza el rojo
   ya establecido en la paleta en vez de inventar uno nuevo, para
   "Borrar" (la única acción irreversible de la fila). */
.master-enlace-accion-peligro {
  color: #a3242c;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.master-enlace-accion-peligro:hover {
  text-decoration: underline;
}

/* Usuario desactivado (Fase D3.5): fila entera atenuada para
   distinguirla de un vistazo, sin gastar una columna aparte — se
   suma sin conflicto a .master-fila-responsable (negrita) si un
   responsable se desactiva, cada regla toca una propiedad distinta. */
.master-fila-inactiva td {
  opacity: 0.55;
}

.master-etiqueta-inactivo {
  margin-left: 4px;
  font-size: 11px;
  font-style: italic;
  font-weight: 400;
  color: var(--gris-600);
}

.master-ficha-bloque {
  background: var(--blanco);
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  padding: 14px 16px;
  margin-bottom: 12px;
}

.master-ficha-bloque:last-child {
  margin-bottom: 0;
}

.master-ficha-bloque-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.master-ficha-bloque-titulo {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--gris-900);
}

.master-ficha-bloque-cabecera .master-ficha-bloque-titulo {
  margin-bottom: 0;
}

.master-boton-pequeno {
  padding: 4px 10px;
  font-size: 12px;
}

.master-ficha-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px 20px;
}

.master-ficha-dato {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.master-ficha-dato-etiqueta {
  font-size: 11px;
  font-weight: 600;
  color: var(--gris-600);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.master-ficha-dato-valor {
  font-size: 14px;
  color: var(--gris-900);
}

/* Tabla de usuarios de la ficha (Fase D3, ajuste visual): anchos fijos
   vía colgroup en vez de dejar que el navegador los reparta solo por
   contenido de celda — con auto, "Expedientes" (siempre corto, "0/0")
   salía enorme y Nombre/Email (el texto más largo) quedaban
   apretados. table-layout:fixed hace que colgroup mande de verdad, y
   white-space:normal (contra el nowrap de .master-tabla base) permite
   que Código/Rol/Expedientes envuelvan su texto corto sin forzar la
   columna a ensancharse. */
.master-tabla-usuarios {
  table-layout: fixed;
}

.master-tabla-usuarios th,
.master-tabla-usuarios td {
  white-space: normal;
  /* white-space:normal por sí solo SOLO envuelve en espacios — un
     email ("nuevo.responsable.d3@example.com") no tiene ninguno, así
     que sin esto se queda como una única "palabra" que desborda su
     celda y se monta visualmente sobre la columna vecina (el bug
     reportado), por ancho que le demos en el colgroup. word-break
     fuerza el corte DENTRO de la palabra si hace falta, así ninguna
     celda invade nunca a la de al lado, sea cual sea el email. */
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Más padding lateral que el resto de tablas del panel (12px de
   .master-tabla th/td se quedaba corto con columnas ya ajustadas al
   contenido: el texto de una columna casi tocaba el de la siguiente).
   Selector table.master-tabla-usuarios (no solo .master-tabla-usuarios
   suelto): mismo motivo que .master-tabla th.master-tabla-centro más
   abajo en este fichero — una clase sola empataría en especificidad
   con la regla base ".master-tabla th, .master-tabla td" y perdería
   por orden de aparición; añadir el tipo "table" la hace más
   específica de verdad, sin depender del orden en la hoja de estilos. */
table.master-tabla-usuarios th,
table.master-tabla-usuarios td {
  padding-left: 16px;
  padding-right: 16px;
}

/* Responsable: SIN insignia — la fila entera en negrita es la única
   marca (puede haber varios responsables, cada uno con su fila en
   negrita). Sustituye a la insignia azul anterior: con varias filas
   en la tabla, una caja de color por fila resultaba más ruido que
   ayuda; la negrita se ve de un vistazo sin añadir color. */
.master-fila-responsable td {
  font-weight: 700;
}

/* Módulos accesibles: uno por línea (vía <br> en la plantilla) en vez
   de una lista separada por comas que envolvía de forma impredecible
   con la columna ya estrecha — line-height ajustado para que varias
   líneas no infravaloren la fila más de la cuenta. */
.master-modulos-lista {
  line-height: 1.5;
}

/* .master-indicadores (flex-wrap) y .master-header (flex-wrap) ya se
   apilan solos en móvil sin nada más. .master-fila-soporte SÍ necesita
   su propia regla: usa un grid de dos columnas fijas (no auto-fit),
   así que hay que forzar el apilado en pantallas estrechas aquí. */
@media (max-width: 720px) {
  .master-fila-soporte {
    grid-template-columns: 1fr;
  }

  .master-caja-soporte {
    min-height: 200px;
  }
}