/* ===========================================================================
   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 lo destacado, 600 para
   antetítulos y títulos chicos, 700 (Bold) para titulares.
   =========================================================================== */

:root{
  /* Paleta oficial (rediseño 2026-08) */
  --negro:#0D0D0D;            /* Negro Cochamó — texto y secciones a sangre */
  --rio:#00898A;              /* 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 */
  /* Colores de cada área (Calendario, Pedidos, Planificación): los mismos en todas partes. */
  --a-territorial:#C1553A; --a-fundraising:#5F6F84; --a-administracion:#8A7F6E; --a-pucheguin:#00898A;
  --a-conservacion:#356568; --a-comunicaciones:#4F8A6F; --a-general:#9AA3A0;
  --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:#191919;        /* barra superior y cabecera de categoría: el gris oscuro de Claude (27-10-2026), no el negro puro que «vibra» */
  --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;

  /* Jost es la tipografía de la marca para web (Google Fonts).
     Brandon Text queda solo para impresos. */
  --sans:'Jost',
         -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:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--rio); margin:0 0 14px;
}
h1.titular{
  font-size:clamp(30px,4vw,52px); font-weight:700; 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:700; line-height:1.08;
  text-transform:uppercase; margin:0 0 28px;
}
h2.titulo-cat{
  font-size:clamp(26px,3vw,40px); font-weight:700; 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) ───────────────────────────────── */
/* Logo (vuelve al inicio) · Menú de secciones · Menú de la cuenta.
   El menú sale del mismo catálogo que el hub: nunca se escribe a mano. */

.barra{
  background:var(--bloque-oscuro); position:sticky; top:0; z-index:20;
  border-bottom:1px solid rgba(255,255,255,.16);
}
.barra .interior{
  max-width:var(--ancho); margin:0 auto; padding:14px 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;
}
.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;
}

/* Botón «Menú» */
.barra .menu-boton{
  display:inline-flex; align-items:center; gap:10px; flex:none; cursor:pointer;
  background:none; color:rgba(255,255,255,.85); font:inherit;
  font-size:10.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.22); border-radius:var(--radio-pastilla);
  padding:8px 16px 8px 14px; transition:border-color .2s ease, background-color .2s ease, color .2s ease;
}
.barra .menu-boton:hover{ border-color:var(--rio); color:#fff; }
.barra .menu-boton[aria-expanded="true"]{ background:var(--rio); border-color:var(--rio); color:#fff; }
.barra .hamburguesa{ display:inline-flex; flex-direction:column; gap:3px; width:14px; }
.barra .hamburguesa i{ display:block; height:1.5px; background:currentColor; border-radius:2px;
  transition:transform .25s ease, opacity .2s ease; }
.barra .menu-boton[aria-expanded="true"] .hamburguesa i:nth-child(1){ transform:translateY(4.5px) rotate(45deg); }
.barra .menu-boton[aria-expanded="true"] .hamburguesa i:nth-child(2){ opacity:0; }
.barra .menu-boton[aria-expanded="true"] .hamburguesa i:nth-child(3){ transform:translateY(-4.5px) rotate(-45deg); }

/* Botón de la cuenta: nombre, perfil e iniciales */
.barra .derecha{ margin-left:auto; display:flex; align-items:center; gap:14px; flex:none; }

/* Vuelta al inicio, a la izquierda, fuera del hub. */
.barra .volver-barra{
  flex:none; display:inline-flex; align-items:center; gap:8px;
  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); transition:border-color .2s ease, color .2s ease;
}
.barra .volver-barra:hover{ border-color:var(--rio); color:#fff; text-decoration:none; }
.barra .usuario-boton{
  display:flex; align-items:center; gap:12px; cursor:pointer; background:none; border:0;
  font:inherit; color:inherit; padding:4px 4px 4px 10px; border-radius:var(--radio-pastilla);
  transition:background-color .2s ease;
}
.barra .usuario-boton:hover, .barra .usuario-boton[aria-expanded="true"]{ background:rgba(255,255,255,.08); }
.barra .quien{ text-align:right; line-height:1.3; display:flex; flex-direction:column; }
.barra .nombre{ font-size:13.5px; font-weight:500; color:#fff; }
.barra .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 .flechita{ font-size:10px; color:var(--gris-claro); transition:transform .2s ease; }
.barra .usuario-boton[aria-expanded="true"] .flechita{ transform:rotate(180deg); }

/* Panel del menú de secciones: baja bajo la barra, a todo lo ancho. */
.menu-panel{
  position:absolute; left:0; right:0; top:100%;
  background:var(--bloque-oscuro); border-bottom:1px solid rgba(255,255,255,.16);
  box-shadow:0 18px 40px rgba(0,0,0,.28);
  max-height:calc(100vh - 70px); overflow-y:auto;
  animation:pp-baja .22s ease;
}
.menu-panel .interior{ display:block; padding:26px 28px 34px; }
.menu-inicio{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:22px;
  font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.75); text-decoration:none;
}
.menu-inicio:hover, .menu-inicio.actual{ color:#fff; text-decoration:none; }
.menu-grupos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:26px 36px; }
.menu-grupo-nombre{
  margin:0 0 10px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.14);
  font-size:10.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--rio);
}
.menu-grupo ul{ list-style:none; margin:0; padding:0; }
.menu-grupo a, .menu-grupo .pronto{
  display:flex; align-items:center; gap:12px; padding:9px 10px; margin:0 -10px;
  border-radius:var(--radio); font-size:15px; font-weight:500; color:#fff; text-decoration:none;
  transition:background-color .2s ease, color .2s ease;
}
.menu-grupo a:hover{ background:rgba(255,255,255,.07); text-decoration:none; }
.menu-grupo a.actual{ background:rgba(0,137,138,.22); }
.menu-grupo a.actual::after{ content:""; width:6px; height:6px; border-radius:50%; background:var(--rio); margin-left:auto; }
.menu-grupo .ico{
  width:28px; height:28px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  background:rgba(0,137,138,.16); color:var(--rio); font-size:12px;
}
.menu-grupo .pronto{ color:rgba(255,255,255,.4); cursor:default; }
.menu-grupo .pronto em{ font-style:normal; font-size:10px; letter-spacing:.12em; text-transform:uppercase; margin-left:auto; }

/* Panel de la cuenta: tarjeta chica bajo las iniciales. */
.barra .cuenta{ position:relative; }
.usuario-panel{
  position:absolute; top:calc(100% + 10px); right:0;
  width:260px; background:var(--fondo-tarjeta); color:var(--texto);
  border:1px solid var(--linea); border-radius:10px; box-shadow:0 14px 34px rgba(0,0,0,.18);
  padding:8px; animation:pp-baja .18s ease;
}
.usuario-panel .usuario-cab{ display:flex; align-items:center; gap:12px; padding:10px 10px 14px; margin-bottom:6px; border-bottom:1px solid var(--linea); }
.usuario-panel .iniciales{ width:38px; height:38px; border-radius:50%; background:var(--rio); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:500; flex:none; }
.barra .usuario-panel .nombre{ display:block; font-size:14px; font-weight:500; color:var(--texto); }
.barra .usuario-panel .rol{ display:block; font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--gris); }
.usuario-panel a, .usuario-panel .tema{
  display:flex; align-items:center; gap:12px; width:100%; padding:11px 10px; border-radius:var(--radio);
  background:none; border:0; font:inherit; font-size:14px; font-weight:400; color:var(--texto);
  text-align:left; cursor:pointer; text-decoration:none;
}
.usuario-panel a:hover, .usuario-panel .tema:hover{ background:var(--fondo-suave); text-decoration:none; }
.usuario-panel .tema > span{ display:flex; align-items:center; gap:12px; }
.usuario-panel a span[aria-hidden], .usuario-panel .tema span[aria-hidden]{ width:18px; text-align:center; color:var(--rio); }

/* En el teléfono el menú ocupa la pantalla y la página de atrás no se mueve. */
@media (max-width:820px){
  .menu-panel{ height:calc(100dvh - 64px); max-height:none; }
  html.pp-menu-abierto, html.pp-menu-abierto body{ overflow:hidden; }
}
/* Puente invisible entre el nombre y la tarjeta: el mouse no la cierra al bajar. */
.usuario-panel::before{ content:""; position:absolute; left:0; right:0; top:-12px; height:12px; }
/* En computador (con mouse) la cuenta se abre al pasar por encima. */
@media (hover:hover) and (pointer:fine){
  .barra .cuenta:hover .usuario-panel{ display:block !important; }
  .barra .cuenta:hover .flechita{ transform:rotate(180deg); }
  .barra .cuenta:hover .usuario-boton{ background:rgba(255,255,255,.08); }
}
@keyframes pp-baja{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .menu-panel, .usuario-panel{ animation: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:600; 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:solid; 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:30px 0 36px; }
.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:12px; }
.cabecera-cat h1{
  font-size:clamp(26px,3.2vw,40px); font-weight:700; line-height:1.05;
  letter-spacing:-.01em; text-transform:uppercase; margin:0;
}
/* Ruta «Inicio › Grupo › Sección» (pp_ruta en partes/cabecera.php). */
.kicker.ruta{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; max-width:none !important; }
/* X para cerrar la sección y volver (pp_ruta). */
.cerrar-seccion{
  margin:-8px 0 -8px auto; flex:none; display:flex; align-items:center; justify-content:center; width:36px; height:36px;
  border-radius:50%; border:1px solid currentColor; color:inherit; opacity:.7; transition:background .15s, border-color .15s, color .15s, opacity .15s;
}
.cerrar-seccion svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.cerrar-seccion:hover{ opacity:1; background:var(--rio); border-color:var(--rio); color:#fff; text-decoration:none; }
.cerrar-seccion:focus-visible{ outline:2px solid var(--rio); outline-offset:2px; }
@media (max-width:420px){ .cerrar-seccion{ width:32px; height:32px; } }
/* Con título y botones a los lados (Usuarios y permisos, Kit de marca…): la X va a la esquina. */
.cabecera-cat .interior.con-aparte{ position:relative; }
.cabecera-cat .interior.con-aparte .cerrar-seccion{ position:absolute; top:-8px; right:40px; margin:0; }
.cabecera-cat .interior.con-aparte:has(.cerrar-seccion) .aparte{ margin-right:52px; }
@media (max-width:820px){ .cabecera-cat .interior.con-aparte .cerrar-seccion{ right:22px; } }
@media (max-width:420px){ .cabecera-cat .interior.con-aparte .cerrar-seccion{ right:16px; } }
.kicker.ruta a{ color:inherit; text-decoration:none; border-bottom:1px solid transparent; transition:border-color .15s, color .15s; }
.kicker.ruta a:hover{ border-bottom-color:currentColor; }
/* La X también es un enlace de la ruta: sin esto, la regla de arriba le borraba la parte de abajo del círculo. */
.kicker.ruta a.cerrar-seccion{ border-bottom:1px solid currentColor; }
.kicker.ruta a.cerrar-seccion:hover{ border-bottom-color:var(--rio); }
.cabecera-cat .kicker.ruta a:hover{ color:#fff; }
.kicker.ruta span{ opacity:.7; }
.kicker.ruta i{ font-style:normal; opacity:.45; }
.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:600;
  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:600; 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:600; 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:600; 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:600; 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.25fr 1fr; gap:24px; align-items:start; }
/* Formulario de usuario: los datos en dos columnas para que ocupe menos alto. */
.formulario-usuario .dos-col{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; }
.formulario-usuario .dos-col label.etiqueta{ margin-top:0; }
.formulario-usuario .dos-col > div:nth-child(n+3) label.etiqueta{ margin-top:18px; }
.formulario-usuario .dos-col .pista{ margin-bottom:0; }
@media (max-width:560px){ .formulario-usuario .dos-col{ grid-template-columns:1fr; } }

.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 var(--linea); 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:600; 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); }

/* Lista de permisos (partes/permisos.php): simple, agrupada como el hub.
   Sin cajas: una línea por categoría, con su grupo encima. */
.permisos{ margin:4px 0 22px; }
.perm-fila{ display:flex; align-items:center; gap:10px; padding:7px 0; cursor:pointer; font-size:14px; }
.perm-fila input{ width:16px; height:16px; accent-color:var(--rio); margin:0; flex:none; cursor:pointer; }
.perm-fila b{ font-weight:500; }
.perm-fila i{ font-style:normal; font-size:12.5px; color:var(--gris); margin-left:6px; }
.perm-general{ border-bottom:1px solid var(--linea); padding:10px 0; }
.perm-grupos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:6px 28px; margin-top:14px; }
.perm-grupo{ padding:4px 0 8px; }
.perm-cab{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--rio); border-bottom:1px solid var(--linea); padding-bottom:6px; margin-bottom:2px; }
.perm-cab b{ font-weight:600; }
.perm-item{ padding:5px 0 5px 26px; color:var(--texto); }
.perm-fila:has(input:disabled){ cursor:default; }
.perm-item:has(input:disabled){ color:var(--gris); }
.perm-aparte{ font-style:normal; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--gris); background:var(--fondo-suave); border:1px solid var(--linea); border-radius:var(--radio-pastilla); padding:1px 7px; margin-left:4px; }


/* ── 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 var(--linea);
}
.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:600; 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:700; 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. */
/* Entrar con Google (30-10-2026): botón blanco como pide Google, y una línea con «o». */
.ingreso .boton-google{
  display:flex; align-items:center; justify-content:center; gap:12px; width:100%;
  padding:13px 20px; font-size:15px; font-weight:500; color:#1f1f1f; background:#fff;
  border:1px solid #747775; border-radius:var(--radio-pastilla); text-decoration:none;
}
.ingreso .boton-google:hover{ background:#f2f2f2; color:#1f1f1f; text-decoration:none; }
.ingreso .boton-google svg{ width:20px; height:20px; flex:none; }
.ingreso .separador-ingreso{
  display:flex; align-items:center; gap:12px; margin:22px 0 20px;
  font-size:13px; color:var(--gris);
}
.ingreso .separador-ingreso::before, .ingreso .separador-ingreso::after{
  content:""; flex:1; border-top:1px solid var(--linea);
}
.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:12px 20px; gap:12px; }
  .barra .quien{ display:none; }
  .barra .marca span{ display:none; }
  .barra .flechita{ display:none; }
  .menu-panel .interior{ padding:22px 22px 30px; }
  .menu-grupos{ grid-template-columns:1fr 1fr; gap:24px 24px; }
  .franja-aviso{ padding:0 22px; }
  .cabecera-cat{ padding:24px 0 28px; }
  .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 cabe entera: logo, Menú e iniciales. «Salir» vive en el menú
     de la cuenta, así que nunca queda fuera de la pantalla. */
  .barra .interior{ flex-wrap:nowrap; }
  .barra .marca{ flex:0 1 auto; min-width:0; }
  .barra .marca img{ width:96px; }
  .barra .menu-boton{ min-height:40px; }
  .barra .usuario-boton{ padding:3px; }
  .barra .iniciales{ width:38px; height:38px; }

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

