/* ==========================================================================
   Parcemasa – Tema común (claro / oscuro) · estilo web corporativo
   Tarea #216. Uso: <html class="pm" data-theme="claro|oscuro">
   La cabecera es siempre oscura. Todo selector va acotado bajo .pm (ver
   docs/diseno/GUIA-ESTILOS.md §6) para que, si esta hoja se cargara por
   error en una pantalla antigua, no le afecte en nada.
   Basado en docs/diseno/parcemasa-tema.css (entrega de diseño).
   ========================================================================== */

@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/poppins-700.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/roboto-variable.woff2') format('woff2'); }

/* ---------- Tokens de página ---------- */
/* ".pm" a secas (no ":root.pm"): así funciona también cuando ".pm" no va en
   <html> sino en un <div> que envuelve solo parte de la página — caso de
   natus/control/ (Salas), donde la cuadrícula ANTIGUA no debe heredar nada
   de este sistema (ni los tokens, ni el fondo de <body>) y solo la cabecera
   nueva va dentro de ese <div class="pm">. En el resto de pantallas, con
   ".pm" en <html>, se comporta exactamente igual que antes. */
.pm{
  --escala:1;
  --bg:#edf1ec; --txt:#1e2a22; --muted:#5f6b61; --accent:#0e4a24; --on-accent:#fff; --linea:#dde4db;
  /* paneles, formularios, modales */
  --p-bg:#fff; --p-txt:#1e2a22; --p-muted:#5f6b61; --p-line:#dfe6dd; --p-input:#f3f6f2; --p-input-line:#d4dcd2;
  --p-accent:#0e4a24; --p-th:#f1f5f0; --p-hover:#f4f8f2; --p-shadow:0 1px 2px rgba(0,0,0,.06),0 3px 12px rgba(0,0,0,.10);
  /* semánticos */
  --traslado:#1f7a6d; --cremacion:#a4540c; --inhumacion:#2b5ea8; --activo:#4f8a1f; --alerta:#c62828;
  /* tipos del directorio */
  --t-empleado:#0e4a24; --t-puesto:#5b7bb0; --t-tanatosala:#c0567e; --t-funeraria:#8a5cc2; --t-externo:#c7812a;
  /* tipo de acceso y rol (usuarios) */
  --acc-local:#6b5f52; --acc-microsoft:#1565c0;
  --rol-sin:#707070; --rol-control:#2f6fa5; --rol-contratacion:#b5760e; --rol-admin:#a4243b;
  --rol-limpieza:#0f7a6b; --rol-capilla:#6b3fa0; --rol-administracion:#8a7215; --rol-trabajador:#3949ab; --rol-psicologia:#a13d7c;
  /* área (teléfonos) */
  --area-gerencia:#6b3fa0; --area-administracion:#2f6fa5; --area-contratacion:#0f7a6b; --area-servicios:#4f8a1f;
  --area-rrhh:#a13d7c; --area-mantenimiento:#c7812a; --area-el-parque:#8a7215; --area-calidad:#b5760e;
  --area-ti:#3949ab; --area-psicologia:#8a5cc2; --area-externos:#707070;
  /* restos: tipo y receptor de cenizas */
  --tr-difunto:#2b5ea8; --tr-restos:#c7812a; --tr-miembro:#4f8a1f; --tr-feto:#a13d7c;
  --rec-responsable:#4f8a1f; --rec-autorizado:#2b5ea8; --rec-funeraria:#c7812a;
  /* auditoría: acción (CREATE/DELETE reutilizan --activo/--alerta) */
  --aud-update:#2f6fa5; --aud-accion:#b5760e;
  /* fijos */
  --cab:#0e4a24; --cab-line:rgba(255,255,255,.22); --cab-txt:#f3f6f2; --cab-muted:#dbe9dc; --cab-accent:#8cc63f;
  --radio:8px; --radio-card:10px; --radio-modal:12px;
  font-family:Roboto,"Segoe UI",Arial,sans-serif;
}
.pm[data-theme=oscuro]{
  --bg:#262626; --txt:#f3f6f2; --muted:#d9ddd8; --accent:#8cc63f; --on-accent:#1e2a22; --linea:#5a5a5a;
  --p-bg:#333333; --p-txt:#f3f6f2; --p-muted:#dbe9dc; --p-line:rgba(255,255,255,.45); --p-input:#2a2a2a; --p-input-line:#555555;
  --p-accent:#8cc63f; --p-th:#2a2a2a; --p-hover:#3d3d3d; --p-shadow:0 6px 18px rgba(0,0,0,.28);
  --traslado:#6fcab8; --cremacion:#f39c3d; --inhumacion:#8fb8ff; --activo:#a5d86b; --alerta:#e57373;
  --t-empleado:#8cc63f; --t-puesto:#8fa9d9; --t-tanatosala:#e889ad; --t-funeraria:#b596e0; --t-externo:#f0b060;
  --acc-local:#c9bba9; --acc-microsoft:#64b5f6;
  --rol-sin:#b5bdb8; --rol-control:#7fb3e8; --rol-contratacion:#f2b84d; --rol-admin:#e8748a;
  --rol-limpieza:#5fd0bc; --rol-capilla:#c9a3ec; --rol-administracion:#d9c05a; --rol-trabajador:#a6b1f0; --rol-psicologia:#e896c9;
  --area-gerencia:#c9a3ec; --area-administracion:#7fb3e8; --area-contratacion:#5fd0bc; --area-servicios:#a5d86b;
  --area-rrhh:#e896c9; --area-mantenimiento:#f0b060; --area-el-parque:#d9c05a; --area-calidad:#f2b84d;
  --area-ti:#a6b1f0; --area-psicologia:#b596e0; --area-externos:#b5bdb8;
  --tr-difunto:#8fb8ff; --tr-restos:#f0b060; --tr-miembro:#a5d86b; --tr-feto:#e896c9;
  --rec-responsable:#a5d86b; --rec-autorizado:#8fb8ff; --rec-funeraria:#f0b060;
  --aud-update:#7fb3e8; --aud-accion:#f2b84d;
}

