/* ===========================================================================
   Centro de comunicaciones · Puelo Patagonia
   HOJA DE ESTILO ÚNICA — todo el sitio se pinta desde acá.

   Ninguna página define colores, tipografías ni medidas por su cuenta.
   Si hay que cambiar algo del aspecto, se cambia en este archivo y se sube
   UN solo archivo por cPanel.

   Al editar esto hay que subir también auth.php con PP_VERSION cambiada,
   para que los navegadores no sigan mostrando la versión vieja en caché.

   Escala de pesos: 400 para texto, 500 para todo lo destacado. Nada más
   pesado: en Quicksand el 600/700 se ve sintético.
   =========================================================================== */

:root{
  /* Paleta oficial (rediseño 2026-08) */
  --negro:#0D0D0D;            /* Negro Cochamó — texto y secciones a sangre */
  --rio:#008C8C;              /* Turquesa Puelo — el color de la marca */
  --rio-oscuro:#006E6E;       /* hover */
  --rio-tinte:#EAF4F4;        /* fondos suaves y foco de campos */
  --gris:#5E605C;             /* texto secundario */
  --gris-claro:#9A9A95;       /* texto terciario y marcadores */
  --texto-2:#3F423E;          /* párrafos sobre blanco */
  --linea:#E0E0D8;            /* Niebla — bordes y separadores */
  --fondo:#F0F0EB;            /* fondo de bloques */
  --blanco:#FFFFFF;
  --terracota:#C1553A;        /* Ñire — SOLO advertencias */
  --terracota-oscuro:#9C3E28;
  --terracota-tinte:#F9EBE6;
  --granito:#5F6F84;          /* apoyo puntual */
  --neblina:#A1B2AD;          /* apoyo puntual */

  /* Roles semánticos: son los que cambian en modo oscuro.
     La paleta de arriba (río, ñire, granito…) NO cambia nunca: son los
     colores de la marca y deben verse iguales en los dos modos. */
  --fondo-pagina:var(--blanco);   /* fondo general */
  --fondo-tarjeta:#FFFFFF;        /* tarjetas y campos */
  --fondo-suave:var(--fondo);     /* bloques y encabezados de tabla */
  --texto:var(--negro);           /* texto principal */
  --bloque-oscuro:var(--negro);   /* barra superior y cabecera de categoría */
  --sombra-tarjeta:0 1px 2px rgba(13,13,13,.04);
  --aviso-fondo:#FDFAF0;          /* recuadro de advertencia suave */
  --aviso-borde:#D9CFA8;

  --ancho:1240px;
  --radio:6px;
  --radio-pastilla:50px;

  /* Brandon Text es la tipografía de la marca, pero es licenciada: la ve
     quien la tenga instalada. Quicksand (libre) es el respaldo para el resto. */
  --sans:'Brandon Text','Brandon Grotesque','Quicksand',
         -apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--fondo-pagina);
  color:var(--texto);
  font-family:var(--sans);
  font-weight:400;
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--rio); text-decoration:none; }
a:hover{ color:var(--rio-oscuro); text-decoration:underline; }
input,button,select,textarea{ font-family:inherit; }
::placeholder{ color:var(--gris-claro); }
img{ max-width:100%; }

/* ── Tipografía ─────────────────────────────────────────────────────────── */

.kicker{
  font-size:12px; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--rio); margin:0 0 14px;
}
h1.titular{
  font-size:clamp(30px,4vw,52px); font-weight:500; line-height:1.05;
  letter-spacing:-.015em; text-transform:uppercase; margin:0 0 16px;
  overflow-wrap:break-word;
}
h2.seccion{
  font-size:34px; font-weight:500; line-height:1.08;
  text-transform:uppercase; margin:0 0 28px;
}
h2.titulo-cat{
  font-size:clamp(26px,3vw,40px); font-weight:500; line-height:1.1;
  text-transform:uppercase; margin:0 0 12px;
}
p.intro{
  margin:0 0 26px; font-size:16px; font-weight:400; line-height:1.6;
  color:var(--texto-2); max-width:680px;
}
p.nota-final{
  margin:0; font-size:13.5px; font-weight:400; line-height:1.6;
  color:var(--gris); max-width:680px;
}

/* ── Estructura ─────────────────────────────────────────────────────────── */

.envoltorio{ max-width:var(--ancho); margin:0 auto; padding:56px 40px 80px; }
.columna{ max-width:900px; }

/* ── Barra superior (partes/cabecera.php) ───────────────────────────────── */

.barra{
  background:var(--bloque-oscuro); position:sticky; top:0; z-index:10;
  border-bottom:1px solid rgba(255,255,255,.16);
}
.barra .interior{
  max-width:var(--ancho); margin:0 auto; padding:16px 28px;
  display:flex; align-items:center; gap:18px;
}
.barra .marca{
  display:flex; align-items:center; gap:14px; min-width:0;
  flex:0 1 auto; overflow:hidden; text-decoration:none; margin-right:auto;
}
.barra .marca:hover{ text-decoration:none; }
.barra .marca img{ width:118px; height:auto; display:block; flex:none; }
.barra .marca span{
  font-size:10.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gris-claro); padding-left:14px; border-left:1px solid rgba(255,255,255,.18);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Vuelta al centro, siempre visible en la barra fija. */