/* ── 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){
  .barra .interior{ padding:12px 16px; gap:10px; }
  .barra .marca img{ width:88px; }
  .barra .volver-barra{ padding:0; width:38px; height:38px; justify-content:center; font-size:15px; letter-spacing:0; }
  .barra .volver-barra .txt{ display:none; }
  .barra .derecha{ gap:8px; }
  .barra .menu-boton{ padding:8px 12px; }
  .menu-panel .interior{ padding:20px 16px 28px; }
  .menu-grupos{ grid-template-columns:1fr; }
  .usuario-panel{ position:fixed; top:64px; right:12px; left:12px; width:auto; }
  .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>.
   =========================================================================== */

/* Modo oscuro con los grises de Claude (27-10-2026, medidos por Leyla en la app):
   barra y cabeceras #191919, página #212121, tarjetas #2A2A2A. Nada de negro puro. */
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    --fondo-pagina:#212121;
    --fondo-tarjeta:#2A2A2A;
    --fondo-suave:#262626;
    --texto:#EDEDE8;
    --texto-2:#C2C5BE;
    --gris:#9BA096;
    --gris-claro:#7E837B;
    --linea:#363636;
    --bloque-oscuro:#191919;
    --rio-tinte:#1F3B3A;
    --terracota-tinte:#2E1A15;
    --terracota-oscuro:#E0836A;
    --aviso-fondo:#2A2517;
    --aviso-borde:#5C5230;
    --sombra-tarjeta:none;
  }
}

:root[data-tema="oscuro"]{
  --fondo-pagina:#212121;
  --fondo-tarjeta:#2A2A2A;
  --fondo-suave:#262626;
  --texto:#EDEDE8;
  --texto-2:#C2C5BE;
  --gris:#9BA096;
  --gris-claro:#7E837B;
  --linea:#363636;
  --bloque-oscuro:#191919;
  --rio-tinte:#1F3B3A;
  --terracota-tinte:#2E1A15;
  --terracota-oscuro:#E0836A;
  --aviso-fondo:#2A2517;
  --aviso-borde:#5C5230;
  --sombra-tarjeta:none;
}

/* Cambiar de tema: vive en el menú de la cuenta. Muestra la opción contraria. */
.tema .luna{ display:none !important; }
:root[data-tema="oscuro"] .tema .sol{ display:none !important; }
:root[data-tema="oscuro"] .tema .luna{ display:flex !important; }
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]) .tema .sol{ display:none !important; }
  :root:not([data-tema="claro"]) .tema .luna{ display:flex !important; }
}

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

/* ── Plantillas y documentos ────────────────────────────────────────────── */

.rejilla-muestras{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:16px; margin:6px 0 22px; }
.miniatura{
  display:block; background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  overflow:hidden; box-shadow:var(--sombra-tarjeta); transition:border-color .15s, transform .15s;
}
.miniatura:hover{ border-color:var(--rio); transform:translateY(-2px); }
.miniatura img{ display:block; width:100%; height:auto; }
.miniatura span{
  display:block; padding:9px 12px; border-top:1px solid var(--linea);
  font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--gris);
}
.rutas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:18px; }
.rutas .tarjeta h3{ margin-top:4px; }
.rutas .tarjeta ul{ margin:14px 0 0; padding-left:18px; }
.rutas .tarjeta li{ font-size:14px; line-height:1.55; color:var(--texto-2); margin-bottom:6px; }
.lista-criterios{ list-style:none; margin:0; padding:0; max-width:820px; }
.lista-criterios li{
  position:relative; padding:12px 0 12px 26px; border-bottom:1px solid var(--linea);
  font-size:15px; line-height:1.55; color:var(--texto-2);
}
.lista-criterios li::before{ content:"»"; position:absolute; left:2px; top:11px; color:var(--rio); font-weight:500; }
.lista-criterios li b{ color:var(--texto); font-weight:500; }
.colores-doc{ display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 26px; }
.colores-doc span{
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px 8px 8px;
  border:1px solid var(--linea); border-radius:var(--radio-pastilla); background:var(--fondo-tarjeta);
  font-size:12px; font-weight:500; letter-spacing:.04em;
}
.colores-doc i{ width:20px; height:20px; border-radius:50%; display:inline-block; }

/* ── Hub como índice: grupo a la izquierda, lista punteada a la derecha (2026-10-19) ── */
.indice{ margin-top:44px; }
.indice-grupo{
  display:grid; grid-template-columns:200px minmax(0,1fr); gap:32px;
  padding:0 0 22px;   /* sin línea arriba: igual que en la cuadrícula, y ocupa menos */
}
.indice-nombre{
  margin:0; padding-top:24px; font-size:12px; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--rio);
}
.indice-fila{
  display:flex; align-items:center; gap:20px; padding:18px 0;
  border-bottom:1.5px solid var(--linea); color:inherit; text-decoration:none;
}
.indice-item:last-child .indice-fila{ border-bottom:0; }
.indice-fila .ico{
  flex:none; width:40px; height:40px; border-radius:50%; background:var(--rio-tinte);
  color:var(--rio); display:flex; align-items:center; justify-content:center; font-size:18px;
}
.indice-fila .titulo{
  flex:none; width:290px; font-size:19px; font-weight:500; line-height:1.2; text-transform:uppercase;
}
.indice-fila .desc{ flex:1; font-size:14.5px; line-height:1.5; color:var(--texto-2); }
.indice-fila .flecha{ flex:none; color:var(--rio); font-size:20px; transition:transform .15s; }
a.indice-fila:hover{ text-decoration:none; color:inherit; }
a.indice-fila:hover .titulo{ color:var(--rio); }
a.indice-fila:hover .flecha{ transform:translateX(4px); }
.indice-fila.pronto{ opacity:.5; }
.indice-fila.pronto .ico{ background:var(--fondo-suave); color:var(--gris-claro); }
@media (max-width:900px){
  .indice-grupo{ grid-template-columns:1fr; gap:0; }
  .indice-nombre{ padding-top:22px; }
  .indice[data-vista="lista"] .indice-fila{ flex-wrap:wrap; gap:6px 16px; }
  .indice[data-vista="lista"] .indice-fila .titulo{ width:auto; flex:1; font-size:17px; }
  .indice[data-vista="lista"] .indice-fila .desc{ flex-basis:100%; padding-left:56px; font-size:14px; }
  .indice[data-vista="lista"] .indice-fila .flecha{ order:3; }
  .indice[data-vista="lista"] .indice-fila .desc{ order:4; }
}