/* Tamaño de letra (tarea #217): multiplicador aplicado a todos los
   font-size del fichero vía calc(Npx * var(--escala)) — con --escala:1
   (pequeño, el por defecto) el resultado es exactamente el px de siempre,
   cero cambio visual para quien no elija nada. */
.pm[data-tamano=mediano]{ --escala:1.125; }
.pm[data-tamano=grande]{ --escala:1.25; }

.pm, .pm *{box-sizing:border-box}
.pm body{margin:0;background:var(--bg);color:var(--txt);min-height:100vh;transition:background .2s}
/* Base para cualquier <a> suelto (tablas, fichas, texto...) — los
   componentes con su propio estilo de enlace (.cab-btn, .b-pri/.b-sec,
   .miga a, .tab...) son más específicos y siguen ganando por encima de
   esta regla, tal como ya pasaba antes de que existiera. */
.pm a{color:var(--p-accent);text-decoration:none;font-weight:600}
.pm a:hover{text-decoration:underline}
/* El pie "PARCEMASA - 2026" (v2/templates/footer.php) es de antes de esta
   tarea (v2/assets/styles.css: fondo blanco fijo) — se ve como una franja
   blanca en tema oscuro. Aquí se hereda del fondo de página en vez de fijo. */
.pm .footer{background:var(--bg);color:var(--muted);border-top:1px solid var(--linea);box-shadow:none;
  padding:12px 24px;font-size:calc(12px * var(--escala));text-align:right}