.barra .volver-barra{
  flex:none; margin-right:auto;
  padding:8px 16px; font-size:10.5px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; white-space:nowrap; text-decoration:none;
  color:rgba(255,255,255,.75); border:1px solid rgba(255,255,255,.22);
  border-radius:var(--radio-pastilla);
}
.barra .volver-barra:hover{ border-color:var(--rio); color:#fff; text-decoration:none; }

.barra .derecha{ display:flex; align-items:center; gap:16px; flex:none; white-space:nowrap; }
.barra .separador{ width:1px; height:26px; background:rgba(255,255,255,.16); }
.barra .quien{ text-align:right; line-height:1.3; }
.barra .quien .nombre{ font-size:13.5px; font-weight:500; color:#fff; }
.barra .quien .rol{
  font-size:11px; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gris-claro);
}
.barra .iniciales{
  width:34px; height:34px; border-radius:50%; background:var(--rio); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:500; flex:none;
}
.barra .enlace{
  background:none; border:0; font-size:11px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gris-claro); cursor:pointer; padding:6px 4px;
  text-decoration:none;
}
.barra .enlace:hover{ color:#fff; text-decoration:none; }
.barra .admin{
  border:1px solid rgba(255,255,255,.22); border-radius:var(--radio-pastilla);
  padding:8px 16px; font-size:10.5px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.75); text-decoration:none;
}
.barra .admin:hover{ border-color:var(--rio); color:#fff; text-decoration:none; }

/* ── Avisos ─────────────────────────────────────────────────────────────── */

.aviso{
  background:var(--rio-tinte); border-left:3px solid var(--rio); color:var(--texto);
  font-size:13.5px; font-weight:400; padding:12px 16px; border-radius:var(--radio);
}
.aviso.malo{
  background:var(--terracota-tinte); border-left-color:var(--terracota);
  color:var(--terracota-oscuro);
}
.franja-aviso{ max-width:var(--ancho); margin:24px auto -8px; padding:0 40px; }

/* ── Formularios ────────────────────────────────────────────────────────── */

label.etiqueta{
  display:block; font-size:11px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gris); margin-bottom:8px;
}
.campo{
  width:100%; padding:13px 14px; font-size:15.5px; font-weight:400;
  border:1px solid var(--linea); border-radius:var(--radio);
  background:var(--fondo-tarjeta); color:var(--texto); margin-bottom:18px; outline:none;
}
.campo:focus{ border-color:var(--rio); box-shadow:0 0 0 3px var(--rio-tinte); }
.campo[readonly]{ background:var(--fondo-suave); color:var(--gris); }

label.casilla{
  display:flex; align-items:flex-start; gap:9px; font-size:14px; font-weight:400;
  color:var(--texto-2); margin-bottom:14px; cursor:pointer;
}
label.casilla input{ width:16px; height:16px; accent-color:var(--rio); margin:3px 0 0; flex:none; }
label.casilla .t{ font-weight:500; color:var(--texto); }
label.casilla .d{ display:block; font-size:12.5px; color:var(--gris); }

.pista{ font-size:12.5px; color:var(--gris); margin:6px 0 0; }

/* ── Botones ────────────────────────────────────────────────────────────── */

.boton{
  display:inline-block; padding:15px 28px; font-size:13px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:#fff; background:var(--rio);
  border:0; border-radius:var(--radio-pastilla); cursor:pointer; text-align:center;
  text-decoration:none;
}
.boton:hover{ background:var(--rio-oscuro); color:#fff; text-decoration:none; }
.boton.ancho{ width:100%; }
.boton.peligro{ background:var(--terracota); }
.boton.peligro:hover{ background:var(--terracota-oscuro); }
.boton.contorno{
  background:none; color:var(--texto); border:1px solid var(--linea);
  padding:9px 18px; font-size:10.5px;
}
.boton.contorno:hover{ background:none; border-color:var(--rio); color:var(--rio); }
.boton.claro{
  background:none; border:1px solid rgba(255,255,255,.22);
  color:rgba(255,255,255,.7); padding:9px 18px; font-size:10.5px;
}
.boton.claro:hover{ background:none; border-color:var(--rio); color:#fff; }
.boton.suave{
  background:var(--rio-tinte); color:var(--rio);
  padding:11px 20px; font-size:10.5px; letter-spacing:.12em;
}
.boton.suave:hover{ background:var(--rio); color:#fff; }

.enlace-boton{
  background:none; border:0; padding:0; color:var(--gris);
  font-size:13px; cursor:pointer; text-decoration:underline; font-family:inherit;
}
.enlace-boton:hover{ color:var(--texto); }

/* ── Grupos y tarjetas (hub) ────────────────────────────────────────────── */

.grupo{ padding-top:48px; }
.grupo-titulo{
  display:flex; align-items:baseline; gap:16px; margin-bottom:22px;
  padding-bottom:14px; border-bottom:1px solid var(--linea);
}
.grupo-titulo .nombre{
  font-size:12px; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--texto);
}
.grupo-titulo .conteo{
  font-size:12px; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gris-claro); margin-left:auto;
}

.rejilla{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:18px; }

.tarjeta{
  display:block; background:var(--fondo-tarjeta); border:1px solid var(--linea);
  border-radius:var(--radio); padding:26px 24px; color:inherit; text-decoration:none;
  box-shadow:var(--sombra-tarjeta);
  transition:border-color .15s, transform .15s, box-shadow .15s;
}
a.tarjeta:hover{ border-color:var(--rio); transform:translateY(-2px); text-decoration:none; color:inherit; }
.tarjeta .fila-ico{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; margin-bottom:20px;
}
.tarjeta .ico{
  width:44px; height:44px; border-radius:var(--radio); background:var(--rio-tinte);
  color:var(--rio); display:flex; align-items:center; justify-content:center; font-size:21px;
}
.tarjeta h3{
  font-size:20px; font-weight:500; line-height:1.15;
  text-transform:uppercase; margin:0 0 10px;
}
.tarjeta p{ margin:0; font-size:14.5px; font-weight:400; line-height:1.55; color:var(--texto-2); }
.tarjeta.pronto{ opacity:.5; background:none; border-style:dashed; box-shadow:none; }
.tarjeta.pronto .ico{ background:var(--fondo-suave); color:var(--gris-claro); }

.chip{
  font-size:10px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  padding:4px 10px; border-radius:var(--radio-pastilla);
  background:var(--fondo-suave); color:var(--gris);
}
.chip.marca{ background:var(--rio-tinte); color:var(--rio); }
.chip.alerta{ background:var(--terracota-tinte); color:var(--terracota-oscuro); }

.caja-vacia{
  margin-top:40px; background:var(--fondo-suave); border:1px solid var(--linea);
  border-radius:var(--radio); padding:34px; font-size:16px; font-weight:400;
  color:var(--texto-2); max-width:640px;
}

/* ── Encabezado negro de categoría ──────────────────────────────────────── */

.cabecera-cat{ background:var(--bloque-oscuro); color:#fff; padding:52px 0 64px; }
.cabecera-cat .interior{ max-width:var(--ancho); margin:0 auto; padding:0 40px; }
/* Variante a dos columnas: el título a la izquierda y una nota a la derecha. */
.cabecera-cat .interior.con-aparte{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:26px 44px; flex-wrap:wrap;
}
.cabecera-cat .interior.con-aparte h1{ margin-bottom:0; }
.cabecera-cat .aparte{ flex:none; }
.cabecera-cat .aparte .boton{ padding:12px 22px; font-size:11px; }
.cabecera-cat .volver{ margin-bottom:44px; }
.cabecera-cat .kicker{ color:var(--rio); font-size:11.5px; margin-bottom:18px; }
.cabecera-cat h1{
  font-size:clamp(32px,4.6vw,60px); font-weight:500; line-height:1.02;
  letter-spacing:-.015em; text-transform:uppercase; margin:0 0 16px;
}
.cabecera-cat p{ margin:0; font-size:17px; font-weight:400; color:rgba(255,255,255,.72); max-width:640px; }

/* Variante clara, para las pantallas de trabajo (usuarios, perfiles, editar).
   El titular negro a sangre es para el contenido del centro; en una pantalla
   de gestión pesa de más. */
.cabecera-cat.clara{
  background:var(--fondo-suave); color:var(--texto);
  border-bottom:1px solid var(--linea);
  padding:30px 0 32px;
}
.cabecera-cat.clara h1{ font-size:clamp(26px,3.4vw,42px); }
.cabecera-cat.clara p{ color:var(--texto-2); }

/* Submenú dentro de una categoría: texto plano con subrayado en la activa.
   Sin pastillas — las pastillas quedan reservadas para los FILTROS, para que
   se distinga de un vistazo lo que navega de lo que filtra. */
/* Las pestañas no se apilan nunca: cuando no caben, la tira se desliza en
   horizontal y la última queda cortada a la vista, que es la señal de que
   hay más. Apilarlas rompía el subrayado de la pestaña activa. */
.pestanas{
  display:flex; flex-wrap:nowrap; gap:30px;
  border-bottom:1px solid var(--linea); margin-bottom:36px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity; scrollbar-width:none;
}
.pestanas::-webkit-scrollbar{ display:none; }
.pestana{
  background:none; border:0; border-bottom:2px solid transparent;
  padding:0 0 13px; margin-bottom:-1px; flex:none; scroll-snap-align:start;
  white-space:nowrap;
  font-size:11.5px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gris); cursor:pointer; font-family:inherit;
}
.pestana:hover{ color:var(--texto); border-bottom-color:var(--linea); }
.pestana[aria-selected="true"]{ color:var(--texto); border-bottom-color:var(--texto); }

/* ── Buscador, filtros y fichas ─────────────────────────────────────────── */

.buscador{
  width:100%; padding:15px 18px; font-size:16px; font-weight:400;
  border:1px solid var(--linea); border-radius:var(--radio);
  background:var(--fondo-tarjeta); color:var(--texto); outline:none; margin-bottom:16px;
}
.buscador:focus{ border-color:var(--rio); box-shadow:0 0 0 3px var(--rio-tinte); }

/* Mismo criterio que las pestañas: una sola fila que se desliza. En el
   escritorio, cuando caben todas, no cambia nada ni aparece barra. */
.filtros{
  display:flex; flex-wrap:nowrap; gap:8px; margin-bottom:32px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity; scrollbar-width:none;
  /* Sin esto, el foco del teclado recorta el borde de la pastilla activa. */
  padding-block:2px;
}
.filtros::-webkit-scrollbar{ display:none; }
.filtro{
  font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  padding:9px 17px; border-radius:var(--radio-pastilla);
  background:var(--fondo-tarjeta); color:var(--gris); border:1px solid var(--linea);
  cursor:pointer; font-family:inherit;
  flex:none; white-space:nowrap; scroll-snap-align:start;
}
.filtro:hover{ border-color:var(--rio); color:var(--rio); }
.filtro[aria-pressed="true"]{ background:var(--texto); border-color:var(--texto); color:var(--fondo-pagina); }

.resultados-cabecera{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding-bottom:14px; border-bottom:1px solid var(--linea); margin-bottom:20px;
}
.resultados-cabecera.suelto{ margin-top:38px; }
.resultados-cabecera .que{
  font-size:12px; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--texto);
}
.resultados-cabecera .cuantos{
  font-size:11px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gris-claro); white-space:nowrap;
}