/* ── Inicio: buscador, selector de vista, recientes y cuadrícula (2026-10-27) ──
   Cuadrícula (la de partida) = tarjetas con ícono, como un lanzador de apps.
   Lista = las filas de arriba. Cada persona elige y se recuerda (index.php). */
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.inicio-barra{ display:flex; align-items:center; gap:12px; margin-top:34px; }
.inicio-buscar{ position:relative; flex:0 1 380px; display:flex; align-items:center; }
.inicio-buscar svg{ position:absolute; left:15px; width:17px; height:17px; fill:none; stroke:var(--gris); stroke-width:1.8; stroke-linecap:round; pointer-events:none; }
.inicio-buscar input{
  width:100%; font:inherit; font-size:14.5px; color:var(--texto); padding:9px 60px 9px 40px;
  border:1px solid var(--linea); border-radius:var(--radio-pastilla); background:var(--fondo-tarjeta);
  transition:border-color .15s, box-shadow .15s;
}
.inicio-buscar input:focus{ outline:none; border-color:var(--rio); box-shadow:0 0 0 3px var(--rio-tinte); }
.inicio-buscar .atajo{
  position:absolute; right:12px; font:inherit; font-size:11px; font-weight:500; color:var(--gris);
  padding:2px 7px; border:1px solid var(--linea); border-radius:6px; background:var(--fondo-suave); pointer-events:none;
}
@media (hover:none){ .inicio-buscar .atajo{ display:none; } .inicio-buscar input{ padding-right:16px; } }
.inicio-pedir{
  display:inline-flex; align-items:center; gap:7px; flex:none; padding:9px 18px; border-radius:var(--radio-pastilla);
  background:var(--rio); color:#fff; font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; transition:background .15s;
}
.inicio-pedir svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.inicio-pedir:hover{ background:var(--rio-oscuro); color:#fff; text-decoration:none; }
.inicio-pedir svg rect, .inicio-pedir svg path{ fill:none; }
.inicio-pedir.secundario{ background:none; border:1px solid var(--linea); color:var(--texto); padding:8px 17px; }
.inicio-pedir.secundario:hover{ background:var(--rio); border-color:var(--rio); color:#fff; }
.vista-selector{ margin-left:auto; display:flex; gap:4px; padding:4px; border:1px solid var(--linea); border-radius:12px; background:var(--fondo-tarjeta); }
.vista-selector button{
  display:flex; align-items:center; justify-content:center; width:38px; height:34px; border-radius:9px;
  border:1.5px solid transparent; background:none; color:var(--gris); cursor:pointer; transition:background .15s, color .15s, border-color .15s;
}
.vista-selector button svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.vista-selector button:hover{ color:var(--texto); background:var(--fondo-suave); }
.vista-selector button[aria-pressed="true"]{ color:var(--rio); border-color:var(--rio); background:var(--rio-tinte); }

.indice-fila .ico svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

.recientes{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0 0 30px; }
.recientes[hidden]{ display:none; }
.recientes-lbl{ font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gris); }
.recientes-lista{ display:flex; flex-wrap:wrap; gap:6px; }
.reciente{
  display:inline-flex; align-items:center; gap:8px; padding:3px 12px 3px 3px; border:1px solid var(--linea);
  border-radius:var(--radio-pastilla); background:var(--fondo-tarjeta); color:var(--texto); font-size:13px; font-weight:500; text-decoration:none;
  transition:border-color .15s, color .15s;
}
.reciente .ico{ width:24px; height:24px; border-radius:50%; background:var(--rio-tinte); color:var(--rio); display:flex; align-items:center; justify-content:center; font-size:12px; }
.reciente .ico svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.reciente:hover{ border-color:var(--rio); color:var(--rio); text-decoration:none; }
.inicio-vacio{ margin:28px 0 0; font-size:15px; color:var(--gris); }

/* Cuadrícula */
.indice[data-vista="cuadricula"]{ margin-top:34px; }
.indice[data-vista="cuadricula"] .indice-grupo{ display:block; border-top:0; padding:0 0 34px; }
.indice[data-vista="cuadricula"] .indice-nombre{ padding:0 0 12px; }
.indice[data-vista="cuadricula"] .indice-lista{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
@media (max-width:860px){ .indice[data-vista="cuadricula"] .indice-lista{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:680px){ .indice[data-vista="cuadricula"] .indice-lista{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.indice[data-vista="cuadricula"] .indice-fila{
  position:relative; flex-direction:column; align-items:flex-start; gap:10px; padding:22px 22px 26px;
  border:1px solid var(--linea); border-radius:12px; background:var(--fondo-tarjeta); min-height:168px;
  transition:border-color .18s, transform .18s, box-shadow .18s;
}
.indice[data-vista="cuadricula"] .indice-item:last-child .indice-fila{ border-bottom:1px solid var(--linea); }
.indice[data-vista="cuadricula"] .indice-fila .ico{ width:46px; height:46px; border-radius:12px; margin-bottom:4px; }
.indice[data-vista="cuadricula"] .indice-fila .ico svg{ width:23px; height:23px; }
.indice[data-vista="cuadricula"] .indice-fila .titulo{ width:auto; font-size:16px; font-weight:600; }
.indice[data-vista="cuadricula"] .indice-fila .desc{
  flex:none; font-size:13.5px; line-height:1.45; color:var(--gris);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.indice[data-vista="cuadricula"] .indice-fila .flecha{ display:none; }
.indice[data-vista="cuadricula"] a.indice-fila:hover{ border-color:var(--rio); transform:translateY(-2px); box-shadow:0 10px 24px rgba(13,13,13,.07); }
/* Favoritos y orden propio (27-10-2026): estrella y manija en cada tarjeta. */
.indice-item{ position:relative; }
.indice-item[hidden], .indice-grupo[hidden]{ display:none !important; }
.item-acciones{ position:absolute; z-index:2; display:flex; flex-direction:row-reverse; gap:2px; }
.indice[data-vista="cuadricula"] .item-acciones{ top:30px; right:16px; gap:0; }
.indice[data-vista="lista"] .indice-fila{ padding-right:76px; }
.indice[data-vista="lista"] .item-acciones{ right:0; top:50%; transform:translateY(-50%); }
/* Con poco ancho la fila se parte en dos (título arriba, descripción abajo): la estrella va a la altura del título y el ícono. */
@media (max-width:900px){ .indice[data-vista="lista"] .item-acciones{ top:23px; transform:none; } }
.item-acciones button{
  display:flex; align-items:center; justify-content:center; width:30px; height:30px; padding:0; border:0; border-radius:8px;
  background:none; color:var(--gris); cursor:pointer; opacity:0; transition:opacity .15s, background .15s, color .15s;
}
.item-acciones button svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linejoin:round; }
.item-acciones .asa svg{ fill:currentColor; stroke:none; }
.indice-item:hover .item-acciones button, .indice-item:focus-within .item-acciones button, .item-acciones .fav[aria-pressed="true"]{ opacity:1; }
.item-acciones button:hover{ background:var(--fondo-suave); color:var(--texto); }
.item-acciones .fav[aria-pressed="true"]{ color:var(--rio); }
.item-acciones .fav[aria-pressed="true"] svg{ fill:currentColor; }
.item-acciones .asa{ cursor:grab; touch-action:none; }
@media (hover:none){ .item-acciones button{ opacity:1; } }
.indice-item.arrastrando{ opacity:.6; }
.indice-item.arrastrando .indice-fila{ border-color:var(--rio) !important; box-shadow:0 12px 28px rgba(0,0,0,.2); }
html.pp-arrastrando, html.pp-arrastrando *{ cursor:grabbing !important; user-select:none; }
/* Celular: mantener apretada la tarjeta para arrastrarla (sin el menú del enlace ni selección de texto). */
@media (hover:none){
  .indice-fila, .indice-nombre{ -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
}
.indice-item.levantada, .indice-grupo.levantada{ opacity:.85; transform:scale(1.03); transition:transform .15s; position:relative; z-index:5; }
.indice-grupo.levantada{ transform:scale(1.01); }
@media (prefers-reduced-motion:reduce){ .indice-item.levantada, .indice-grupo.levantada{ transform:none; } }
.inicio-orden{ margin:6px 0 0; }
.favoritos .indice-nombre{ display:flex; align-items:center; gap:7px; }
.estrella-titulo{ width:13px; height:13px; fill:currentColor; flex:none; }
/* Manija para mover un grupo entero: aparece al pasar por el nombre del grupo. */
.indice-grupo .indice-nombre{ display:flex; align-items:center; gap:6px; }
.asa-grupo{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; padding:0; border:0; border-radius:6px; background:none; color:var(--gris); cursor:grab; touch-action:none; opacity:0; transition:opacity .15s, background .15s; }
.asa-grupo svg{ width:15px; height:15px; fill:currentColor; }
.indice-grupo:hover .asa-grupo, .asa-grupo:focus-visible{ opacity:1; }
.asa-grupo:hover{ background:var(--fondo-suave); color:var(--texto); }
@media (hover:none){ .asa-grupo{ opacity:1; } }
.indice-grupo.arrastrando{ opacity:.6; }
/* Acordeón: el nombre del grupo pliega o abre sus tarjetas. */
.plegar{ display:inline-flex; align-items:center; gap:6px; padding:0; border:0; background:none; font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit; cursor:pointer; }
.plegar .chev{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s; }
.plegar[aria-expanded="false"] .chev{ transform:rotate(-90deg); }
.plegar:hover{ color:var(--texto); }
.plegar:focus-visible{ outline:2px solid var(--rio); outline-offset:3px; border-radius:4px; }
.indice:not(.buscando) .indice-grupo.cerrado > .indice-lista{ display:none !important; }
.indice[data-vista="cuadricula"] .indice-grupo.cerrado{ padding-bottom:18px; }
.inicio-orden button{ font:inherit; font-size:13px; color:var(--gris); background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.inicio-orden button:hover{ color:var(--rio); }
.indice[data-vista="cuadricula"] .indice-fila .chip{ margin-top:auto; }
a.indice-fila:focus-visible, .reciente:focus-visible, .vista-selector button:focus-visible{ outline:2px solid var(--rio); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ .indice-fila, .indice-fila .flecha{ transition:none !important; transform:none !important; } }
@media (max-width:600px){
  .inicio-barra{ margin-top:24px; }
  .indice[data-vista="cuadricula"] .indice-lista{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .indice[data-vista="cuadricula"] .indice-fila{ padding:16px; min-height:0; }
  .indice[data-vista="cuadricula"] .indice-fila .desc{ display:none; }
  .indice[data-vista="cuadricula"] .indice-fila .titulo{ font-size:14.5px; }
  .indice[data-vista="cuadricula"] .indice-fila .flecha{ display:none; }
}

/* ── Plantillas: orden y aire (2026-10-19) ─────────────────────────────── */
.rutas.tres{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.rutas .tarjeta .ir{ margin-top:14px; font-weight:600; color:var(--texto); }
.bloque-kit .paso-titulo{ margin-top:34px; margin-bottom:12px; }
.bloque-kit h2.titulo-cat + .paso-titulo,
.bloque-kit p.intro + .paso-titulo{ margin-top:4px; }
.fila-boton{ margin:8px 0 24px; }
.sub-ruta{ margin-top:44px; padding-top:30px; border-top:1px solid var(--linea); scroll-margin-top:130px; }
.sub-ruta h3{ margin:12px 0 6px; font-size:22px; font-weight:600; text-transform:uppercase; line-height:1.15; }
.sub-ruta .fila-boton{ margin:14px 0 6px; }
.mini-titulo{
  margin:26px 0 4px; font-size:12px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--rio);
}
ol.pasos{ max-width:720px; }
ol.pasos .mensaje{ margin:10px 0 10px; }
.boton.chico{ padding:9px 18px; font-size:11px; }
p.intro.corto{ margin-bottom:6px; }
.sub-ruta .nota-final{ margin-top:14px; }

/* ── Kit de marca · Tipografía (2026-10-21) ──────────────────────────────
   Tres filas iguales: primero la oficial (Brandon Text), después las digitales.
   Cada fila: datos a la izquierda y un ejemplo (título, subtítulo, lorem ipsum)
   a la derecha, siempre sobre fondo claro para que se lea igual en modo oscuro. */
.tipo-lista{ display:grid; gap:20px; margin-top:26px; }
.tipo-fila{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:40px;
  background:var(--fondo-tarjeta); border:1px solid var(--linea); border-radius:var(--radio);
  padding:34px 36px;
}
.tipo-chip{
  display:inline-block; font-size:10.5px; font-weight:600; letter-spacing:.16em; line-height:1.2;
  text-transform:uppercase; padding:6px 13px; border-radius:var(--radio-pastilla);
  background:var(--rio-tinte); color:var(--rio);
}
.tipo-nombre{ font-size:30px; font-weight:700; line-height:1.1; text-transform:uppercase; margin:18px 0 8px; }
.tipo-desc{ font-size:15px; line-height:1.55; color:var(--texto-2); margin:0 0 18px; }
.tipo-dato{
  font-size:14px; line-height:1.5; color:var(--texto-2); margin:0;
  padding:11px 0; border-top:1px solid var(--linea);
}
.tipo-dato b{
  display:block; font-size:10.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--rio); margin-bottom:3px;
}
.tipo-info .fila-boton{ margin:16px 0 0; }
.tipo-ejemplo{
  background:#F6F6F2; color:#0D0D0D; border-radius:var(--radio);
  padding:32px 34px 28px; align-self:start;
}
.tipo-ejemplo img{ display:block; width:100%; max-width:520px; height:auto; }
.tipo-fuente{ margin:14px 0 0; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#5E605C; }
.ej-titulo{
  font-family:Jost,sans-serif; font-weight:700; text-transform:uppercase;
  font-size:clamp(40px,5.4vw,72px); line-height:1; letter-spacing:-.005em; margin:0 0 30px;
}
.ej-sub{ font-family:Jost,sans-serif; font-weight:600; font-size:26px; line-height:1.15; margin:0 0 16px; }
.ej-texto{ font-family:Jost,sans-serif; font-weight:300; font-size:16.5px; line-height:1.55; margin:0; color:#2B2B2A; }
.ej-texto.serif{ font-family:Bitter,serif; font-weight:300; font-size:15.5px; }
.ej-texto.nunito{ font-family:'Nunito Sans',sans-serif; font-weight:300; font-size:16px; }
@media (max-width:900px){
  .tipo-fila{ grid-template-columns:1fr; gap:24px; padding:26px 22px; }
  .tipo-ejemplo{ padding:24px 22px 22px; }
}

/* ── Buscadores: todos iguales en el centro (27-10-2026) ─────────────────────
   Rectangulares con las esquinas suavizadas (var(--radio)), igual que los campos de los
   formularios, no redondos como los botones. Compactos y con el texto de ayuda suave.
   Va al final y con !important porque varias páginas traen su propio estilo. */
input[type="search"], input.buscador{
  font:inherit !important; font-size:14.5px !important; font-weight:400 !important; color:var(--texto);
  padding:9px 16px !important; border:1px solid var(--linea) !important; border-radius:var(--radio) !important;
  background:var(--fondo-tarjeta) !important; box-shadow:none; transition:border-color .15s, box-shadow .15s;
}
input.buscador{ max-width:420px; }
:is(.inicio-buscar, .buscar) input[type="search"]{ padding-left:40px !important; }
.inicio-buscar input[type="search"]{ padding-right:60px !important; }
input[type="search"]:focus, input.buscador:focus{ outline:none; border-color:var(--rio) !important; box-shadow:0 0 0 3px var(--rio-tinte); }
input[type="search"]::placeholder, input.buscador::placeholder{ color:var(--gris-claro); font-weight:300; opacity:1; }

/* ── Interruptor de dos o más opciones (Usuarios | Perfiles, Un mes | Varios meses…) ── */
.segmento{ display:inline-flex; flex-wrap:wrap; padding:3px; gap:3px; border:1px solid var(--linea); border-radius:var(--radio-pastilla); background:var(--fondo-tarjeta); }
.segmento a, .segmento button{ font:inherit; font-size:12px; font-weight:500; letter-spacing:.04em; padding:7px 16px; border:0; border-radius:var(--radio-pastilla); background:none; color:var(--gris); cursor:pointer; text-decoration:none; }
.segmento a:hover, .segmento button:hover{ color:var(--texto); text-decoration:none; }
.segmento a[aria-current="page"], .segmento button[aria-pressed="true"]{ background:var(--rio); color:#fff; }
/* Buscador de usuarios (admin) */
.buscar-usuarios{ padding:16px 22px; border-bottom:1px solid var(--linea); }
.buscar-usuarios .buscador{ flex:1 1 260px; max-width:420px; }
.buscar-usuarios .buscador{ margin:0; }
/* Encabezados que ordenan la lista al apretarlos (Usuario, Rol). */
.orden-col{ font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
.orden-col:hover, .orden-col[aria-sort="ascending"], .orden-col[aria-sort="descending"]{ color:var(--texto); }
.orden-col i{ font-style:normal; color:var(--rio); }
.orden-col:focus-visible{ outline:2px solid var(--rio); outline-offset:3px; border-radius:4px; }
.buscar-usuarios .nada{ margin:10px 0 0; font-size:14px; color:var(--gris); }
.tabla-usuarios .fila[hidden]{ display:none; }

/* «Además ve» (admin): secciones sumadas a una persona sobre su perfil. */
#zona-extras{ margin-top:18px; }
/* «Qué ve» de cada usuario: todas las secciones por grupo. */
.ve-grupos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; margin-bottom:26px; }
/* Cada grupo es una tarjeta: el nombre arriba y sus secciones como filas finas, sin cajas sueltas. */
.ve-grupo{ display:flex; flex-direction:column; border:1px solid var(--linea); border-radius:var(--radio); overflow:hidden; background:var(--fondo-tarjeta); }
.ve-grupo-nombre{ display:flex; align-items:center; gap:9px; margin:0; padding:9px 12px; background:var(--fondo-suave); border-bottom:1px solid var(--linea); font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--texto); cursor:pointer; }
.ve-grupo-nombre input{ accent-color:var(--rio); width:15px; height:15px; margin:0; flex:none; }
.ve-grupo-nombre input:disabled{ accent-color:var(--gris); opacity:.8; }
.ve-grupo-nombre:has(input:disabled){ cursor:default; }
.ve-cuenta{ margin-left:auto; font-weight:400; letter-spacing:0; text-transform:none; font-size:11px; color:var(--gris); }
.ve-grupos .extra{ display:flex; align-items:center; gap:9px; padding:7px 12px; cursor:pointer; font-size:13.5px; line-height:1.3; }
.ve-grupos .extra + .extra{ border-top:1px solid var(--linea); }
.ve-grupos .extra input{ accent-color:var(--rio); width:15px; height:15px; margin:0; flex:none; }
.ve-grupos .extra .n{ flex:1; min-width:0; }
.ve-grupos .extra .ve-estado{ font-size:11px; color:var(--gris); white-space:nowrap; }
.ve-grupos .extra:has(input:checked:not(:disabled)){ background:var(--rio-tinte); }
.ve-grupos .extra:has(input:checked:not(:disabled)) .ve-estado{ color:var(--rio); }
.ve-grupos .extra.incluida{ cursor:default; }
.ve-grupos .extra.incluida input{ accent-color:var(--gris); opacity:.7; }
#extras-incluye{ margin-bottom:14px; }
.ve-grupos .extra:not(:has(input:checked)) .n{ color:var(--gris); }

/* ── Espacio «Planificación» (partes/espacio.php) ─────────────────────────
   Calendario, Pedidos y Trabajos como un solo lugar, al estilo de Notion:
   pestañas en la cabecera y cada cosa se abre en el panel lateral. */
.cabecera-cat.espacio{ padding-bottom:0; }
.espacio-sub{ margin:-6px 0 14px; color:rgba(255,255,255,.65); font-size:14px; }
.espacio-tabs{ display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.espacio-tabs a{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px 12px; color:rgba(255,255,255,.62); text-decoration:none; font-size:14px; border-bottom:2px solid transparent; }
.espacio-tabs a:hover{ color:#fff; }
.espacio-tabs a[aria-current="page"]{ color:#fff; border-bottom-color:var(--rio); font-weight:500; }
.espacio-tabs svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* Estado en pastilla con punto de color (Pedidos, Calendario, Resumen) */
.pastilla{ --c:var(--gris-claro); display:inline-flex; align-items:center; gap:6px; padding:2px 10px 2px 8px; border-radius:50px; background:color-mix(in srgb, var(--c) 22%, transparent); color:var(--texto); font-size:13px; font-weight:500; white-space:nowrap }
.pastilla i{ width:8px; height:8px; border-radius:50%; background:var(--c) }
.pastilla.p-revision{ --c:var(--granito) } .pastilla.p-aprobada{ --c:var(--rio) } .pastilla.p-rechazada{ --c:var(--gris) }

/* Panel lateral: cada pedido, actividad o trabajo se abre como una página */
.panel-bg{ position:fixed; inset:0; background:rgba(13,13,13,.45); z-index:35 }
.panel{ position:fixed; top:0; right:0; bottom:0; width:min(620px,100%); background:var(--fondo-tarjeta); border-left:1px solid var(--linea); z-index:36; overflow-y:auto; display:flex; flex-direction:column }
.panel-cab{ position:sticky; top:0; display:flex; align-items:center; gap:8px; padding:12px 18px; background:var(--fondo-tarjeta); border-bottom:1px solid var(--linea); z-index:1 }
.panel-cab .guardado{ margin-right:auto; font-size:12px; color:var(--gris) }
.icono-btn{ border:0; background:none; color:var(--gris); width:32px; height:32px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer }
.icono-btn:hover{ background:var(--fondo-suave); color:var(--texto) }
.icono-btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.panel-cuerpo{ padding:22px 28px 40px; display:flex; flex-direction:column; gap:22px }
.p-titulo{ font:inherit; font-size:26px; font-weight:700; line-height:1.2; color:var(--texto); border:0; background:none; width:100%; resize:none; padding:4px 6px; margin:0 -6px; border-radius:8px; outline:none; overflow:hidden }
.p-titulo:hover:not(:read-only){ background:var(--fondo-suave) }
.p-titulo:focus{ background:var(--fondo-suave) }
.props{ display:grid; grid-template-columns:150px minmax(0,1fr); gap:2px 10px; align-items:center }
.props .k{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--gris); padding:6px 0 }
.props .k svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none }
.props .v{ min-width:0; font-size:14px }
.props .v .ro{ display:block; padding:6px 8px }
.prop{ font:inherit; font-size:14px; color:var(--texto); border:1px solid transparent; background:none; border-radius:8px; padding:6px 8px; width:100%; outline:none; appearance:none; -webkit-appearance:none }
.prop:hover:not(:disabled){ background:var(--fondo-suave) }
.prop:focus{ background:var(--fondo-suave); border-color:var(--linea) }
.prop:disabled{ opacity:1; color:var(--texto) }
.prop::placeholder{ color:var(--gris) }
select.prop{ cursor:pointer }
.seccion h4{ margin:0 0 8px; font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gris) }
.p-detalle{ font:inherit; font-size:14.5px; line-height:1.6; color:var(--texto); border:1px solid transparent; background:none; width:100%; min-height:80px; resize:none; padding:8px 10px; margin:0 -10px; border-radius:8px; outline:none; overflow:hidden }
.p-detalle:hover:not(:read-only), .p-detalle:focus{ background:var(--fondo-suave) }
.acciones-p{ display:flex; flex-wrap:wrap; gap:8px }
.historial{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--gris) }
.historial b{ color:var(--texto-2); font-weight:500 }

@media (max-width:640px){
  .props{ grid-template-columns:110px minmax(0,1fr) } .panel-cuerpo{ padding:18px 18px 40px } .p-titulo{ font-size:22px }
  .prop, .p-detalle{ font-size:16px }
  .espacio-tabs{ flex-wrap:nowrap; overflow-x:auto; margin:6px -16px 0; padding:0 16px; }
  .espacio-tabs a{ white-space:nowrap; padding:10px 10px 12px; }
}

/* «Tus pendientes» en el inicio: lo que le toca a cada persona en Pedidos. */
.mis-pendientes{ margin:16px 0 30px; border:1px solid var(--linea); border-radius:12px; background:var(--fondo-tarjeta); overflow:hidden; }
.mis-pendientes[hidden]{ display:none; }
.mis-pendientes h2{ display:flex; align-items:center; gap:10px; margin:0; padding:14px 18px; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gris); border-bottom:1px solid var(--linea); }
.mis-pendientes h2 b{ display:inline-flex; min-width:22px; height:22px; padding:0 7px; align-items:center; justify-content:center; border-radius:50px; background:var(--rio); color:#fff; font-size:11px; letter-spacing:0; }
.mis-pendientes h2 a{ margin-left:auto; color:var(--rio); text-decoration:none; letter-spacing:.04em; text-transform:none; font-size:13px; font-weight:500; }
.mis-pend{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:14px; align-items:center; padding:11px 18px; border-bottom:1px solid var(--linea); color:var(--texto); text-decoration:none; font-size:14px; }
.mis-pend:last-child{ border-bottom:0; }
.mis-pend:hover{ background:var(--fondo-suave); }
.mis-pend .q{ font-weight:500; }
.mis-pend .q .u{ font-style:normal; font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--terracota); border-radius:50px; padding:1px 7px; margin-left:6px; vertical-align:1px; }
.mis-pend .t{ color:var(--gris); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mis-pend .f{ font-size:12.5px; color:var(--gris); white-space:nowrap; }
.mis-pend .f.atr{ color:var(--texto); font-weight:600; }
@media (max-width:640px){ .mis-pend{ grid-template-columns:1fr auto; } .mis-pend .t{ grid-column:1 / -1; grid-row:2; } }

/* Botón «Plegar / Abrir · N» al lado de cada grupo (inicio y Menú): que se vea que se puede achicar. */
.plegar-btn{ margin-left:auto; gap:5px; padding:4px 10px 4px 12px; border:1px solid var(--linea); border-radius:50px; font-size:11px; font-weight:500; letter-spacing:.06em; text-transform:none; color:var(--gris); }
.plegar-btn svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s; }
.plegar-btn[aria-expanded="false"] svg{ transform:rotate(180deg); }
.plegar-btn:hover{ border-color:var(--rio); color:var(--rio); }
.indice-grupo .indice-nombre{ width:100%; }
.menu-grupo-nombre{ display:flex; align-items:center; gap:8px; }
.menu-plegar{ margin-left:auto; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; padding:0; border:1px solid rgba(255,255,255,.18); border-radius:50%; background:none; color:inherit; cursor:pointer; }
.menu-plegar svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s; }
.menu-plegar[aria-expanded="false"] svg{ transform:rotate(180deg); }
.menu-plegar:hover{ border-color:var(--rio); color:var(--rio); }
.menu-grupo.cerrado ul{ display:none; }
/* Panel lateral: secciones plegables (panel.js) y «Más propiedades». */
.seccion > h4.con-plegar{ display:flex; align-items:center; gap:10px; }
.seccion.cerrada > :not(h4){ display:none !important; }
.seccion.cerrada > h4{ margin-bottom:0; }
.props-sec > .props{ margin-top:4px; }
select.prop:has(option[value=""]:checked){ color:var(--gris); }
input.prop[type=date]:not(:valid){ color:var(--gris); }

/* Inicio: aviso de pedidos de acceso a páginas compartidas (pp-accesos.php). */
.aviso-accesos{ margin:-6px 0 22px; }
.aviso-accesos a{ display:inline-block; padding:8px 16px; border:1px solid var(--rio); border-radius:50px; color:var(--texto); font-size:14px; text-decoration:none; }
.aviso-accesos a:hover{ background:var(--rio); color:#fff; }

/* Perfiles: al tocar uno, su «qué ve» se abre justo debajo, dentro de la lista. */
.lista-edicion .formulario-contenido.en-fila{ margin:0; padding:18px 22px 22px; border-bottom:1px solid var(--linea); background:var(--fondo-suave); border-radius:0; }
.lista-edicion .formulario-contenido.en-fila h3{ margin-top:0; }
.lista-edicion .fila.editando .principal{ color:var(--rio); }

/* Usuarios: al tocar una persona, su edición se abre justo debajo, dentro de la lista. */
.panel-admin.editando{ grid-template-columns:1fr; max-width:860px; }
.tabla-usuarios .formulario-usuario.en-fila{ margin:0; border:0; border-radius:0; border-bottom:1px solid var(--linea); background:var(--fondo-suave); padding:20px 22px 24px; }
.tabla-usuarios .fila.editando{ background:var(--rio-tinte); }
.tabla-usuarios .fila.editando .principal{ color:var(--rio); }

/* Usuarios: ficha de la persona (cargo, correo, teléfono) al abrir su edición. */
.ficha-usuario{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 18px; margin:4px 0 22px; padding:14px 16px; border:1px solid var(--linea); border-radius:var(--radio); background:var(--fondo-tarjeta); font-size:14px; }
.ficha-usuario dt{ font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gris); align-self:center; }
.ficha-usuario dd{ margin:0; min-width:0; overflow-wrap:anywhere; }
.ficha-usuario a{ color:var(--rio); }
.ficha-usuario .nada{ color:var(--gris); }

/* ── Celular (28-10-2026): el centro también se usa instalado como app ──── */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
a, button, summary, label{ -webkit-tap-highlight-color:transparent; }
@media (max-width:640px){
  /* En iPhone, un campo con letra de menos de 16 px hace zoom al tocarlo y
     la página queda corrida. Con 16 px se escribe sin que se mueva nada. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea{ font-size:16px !important; }

  /* Inicio: buscador a lo ancho y debajo los dos botones y la vista. */
  .inicio-barra{ flex-wrap:wrap; gap:10px; }
  .inicio-buscar{ flex:1 1 100%; }
  .inicio-pedir{ flex:1 1 auto; justify-content:center; padding:10px 12px; letter-spacing:.08em; }
  .inicio-pedir.secundario{ padding:9px 12px; }
  .vista-selector{ margin-left:0; flex:none; }
}
/* Con la app instalada en el iPhone, que la última línea no quede bajo la barra de inicio. */
@supports (padding:max(0px)){ body{ padding-bottom:env(safe-area-inset-bottom,0px); } }

/* ─── Celular como app (31-10-2026) ─────────────────────────────────────────
   Como Drive: lupa arriba a la derecha, barra de abajo con Inicio, Favoritos
   y atajos, y «⋯» en cada tarjeta en vez de la estrella y la manija. */
.barra .buscar-boton, .barra-abajo{ display:none; }
.item-acciones .mas{ display:none; }
.item-acciones .mas svg{ fill:currentColor; stroke:none; }
.menu-mas{
  position:absolute; z-index:60; min-width:220px; padding:6px; border-radius:14px;
  background:var(--fondo-tarjeta, var(--blanco)); border:1px solid var(--linea); box-shadow:0 14px 36px rgba(0,0,0,.28);
}
.menu-mas[hidden]{ display:none; }
.menu-mas-titulo{ margin:4px 10px 6px; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--gris); }
.menu-mas button{
  display:flex; align-items:center; gap:12px; width:100%; padding:12px 10px; border:0; border-radius:10px;
  background:none; color:var(--texto); font:inherit; font-size:15px; text-align:left; cursor:pointer;
}
.menu-mas button:hover, .menu-mas button:active{ background:var(--fondo-suave); }
.menu-mas svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linejoin:round; stroke-linecap:round; flex:none; }
.aviso-flotante{
  position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom)); z-index:70; transform:translate(-50%, 12px);
  padding:10px 18px; border-radius:var(--radio-pastilla); background:var(--texto); color:var(--fondo-pagina);
  font-size:14px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
}
.aviso-flotante.visible{ opacity:1; transform:translate(-50%, 0); }
html.pp-solo-favoritos .indice > .indice-grupo:not(.favoritos),
html.pp-solo-favoritos .recientes, html.pp-solo-favoritos .mis-pendientes,
html.pp-solo-favoritos #pp-orden-reset, html.pp-solo-favoritos .inicio-barra{ display:none !important; }
.fav-vacio{ margin-top:28px; }

/* Tocar en vez de pasar el mouse: «⋯» en lugar de estrella y manija; se ordena manteniendo apretado. */
@media (hover:none){
  .item-acciones .fav, .item-acciones .asa, .asa-grupo{ display:none !important; }
  .item-acciones .mas{ display:flex; opacity:1; width:36px; height:36px; }
}

@media (max-width:700px){
  .barra .buscar-boton{
    display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; flex:none;
    border:1px solid rgba(255,255,255,.22); border-radius:50%; color:rgba(255,255,255,.85);
  }
  .barra .buscar-boton svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
  /* En el inicio, el buscador queda bien arriba: sin el título grande ni los atajos (están abajo). */
  .cabecera-inicio h1{ display:none; } .cabecera-inicio{ padding:18px 0 16px; } .cabecera-inicio .kicker{ margin-bottom:0; }
  .inicio-barra{ margin-top:12px; flex-wrap:nowrap; }
  .inicio-barra .inicio-buscar{ flex:1 1 auto; min-width:0; }
  .inicio-barra .inicio-pedir.secundario{ display:none; }   /* Planificación está en la barra de abajo */
  .inicio-buscar .atajo{ display:none; }

  .barra-abajo{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));
    background:color-mix(in srgb, var(--fondo-pagina) 96%, transparent); border-top:1px solid var(--linea);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  }
  .barra-abajo a{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:4px 0;
    color:var(--gris); font-size:11.5px; text-decoration:none;
  }
  .barra-abajo .ico{ display:flex; align-items:center; justify-content:center; width:56px; height:30px; border-radius:var(--radio-pastilla); transition:background .2s; }
  .barra-abajo svg{ width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linejoin:round; stroke-linecap:round; }
  .barra-abajo a.actual{ color:var(--texto); font-weight:500; }
  .barra-abajo a.actual .ico{ background:var(--rio-tinte, var(--fondo-suave)); color:var(--rio); }
  body{ padding-bottom:calc(76px + env(safe-area-inset-bottom)); }
  html.pp-menu-abierto .barra-abajo{ display:none; }
}