.pm ::selection{background:var(--accent);color:var(--on-accent)}
.pm svg.i{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- Cabecera (siempre oscura) ---------- */
.pm .cab{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:18px;height:58px;padding:0 20px;
  background:var(--cab);color:var(--cab-txt);border-bottom:1px solid var(--cab-line);box-shadow:0 2px 8px rgba(0,0,0,.25)}
.pm .cab-logo{display:flex;align-items:center;background:#fff;border-radius:6px;padding:4px 8px;flex:none}
.pm .cab-sep{width:1px;height:26px;background:var(--cab-line);flex:none}
.pm .cab-nav{display:flex;align-items:center;gap:2px;flex:1;min-width:0}
.pm .cab-btn{position:relative;display:flex;align-items:center;gap:7px;height:38px;padding:0 12px;border-radius:var(--radio);
  color:var(--cab-muted);font-size:calc(13.5px * var(--escala));font-weight:500;text-decoration:none;white-space:nowrap;
  background:transparent;border:0;cursor:pointer;font-family:inherit;appearance:none;-webkit-appearance:none}
.pm .cab-btn:hover{background:rgba(255,255,255,.12);color:var(--cab-txt)}
.pm .cab-btn.activo{color:#fff;background:rgba(255,255,255,.16)}
.pm .cab-btn.activo::after{content:"";position:absolute;left:12px;right:12px;bottom:-10px;height:3px;border-radius:3px 3px 0 0;background:var(--cab-accent)}
.pm .cab-badge{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#f39c3d;color:#1b1b1b;font-size:calc(11px * var(--escala));font-weight:700;display:grid;place-items:center}
.pm .cab-badge[hidden]{display:none}
.pm .cab-der{display:flex;align-items:center;gap:8px;margin-left:auto;flex:none}
.pm .cab-avatar{width:30px;height:30px;border-radius:50%;background:var(--cab-accent);color:#12361d;font-weight:700;font-size:calc(12px * var(--escala));display:grid;place-items:center}
.pm .cab-ico{width:32px;height:32px;border-radius:var(--radio);display:grid;place-items:center;color:var(--cab-muted);background:transparent;border:0;cursor:pointer}
.pm .cab-ico.tema{border:1px solid var(--cab-line)}
.pm .cab-ico:hover{background:rgba(255,255,255,.08);color:#fff}
.pm .tema .sol{display:none}
.pm[data-theme=oscuro] .tema .sol{display:block}
.pm[data-theme=oscuro] .tema .luna{display:none}

.pm .cab-tamano{display:flex;align-items:center;border:1px solid var(--cab-line);border-radius:var(--radio);overflow:hidden}
.pm .cab-tamano-btn{width:30px;height:32px;display:grid;place-items:center;color:var(--cab-muted);background:transparent;border:0;
  border-right:1px solid var(--cab-line);cursor:pointer;font-weight:700;font-family:inherit;line-height:1}
.pm .cab-tamano-btn:last-child{border-right:0}
.pm .cab-tamano-btn.pequeno{font-size:11px}
.pm .cab-tamano-btn.grande{font-size:16px}
.pm .cab-tamano-btn:hover{background:rgba(255,255,255,.08);color:#fff}
.pm .cab-tamano-btn.activo{background:var(--cab-accent);color:#12361d}

/* Grupos desplegables del menú (tarea #279, assets/pm/menu.js). Nombres propios
   (.cab-menu, .cab-submenu…): la cabecera también se pinta junto a Bootstrap 3 en Salas. */
.pm .cab-menu{position:relative;display:flex}
.pm .cab-menu-btn .flecha{width:14px;height:14px;transition:transform .15s}
.pm .cab-menu-btn[aria-expanded=true]{background:rgba(255,255,255,.12);color:var(--cab-txt)}
.pm .cab-menu-btn[aria-expanded=true] .flecha{transform:rotate(180deg)}
.pm .cab-submenu{position:absolute;top:calc(100% + 10px);left:0;z-index:30;min-width:230px;padding:6px;
  display:flex;flex-direction:column;gap:2px;background:var(--p-bg);border:1px solid var(--p-line);
  border-radius:var(--radio-card);box-shadow:var(--p-shadow)}
.pm .cab-submenu[hidden]{display:none}
.pm .cab-subitem{display:flex;align-items:center;gap:10px;height:38px;padding:0 12px;border-radius:var(--radio);
  color:var(--p-txt);font-size:calc(13.5px * var(--escala));font-weight:500;text-decoration:none;white-space:nowrap}
.pm .cab-subitem .i{width:18px;height:18px;color:var(--p-muted)}
.pm .cab-subitem:hover,.pm .cab-subitem:focus-visible{background:var(--p-hover);text-decoration:none;outline:none}
.pm .cab-subitem.activo{color:var(--p-accent);font-weight:600;background:color-mix(in srgb,var(--p-accent) 12%,transparent)}
.pm .cab-subitem.activo .i{color:var(--p-accent)}

/* Pantallas estrechas: la navegación se pliega tras el botón de menú. */
.pm .cab-hamburguesa{display:none}
@media (max-width:760px){
  .pm .cab-hamburguesa{display:grid;order:-1}
  .pm .cab-nav{display:none;position:absolute;top:58px;left:0;right:0;z-index:30;flex-direction:column;align-items:stretch;
    gap:2px;padding:10px;background:var(--cab);border-bottom:1px solid var(--cab-line);box-shadow:0 8px 16px rgba(0,0,0,.25)}
  .pm .cab-nav.abierta{display:flex}
  .pm .cab-nav .cab-btn .lbl{display:inline}
  .pm .cab-nav .cab-btn.activo::after{display:none}
  .pm .cab-nav .cab-sep{width:auto;height:1px;margin:6px 0}
  .pm .cab-menu{flex-direction:column}
  .pm .cab-submenu{position:static;min-width:0;margin:2px 0 4px 18px;box-shadow:none}
}

/* Cabecera que no cabe a su ancho (muchos botones, p. ej. Salas): menu.js le pone .cab-apretada
   (botones más estrechos, con su texto), .cab-compacta (solo iconos) o, si aun así no cabe,
   .cab-plegada (como en pantallas estrechas), lo primero que baste. */
.pm .cab.cab-apretada .cab-btn{gap:4px;padding:0 7px}
.pm .cab.cab-apretada .cab-btn.activo::after{left:7px;right:7px}
.pm .cab.cab-compacta .cab-btn .lbl{display:none}
.pm .cab.cab-plegada .cab-hamburguesa{display:grid;order:-1}
.pm .cab.cab-plegada .cab-nav{display:none;position:absolute;top:58px;left:0;right:0;z-index:30;flex-direction:column;align-items:stretch;
  gap:2px;padding:10px;background:var(--cab);border-bottom:1px solid var(--cab-line);box-shadow:0 8px 16px rgba(0,0,0,.25)}
.pm .cab.cab-plegada .cab-nav.abierta{display:flex}
.pm .cab.cab-plegada .cab-nav .cab-btn .lbl{display:inline}
.pm .cab.cab-plegada .cab-nav .cab-btn.activo::after{display:none}
.pm .cab.cab-plegada .cab-nav .cab-sep{width:auto;height:1px;margin:6px 0}
.pm .cab.cab-plegada .cab-menu{flex-direction:column}
.pm .cab.cab-plegada .cab-submenu{position:static;min-width:0;margin:2px 0 4px 18px;box-shadow:none}

/* ---------- Botones ---------- */
.pm .b-pri,.pm .b-sec{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:999px;font:inherit;font-size:calc(13.5px * var(--escala));font-weight:600;cursor:pointer}
.pm .b-pri{background:var(--accent);color:var(--on-accent);border:0}
.pm .b-sec{background:#fff;border:1.5px solid var(--accent);color:var(--accent);box-shadow:none}
.pm .b-sec:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.pm[data-theme=oscuro] .b-sec{background:transparent;border-color:#8cc63f;color:#b5dc86}
.pm[data-theme=oscuro] .b-sec:hover{background:#8cc63f;color:#1c1c1c}
.pm .b-ico{width:34px;height:34px;border-radius:7px;display:grid;place-items:center;border:0;background:transparent;color:var(--p-muted);cursor:pointer;font-size:calc(18px * var(--escala));line-height:1}
.pm .b-ico svg.i{width:20px;height:20px}
.pm .b-ico:hover{background:var(--p-hover);color:var(--p-txt)}
.pm .b-ico.borrar:hover{background:rgba(229,115,115,.16);color:var(--alerta)}
.pm .panel .b-pri{background:var(--p-accent)}

/* ---------- Paneles / tarjetas ---------- */
.pm .panel{background:var(--p-bg);color:var(--p-txt);border:1px solid var(--p-line);border-radius:var(--radio-card);box-shadow:var(--p-shadow)}
.pm .panel.pad{padding:20px}
.pm .panel-cab{display:flex;align-items:center;gap:10px;padding:14px 18px;font-size:calc(14px * var(--escala));font-weight:600;border-bottom:2px solid rgba(111,174,42,.55)}

/* ---------- Formularios ---------- */
.pm .campo{display:flex;flex-direction:column;gap:6px}
.pm .campo label,.pm .etq{font-size:calc(13px * var(--escala));font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:var(--p-muted)}
.pm .campo input,.pm .campo select,.pm .campo textarea{height:44px;width:100%;border-radius:var(--radio);border:1px solid var(--p-input-line);
  background:var(--p-input);color:var(--p-txt);padding:0 12px;font:inherit;font-size:calc(16px * var(--escala));outline:none}
.pm .campo textarea{height:auto;min-height:96px;padding:10px 11px;resize:vertical}
.pm .campo input:focus,.pm .campo select:focus,.pm .campo textarea:focus{background:var(--p-bg);border-color:var(--p-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--p-accent) 18%,transparent)}
.pm[data-theme=oscuro] .campo input,.pm[data-theme=oscuro] .campo select{color-scheme:dark}

/* ---------- Campos deshabilitados / solo lectura ---------- */
/* Activo: relleno gris suave + borde visible + reacciona al ratón y al foco.
   Deshabilitado: sin borde, texto atenuado, rayado sutil, cursor prohibido.
   Solo lectura (ID, fecha de alta…): se muestra como texto, con .solo. */
.pm .campo input:disabled,.pm .campo select:disabled,.pm .campo textarea:disabled{
  border-color:transparent;color:var(--p-muted);opacity:.75;cursor:not-allowed;
  background:repeating-linear-gradient(135deg,transparent 0 6px,rgba(127,160,150,.10) 6px 7px),var(--p-input)}
.pm .campo:has(:disabled) label::after{content:" · no editable";text-transform:none;letter-spacing:0;font-weight:500;opacity:.8}
.pm .solo{min-height:44px;display:flex;align-items:center;font-size:calc(16px * var(--escala));font-weight:600;color:var(--p-txt)}

/* ---------- Avisos (mensajes flash + errores de validación) ---------- */
/* Antes vivían en v2/assets/styles.css (retirado tras el paso 3 de la
   tarea #216 al comprobar que ninguna otra clase suya seguía en uso) —
   reescritos aquí con los tokens semánticos, ya con soporte de tema. */
.pm .alert{--c:var(--p-accent);position:relative;display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:14px 18px;margin-bottom:18px;border-radius:var(--radio-card);font-size:calc(15px * var(--escala));font-weight:700;
  border-left:6px solid var(--c);background:color-mix(in srgb,var(--c) 26%,var(--p-bg));color:var(--p-txt);
  box-shadow:var(--p-shadow)}
.pm .alert.success{--c:var(--activo)}
.pm .alert.error{--c:var(--alerta)}
.pm .alert.warning{--c:var(--cremacion)}
.pm .alert.info{--c:var(--inhumacion)}
.pm .alert-close{background:none;border:0;font-size:calc(20px * var(--escala));line-height:1;color:inherit;cursor:pointer;opacity:.65}
.pm .alert-close:hover{opacity:1}
.pm .required-marker{color:var(--alerta);margin-left:2px;font-weight:700}
.pm .required-marker.is-hidden{display:none}

/* ---------- Indicador de orden (cabeceras de tabla) ---------- */
.pm .sort-indicator{font-size:calc(11px * var(--escala));margin-left:4px;opacity:.7}
.pm .sort-indicator.muted{opacity:.4}

/* ---------- Selector de filas por página ---------- */
.pm .per-page-form{display:flex;align-items:center;gap:6px}
.pm .per-page-form select{height:32px;padding:2px 6px;border-radius:var(--radio);border:1px solid var(--p-input-line);
  background:var(--p-input);color:var(--p-txt)}

/* ---------- Tablas ---------- */
.pm .tabla{width:100%;border-collapse:collapse;font-size:calc(13.5px * var(--escala))}
.pm .tabla th{position:sticky;top:0;text-align:left;font-size:calc(11.5px * var(--escala));font-weight:600;letter-spacing:.4px;text-transform:uppercase;
  color:var(--p-muted);padding:11px 12px;background:var(--p-th);white-space:nowrap;border-bottom:2px solid #6fae2a}
.pm .tabla td{padding:9px 12px;border-bottom:1px solid var(--p-line);white-space:nowrap}
.pm .tabla tbody tr:nth-child(even){background:#f4f7f5}
.pm[data-theme=oscuro] .tabla tbody tr:nth-child(even){background:rgba(255,255,255,.04)}
.pm .tabla tbody tr:hover{background:#e6f0ec}
.pm[data-theme=oscuro] .tabla tbody tr:hover{background:rgba(111,174,42,.12)}
.pm .tabla tbody tr.fila-actual{font-weight:600;box-shadow:inset 3px 0 0 var(--p-accent)}

/* ---------- Texto de ayuda / sin datos ---------- */
.pm .ayuda{font-size:calc(13px * var(--escala));color:var(--p-muted)}
.pm .campo .ayuda{margin:4px 0 0}

/* ---------- Pastillas / etiquetas con punto ---------- */
/* .badge (generado por core/renderer.php para type=>'badge' en v2/) recibe
   este aspecto de pastilla por defecto aunque el módulo no declare 'tag' en
   su map — así ningún badge se queda sin estilo en pantallas .pm. Si además
   lleva la clase semántica .tag.<valor>, esa gana el color (va después). */
.pm .badge{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:11px;font-size:calc(12px * var(--escala));font-weight:600;
  color:var(--p-accent);background:color-mix(in srgb,var(--p-accent) 14%,transparent)}
.pm .badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pm .tag{--c:var(--p-accent);display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:11px;font-size:calc(12px * var(--escala));font-weight:600;
  color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}
.pm .tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pm .tag.traslado{--c:var(--traslado)} .pm .tag.cremacion{--c:var(--cremacion)} .pm .tag.inhumacion{--c:var(--inhumacion)}
.pm .tag.activo{--c:var(--activo)} .pm .tag.alerta{--c:var(--alerta)}
.pm .tag.empleado{--c:var(--t-empleado)} .pm .tag.puesto{--c:var(--t-puesto)} .pm .tag.tanatosala{--c:var(--t-tanatosala)}
.pm .tag.funeraria{--c:var(--t-funeraria)} .pm .tag.externo{--c:var(--t-externo)}
.pm .tag.local{--c:var(--acc-local)} .pm .tag.microsoft{--c:var(--acc-microsoft)}
.pm .tag.rol-sin{--c:var(--rol-sin)} .pm .tag.rol-control{--c:var(--rol-control)} .pm .tag.rol-contratacion{--c:var(--rol-contratacion)}
.pm .tag.rol-admin{--c:var(--rol-admin)} .pm .tag.rol-limpieza{--c:var(--rol-limpieza)} .pm .tag.rol-capilla{--c:var(--rol-capilla)}
.pm .tag.rol-administracion{--c:var(--rol-administracion)} .pm .tag.rol-trabajador{--c:var(--rol-trabajador)} .pm .tag.rol-psicologia{--c:var(--rol-psicologia)}
.pm .tag.area-gerencia{--c:var(--area-gerencia)} .pm .tag.area-administracion{--c:var(--area-administracion)}
.pm .tag.area-contratacion{--c:var(--area-contratacion)} .pm .tag.area-servicios{--c:var(--area-servicios)}
.pm .tag.area-rrhh{--c:var(--area-rrhh)} .pm .tag.area-mantenimiento{--c:var(--area-mantenimiento)}
.pm .tag.area-el-parque{--c:var(--area-el-parque)} .pm .tag.area-calidad{--c:var(--area-calidad)}
.pm .tag.area-ti{--c:var(--area-ti)} .pm .tag.area-psicologia{--c:var(--area-psicologia)} .pm .tag.area-externos{--c:var(--area-externos)}
.pm .tag.tr-difunto{--c:var(--tr-difunto)} .pm .tag.tr-restos{--c:var(--tr-restos)} .pm .tag.tr-miembro{--c:var(--tr-miembro)} .pm .tag.tr-feto{--c:var(--tr-feto)}
.pm .tag.rec-responsable{--c:var(--rec-responsable)} .pm .tag.rec-autorizado{--c:var(--rec-autorizado)} .pm .tag.rec-funeraria{--c:var(--rec-funeraria)}
.pm .tag.aud-update{--c:var(--aud-update)} .pm .tag.aud-accion{--c:var(--aud-accion)}

/* ---------- Chips de filtro ---------- */
.pm .chip{height:28px;padding:0 11px;border-radius:14px;border:1px solid var(--p-input-line);background:transparent;color:var(--p-muted);font:inherit;font-size:calc(12.5px * var(--escala));cursor:pointer}
.pm .chip:hover{color:var(--p-txt);border-color:var(--p-accent)}
.pm .chip.on{background:var(--p-accent);border-color:var(--p-accent);color:var(--p-bg);font-weight:600}

/* ---------- Interruptor ---------- */
.pm .sw{display:inline-block;position:relative;width:40px;height:22px}
.pm .sw input{display:none}
.pm .sw span,.pm .sw .pista{position:absolute;inset:0;border-radius:11px;background:rgba(127,160,150,.35);transition:background .15s}
.pm .sw span::after,.pm .sw .pista::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s}
.pm .sw input:checked+span,.pm .sw input:checked+.pista{background:var(--p-accent)}
.pm .sw input:checked+span::after,.pm .sw input:checked+.pista::after{left:21px}
.pm .sw.alerta input:checked+span,.pm .sw.alerta input:checked+.pista{background:var(--alerta)}

/* ---------- Grupo de radio (pocas opciones, campo tipo 'radio') ---------- */
.pm .radio-group{display:flex;align-items:center;gap:18px;height:44px;width:100%;padding:0 12px;
  border-radius:var(--radio);border:1px solid var(--p-input-line);background:var(--p-input);box-sizing:border-box;
  font-size:calc(14px * var(--escala));color:var(--p-txt)}
.pm .radio-group label{display:flex;align-items:center;gap:6px;cursor:pointer}
.pm .radio-group input{accent-color:var(--p-accent);width:16px;height:16px;cursor:pointer}
/* Campo de color opcional (tipo 'color', #278): paleta de básicos + selector del navegador + «Sin color»,
   en la misma caja que un campo. El fondo de cada muestra lo pone colores.php (.muestra-color.c-rrggbb). */
.pm .campo-color{display:flex;flex-direction:column;gap:10px;width:100%;padding:10px 12px;
  border-radius:var(--radio);border:1px solid var(--p-input-line);background:var(--p-input);box-sizing:border-box;
  font-size:calc(14px * var(--escala));color:var(--p-txt)}
.pm .campo-color .paleta{display:flex;flex-wrap:wrap;gap:6px}
.pm .muestra-color{width:24px;height:24px;padding:0;border-radius:50%;border:2px solid transparent;cursor:pointer;
  box-shadow:0 0 0 1px var(--p-input-line)}
.pm .muestra-color:hover{transform:scale(1.12)}
.pm .muestra-color.activa{border-color:var(--p-bg);box-shadow:0 0 0 2px var(--p-txt)}
.pm .muestra-color:focus-visible{outline:2px solid var(--p-accent);outline-offset:2px}
.pm .campo-color-fila{display:flex;align-items:center;gap:16px}
.pm .campo .campo-color input[type=color]{width:56px;height:28px;padding:0;border:1px solid var(--p-input-line);border-radius:6px;background:none;cursor:pointer}
.pm .campo .campo-color input[type=color]:disabled{opacity:.35;cursor:not-allowed}
.pm .campo-color label{display:flex;align-items:center;gap:6px;cursor:pointer;margin:0}
.pm .campo .campo-color input[type=checkbox]{width:16px;height:16px;accent-color:var(--p-accent);cursor:pointer}

/* ---------- Modal ---------- */
.pm .velo{position:fixed;inset:0;z-index:50;background:rgba(18,32,28,.55);backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;padding:48px 24px}
.pm .velo[hidden]{display:none}
/* Nombre "pm-modal" (no "modal" a secas): natus/control/ carga Bootstrap
   para la cuadrícula antigua, que ya define su propia .modal con
   position:fixed;left:0;right:0 — colisionaba con esta y descentraba el
   diálogo hacia la izquierda. */
.pm .pm-modal{width:min(1180px,100%);height:calc(100vh - 96px);display:flex;flex-direction:column;background:var(--p-bg);color:var(--p-txt);
  border-radius:var(--radio-modal);overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.pm .pm-modal-cab{display:flex;align-items:center;gap:12px;height:60px;padding:0 14px 0 20px;background:var(--cab);color:var(--cab-txt);flex:none}

/* ---------- Pestañas (fichas largas, tarea #216) ---------- */
.pm .tabs{position:sticky;top:calc(58px + var(--top-h,110px));z-index:9;background:var(--bg);display:flex;gap:4px;
  padding:12px 0 0;border-bottom:1px solid var(--linea);overflow-x:auto;overflow-y:hidden;margin-bottom:18px}
.pm .tab{position:relative;display:flex;align-items:center;gap:8px;height:42px;padding:0 16px;border:0;background:transparent;
  color:var(--muted);font:inherit;font-size:calc(15px * var(--escala));font-weight:600;cursor:pointer;border-radius:8px 8px 0 0;white-space:nowrap;
  font-family:Poppins,Roboto,sans-serif}
.pm .tab:hover{color:var(--txt);background:color-mix(in srgb, var(--muted) 12%, transparent)}
.pm .tab.on{color:var(--txt)}
.pm .tab.on::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--accent)}
.pm .tab .num{font-size:calc(11px * var(--escala));font-weight:700;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;
  background:color-mix(in srgb, var(--muted) 25%, transparent);color:var(--muted)}
.pm .tab .mod{width:7px;height:7px;border-radius:50%;background:#f39c3d;display:none}
.pm .tab.cambiado .mod{display:block}
.pm .tab.error{color:var(--alerta)}
.pm .tab.error::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--alerta)}
.pm .tab-panel[hidden]{display:none}

/* ---------- Cabecera de ficha: nombre, nº, etiqueta, avisos (#216, paso 6) ---------- */
/* Fija bajo la cabecera principal (58 px) para que "Guardar cambios" y el
   nombre del registro queden siempre visibles al hacer scroll en fichas
   largas — igual que docs/diseno/maquetas/natus-ficha.html. */
.pm .ficha-top{position:sticky;top:58px;z-index:10;background:var(--bg);padding:14px 0;margin-bottom:10px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--linea)}
.pm .ficha-top h1{font-size:calc(23px * var(--escala));font-weight:600;display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-family:Poppins,Roboto,sans-serif}
.pm .ficha-top h1 .id{font-weight:400;color:var(--muted);font-size:calc(17px * var(--escala))}
.pm .ficha-top .meta{display:flex;gap:10px;margin-top:6px;font-size:calc(14px * var(--escala));color:var(--muted);flex-wrap:wrap;align-items:center}
.pm .avisos-dinamicos{display:inline-flex;gap:6px;flex-wrap:wrap}
.pm .ficha-top .acciones{display:flex;gap:8px;flex:none}

/* ---------- Panel con icono + grid de campos (ficha, #216 paso 6) ---------- */
.pm main{display:flex;flex-direction:column;gap:16px}
.pm .panel-cab svg.i{width:17px;height:17px}
.pm .panel .grid{display:grid;gap:16px 18px;padding:16px 18px 18px}
.pm .panel .grid .campo.spacer{visibility:hidden}

/* ---------- Miga de pan ---------- */
.pm .miga{font-size:calc(12.5px * var(--escala));color:var(--muted);margin-bottom:14px}
.pm .miga a{color:var(--muted);text-decoration:none}
.pm .miga a:hover{color:var(--accent);text-decoration:underline}

/* ---------- Buscador (icono + input) ---------- */
.pm .buscador{position:relative;flex:1;min-width:200px}
.pm .buscador svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--p-muted)}
.pm .buscador input{width:100%;height:40px;border-radius:var(--radio);border:1px solid var(--p-input-line);
  background:var(--p-input);color:var(--p-txt);padding:0 14px 0 38px;font:inherit;font-size:calc(14.5px * var(--escala));outline:none}
.pm .buscador input:focus{background:var(--p-bg);border-color:var(--p-accent)}

/* ---------- Estilo web corporativo (tipografía) ---------- */
.pm h1,.pm h2,.pm h3,.pm .cab-btn,.pm .b-pri,.pm .b-sec,.pm .tab{font-family:Poppins,Roboto,sans-serif}
.pm .cab{border-bottom-color:#0a3a1c}

/* ---------- Botón doble Imprimir + PDF (.pm-split, tarea #308) ----------
   Maqueta del usuario (boton-imprimir-pdf.html). La parte principal imprime directamente (QZ Tray) y
   la de la derecha descarga el PDF. Variantes: --sec (contorno, cuando ya hay otro primario en
   pantalla) y --ico (solo iconos, para filas de tabla). Sin la parte del PDF (etiqueta y pulsera),
   es un botón de una pieza con el mismo aspecto; la parte principal puede ser un <a> (sin JavaScript
   abre la página de siempre). Las partes van por clase y no por etiqueta, para que no las pisen los
   estilos de los enlaces de cada pantalla. Marcado: v2/modules/shared/impresion/botones.php;
   comportamiento: assets/impresion/imprimir.js. */
.pm .pm-split{
  --split-bg:var(--accent); --split-fg:var(--on-accent);
  --split-hover:#0a3a1c; --split-div:rgba(255,255,255,.32);
  display:inline-flex; align-items:stretch; height:38px;
  border-radius:999px; overflow:hidden; vertical-align:middle;
  box-shadow:0 1px 2px rgba(0,0,0,.10);
}
.pm[data-theme="oscuro"] .pm-split{--split-hover:#a3d65f; --split-div:rgba(30,42,34,.30)}
.pm .pm-split :is(.pm-split__main,.pm-split__pdf){
  all:unset; box-sizing:border-box; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  background:var(--split-bg); color:var(--split-fg);
  font-family:Poppins,sans-serif; font-weight:500;
  font-size:calc(14px * var(--escala)); line-height:1;
  transition:background .15s, color .15s;
}
.pm .pm-split svg{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pm .pm-split .pm-split__main{padding:0 16px 0 18px}
.pm .pm-split .pm-split__pdf{padding:0 16px 0 13px; position:relative}
.pm .pm-split .pm-split__main:only-child{padding:0 18px}
.pm .pm-split .pm-split__pdf::before{content:""; position:absolute; left:0; top:9px; bottom:9px; width:1px; background:var(--split-div)}
.pm .pm-split :is(.pm-split__main,.pm-split__pdf):hover{background:var(--split-hover)}
.pm .pm-split .pm-split__main:hover + .pm-split__pdf::before,
.pm .pm-split .pm-split__pdf:hover::before{opacity:0}
.pm .pm-split :is(.pm-split__main,.pm-split__pdf):focus-visible{outline:2px solid var(--accent);outline-offset:-4px;box-shadow:inset 0 0 0 4px var(--split-bg)}
.pm .pm-split :is(.pm-split__main,.pm-split__pdf):active{filter:brightness(.92)}
/* Imprimiendo o descargando: el icono deja paso a un giro. */
.pm .pm-split [aria-busy="true"]{cursor:progress}
.pm .pm-split [aria-busy="true"] svg{display:none}
.pm .pm-split .spin{display:none;width:15px;height:15px;border-radius:50%;
  border:2px solid currentColor;border-right-color:transparent;animation:pm-giro .7s linear infinite}
.pm .pm-split [aria-busy="true"] .spin{display:inline-block}
@keyframes pm-giro{to{transform:rotate(360deg)}}
.pm .pm-split :is(.pm-split__main,.pm-split__pdf):disabled{cursor:not-allowed;opacity:.45}
.pm .pm-split :is(.pm-split__main,.pm-split__pdf):disabled:hover{background:var(--split-bg)}
/* Fondo transparente: uno opaco en los botones taparía el contorno (sombra interior del contenedor). */
.pm .pm-split--sec{--split-bg:transparent;--split-fg:var(--accent);--split-div:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
.pm .pm-split--sec :is(.pm-split__main,.pm-split__pdf):hover{background:var(--accent);color:var(--on-accent)}
.pm .pm-split--sec .pm-split__pdf::before{opacity:.55}
.pm .pm-split--ico{height:32px}
.pm .pm-split--ico .pm-split__main{padding:0 10px 0 12px}
.pm .pm-split--ico .pm-split__pdf{padding:0 12px 0 10px}
.pm .pm-split--ico .txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media print{ .pm .pm-split{display:none !important} }