.lista-fichas{ display:flex; flex-direction:column; gap:16px; }
.ficha{
  background:var(--fondo-tarjeta); border:1px solid var(--linea); border-radius:var(--radio);
  padding:24px 26px;
}
.ficha.obligatorio{ border-left:3px solid var(--rio); }
.ficha.prohibido{ border-left:3px solid var(--terracota); }
.ficha .encabezado{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:14px; flex-wrap:wrap; margin-bottom:14px;
}
.ficha h4{
  margin:0; font-size:20px; font-weight:500;
  text-transform:uppercase; letter-spacing:-.005em;
}
.ficha .marcas{ display:flex; gap:7px; flex-wrap:wrap; }
.ficha .marca-chip{
  font-size:9.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  padding:5px 11px; border-radius:var(--radio-pastilla);
  background:var(--fondo-suave); color:var(--gris); white-space:nowrap;
}
.ficha .marca-chip.si{ background:var(--rio-tinte); color:var(--rio); }
.ficha .marca-chip.no{ background:var(--terracota-tinte); color:var(--terracota-oscuro); }
.ficha p{ margin:0 0 8px; font-size:15px; font-weight:400; line-height:1.55; }
.ficha .usar b{ color:var(--rio); font-weight:500; }
.ficha .evitar b{ color:var(--terracota-oscuro); font-weight:500; }
.ficha .motivo{ margin:12px 0 0; font-size:14.5px; color:var(--texto-2); }
.ficha .ejemplos{ margin:14px 0 0; padding:14px 16px; background:var(--fondo-suave); border-radius:var(--radio); }
.ficha .ejemplos p{ margin:0 0 6px; font-size:14px; color:var(--texto-2); font-style:italic; }
.ficha .ejemplos p:last-child{ margin:0; }
.ficha .fuente{ margin:14px 0 0; font-size:12.5px; font-weight:400; color:var(--gris-claro); }
.ficha .cifra{ font-size:30px; font-weight:500; color:var(--rio); letter-spacing:-.01em; }
.ficha .cifra .unidad{ font-size:15px; color:var(--gris); margin-left:4px; }

.sin-resultados{
  background:var(--fondo-suave); border:1px solid var(--linea); border-radius:var(--radio);
  padding:30px; font-size:16px; font-weight:400; color:var(--texto-2);
}

/* ── Tabla ──────────────────────────────────────────────────────────────── */