/* ─── Inicio con carpetas (01-11-2026) ──────────────────────────────────────
   Cada grupo es una fila-carpeta que se despliega ahí mismo; parten cerradas.
   Sigue con su pastilla «Abrir · N» / «Plegar» a la derecha. */
.indice > .indice-grupo:not(.favoritos){ padding-bottom:0 !important; margin-bottom:10px; }
.indice > .indice-grupo:not(.favoritos) > .indice-nombre,
.indice[data-vista="cuadricula"] > .indice-grupo:not(.favoritos) > .indice-nombre{
  padding:12px 14px 12px 12px; margin:0; border:1px solid var(--linea); border-radius:12px;
  background:var(--fondo-tarjeta, var(--blanco)); font-size:15px; letter-spacing:.02em; text-transform:none; color:var(--texto);
}
.indice > .indice-grupo:not(.favoritos):not(.cerrado) > .indice-nombre{ border-color:var(--rio); }
.indice > .indice-grupo:not(.favoritos) > .indice-lista{ margin-top:12px; margin-bottom:22px; }
.indice-nombre .plegar:not(.plegar-btn){ gap:12px; font-weight:500; }
.carpeta-ico{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; background:var(--rio-tinte); color:var(--rio); flex:none; }
.carpeta-ico svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linejoin:round; }
.indice-grupo:not(.cerrado) .carpeta-ico{ background:var(--rio); color:#fff; }

/* ─── Mi perfil (01-11-2026) ─────────────────────────────────────────────── */
.usuario-panel a.usuario-cab{ display:flex; align-items:center; gap:12px; padding:10px 10px 14px; margin-bottom:6px; border-bottom:1px solid var(--linea); border-radius:0; text-decoration:none; color:inherit; }
.perfil-cab{ display:flex; align-items:center; gap:22px; margin:0 0 28px; }
.perfil-foto{ width:112px; height:112px; border-radius:50%; overflow:hidden; flex:none; background:var(--rio); display:flex; align-items:center; justify-content:center; }
.perfil-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.perfil-iniciales{ color:#fff; font-size:34px; font-weight:500; letter-spacing:.04em; }
.perfil-nombre{ margin:0 0 4px; font-size:22px; font-weight:500; color:var(--texto); }
.perfil-dato{ margin:0; color:var(--gris); font-size:14.5px; line-height:1.6; }
.foto-previa{ margin-top:18px; }
.foto-previa canvas{ display:block; width:220px; height:220px; border-radius:50%; background:var(--fondo-suave); }
@media (max-width:560px){
  .perfil-cab{ gap:16px; }
  .perfil-foto{ width:84px; height:84px; }
  .perfil-iniciales{ font-size:26px; }
  .perfil-nombre{ font-size:19px; }
}
/* Toda la fila de la carpeta es el botón; la manija de arrastre va a la izquierda (01-11-2026). */
.indice > .indice-grupo > .indice-nombre{ cursor:pointer; }
.indice > .indice-grupo:not(.favoritos) > .indice-nombre .plegar:not(.plegar-btn){ flex:1; text-align:left; }
.indice > .indice-grupo:not(.favoritos) > .indice-nombre:hover{ border-color:var(--rio); }
.indice > .indice-grupo:not(.favoritos) > .indice-nombre:hover .plegar-btn{ border-color:var(--rio); color:var(--rio); }
.indice-nombre .asa-grupo{ margin:0 2px 0 -4px; }
.usuario-panel a.usuario-cab .iniciales{ width:38px; flex:none; color:#fff; }   /* que no la achique la regla de los íconos del menú */

/* ─── Mi perfil con menú a la izquierda (01-11-2026) ───────────────────────
   En el computador, el menú va en una columna a la izquierda; en el celular,
   como tira deslizable arriba (nunca se apila en varias filas). */
.perfil-layout{ display:grid; grid-template-columns:240px minmax(0, 1fr); gap:48px; align-items:start; }
.perfil-contenido{ max-width:760px; min-width:0; }
.perfil-menu{ position:sticky; top:96px; display:flex; flex-direction:column; gap:2px; }
.perfil-menu a{
  display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:10px;
  color:var(--texto-2); font-size:15px; text-decoration:none; transition:background .15s, color .15s;
}
.perfil-menu a:hover{ background:var(--fondo-suave); color:var(--texto); text-decoration:none; }
.perfil-menu a.actual{ background:var(--rio-tinte); color:var(--texto); font-weight:500; }
.perfil-menu a.actual svg{ color:var(--rio); }
.perfil-menu svg{ width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linejoin:round; stroke-linecap:round; }
.perfil-menu a[href="/?logout=1"]{ margin-top:14px; border-top:1px solid var(--linea); border-radius:0 0 10px 10px; padding-top:16px; }
@media (max-width:820px){
  .perfil-layout{ grid-template-columns:minmax(0, 1fr); gap:22px; }
  .perfil-menu{ position:static; flex-direction:row; overflow-x:auto; gap:8px; margin:-30px -22px 0; padding:0 22px 4px; scrollbar-width:none; }
  .perfil-menu::-webkit-scrollbar{ display:none; }
  .perfil-menu a{ flex:none; padding:9px 14px; border:1px solid var(--linea); border-radius:50px; font-size:14px; min-height:40px; }
  .perfil-menu a.actual{ border-color:var(--rio); }
  .perfil-menu a[href="/?logout=1"]{ margin-top:0; border-top:1px solid var(--linea); border-radius:50px; padding-top:9px; }
}
.perfil-intro{ margin:0 0 20px; font-size:16px; line-height:1.6; color:var(--texto-2); }

/* Tarjeta de contacto: se ve la tarjeta, no el botón. */
.vcard{
  display:flex; flex-direction:column; align-items:center; text-align:center; max-width:420px;
  padding:32px 28px 26px; border:1px solid var(--linea); border-radius:16px; background:var(--fondo-tarjeta, var(--blanco));
}
.vcard .perfil-foto{ width:104px; height:104px; margin-bottom:14px; }
.vcard-nombre{ margin:0; font-size:22px; font-weight:500; color:var(--texto); }
.vcard-cargo{ margin:4px 0 0; font-size:15px; color:var(--texto-2); }
.vcard-org{ margin:2px 0 0; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--rio); }
.vcard-datos{ list-style:none; margin:20px 0 0; padding:16px 0 0; border-top:1px solid var(--linea); width:100%; text-align:left; }
.vcard-datos li{ display:flex; align-items:center; gap:12px; padding:7px 0; font-size:15px; color:var(--texto); overflow-wrap:anywhere; }
.vcard-datos svg{ width:19px; height:19px; flex:none; fill:none; stroke:var(--rio); stroke-width:1.7; stroke-linejoin:round; stroke-linecap:round; }
.vcard-bajar{ margin:18px 0 8px; }

/* Encuadre de la foto: se arrastra y se acerca. */
.foto-previa canvas{ cursor:grab; touch-action:none; }
.foto-previa canvas:active{ cursor:grabbing; }
.foto-zoom{ display:flex; align-items:center; gap:10px; width:220px; margin-top:12px; color:var(--gris); }
.foto-zoom svg{ width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
.foto-zoom input{ flex:1; accent-color:var(--rio); }

/* Perfiles del equipo (solo administradores). */
.perfil-equipo{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:8px; margin-top:14px; }
.perfil-equipo a{ display:flex; align-items:center; gap:12px; padding:10px; border-radius:10px; color:var(--texto); text-decoration:none; }
.perfil-equipo a:hover{ background:var(--fondo-suave); text-decoration:none; }
.perfil-equipo .nombre{ display:block; font-size:14.5px; font-weight:500; }
.perfil-equipo .dato{ display:block; font-size:12.5px; color:var(--gris); }
.perfil-foto.chica{ width:44px; height:44px; }
.perfil-foto.chica .perfil-iniciales{ font-size:14px; }
.indice > .indice-grupo{ scroll-margin-top:90px; }   /* al llegar desde la ruta, la carpeta no queda bajo la barra */
.boton[hidden]{ display:none !important; }

/* Selector de dos opciones con texto (ES | EN), igual al de cuadrícula/lista. */
.vista-selector.selector-texto{ display:inline-flex; margin:0 0 16px; }
.vista-selector.selector-texto button{ width:auto; min-width:48px; padding:0 14px; font:inherit; font-size:13px; font-weight:500; letter-spacing:.08em; }

/* Ordenar (01-11-2026): pastilla «Mi orden ↑» con menú, como en Drive. */
.ordenar{ position:relative; margin-left:auto; flex:none; }
.ordenar + .vista-selector{ margin-left:0; }
.ordenar-boton{
  display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 14px 0 16px; border:1px solid var(--linea); border-radius:12px;
  background:var(--fondo-tarjeta); color:var(--texto); font:inherit; font-size:14px; cursor:pointer; white-space:nowrap;
}
.ordenar-boton:hover, .ordenar-boton[aria-expanded="true"]{ border-color:var(--rio); }
.ordenar-boton .dir{ width:18px; height:18px; fill:none; stroke:var(--rio); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s; }
.ordenar-boton.za .dir{ transform:rotate(180deg); }
.ordenar-boton.sin-dir .dir{ display:none; }
.ordenar-menu{ top:calc(100% + 6px); right:0; min-width:260px; }
.ordenar-menu button{ position:relative; padding-left:40px; }
.ordenar-menu button[aria-checked="true"]::before{
  content:""; position:absolute; left:14px; top:50%; width:12px; height:6px; margin-top:-5px;
  border-left:2px solid var(--rio); border-bottom:2px solid var(--rio); transform:rotate(-45deg);
}
.ordenar-menu button:disabled{ opacity:.4; cursor:default; }
.ordenar-menu small{ color:var(--gris); font-size:12.5px; }
.menu-mas-titulo.con-linea{ margin-top:8px; padding-top:12px; border-top:1px solid var(--linea); }
@media (max-width:700px){ .ordenar-boton{ height:44px; padding:0 12px; } .ordenar-boton .txt{ max-width:92px; overflow:hidden; text-overflow:ellipsis; } }
.ordenar-menu small{ display:block; margin-top:2px; }
@media (max-width:700px){ .ordenar-menu{ position:fixed; top:auto; left:16px; right:16px; bottom:calc(84px + env(safe-area-inset-bottom)); min-width:0; } }

/* Carpetas sin «Abrir · N» (01-11-2026): el número va gris junto al nombre y a la derecha «⋯»
   (destacar arriba o dejar al final). La fila entera abre y cierra. */
.carpeta-n{ margin-left:4px; font-size:13px; font-weight:400; color:var(--gris); }
.carpeta-fija{ display:none; width:15px; height:15px; fill:var(--rio); flex:none; }
.indice-grupo.destacada .carpeta-fija{ display:inline-block; }
.mas-carpeta{
  margin-left:auto; display:flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; flex:none;
  border:0; border-radius:10px; background:none; color:var(--gris); cursor:pointer;
}
.mas-carpeta svg{ width:20px; height:20px; fill:currentColor; }
.mas-carpeta:hover{ background:var(--fondo-suave); color:var(--texto); }

/* Ordenar, más visible (01-11-2026): pastilla con fondo, como «Nombre ↑» de Drive. */
.ordenar-boton{
  height:44px; gap:8px; padding:0 12px 0 14px; border:1px solid transparent; border-radius:50px;
  background:var(--rio-tinte); color:var(--texto); font-weight:500;
}
.ordenar-boton:hover, .ordenar-boton[aria-expanded="true"]{ border-color:var(--rio); background:var(--rio-tinte); }
.ordenar-boton .ico-ordenar{ width:18px; height:18px; fill:none; stroke:var(--rio); stroke-width:2; stroke-linecap:round; }
.ordenar-boton .dir-circ{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:var(--rio); }
.ordenar-boton .dir-circ .dir{ width:15px; height:15px; stroke:#fff; }
.ordenar-boton.sin-dir .dir-circ{ display:none; }
.ordenar-boton:not(.sin-dir) .ico-ordenar{ display:none; }
.ordenar-boton .chev{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:.7; transition:transform .2s; }
.ordenar-boton[aria-expanded="true"] .chev{ transform:rotate(180deg); }
.ordenar-boton.za .dir{ transform:rotate(180deg); }
.ordenar-boton.sin-dir .dir{ display:none; }
/* Con el botón Ordenar, el buscador no se achica de más: si no cabe todo en una línea, los botones bajan. */
@media (min-width:701px){
  .inicio-barra{ flex-wrap:wrap; row-gap:10px; }
  .inicio-buscar{ flex:1 1 280px; min-width:260px; max-width:420px; }
}

/* Tarjeta digital (01-11-2026): el diseño de Web/Vcard dibujado en un canvas de 1508 × 3300. */
.tarjeta-digital{ max-width:340px; margin:4px 0 18px; border-radius:16px; overflow:hidden; box-shadow:0 14px 40px rgba(0,0,0,.28); }
.tarjeta-digital canvas{ display:block; width:100%; height:auto; }
/* Con el nombre ya visible arriba, el panel de la cuenta no lo repite (01-11-2026). En el celular,
   donde arriba solo están las iniciales, sí aparece. */
@media (min-width:821px){ .usuario-panel .usuario-cab{ display:none !important; } }
/* Íconos del inicio = los mismos símbolos del Menú (pedido de Leyla, 01-11-2026: le gusta más ese dibujo). */
.indice-fila .ico.glifo{ font-size:18px; line-height:1; }
.indice[data-vista="cuadricula"] .indice-fila .ico.glifo{ font-size:21px; }
.indice[data-vista="cuadricula"] .indice-fila .ico.glifo{ border-radius:50%; }   /* en círculo, como en el Menú */
.carpeta-ico{ border-radius:50%; }   /* mismo círculo que los íconos de las secciones */

/* Volver deslizando desde el borde izquierdo (partes/pie.php): un círculo con ← que sigue al dedo. */
.volver-gesto{
  position:fixed; left:-44px; top:50%; z-index:80; width:44px; height:44px; margin-top:-22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:var(--fondo-tarjeta, #2A2A2A); border:1px solid var(--linea);
  color:var(--gris); opacity:0; pointer-events:none; transition:opacity .15s, background .15s, color .15s;
}
.volver-gesto svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.volver-gesto.visible{ opacity:1; }
.volver-gesto.listo{ background:var(--rio); border-color:var(--rio); color:#fff; }

/* Ruta «Inicio › Carpeta»: al pasar el mouse, pastilla de fondo como en Drive, no subrayado (01-11-2026). */
.kicker.ruta a:not(.cerrar-seccion){ border-bottom:0; padding:6px 10px; margin:-6px -10px; border-radius:50px; transition:background .15s, color .15s; }
.kicker.ruta a:not(.cerrar-seccion):hover{ background:rgba(255,255,255,.1); color:#fff; text-decoration:none; }
.cabecera-cat.clara .kicker.ruta a:not(.cerrar-seccion):hover{ background:var(--fondo-suave); color:var(--texto); }
/* Inicio con la franja de título común: el buscador ya no necesita margen propio arriba. */
.inicio-barra{ margin-top:0; }
.cabecera-inicio .kicker{ display:flex; align-items:center; min-height:20px; }   /* misma altura que la ruta de las otras páginas */
.cabecera-cat .kicker.ruta{ min-height:20px; }   /* igual con o sin la X al lado: el título queda siempre a la misma altura */

/* Inicio solo con el nombre de cada sección, sin la bajada (01-11-2026). En el celular, siempre en lista y sin selector de vista. */
.indice .indice-fila .desc{ display:none !important; }
.carpeta-n{ display:none; }   /* sin el número de secciones junto a la carpeta (pedido de Leyla, 01-11-2026) */

/* Celular (01-11-2026): buscador arriba, debajo «Pedir un trabajo» a la izquierda y Ordenar + vista a la derecha. */
@media (max-width:700px){
  .inicio-barra{ flex-wrap:wrap; row-gap:12px; }
  .inicio-barra .inicio-buscar{ flex:1 1 100%; }
  .inicio-barra .inicio-pedir:not(.secundario){ order:2; }
  .inicio-barra .ordenar{ order:3; margin-left:auto; }
  .inicio-barra .vista-selector{ order:4; }
}
@media (max-width:700px){
  .inicio-barra{ column-gap:8px; }
  .inicio-barra .inicio-pedir:not(.secundario){ flex:1 1 auto; min-width:0; justify-content:center; padding-left:12px; padding-right:14px; letter-spacing:.08em; white-space:nowrap; }
  .inicio-barra .ordenar{ margin-left:0; }
  .ordenar-boton .chev{ display:none; }
  .ordenar-boton{ padding:0 12px; }
}

/* «Pedir un trabajo» discreto (01-11-2026, «demasiado notorio»): pastilla de contorno como Planificación,
   solo el + en turquesa; en el celular no se estira a todo el ancho. */
.inicio-barra .inicio-pedir:not(.secundario){ background:none; border:1px solid var(--linea); color:var(--texto); padding:8px 17px; }
.inicio-barra .inicio-pedir:not(.secundario) svg{ color:var(--rio); }
.inicio-barra .inicio-pedir:not(.secundario):hover{ background:var(--rio-tinte); border-color:var(--rio-tinte); color:var(--texto); }
@media (max-width:700px){ .inicio-barra .inicio-pedir:not(.secundario){ flex:0 0 auto; height:44px; padding:0 16px; margin-right:auto; } }

/* «Tus pendientes» plegable (01-11-2026): toda la fila del título es el botón, chevron a la izquierda. */
.mis-pendientes .pend-plegar{ display:flex; align-items:center; gap:10px; flex:1; min-width:0; margin:-14px 0 -14px -18px; padding:14px 0 14px 18px; border:0; background:none; color:inherit; font:inherit; letter-spacing:inherit; text-transform:inherit; text-align:left; cursor:pointer; }
.mis-pendientes .pend-plegar .chev{ width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s; }
.mis-pendientes.plegada .pend-plegar .chev{ transform:rotate(-90deg); }
.mis-pendientes.plegada h2{ border-bottom-color:transparent; }
.mis-pendientes.plegada .mis-pend-lista{ display:none; }
.mis-pendientes .pend-plegar:focus-visible{ outline:2px solid var(--rio); outline-offset:-2px; }
.mis-pendientes .pend-plegar{ flex:1 1 auto; white-space:nowrap; }
.mis-pendientes h2 a{ flex:none; white-space:nowrap; }
@media (max-width:700px){ .mis-pendientes h2 a .largo{ display:none; } }

/* Vista lista con carpetas (02-11-2026): la carpeta ocupa todo el ancho y sus páginas se listan
   debajo, como en Drive; ya no la columna de 200 px a la izquierda del diseño anterior. */
.indice[data-vista="lista"]{ margin-top:34px; }
.indice[data-vista="lista"] .indice-grupo{ display:block; padding:0 0 14px; }
.indice[data-vista="lista"] .indice-grupo.cerrado{ padding-bottom:14px; }
.indice[data-vista="lista"] .indice-nombre{ padding:0; }
.indice[data-vista="lista"] .indice-lista{ margin:6px 0 10px; padding:0 4px 0 22px; }
.indice[data-vista="lista"] .indice-fila{ gap:16px; padding:12px 76px 12px 0; border-bottom-width:1px; }
.indice[data-vista="lista"] .indice-fila .ico{ width:36px; height:36px; font-size:16px; }
.indice[data-vista="lista"] .indice-fila .titulo{ width:auto; flex:1; min-width:0; font-size:16px; text-transform:none; letter-spacing:0; }
.indice[data-vista="lista"] .indice-fila .flecha{ font-size:18px; }
@media (max-width:700px){ .indice[data-vista="lista"] .indice-lista{ padding-left:8px; } }
@media (max-width:900px){ .indice[data-vista="lista"] .item-acciones{ top:50%; transform:translateY(-50%); } .indice[data-vista="lista"] .indice-fila{ flex-wrap:nowrap; } }

/* Cuadrícula más chica (02-11-2026): 5 por fila en el computador; sin bajada, la tarjeta no necesita tanto alto. */
.indice[data-vista="cuadricula"] .indice-lista{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.indice[data-vista="cuadricula"] .indice-fila{ min-height:118px; padding:18px 18px 20px; gap:8px; }
.indice[data-vista="cuadricula"] .indice-fila .ico{ width:40px; height:40px; }
.indice[data-vista="cuadricula"] .indice-fila .ico.glifo{ font-size:18px; }
.indice[data-vista="cuadricula"] .indice-fila .titulo{ font-size:15px; }
@media (max-width:1100px){ .indice[data-vista="cuadricula"] .indice-lista{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:860px){ .indice[data-vista="cuadricula"] .indice-lista{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:680px){ .indice[data-vista="cuadricula"] .indice-lista{ grid-template-columns:repeat(2,minmax(0,1fr)); } .indice[data-vista="cuadricula"] .indice-fila{ min-height:0; padding:16px; } }

/* Íconos dibujados (hoja, pantalla) dentro del mismo círculo que los símbolos (02-11-2026). */
.ico-dibujo{ width:1.05em; height:1.05em; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; display:block; }

/* Computador igual que el celular (02-11-2026): sin estrella ni manija; se arrastra tomando la tarjeta
   o la carpeta, y favoritos (y lo que venga) está en «⋯», que aparece al pasar el mouse. */
.item-acciones .fav, .item-acciones .asa, .asa-grupo{ display:none !important; }
.item-acciones .mas{ display:flex; }
html.pp-arrastrando, html.pp-arrastrando *{ cursor:grabbing !important; }
.indice-fila, .indice-nombre{ -webkit-user-drag:none; }
html.pp-arrastrando .indice{ user-select:none; -webkit-user-select:none; }

/* ═══ Portal Puelo Patagonia · barra lateral por áreas (05-11-2026) ═══════════
   Como PXsol: columna angosta con las áreas y, al lado, el panel con las
   secciones del área. Solo en computador; en el celular sigue el Menú. */
:root{ --riel:88px; --panel:252px; }
.lateral{ display:none; }
@media (min-width:901px){
  body.con-lateral{ padding-left:var(--riel); transition:padding-left .2s; }
  html.pp-panel-abierto body.con-lateral{ padding-left:calc(var(--riel) + var(--panel)); }
  body.con-lateral .menu-boton{ display:none; }
  .lateral{ display:flex; position:fixed; z-index:60; top:0; bottom:0; left:0; }
  .lateral-riel{ width:var(--riel); background:var(--bloque-oscuro); border-right:1px solid #2a2a2a; display:flex; flex-direction:column; align-items:stretch; gap:2px; padding:14px 8px; overflow-y:auto; }
  .riel-item{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:10px 4px; border-radius:10px; border:0; background:none; color:#B9BBB5; font:inherit; font-size:11px; line-height:1.15; text-align:center; text-decoration:none; cursor:pointer; }
  .riel-item svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  .riel-item:hover{ background:#262626; color:#fff; text-decoration:none; }
  .riel-item.actual,.riel-item.abierta{ background:#262626; color:#fff; }
  .riel-item.actual svg,.riel-item.abierta svg{ color:var(--rio); }
  .riel-item.riel-pronto span{ opacity:.75; }
  .riel-espacio{ flex:1; }
  .lateral-panel{ width:var(--panel); background:#1E1E1E; border-right:1px solid #2a2a2a; padding:18px 14px; overflow-y:auto; color:#EDEDE8; }
  .lateral-panel[hidden]{ display:none; }
  .panel-cab{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 6px 14px; border-bottom:1px solid #2e2e2e; margin-bottom:10px; }
  .panel-cab a{ color:#fff; font-size:17px; font-weight:600; text-decoration:none; }
  .panel-cab a:hover{ color:var(--rio); }
  .panel-cerrar{ width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid #333; background:none; color:#B9BBB5; cursor:pointer; }
  .panel-cerrar:hover{ border-color:var(--rio); color:var(--rio); }
  .panel-cerrar svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .panel-grupo{ margin:16px 6px 6px; font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#8E918A; }
  .panel-grupo.primero{ margin-top:6px; }
  .lateral-panel ul{ list-style:none; margin:0; padding:0; }
  .lateral-panel li a,.lateral-panel li .pronto{ display:flex; align-items:center; gap:10px; padding:8px 8px; border-radius:8px; color:#DADBD5; font-size:14px; text-decoration:none; }
  .lateral-panel li a:hover{ background:#2A2A2A; color:#fff; }
  .lateral-panel li a.actual{ background:var(--rio-tinte); color:#fff; }
  .lateral-panel li .ico{ width:26px; height:26px; flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:#2A2A2A; color:var(--rio); font-size:12px; }
  .lateral-panel li .ico svg{ width:15px; height:15px; }
  .lateral-panel li .pronto{ color:#7E837B; }
  .lateral-panel li .pronto em{ margin-left:auto; font-style:normal; font-size:10px; letter-spacing:.06em; text-transform:uppercase; }
  .panel-vacio{ margin:10px 6px; font-size:13.5px; line-height:1.55; color:#9BA096; }
}
/* Página de un área */
.area-grupo{ margin-bottom:34px; }
.area-grupo-nombre{ margin:0 0 12px; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--gris); }
.area-tarjetas{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }
.area-tarjeta{ display:flex; flex-direction:column; gap:8px; padding:18px; border:1px solid var(--linea); border-radius:12px; background:var(--fondo-tarjeta); color:var(--texto); text-decoration:none; transition:border-color .15s, transform .15s; }
a.area-tarjeta:hover{ border-color:var(--rio); transform:translateY(-2px); text-decoration:none; }
.area-tarjeta .ico{ width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:var(--rio-tinte); color:var(--rio); font-size:18px; }
.area-tarjeta .ico svg{ width:20px; height:20px; }
.area-tarjeta b{ font-size:15.5px; font-weight:600; }
.area-tarjeta .desc{ font-size:13px; line-height:1.5; color:var(--gris); }
.area-tarjeta.pronto{ opacity:.6; }
.area-vacia{ max-width:620px; padding:28px; border:1px solid var(--linea); border-radius:12px; background:var(--fondo-tarjeta); }
.area-vacia h2{ margin:0 0 8px; font-size:20px; }
.area-vacia p{ margin:0; color:var(--texto-2); line-height:1.6; }
/* Inicio · resumen del día (05-11-2026) */
.resumen{ display:grid; grid-template-columns:1.35fr 1fr; gap:16px; margin:6px 0 40px; }
.resumen-caja{ border:1px solid var(--linea); border-radius:14px; background:var(--fondo-tarjeta); padding:18px 20px; min-width:0; }
.resumen-caja h2{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:0 0 12px; font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--texto); }
.resumen-caja h2 a{ font-size:12px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--rio); }
.resumen-agenda{ grid-row:span 2; }
.resumen-vacio{ margin:4px 0; font-size:13.5px; color:var(--gris); }
.ag-bloque{ margin:14px 0 4px; font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--gris); }
.ag-bloque:first-child{ margin-top:0; }
.agenda-item{ display:grid; grid-template-columns:96px 1fr auto; gap:10px; align-items:center; padding:9px 4px; border-bottom:1px solid var(--linea); color:var(--texto); text-decoration:none; font-size:14px; }
.agenda-item:hover{ text-decoration:none; background:var(--fondo-suave); }
.ag-f{ font-size:12.5px; color:var(--gris); white-space:nowrap; }
.ag-t{ min-width:0; }
.ag-tipo{ font-size:10.5px; font-weight:600; padding:2px 9px; border-radius:50px; background:var(--fondo-suave); color:var(--gris); white-space:nowrap; }
.ag-tipo.t-evento,.ag-tipo.t-hito{ background:var(--rio-tinte); color:var(--rio); }
.resumen .mis-pendientes{ margin:0; }
.resumen .mis-pendientes h2{ margin-bottom:10px; }
.accesos{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.acceso{ position:relative; display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--linea); border-radius:10px; color:var(--texto); text-decoration:none; font-size:13.5px; }
.acceso:hover{ border-color:var(--rio); text-decoration:none; }
.acceso .ico{ width:30px; height:30px; flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:var(--rio-tinte); color:var(--rio); font-size:13px; }
.acceso .ico svg{ width:16px; height:16px; }
.acceso .fav{ margin-left:auto; font-style:normal; color:var(--rio); font-size:12px; }
.todas-titulo{ margin:0 0 4px; font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--gris); }
@media (max-width:900px){ .resumen{ grid-template-columns:1fr; } .resumen-agenda{ grid-row:auto; } .agenda-item{ grid-template-columns:78px 1fr; } .ag-tipo{ display:none; } }
@media (min-width:901px){ .resumen-agenda{ grid-row:span 3; } }
.resumen .mis-pend{ display:grid !important; grid-template-columns:1fr auto; column-gap:12px; row-gap:2px; align-items:center; padding:9px 4px; }
.resumen .mis-pend .q{ grid-column:1; grid-row:1; font-weight:500; }
.resumen .mis-pend .t{ grid-column:1; grid-row:2; font-size:12px; color:var(--gris); }
.resumen .mis-pend .f{ grid-column:2; grid-row:1 / 3; font-size:12px; white-space:nowrap; }
.resumen .mis-pendientes h2 button{ font-size:inherit; letter-spacing:inherit; text-transform:inherit; }
/* La barra lateral se despliega al pasar el mouse, encima del contenido (05-11-2026) */
@media (min-width:901px){
  html.pp-panel-abierto body.con-lateral{ padding-left:var(--riel); }
  .lateral-panel{ box-shadow:12px 0 32px rgba(0,0,0,.35); }
}

/* ═══ Inicio como tablero (05-11-2026) ═══ */
.tablero{ display:flex; flex-direction:column; gap:16px; margin:6px 0 44px; }
.kpis{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.kpi{ position:relative; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto auto; column-gap:14px; align-items:center; padding:18px 20px; border-radius:16px; background:var(--fondo-tarjeta); border:1px solid var(--linea); color:var(--texto); text-decoration:none; overflow:hidden; transition:transform .15s, border-color .15s; }
.kpi:hover{ transform:translateY(-2px); border-color:var(--rio); text-decoration:none; }
.kpi .k-ico{ grid-row:1 / 4; width:46px; height:46px; display:inline-flex; align-items:center; justify-content:center; border-radius:14px; background:var(--rio-tinte); color:var(--rio); }
.kpi .k-ico svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.kpi > span:not(.k-ico){ font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--gris); }
.kpi b{ font-size:30px; font-weight:600; line-height:1.1; color:var(--texto); }
.kpi small{ font-size:12.5px; color:var(--gris); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kpi .k-barra{ position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--fondo-suave); }
.kpi .k-barra i{ display:block; height:100%; background:var(--rio); }
.tablero-fila.dos{ display:grid; grid-template-columns:1.6fr 1fr; gap:16px; }
.caja{ border-radius:16px; background:var(--fondo-tarjeta); border:1px solid var(--linea); padding:20px 22px; min-width:0; }
.caja h2,.tablero .mis-pendientes h2{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:0 0 14px; font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--texto); }
.caja h2 a{ font-size:12px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--rio); }
.caja-vacia{ margin:6px 0; font-size:13.5px; color:var(--gris); }
/* Semana */
.semana{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; }
.dia{ display:flex; flex-direction:column; gap:5px; min-height:150px; padding:10px 8px; border-radius:12px; background:var(--fondo-suave); min-width:0; }
.dia.pasado{ opacity:.55; }
.dia.hoy{ background:var(--rio-tinte); box-shadow:inset 0 0 0 1.5px var(--rio); }
.dia-n{ font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--gris); }
.dia-num{ font-size:22px; font-weight:600; line-height:1; margin-bottom:4px; }
.dia.hoy .dia-num{ color:var(--rio); }
.ev{ display:block; padding:4px 7px; border-radius:6px; background:var(--fondo-tarjeta); border-left:3px solid var(--rio); font-size:11px; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ev.t-prensa{ border-left-color:var(--granito); } .ev.t-digital{ border-left-color:var(--neblina); } .ev.t-evento{ border-left-color:var(--terracota); }
.ev.mas{ border-left:0; background:none; color:var(--gris); }
.mes-chips{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:14px; }
.mes-chips:empty{ display:none; }
.mes-tit{ font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--gris); margin-right:4px; }
.mes-chip{ font-size:12px; padding:4px 10px; border-radius:50px; background:var(--fondo-suave); color:var(--texto-2); }
/* Pendientes dentro del tablero */
.tablero .mis-pendientes{ margin:0; border-radius:16px; background:var(--fondo-tarjeta); border:1px solid var(--linea); padding:20px 22px; }
.tablero .mis-pend{ display:grid !important; grid-template-columns:1fr auto; column-gap:12px; row-gap:2px; padding:10px 12px; margin-bottom:6px; border:0; border-radius:10px; background:var(--fondo-suave); }
.tablero .mis-pend .q{ grid-column:1; grid-row:1; font-weight:500; }
.tablero .mis-pend .t{ grid-column:1; grid-row:2; font-size:12px; color:var(--gris); }
.tablero .mis-pend .f{ grid-column:2; grid-row:1 / 3; font-size:12px; white-space:nowrap; padding:3px 9px; border-radius:50px; background:var(--fondo-tarjeta); }
.tablero .mis-pend .f.atr{ background:var(--terracota-tinte); color:var(--terracota); }
/* Fechas */
.fechas{ display:flex; flex-direction:column; gap:8px; }
.fecha{ display:flex; align-items:center; gap:14px; padding:8px; border-radius:12px; color:var(--texto); text-decoration:none; }
.fecha:hover{ background:var(--fondo-suave); text-decoration:none; }
.badge{ width:52px; height:56px; flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:12px; background:var(--rio); color:#fff; font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.badge b{ font-size:22px; line-height:1; letter-spacing:0; }
.fecha-t{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.fecha-t b{ font-size:14.5px; font-weight:500; }
.fecha-t small{ font-size:12px; color:var(--gris); }
/* Accesos en mosaico */
.caja-accesos .accesos{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.caja-accesos .acceso{ flex-direction:column; align-items:flex-start; gap:10px; padding:14px; border:0; border-radius:12px; background:var(--fondo-suave); }
.caja-accesos .acceso:hover{ background:var(--rio-tinte); }
.caja-accesos .acceso .ico{ width:38px; height:38px; font-size:16px; background:var(--fondo-tarjeta); }
.caja-accesos .acc-t{ font-size:13px; font-weight:500; line-height:1.3; }
.caja-accesos .acceso .fav{ position:absolute; top:10px; right:12px; }
@media (max-width:1100px){ .kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); } .tablero-fila.dos{ grid-template-columns:1fr; } }
@media (max-width:640px){ .semana{ grid-template-columns:repeat(7,minmax(64px,1fr)); overflow-x:auto; } .dia{ min-height:110px; } .caja-accesos .accesos{ grid-template-columns:repeat(2,minmax(0,1fr)); } .kpi b{ font-size:24px; } }

/* ═══ Celular: menú en cajón desde la izquierda, como Google Analytics (05-11-2026) ═══ */
.cajon-boton,.cajon{ display:none; }
@media (max-width:900px){
  .cajon-boton{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; margin:0 6px 0 -6px; border:0; border-radius:50%; background:none; color:#fff; cursor:pointer; }
  .cajon-boton svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
  .barra .menu-boton{ display:none !important; }
  .cajon{ display:block; position:fixed; inset:0; z-index:200; }
  .cajon[hidden]{ display:none; }
  .cajon-fondo{ position:absolute; inset:0; background:rgba(0,0,0,.55); opacity:0; transition:opacity .22s; }
  .cajon-panel{ position:absolute; top:0; bottom:0; left:0; width:min(84vw,340px); background:#232323; color:#EDEDE8; overflow-y:auto; transform:translateX(-100%); transition:transform .22s ease; padding:env(safe-area-inset-top) 0 calc(20px + env(safe-area-inset-bottom)); }
  .cajon.abierto .cajon-fondo{ opacity:1; }
  .cajon.abierto .cajon-panel{ transform:none; }
  html.pp-cajon-abierto{ overflow:hidden; }
  .cajon-logo{ display:flex; align-items:center; gap:10px; padding:18px 18px 16px; border-bottom:1px solid #353535; }
  .cajon-logo img{ height:26px; width:auto; }
  .cajon-logo span{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#B9BBB5; }
  .cajon-x{ margin-left:auto; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:50%; background:none; color:#B9BBB5; }
  .cajon-x svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
  .cajon-cuenta{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 18px; border-bottom:1px solid #353535; color:#fff; text-decoration:none; }
  .cajon-cuenta b{ display:block; font-size:16px; font-weight:500; }
  .cajon-cuenta small{ display:block; font-size:13px; color:#9BA096; margin-top:2px; }
  .cajon-cuenta svg{ width:20px; height:20px; fill:none; stroke:#B9BBB5; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .cajon-item{ display:flex; align-items:center; gap:22px; width:calc(100% - 12px); margin:4px 12px 0 0; padding:14px 18px; border:0; border-radius:0 50px 50px 0; background:none; color:#EDEDE8; font:inherit; font-size:16px; text-align:left; text-decoration:none; cursor:pointer; }
  .cajon-item > svg:first-child{ width:24px; height:24px; flex:none; fill:none; stroke:#B9BBB5; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  .cajon-item.actual{ background:var(--rio-tinte); color:#7FD3D1; }
  .cajon-item.actual > svg:first-child{ stroke:#7FD3D1; }
  .cajon-chev{ margin-left:auto; width:20px; height:20px; fill:none; stroke:#B9BBB5; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s; }
  .cajon-area.abierta .cajon-chev{ transform:rotate(180deg); }
  .cajon-etiqueta{ margin:18px 18px 4px; padding-top:14px; border-top:1px solid #353535; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#9BA096; }
  .cajon-sub{ padding:2px 0 8px 64px; }
  .cajon-sub a{ display:block; padding:10px 12px; border-radius:8px 0 0 8px; color:#DADBD5; font-size:15px; text-decoration:none; }
  .cajon-sub a.actual{ color:#7FD3D1; font-weight:500; }
  .cajon-sub .cajon-ver{ color:#7FD3D1; font-size:14px; }
  .cajon-vacio{ margin:4px 12px 8px; font-size:14px; color:#9BA096; }
  .cajon-panel hr{ border:0; border-top:1px solid #353535; margin:14px 0 6px; }
}
/* Íconos de las tarjetas de área, más grandes y claros (05-11-2026) */
.area-tarjeta .ico{ width:48px; height:48px; border-radius:14px; }
.area-tarjeta .ico svg{ width:24px; height:24px; stroke-width:1.7; }
/* Botón «Compartir» de cada sección y área, al lado de la X (05-11-2026) */
.kicker.ruta a.compartir-seccion{ margin:-8px 0 -8px auto; display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 14px 0 12px;
  border:1px solid currentColor; border-radius:50px; color:inherit; opacity:.8; font-size:11px; letter-spacing:.14em;
  transition:background .2s, border-color .2s, color .2s, opacity .2s; }
.kicker.ruta a.compartir-seccion svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.kicker.ruta a.compartir-seccion:hover{ opacity:1; background:var(--rio); border-color:var(--rio); color:#fff; }
.kicker.ruta a.compartir-seccion .pedidos{ min-width:18px; height:18px; padding:0 5px; border-radius:50px; background:var(--terracota); color:#fff; font-size:10.5px; letter-spacing:0; display:inline-flex; align-items:center; justify-content:center; }
.kicker.ruta a.compartir-seccion + .cerrar-seccion{ margin-left:8px; }
@media (max-width:560px){ .kicker.ruta a.compartir-seccion{ padding:0 10px; } .kicker.ruta a.compartir-seccion span{ display:none; } }
/* Foto de la persona en el círculo de la cuenta (05-11-2026) */
.iniciales.con-foto{ overflow:hidden; background:var(--fondo-suave); padding:0; }
.iniciales.con-foto img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }
.iniciales.con-foto{ box-shadow:0 0 0 2px var(--rio); }
/* Pantalla de ingreso con foto de Valle Cochamó (05-11-2026). Solo sombra arriba y abajo,
   para que el logo y el título se lean; el centro de la foto queda limpio. */
.ingreso .lado{
  background:
    linear-gradient(180deg, rgba(13,13,13,.62) 0%, rgba(13,13,13,0) 28%, rgba(13,13,13,0) 55%, rgba(13,13,13,.78) 100%),
    url(/img/ingreso-valle.jpg) center 38% / cover no-repeat var(--negro);
}
.ingreso .lado h1{ text-shadow:0 2px 18px rgba(0,0,0,.35); }
.ingreso .lado .nota{ color:rgba(255,255,255,.7); }
/* El recuadro de ingreso no es el panel lateral (.panel global): en el celular lo
   tapaba todo y escondía la foto, el logo y el título (05-11-2026). */
.ingreso .panel{ position:static; width:auto; border-left:0; z-index:auto; overflow:visible; }
/* Botón oficial de Google en el ingreso (05-11-2026) */
.ingreso .boton-google-oficial{ display:flex; justify-content:center; min-height:44px; margin:0 0 4px; }
/* Ingreso, versión A (05-11-2026): Valle Cochamó a pantalla completa, con el logo,
   «Portal Puelo Patagonia» y el recuadro al centro. Solo se entra con Google. */
.ingreso{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px;
  min-height:100vh; min-height:100dvh; padding:40px 18px;
  background:linear-gradient(180deg, rgba(13,13,13,.45) 0%, rgba(13,13,13,.15) 40%, rgba(13,13,13,.6) 100%),
             url(/img/ingreso-valle.jpg) center 38% / cover no-repeat #0D0D0D; }
.ingreso .lado{ background:none; padding:0; min-height:0; align-items:center; text-align:center; gap:14px; justify-content:flex-start; }
.ingreso .lado img{ width:160px; align-self:center; }
.ingreso .lado h1{ font-size:clamp(28px,4.4vw,52px); }
.ingreso .panel{ background:none; padding:0; width:100%; display:flex; justify-content:center; }
.ingreso .caja{ max-width:400px; background:rgba(33,33,33,.88); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:30px 28px; }
.ingreso .casilla-sola{ margin:14px 0 0; justify-content:center; }
.ingreso .ingreso-pista{ text-align:center; margin:12px 0 0; }
@media (max-width:820px){ .ingreso .lado{ padding:0; min-height:0; } .ingreso .panel{ padding:0; } }
@media (max-width:560px){ .ingreso{ gap:20px; padding:28px 16px; } .ingreso .lado img{ width:130px; } .ingreso .caja{ padding:24px 20px; } }
/* Ingreso: foto liviana (panorámica en computador ~350 KB, vertical en celular ~170 KB)
   y usuario + contraseña en una sola línea, más chicos (05-11-2026). */
@media (max-width:820px){
  .ingreso{ background-image:linear-gradient(180deg, rgba(13,13,13,.45) 0%, rgba(13,13,13,.15) 40%, rgba(13,13,13,.6) 100%), url(/img/ingreso-valle-celular.jpg); background-position:center 40%; }
}
.solo-lector{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.ingreso .ingreso-clave .ingreso-campos{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
.ingreso .ingreso-clave .campo{ margin:0; padding:10px 12px; font-size:14px; }
.ingreso .ingreso-clave .con-ojo{ margin:0; }
.ingreso .ingreso-clave .con-ojo .campo{ padding-right:40px; }
.ingreso .ingreso-clave .ojo{ width:32px; height:32px; right:4px; }
.ingreso .ingreso-clave .fila-entrar{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ingreso .ingreso-clave .casilla{ margin:0; font-size:13px; }
.ingreso .ingreso-clave .boton{ padding:10px 22px; font-size:11px; flex:none; }
.ingreso .separador-ingreso{ margin:16px 0 12px; font-size:12px; }
@media (max-width:330px){ .ingreso .ingreso-clave .ingreso-campos{ grid-template-columns:1fr; } }
/* Ingreso: el logo arriba de la página; «Portal Puelo Patagonia» y el recuadro al centro (05-11-2026). */
.ingreso{ position:relative; padding-top:120px; }
.ingreso .lado img{ position:absolute; top:36px; left:50%; transform:translateX(-50%); width:150px; margin:0; }
@media (max-width:560px){ .ingreso{ padding-top:96px; } .ingreso .lado img{ top:26px; width:120px; } }
/* Variante de prueba (05-11-2026, /?v=lado): texto e ingreso a la izquierda, foto a la derecha. */
.ingreso.v-lado{ display:grid; grid-template-columns:minmax(380px,520px) 1fr; grid-template-rows:auto 1fr; align-items:start;
  gap:0; padding:0; min-height:100vh; min-height:100dvh; background:#191919; }
.ingreso.v-lado::after{ content:""; grid-column:2; grid-row:1 / 3; align-self:stretch;
  background:linear-gradient(90deg, rgba(25,25,25,.35), rgba(25,25,25,0) 18%), url(/img/ingreso-valle.jpg) center 45% / cover no-repeat; }
.ingreso.v-lado .lado{ grid-column:1; grid-row:1; align-items:flex-start; text-align:left; padding:40px 56px 0; gap:0; }
.ingreso.v-lado .lado img{ position:static; transform:none; width:140px; margin:0 0 clamp(48px,14vh,140px); }
.ingreso.v-lado .lado h1{ font-size:clamp(30px,3.2vw,44px); text-shadow:none; margin:0 0 10px; }
.ingreso.v-lado .lado .nota{ color:var(--gris-claro, #9A9A95); }
.ingreso.v-lado .panel{ grid-column:1; grid-row:2; justify-content:flex-start; padding:28px 56px 48px; }
.ingreso.v-lado .caja{ background:none; border:0; padding:0; -webkit-backdrop-filter:none; backdrop-filter:none; max-width:380px; }
@media (max-width:820px){
  .ingreso.v-lado{ grid-template-columns:1fr; grid-template-rows:34vh auto auto; }
  .ingreso.v-lado::after{ grid-column:1; grid-row:1; background-image:linear-gradient(180deg, rgba(25,25,25,0) 60%, #191919), url(/img/ingreso-valle-celular.jpg); background-position:center 40%; }
  .ingreso.v-lado .lado{ grid-row:2; padding:0 20px; margin-top:-56px; position:relative; z-index:1; }
  .ingreso.v-lado .lado img{ position:absolute; top:-30vh; left:20px; width:120px; margin:0; }
  .ingreso.v-lado .panel{ grid-row:3; padding:20px 20px 40px; }
}
@media (max-width:820px){
  .ingreso.v-lado{ position:relative; align-content:start; }
  .ingreso.v-lado .lado{ position:static; }
  .ingreso.v-lado .lado img{ position:absolute; top:22px; left:20px; z-index:2; }
}
/* ═══ Ingreso, versión final (05-11-2026) ═══════════════════════════════════
   Izquierda: columna oscura con el logo arriba, «Portal Puelo Patagonia» al medio
   y «Uso interno» abajo. Derecha: Valle Cochamó de fondo y el recuadro encima.
   Este bloque manda sobre las pruebas anteriores del ingreso. */
.ingreso{ display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1fr); min-height:100vh; min-height:100dvh;
  padding:0; gap:0; background:#0D0D0D; position:static; align-items:stretch; justify-content:stretch; }
.ingreso .lado{ background:#0D0D0D; padding:56px 48px; display:flex; flex-direction:column; justify-content:space-between;
  align-items:flex-start; text-align:left; gap:40px; min-height:0; }
.ingreso .lado img{ position:static; transform:none; width:170px; margin:0; align-self:flex-start; }
.ingreso .lado h1{ font-size:clamp(30px,3.8vw,60px); text-shadow:none; }
.ingreso .lado .nota{ color:rgba(255,255,255,.45); }
.ingreso .panel{ display:flex; align-items:center; justify-content:center; padding:48px 32px;
  background:linear-gradient(180deg, rgba(13,13,13,.25), rgba(13,13,13,.1) 45%, rgba(13,13,13,.45)),
             url(/img/ingreso-valle-celular.jpg) center 40% / cover no-repeat #191919; }
.ingreso .caja{ max-width:400px; background:rgba(28,28,28,.9); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:30px 28px; }
@media (max-width:820px){
  .ingreso{ grid-template-columns:1fr; }
  .ingreso .lado{ padding:28px 20px 24px; gap:18px; }
  .ingreso .lado img{ width:130px; }
  .ingreso .lado h1{ font-size:clamp(24px,7.2vw,32px); }
  .ingreso .panel{ padding:28px 16px 40px; align-items:flex-start; }
}
@media (max-width:560px){ .ingreso .caja{ padding:24px 20px; } }
/* Google Calendar de la persona en el inicio (05-11-2026) */
.gcal-barra{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:-4px 0 12px; }
.gcal-barra .boton{ padding:9px 16px; }
.gcal-estado{ font-size:12px; color:var(--gris); }
.semana .ev.t-google{ background:none; border:1px solid var(--rio); color:var(--texto); }
/* Edición de usuario desplegada bajo la fila: más compacta (05-11-2026) */
.tabla-usuarios .fila.cargando{ opacity:.6; transition:opacity .15s; }
.tabla-usuarios .despliegue{ will-change:height; }
.tabla-usuarios .formulario-usuario.en-fila{ padding:16px 20px 18px; }
.tabla-usuarios .formulario-usuario.en-fila h2{ font-size:14px; letter-spacing:.12em; margin:0 0 10px; }
.tabla-usuarios .formulario-usuario.en-fila .ayuda{ display:none; }
.tabla-usuarios .formulario-usuario.en-fila .dos-col{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:0 12px; align-items:start; }
.tabla-usuarios .formulario-usuario.en-fila .dos-col > div{ min-width:0; }
.tabla-usuarios .formulario-usuario.en-fila .dos-col label.etiqueta{ margin:4px 0 5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tabla-usuarios .formulario-usuario.en-fila .opcional{ display:none; }
.tabla-usuarios .formulario-usuario.en-fila .pista-correo{ display:none; }
.tabla-usuarios .formulario-usuario.en-fila .fila-clave{ gap:6px; margin:0; }
.tabla-usuarios .formulario-usuario.en-fila .fila-clave .campo{ min-width:0; padding:8px; }
.tabla-usuarios .formulario-usuario.en-fila .fila-clave button{ padding:0 10px; font-size:10px; }
/* Ficha (correo, teléfono, último ingreso) en una sola línea, sin caja */
.tabla-usuarios .formulario-usuario.en-fila .ficha-usuario{ display:flex; flex-wrap:wrap; gap:4px 18px; margin:-4px 0 10px; padding:0; border:0; background:none; font-size:12.5px; color:var(--gris); }
.tabla-usuarios .formulario-usuario.en-fila .ficha-usuario dt{ font-size:9.5px; letter-spacing:.12em; margin-right:-12px; }
.tabla-usuarios .formulario-usuario.en-fila .ficha-usuario dd{ color:var(--texto); }
.tabla-usuarios .formulario-usuario.en-fila .ficha-usuario .nada{ color:var(--gris); }
.tabla-usuarios .formulario-usuario.en-fila .dos-col > div:nth-child(n+3) label.etiqueta{ margin-top:0; }
.tabla-usuarios .formulario-usuario.en-fila label.etiqueta{ margin:10px 0 5px; font-size:10px; }
.tabla-usuarios .formulario-usuario.en-fila .campo{ padding:8px 10px; font-size:14px; margin-bottom:6px; }
.tabla-usuarios .formulario-usuario.en-fila .pista{ font-size:11.5px; margin:2px 0 0; }
.tabla-usuarios .formulario-usuario.en-fila .ve-grupos{ grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px; margin-bottom:14px; }
.tabla-usuarios .formulario-usuario.en-fila .ve-grupos .extra{ padding:5px 10px; font-size:13px; }
.tabla-usuarios .formulario-usuario.en-fila .opciones{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:8px; margin-bottom:14px; }
.tabla-usuarios .formulario-usuario.en-fila > .boton.ancho{ display:inline-flex; width:auto; margin:0 8px 0 0 !important; padding:11px 22px; }
/* Usuarios a lo ancho, como en WordPress: «+ Nuevo usuario» y «Editar» se despliegan en la lista (05-11-2026) */
.panel-admin{ grid-template-columns:1fr; max-width:980px; }
.buscar-usuarios{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.buscar-usuarios .buscador{ flex:1 1 260px; }
.nuevo-usuario .formulario-usuario{ margin:0 0 14px; }
/* Despliegues de todo el portal (partes/despliegue.js, 05-11-2026) */
.despliegue[hidden], .formulario-contenido[hidden], .nuevo-perfil[hidden]{ display:none; }
.lista-edicion .despliegue{ will-change:height; }
.lista-edicion .fila.cargando{ opacity:.6; transition:opacity .15s; }
.nuevo-perfil .formulario-contenido{ margin:0 0 16px; }
/* Cabecera: Compartir (solo ícono), botones de la página y X juntos (05-11-2026) */
.kicker.ruta a.compartir-seccion{ width:36px; padding:0; justify-content:center; border-radius:50%; position:relative; }
.kicker.ruta a.compartir-seccion span{ display:none; }
.kicker.ruta a.compartir-seccion .pedidos{ position:absolute; top:-5px; right:-5px; }
.cabecera-cat .aparte.con-acciones{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-right:0 !important; }
.cabecera-cat .aparte.con-acciones .cerrar-seccion,
.cabecera-cat .aparte.con-acciones .compartir-seccion{ position:static; margin:0; flex:none; }
.cabecera-cat .aparte.con-acciones a.compartir-seccion{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; border:1px solid currentColor; color:#fff; opacity:.7; position:relative; transition:background .15s, border-color .15s, opacity .15s; }
.cabecera-cat .aparte.con-acciones a.compartir-seccion:hover{ opacity:1; background:var(--rio); border-color:var(--rio); }
.cabecera-cat .aparte.con-acciones a.compartir-seccion svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.cabecera-cat .aparte.con-acciones a.compartir-seccion span{ display:none; }
.cabecera-cat .aparte.con-acciones a.compartir-seccion .pedidos{ position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 5px; border-radius:50px; background:var(--terracota); color:#fff; font-size:10.5px; display:inline-flex; align-items:center; justify-content:center; }
.cabecera-cat .aparte.con-acciones .cerrar-seccion{ width:40px; height:40px; color:#fff; }
.cabecera-cat .aparte.con-acciones .compartir-seccion{ margin-left:6px; }
/* «+ Agregar contenido»: menú como el «+ Nuevo» de Drive */
.menu-agregar{ position:relative; }
.menu-agregar > summary{ list-style:none; cursor:pointer; }
.menu-agregar > summary::-webkit-details-marker{ display:none; }
.menu-agregar-lista{ position:absolute; right:0; top:calc(100% + 8px); z-index:30; min-width:190px; padding:6px; background:var(--fondo-tarjeta); border:1px solid var(--linea); border-radius:var(--radio); box-shadow:0 12px 32px rgba(0,0,0,.28); display:flex; flex-direction:column; animation:pp-menu-in .18s cubic-bezier(.2,.8,.2,1); }
.menu-agregar-lista a{ padding:10px 14px; border-radius:8px; color:var(--texto); text-decoration:none; font-size:14px; transition:background .12s; }
.menu-agregar-lista a:hover{ background:var(--fondo-suave); color:var(--rio); }
@keyframes pp-menu-in{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .menu-agregar-lista{ animation:none; } }
/* En el celular los botones bajan bajo el título, pero la X se queda arriba a la derecha, donde la busca el pulgar. */
@media (max-width:820px){
  .cabecera-cat .aparte.con-acciones .cerrar-seccion{ position:absolute; top:-8px; right:22px; margin:0; }
}
@media (max-width:420px){ .cabecera-cat .aparte.con-acciones .cerrar-seccion{ right:16px; } }
/* Botones de la cabecera, en todo el portal (05-11-2026): sin relleno, todos iguales.
   Solo contorno; al pasar el mouse, el contorno y el texto se ponen turquesa. */
.cabecera-cat .aparte .boton,
.cabecera-cat .aparte .menu-agregar > summary.boton,
.cabecera-cat a.compartir-seccion,
.cabecera-cat .cerrar-seccion{
  background:transparent !important; color:#fff !important; border:1px solid rgba(255,255,255,.4) !important; opacity:1;
  transition:border-color .18s, color .18s, transform .18s;
}
.cabecera-cat .aparte .boton:hover,
.cabecera-cat .aparte .menu-agregar[open] > summary.boton,
.cabecera-cat a.compartir-seccion:hover,
.cabecera-cat .cerrar-seccion:hover{
  background:transparent !important; color:var(--rio) !important; border-color:var(--rio) !important;
}