/* ==========================================================================
   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-ti:#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-ti:#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-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}
@media (max-width:1250px){.pm .cab-btn .lbl{display: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-ti{--c:var(--rol-ti)} .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}

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