.tabla{
  background:var(--fondo-tarjeta); border:1px solid var(--linea); border-radius:var(--radio);
  overflow:hidden; margin-bottom:16px;
}
.tabla .encabezado,
.tabla .fila{
  display:grid; grid-template-columns:minmax(0,1.6fr) 130px 90px; gap:12px;
  padding:13px 22px; align-items:baseline;
}
.tabla .encabezado{
  background:var(--fondo-suave); border-bottom:1px solid var(--linea);
  font-size:10.5px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gris);
}
.tabla .fila{ border-bottom:1px solid var(--linea); }
.tabla .fila:last-child{ border-bottom:0; }
.tabla .fila .nombre{ font-weight:500; }
.tabla .fila .nota{ font-size:12.5px; font-weight:400; color:var(--gris); }
.tabla .num{ text-align:right; font-variant-numeric:tabular-nums; }
.tabla .destacada{ background:var(--rio-tinte); }
.tabla .destacada .nombre{ color:var(--rio); }
.tabla .total{ background:var(--fondo-suave); }
.tabla .total .nombre,
.tabla .total .num{ font-weight:500; color:var(--texto); }

/* ── Kit de marca ───────────────────────────────────────────────────────── */

/* Navegación entre subsecciones, pegada arriba */
.subnav{
  position:sticky; top:68px; z-index:9; background:color-mix(in srgb, var(--fondo-pagina) 94%, transparent);
  backdrop-filter:blur(6px); border-bottom:1px solid var(--linea);
  margin-bottom:8px;
}
.subnav .interior{
  max-width:var(--ancho); margin:0 auto; padding:0 40px;
  display:flex; gap:30px; overflow-x:auto; scrollbar-width:none;
}
.subnav .interior::-webkit-scrollbar{ display:none; }
.subnav a{
  padding:16px 0 14px; font-size:11px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gris); white-space:nowrap;
  text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px;
}
.subnav a:hover{ color:var(--texto); border-bottom-color:var(--linea); text-decoration:none; }
/* La subsección que estás mirando se marca sola al desplazarte. */
.subnav a.aqui{ color:var(--texto); border-bottom-color:var(--texto); }

.bloque-kit{ padding-top:56px; scroll-margin-top:130px; }

/* Logotipos */
.rejilla-logos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; }
.logo-tarjeta{ background:var(--fondo-tarjeta); border:1px solid var(--linea); border-radius:var(--radio); overflow:hidden; }
.logo-tarjeta.preferida{ border-color:var(--rio); }
.logo-tarjeta .muestra{
  height:150px; display:flex; align-items:center; justify-content:center;
  padding:24px; border-bottom:1px solid var(--linea);
}
.logo-tarjeta .muestra img{ max-height:82px; width:auto; }
.logo-tarjeta .muestra .pendiente{
  font-size:11px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gris-claro);
}
.logo-tarjeta .cuerpo{ padding:20px 22px 22px; }
.logo-tarjeta .titulo{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  flex-wrap:wrap; margin-bottom:10px;
}
.logo-tarjeta h4{ margin:0; font-size:16px; font-weight:500; text-transform:uppercase; }
.logo-tarjeta p{ margin:0 0 16px; font-size:13.5px; line-height:1.5; color:var(--texto-2); }
.descargas{ display:flex; flex-wrap:wrap; gap:7px; }
.descargas .formato{
  font-size:10.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  padding:7px 13px; border-radius:var(--radio-pastilla);
  background:var(--rio-tinte); color:var(--rio); text-decoration:none;
}
.descargas .formato:hover{ background:var(--rio); color:#fff; text-decoration:none; }
.descargas .formato.no{ background:var(--fondo-suave); color:var(--gris-claro); cursor:not-allowed; }

/* Muestras de color */
.paleta{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; }
.muestra-color{
  background:var(--fondo-tarjeta); border:1px solid var(--linea); border-radius:var(--radio);
  overflow:hidden; display:flex; flex-direction:column;
}
.muestra-color .cuadro{ height:120px; position:relative; cursor:pointer; }
.muestra-color .cuadro .rol{
  position:absolute; top:10px; left:11px; font-size:9.5px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; padding:4px 9px;
  border-radius:var(--radio-pastilla);
}
.muestra-color .cuadro .copiar{
  position:absolute; bottom:10px; right:10px; font-size:10px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; padding:4px 9px;
  border-radius:var(--radio-pastilla); background:rgba(255,255,255,.92);
  color:var(--texto); opacity:0; transition:opacity .15s;
}
.muestra-color .cuadro:hover .copiar{ opacity:1; }
.muestra-color .cuadro.copiado .copiar{ opacity:1; background:var(--negro); color:#fff; }
.muestra-color .datos{ padding:14px 16px 16px; }
.muestra-color .datos h4{ margin:0 0 3px; font-size:15px; font-weight:500; }
.muestra-color .datos .codigo{ font-size:12px; color:var(--gris); margin:0 0 2px; }
.muestra-color .datos .codigo.impresion{ color:var(--gris-claro); margin:0 0 8px; }
.muestra-color .datos p{ margin:0; font-size:12.5px; line-height:1.5; color:var(--texto-2); }

/* Tonos velados */
.velado{
  background:var(--fondo-tarjeta); border:1px solid var(--linea); border-radius:var(--radio);
  padding:18px 20px; display:flex; gap:16px; align-items:flex-start; margin-bottom:12px;
}
.velado .tonos{ display:flex; gap:6px; flex:none; }
.velado .tonos span{ width:34px; height:34px; border-radius:var(--radio); border:1px solid var(--linea); }
.velado h4{ margin:0 0 3px; font-size:15px; font-weight:500; }
.velado .codigos{ font-size:12px; color:var(--gris); margin:0 0 6px; }
.velado p{ margin:0; font-size:13px; line-height:1.5; color:var(--texto-2); }

/* Proporción 60·30·10 */
.barra-proporcion{
  display:flex; height:56px; border-radius:var(--radio); overflow:hidden;
  border:1px solid var(--linea); margin-bottom:14px;
}
.barra-proporcion span{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
}

/* Reglas y ejemplos */
.regla{
  background:var(--fondo-tarjeta); border:1px solid var(--linea); border-radius:var(--radio);
  padding:22px 24px; margin-bottom:14px;
}
.regla .titulo{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.regla .punto{ width:10px; height:10px; border-radius:50%; flex:none; }
.regla h4{ margin:0; font-size:16px; font-weight:500; text-transform:uppercase; }
.regla p{ margin:0 0 14px; font-size:14px; line-height:1.55; color:var(--texto-2); }
.regla .ejemplos-color{ display:flex; flex-wrap:wrap; gap:10px; }
.regla .ejemplos-color span{
  padding:10px 18px; border-radius:var(--radio-pastilla);
  font-size:12px; font-weight:500; letter-spacing:.06em;
}

/* Contraste */
.contraste{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; }
.contraste .caja{
  background:var(--fondo-tarjeta); border:1px solid var(--linea); border-radius:var(--radio); padding:22px 24px;
}
.contraste .caja.si{ border-left:3px solid var(--rio); }
.contraste .caja.no{ border-left:3px solid var(--terracota); }
.contraste h4{ margin:0 0 14px; font-size:14px; font-weight:500; text-transform:uppercase; letter-spacing:.1em; }
.contraste .par{
  padding:11px 15px; border-radius:var(--radio); font-size:13.5px; margin-bottom:8px;
}

/* Tipografía */
.peso-linea{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding:14px 0; border-bottom:1px solid var(--linea); flex-wrap:wrap;
}
.peso-linea:last-child{ border-bottom:0; }
.peso-linea .etiqueta-peso{
  font-size:11px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gris); flex:none;
}
.abecedario{
  background:var(--fondo-suave); border-radius:var(--radio); padding:22px 24px; margin:20px 0;
  font-size:19px; line-height:1.7; word-break:break-word;
}

/* Usos: qué sí y qué no */
.rejilla-usos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; }
.uso{
  background:var(--fondo-tarjeta); border:1px solid var(--linea); border-radius:var(--radio); padding:22px 24px;
}
.uso.si{ border-left:3px solid var(--rio); }
.uso.no{ border-left:3px solid var(--terracota); }
.uso .marca-chip{
  display:inline-block; font-size:9.5px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; padding:5px 11px; border-radius:var(--radio-pastilla);
  margin-bottom:10px;
}
.uso.si .marca-chip{ background:var(--rio-tinte); color:var(--rio); }
.uso.no .marca-chip{ background:var(--terracota-tinte); color:var(--terracota-oscuro); }
.uso h4{ margin:0 0 8px; font-size:16px; font-weight:500; text-transform:uppercase; }
.uso p{ margin:0; font-size:14px; line-height:1.55; color:var(--texto-2); }

/* ── Panel de usuarios ──────────────────────────────────────────────────── */

.panel-admin{ display:grid; grid-template-columns:1.55fr 1fr; gap:24px; align-items:start; }

.tabla-usuarios{
  background:var(--fondo-tarjeta); border:1px solid var(--linea); border-radius:var(--radio); overflow:hidden;
}
.tabla-usuarios .encabezado,
.tabla-usuarios .fila{
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 200px; gap:12px;
}
.tabla-usuarios .encabezado{
  padding:14px 22px; background:var(--fondo-suave); border-bottom:1px solid var(--linea);
  font-size:10.5px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gris);
}
.tabla-usuarios .fila{ padding:16px 22px; border-bottom:1px solid #ECECEA; align-items:center; }
.tabla-usuarios .fila:last-child{ border-bottom:0; }
.tabla-usuarios .fila.baja{ opacity:.6; }

.tabla-usuarios .persona{ display:flex; align-items:center; gap:12px; min-width:0; }
.tabla-usuarios .avatar{
  width:34px; height:34px; border-radius:50%; background:var(--fondo-suave);
  border:1px solid var(--linea); display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:500; flex:none;
}
.tabla-usuarios .avatar.yo{ background:var(--rio); border-color:var(--rio); color:#fff; }
.tabla-usuarios .principal{
  font-size:14.5px; font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tabla-usuarios .secundario{ font-size:12.5px; font-weight:400; color:var(--gris); }
.tabla-usuarios .acciones{ display:flex; justify-content:flex-end; gap:8px; align-items:center; }
.boton-icono{
  background:var(--fondo-tarjeta); border:1px solid var(--linea); border-radius:50%;
  width:26px; height:26px; cursor:pointer; color:var(--gris);
  font-size:12px; line-height:1; flex:none; padding:0; font-family:inherit;
}
.boton-icono:hover{ border-color:var(--rio); color:var(--rio); }
.boton-icono.peligro:hover{ border-color:var(--terracota); color:var(--terracota); }

.formulario-usuario{
  background:var(--fondo-suave); border:1px solid var(--linea);
  border-radius:var(--radio); padding:26px;
}
.formulario-usuario h2{
  font-size:22px; font-weight:500; text-transform:uppercase;
  line-height:1.1; margin:0 0 8px;
}
.formulario-usuario .ayuda{
  margin:0 0 22px; font-size:13.5px; font-weight:400; line-height:1.55; color:var(--texto-2);
}
.formulario-usuario label.etiqueta{ font-size:10.5px; letter-spacing:.14em; margin:20px 0 7px; }
.formulario-usuario label.etiqueta:first-of-type{ margin-top:0; }
.formulario-usuario .campo{
  padding:11px 13px; font-size:14.5px; margin-bottom:6px;
}
.formulario-usuario .pista{ margin:0 0 4px; font-size:12px; }
.fila-clave{ display:flex; gap:8px; margin-bottom:6px; }
.fila-clave .campo{ flex:1; margin:0; font-family:var(--mono); font-size:14px; }
.fila-clave button{
  padding:0 15px; font-size:10.5px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--rio); background:var(--rio-tinte);
  border:0; border-radius:var(--radio-pastilla); cursor:pointer;
  white-space:nowrap; font-family:inherit;
}
.fila-clave button:hover{ background:var(--rio); color:#fff; }

/* Opciones con caja (admin y categorías) */
.opciones{ display:flex; flex-direction:column; gap:7px; margin-bottom:20px; }
.opciones.apagada{ opacity:.45; pointer-events:none; }
.opcion{
  display:flex; align-items:flex-start; gap:10px; padding:12px 14px;
  border-radius:var(--radio); border:1px solid var(--linea);
  background:var(--fondo-tarjeta); cursor:pointer;
}
.opcion:hover{ border-color:var(--rio); }
.opcion.marcada{ border-color:var(--rio); background:var(--rio-tinte); }
.opcion.apagada{ opacity:.5; pointer-events:none; }
.opcion input{ width:15px; height:15px; accent-color:var(--rio); margin:3px 0 0; flex:none; }
.opcion .t{
  display:block; font-size:13px; font-weight:500;
  text-transform:uppercase; letter-spacing:.02em;
}
.opcion .d{ display:block; font-size:12px; font-weight:400; color:var(--texto-2); }
.opcion.destacada{ border-color:var(--aviso-borde); background:var(--aviso-fondo); }
.opcion.destacada:hover{ border-color:var(--rio); }


/* ── Editar contenido del manual ────────────────────────────────────────── */

.lista-edicion{
  background:var(--fondo-tarjeta); border:1px solid var(--linea);
  border-radius:var(--radio); overflow:hidden; margin-bottom:32px;
}
.lista-edicion .fila{
  display:flex; align-items:center; gap:14px;
  padding:13px 18px; border-bottom:1px solid #ECECEA;
}
.lista-edicion .fila:last-child{ border-bottom:0; }
.lista-edicion .fila:hover{ background:var(--fondo-suave); }
.lista-edicion .fila.editando{ background:var(--rio-tinte); }
.lista-edicion .principal{
  flex:1 1 auto; min-width:0; font-size:14.5px; font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lista-edicion .secundario{
  flex:none; font-size:12px; color:var(--gris);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:38%;
}
.lista-edicion .acciones{ flex:none; display:flex; gap:8px; }
.lista-edicion .vacia{ padding:26px 18px; color:var(--gris); font-size:14.5px; }

.formulario-contenido{
  scroll-margin-top:90px;
  background:var(--fondo-suave); border:1px solid var(--linea);
  border-radius:var(--radio); padding:26px;
}
.formulario-contenido h3{
  font-size:20px; font-weight:500; text-transform:uppercase;
  line-height:1.1; margin:0 0 6px;
}
.formulario-contenido .ayuda{
  margin:0 0 22px; font-size:13.5px; line-height:1.55; color:var(--texto-2);
}
.asistente{ margin-bottom:22px; }
.asistente .ayuda{ margin-bottom:12px; }
.asistente .campo{ margin-bottom:0; }

.formulario-contenido label.etiqueta{ font-size:10.5px; letter-spacing:.14em; margin:18px 0 7px; }
.formulario-contenido label.etiqueta:first-of-type{ margin-top:0; }
.formulario-contenido .campo{ padding:11px 13px; font-size:14.5px; margin-bottom:0; }
.formulario-contenido .pista{ margin:6px 0 0; font-size:12px; }
.formulario-contenido textarea.campo{ min-height:88px; resize:vertical; line-height:1.5; }
.formulario-contenido select.campo{ appearance:none; background-image:none; }
.fila-campos{ display:flex; gap:14px; flex-wrap:wrap; }
.fila-campos > *{ flex:1 1 200px; min-width:0; }
.acciones-formulario{ display:flex; gap:12px; align-items:center; margin-top:24px; flex-wrap:wrap; }

@media (max-width:820px){
  .lista-edicion .secundario{ display:none; }
}

/* ── Pie (partes/pie.php) ───────────────────────────────────────────────── */

.pie{ border-top:1px solid var(--linea); margin-top:64px; background:var(--fondo-pagina); }
.pie .interior{
  max-width:var(--ancho); margin:0 auto; padding:26px 40px 40px;
  display:flex; flex-wrap:wrap; gap:8px 18px; align-items:baseline;
  font-size:12px; font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; color:var(--gris-claro);
}
.pie .interior .relleno{ flex:1 1 auto; }
.pie a{ color:var(--gris); }

/* ── Ingreso (pantalla de login) ────────────────────────────────────────── */

.ingreso{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); min-height:100vh; }
.ingreso .lado{
  background:var(--negro); color:#fff; padding:56px 48px;
  display:flex; flex-direction:column; justify-content:space-between; gap:40px; min-width:0;
}
.ingreso .lado img{ width:210px; height:auto; align-self:flex-start; }
.ingreso .lado h1{
  font-size:clamp(26px,4.1vw,68px); font-weight:500; line-height:1.04;
  letter-spacing:-.015em; text-transform:uppercase; margin:0; overflow-wrap:break-word;
}
.ingreso .lado .nota{
  margin:0; font-size:12.5px; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.4);
}
.ingreso .panel{
  display:flex; align-items:center; justify-content:center;
  padding:48px 32px; background:var(--fondo-pagina); min-width:0;
}
.ingreso .caja{ width:100%; max-width:392px; }

/* El botón del ojo se centra sobre el campo a cualquier tamaño: el margen
   inferior vive en el contenedor, no en el input, así 50% cae en el medio. */
.ingreso .con-ojo{ position:relative; margin-bottom:18px; }
.ingreso .con-ojo .campo{ padding-right:48px; margin-bottom:0; }
.ingreso .ojo{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center; border:0;
  background:transparent; cursor:pointer; color:var(--gris-claro);
  border-radius:var(--radio); padding:0;
}
.ingreso .ojo:hover{ background:var(--fondo-suave); color:var(--texto); }
.ingreso .ojo svg{ width:19px; height:19px; }

/* ===========================================================================
   ADAPTACIÓN A PANTALLAS CHICAS
   Tres escalones, de más ancho a más angosto. Cada regla está donde empieza
   a hacer falta de verdad, no «por si acaso»:

     ≤ 900px  el panel de administración deja de ser de dos columnas
     ≤ 820px  tablet y teléfono: se apila el ingreso y se comprime la barra
     ≤ 560px  teléfono: tipografía, tarjetas, tabla de superficies y fichas
     ≤ 420px  teléfono angosto: se saca el logo cuando compite con el volver

   La regla de oro: la página NUNCA se corre en horizontal. Si algo no cabe,
   o se apila, o se convierte en una tira que se desliza (pestañas, filtros).
   =========================================================================== */

/* El formulario de crear usuario al lado de la lista solo funciona con
   espacio de sobra. Antes de eso se van uno debajo del otro. */
@media (max-width:900px){
  .panel-admin{ grid-template-columns:1fr; gap:28px; }
}

@media (max-width:820px){
  .ingreso{ grid-template-columns:1fr; min-height:0; }
  .ingreso .lado{ padding:36px 28px; gap:28px; min-height:46vh; }
  .ingreso .lado img{ width:160px; }
  .ingreso .panel{ padding:36px 24px 56px; }
  .envoltorio{ padding:36px 22px 60px; }
  .barra .interior{ padding:14px 20px; gap:12px; }
  .barra .quien{ display:none; }
  .barra .marca span{ display:none; }
  .barra .volver-barra{ padding:7px 12px; letter-spacing:.1em; }
  .franja-aviso{ padding:0 22px; }
  .cabecera-cat{ padding:34px 0 44px; }
  .cabecera-cat .interior{ padding:0 22px; }
  .cabecera-cat .volver{ margin-bottom:30px; }
  .cabecera-cat .interior.con-aparte{ display:block; }
  .cabecera-cat .aparte{ margin-top:26px; }
  .pie .interior{ padding:22px 22px 34px; }
  h2.seccion{ font-size:26px; }
  .tabla .encabezado, .tabla .fila{ grid-template-columns:minmax(0,1.4fr) 92px 66px; padding:12px 14px; gap:8px; font-size:13.5px; }

  /* La barra tiene que caber entera: si se desborda, «Salir» queda fuera de
     la pantalla y no hay forma de cerrar sesión. Se achican a ícono los dos
     botones que se entienden solos, y se saca lo que no es imprescindible. */
  .barra .interior{ flex-wrap:nowrap; }
  .barra .marca{ flex:0 1 auto; min-width:0; }
  .barra .marca img{ width:96px; }
  .barra .volver-barra .txt,
  .barra .admin .txt{ display:none; }
  .barra .volver-barra,
  .barra .admin{
    padding:0; width:40px; height:40px; display:flex;
    align-items:center; justify-content:center; font-size:15px; letter-spacing:0;
  }
  .barra .separador{ display:none; }
  .barra .iniciales{ display:none; }
  .barra .enlace{ padding:10px 2px; }

  /* Las tiras deslizables llegan al borde de la pantalla: así se ve que la
     última pastilla está cortada y que hay más hacia la derecha. */
  .filtros, .pestanas{
    margin-inline:-22px; padding-inline:22px;
    scroll-padding-inline:22px;
  }

  /* El índice de secciones del Kit tenía la sangría del escritorio (40px) y
     quedaba desalineado con el texto de abajo. */
  .subnav .interior{ padding:0 22px; }

  /* Dedos, no punteros: nada por debajo de 40px de alto. Con el pulgar, un
     objetivo de 36px se falla una de cada tres veces. */
  .filtro{ padding:12px 16px; }
  .pestana{ padding-top:9px; padding-bottom:14px; }
  .boton-icono{ width:40px; height:40px; }
  .boton{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
  .barra .enlace{ min-height:40px; display:inline-flex; align-items:center; }
}

/* ── Teléfono ───────────────────────────────────────────────────────────── */

@media (max-width:560px){
  /* Ingreso: el bloque negro ocupaba casi media pantalla y dejaba el botón
     «Entrar» bajo el pliegue en teléfonos cortos (un iPhone SE son 667px).
     Se comprime para que el formulario entre completo de entrada. */
  .ingreso .lado{ min-height:0; padding:28px 20px 26px; gap:18px; }
  .ingreso .lado img{ width:136px; }
  .ingreso .lado h1{ font-size:clamp(24px,7.2vw,32px); }
  .ingreso .panel{ padding:28px 20px 44px; }

  /* Menos aire alrededor: en 375px cada píxel de margen se nota. */
  .envoltorio{ padding:28px 18px 48px; }
  .cabecera-cat .interior{ padding:0 18px; }
  .pie .interior{ padding:20px 18px 30px; }
  .franja-aviso{ padding:0 18px; }
  .subnav .interior{ padding:0 18px; }
  .filtros, .pestanas{ margin-inline:-18px; padding-inline:18px; scroll-padding-inline:18px; }

  /* Titulares: en pantalla angosta, el mismo cuerpo que en escritorio come
     tres líneas y empuja el contenido fuera de la primera pantalla. */
  .cabecera-cat h1{ font-size:clamp(26px,7.6vw,34px); }
  h2.seccion, h2.titulo-cat{ font-size:23px; }
  p.intro{ font-size:15px; }

  /* Tarjetas del hub: más compactas para que se vea más de una de una vez. */
  .tarjeta{ padding:20px 18px; }
  .tarjeta .fila-ico{ margin-bottom:14px; }
  .tarjeta .ico{ width:38px; height:38px; font-size:18px; }
  .tarjeta h3{ font-size:17px; margin-bottom:8px; }
  .tarjeta p{ font-size:14px; }

  /* Fichas del manual. */
  .ficha{ padding:20px 18px; }
  .ficha .encabezado{ gap:10px; }
  .ficha h4{ font-size:18px; }

  /* Tabla de superficies: en tres columnas el nombre queda en 120px y se
     parte en cuatro líneas. Se apila — nombre arriba, las dos cifras abajo
     una al lado de la otra — y cada cifra lleva su unidad, porque el
     encabezado de la tabla deja de estar a la vista. */
  .tabla .encabezado{ display:none; }
  .tabla .fila{
    grid-template-columns:1fr 1fr; gap:4px 12px; padding:14px 16px;
  }
  .tabla .fila > :first-child{ grid-column:1 / -1; }
  .tabla .fila .num{ text-align:left; font-size:15px; }
  .tabla .fila .num .u{
    display:inline; font-size:11px; font-weight:500; letter-spacing:.08em;
    text-transform:uppercase; color:var(--gris);
  }

  /* Lista de usuarios: tres columnas encima de 375px se superponen. */
  .tabla-usuarios .encabezado{ display:none; }
  .tabla-usuarios .fila{
    grid-template-columns:minmax(0,1fr) auto; gap:10px 12px;
    align-items:start; padding:16px 18px;
  }
  .tabla-usuarios .fila > .persona{ grid-column:1; grid-row:1; }
  /* Acá sí hay ancho para el nombre completo: cortarlo con puntos suspensivos
     dejaba «Equi…» en vez de «Equipo comunicaciones». */
  .tabla-usuarios .principal{ white-space:normal; overflow:visible; }
  /* Tres botones de 40px con sus separaciones = 136px. Al fijar ese tope, el
     chip «Admin» baja solo a la línea de abajo en vez de robarle sitio al
     nombre. */
  .tabla-usuarios .fila > .acciones{
    grid-column:2; grid-row:1; flex-wrap:wrap; justify-content:flex-end;
    max-width:136px;
  }
  /* El chip va después de los botones y ocupa su propia línea: intercalado
     entre ellos los descolocaba en dos filas de dos. */
  .tabla-usuarios .fila > .acciones .chip{
    order:2; flex:0 0 100%; text-align:right; margin-top:2px;
  }
  /* El rol y las categorías pasan abajo, alineados con el nombre (avatar
     34px + separación 12px), no con el borde de la tarjeta. */
  .tabla-usuarios .fila > :nth-child(2){
    grid-column:1 / -1; grid-row:2; padding-left:46px;
  }

  /* Clave sugerida: el campo y el botón no caben en una línea. */
  .fila-clave{ flex-wrap:wrap; }
  .fila-clave .campo{ flex:1 1 100%; }

  /* Botones a lo ancho: en el pulgar, un botón angosto es un botón que se
     falla. Los del formulario ocupan la línea completa. */
  .acciones-formulario{ gap:10px; }
  .acciones-formulario > .boton{ flex:1 1 100%; text-align:center; justify-content:center; }
}

/* ── Teléfono angosto ───────────────────────────────────────────────────── */

@media (max-width:420px){
  /* Cuando hay flecha de volver, el logo y ella se pelean el mismo espacio.
     Manda la navegación: la marca ya está en el pie y en el encabezado. */
  .barra .interior:has(.volver-barra) .marca{ display:none; }
  .barra .interior{ padding:12px 16px; gap:10px; }
  .envoltorio{ padding:24px 16px 44px; }
  .cabecera-cat .interior{ padding:0 16px; }
  .subnav .interior{ padding:0 16px; }
  .filtros, .pestanas{ margin-inline:-16px; padding-inline:16px; scroll-padding-inline:16px; }
}


/* ===========================================================================
   MODO OSCURO
   Solo se redefinen los roles semánticos. Los colores de marca (río, ñire,
   granito, neblina) NO cambian: en el Kit de marca tienen que verse iguales
   en los dos modos, porque son documentación de la paleta.

   Tres estados: sin elegir sigue al sistema operativo; elegido a mano manda
   siempre, vía data-tema en <html>.
   =========================================================================== */

@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    --fondo-pagina:#121312;
    --fondo-tarjeta:#1B1D1B;
    --fondo-suave:#232522;
    --texto:#EDEDE8;
    --texto-2:#C2C5BE;
    --gris:#9BA096;
    --gris-claro:#7E837B;
    --linea:#2E312D;
    --bloque-oscuro:#000000;
    --rio-tinte:#0E2E2E;
    --terracota-tinte:#2E1A15;
    --terracota-oscuro:#E0836A;
    --aviso-fondo:#2A2517;
    --aviso-borde:#5C5230;
    --sombra-tarjeta:none;
  }
}

:root[data-tema="oscuro"]{
  --fondo-pagina:#121312;
  --fondo-tarjeta:#1B1D1B;
  --fondo-suave:#232522;
  --texto:#EDEDE8;
  --texto-2:#C2C5BE;
  --gris:#9BA096;
  --gris-claro:#7E837B;
  --linea:#2E312D;
  --bloque-oscuro:#000000;
  --rio-tinte:#0E2E2E;
  --terracota-tinte:#2E1A15;
  --terracota-oscuro:#E0836A;
  --aviso-fondo:#2A2517;
  --aviso-borde:#5C5230;
  --sombra-tarjeta:none;
}

/* El botón para cambiar de tema, en la barra superior. */
.barra .tema{
  background:none; border:1px solid rgba(255,255,255,.22);
  border-radius:50%; width:32px; height:32px; flex:none; cursor:pointer;
  color:rgba(255,255,255,.75); font-size:14px; line-height:1; padding:0;
  display:flex; align-items:center; justify-content:center;
}
.barra .tema:hover{ border-color:var(--rio); color:#fff; }
.barra .tema .luna{ display:none; }
:root[data-tema="oscuro"] .barra .tema .sol{ display:none; }
:root[data-tema="oscuro"] .barra .tema .luna{ display:inline; }
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]) .barra .tema .sol{ display:none; }
  :root:not([data-tema="claro"]) .barra .tema .luna{ display:inline; }
}

/* En oscuro el bloque negro necesita un borde para despegarse del fondo. */
:root[data-tema="oscuro"] .cabecera-cat{ border-bottom:1px solid var(--linea); }
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]) .cabecera-cat{ border-bottom:1px solid var(--linea); }
}


/* ── Firma de correo (firma/contenido.php) ──────────────────────────────
   La firma en sí NO se estiliza desde acá: va con estilos en línea porque
   tiene que sobrevivir a Outlook. Esto es solo la página que la arma. */

.firma-escenario{
  padding:26px 20px; background:#fff; border:1px dashed var(--linea);
  border-radius:var(--radio); overflow-x:auto;
}
/* El fondo es blanco fijo, también en modo oscuro: la firma se va a leer
   sobre el fondo blanco de un correo, y hay que verla como se va a ver. */

.paso-titulo{
  margin:28px 0 6px; font-size:15px; font-weight:500;
  text-transform:uppercase; letter-spacing:.06em;
}
.paso-titulo:first-of-type{ margin-top:8px; }

ol.pasos{ margin:10px 0 0; padding-left:20px; }
ol.pasos li{
  margin-bottom:9px; font-size:14.5px; line-height:1.55; color:var(--texto-2);
}

/* Los símbolos ··· y <> dibujados como el botón real que hay que apretar. */
.tecla{
  display:inline-block; min-width:26px; text-align:center;
  background:var(--bloque-oscuro); color:#fff; border-radius:5px;
  padding:2px 7px; font-weight:500; font-size:12px; line-height:16px;
  vertical-align:middle;
}

.boton.copiado{
  background:var(--bloque-oscuro) !important;
  border-color:var(--bloque-oscuro) !important; color:#fff !important;
}

#codigo-visible{
  background:var(--bloque-oscuro); color:#EFE9E4; padding:16px;
  border-radius:var(--radio); overflow-x:auto; font-family:var(--mono);
  font-size:11px; line-height:1.5; margin-top:10px;
  white-space:pre-wrap; word-break:break-word;
}

/* Campo con un sufijo fijo pegado: el correo se escribe sin el dominio, que
   va al lado, escrito por nosotros. Nadie se equivoca tipeándolo. */
.campo-sufijo{ display:flex; align-items:stretch; margin-bottom:6px; }
.campo-sufijo .campo{
  border-top-right-radius:0; border-bottom-right-radius:0;
  margin-bottom:0; min-width:0; flex:1 1 auto;
}
.campo-sufijo .sufijo{
  display:flex; align-items:center; padding:0 14px; flex:none;
  background:var(--fondo-suave); border:1px solid var(--linea); border-left:0;
  border-radius:0 var(--radio) var(--radio) 0;
  font-size:14.5px; color:var(--gris); white-space:nowrap;
}
@media (max-width:560px){
  .campo-sufijo .sufijo{ padding:0 10px; font-size:13px; }
}

/* La firma corta del celular: es texto plano, así que se muestra como tal. */
.firma-texto{
  background:var(--fondo-suave); border:1px solid var(--linea);
  border-radius:var(--radio); padding:16px 18px;
  white-space:pre-wrap; font-size:14.5px; line-height:1.6; color:var(--texto);
}