/*
 * PLANTILLA INSTITUCIONAL — estilos de inc/plantilla.php.
 * Mismo diseño que proyectos.php (la referencia). Solo lo cargan las páginas
 * que usan pagina(); cambiar algo acá lo cambia en todas ellas.
 */
:root {
    /* Colores del tema institucional (Ajustes > Tema): inc/header.php define --mcdp-*
       con lo guardado en tenant_settings; si no está, quedan los verdes de siempre. */
    --pl-p: var(--mcdp-primary, #506647); --pl-claro: var(--mcdp-primary-2, #728c6a);
    --pl-p2: #5a7053; --pl-p-osc: #3d5138;
    --pl-brd: rgba(0, 0, 0, .08); --pl-mut: #5c6b7d; --pl-txt: #152536;
    --pl-sombra: 0 16px 38px rgba(15, 23, 42, .08); --pl-rad: var(--mcdp-radius, 22px);
}
@supports (color: color-mix(in srgb, red, blue)) {
    /* Tonos derivados del primario elegido (navegadores sin color-mix usan los fijos) */
    :root { --pl-p2: color-mix(in srgb, var(--pl-p) 82%, white); --pl-p-osc: color-mix(in srgb, var(--pl-p) 78%, black); }
}
body.pl-body { min-height: 100vh; font-family: 'Nunito', sans-serif; background: var(--mcdp-soft, #f4f7fb); } /* Fondo de página del tema (Ajustes > Tema) */
.pl-body input, .pl-body select, .pl-body textarea { font-size: 16px !important; }
.pl-body #main-content { padding-bottom: 2rem !important; }
.pl-body .page-title { display: none !important; }

.pl-wrap { width: 100%; max-width: 1540px; margin: 0 auto; padding: 0 1.1rem 3rem; }

/* ── Hero ── */
.pl-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(80, 102, 71, .97), rgba(114, 140, 106, .84)); color: #fff; border-radius: 28px; box-shadow: 0 20px 42px rgba(80, 102, 71, .20); padding: 1.5rem 1.5rem 1.3rem; margin-bottom: 1.2rem; display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; }
.pl-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, .14), transparent 24%), radial-gradient(circle at 10% 110%, rgba(255, 255, 255, .09), transparent 30%); }
.pl-hero > * { position: relative; z-index: 1; }
.pl-hero-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .85rem; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .18); font-size: .82rem; font-weight: 800; }
.pl-hero-titulo { font-size: clamp(1.3rem, 2.5vw, 2rem); font-weight: 900; margin: .8rem 0 .45rem; color: #fff; }
.pl-hero-sub { font-size: .97rem; color: rgba(255, 255, 255, .92); margin: 0; line-height: 1.6; max-width: 760px; }
.pl-hero-acc { display: flex; justify-content: flex-end; align-items: flex-start; gap: .6rem; flex-wrap: wrap; flex-shrink: 0; }
.pl-btn-hero { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; border-radius: 14px; font-weight: 800; padding: .72rem 1.1rem; box-shadow: 0 8px 20px rgba(0, 0, 0, .12); background: var(--mcdp-surface, #fff); border: 1px solid rgba(255, 255, 255, .3); color: var(--pl-p); text-decoration: none; line-height: 1.2; }
.pl-btn-hero:hover { background: #eef5ec; color: var(--pl-p); }
/* "+" cuadrado, del mismo alto que "Panel" y con el ícono centrado (el ::before de
   bootstrap-icons trae vertical-align:-.125em y lo corría hacia abajo) */
.pl-btn-hero.pl-solo-icono { width: 46px; height: 46px; padding: 0; font-size: 1.3rem; line-height: 1; }
.pl-btn-hero.pl-solo-icono i, .pl-btn-hero.pl-solo-icono i::before { display: block; line-height: 1; vertical-align: 0; }
.pl-btn-hero { min-height: 46px; }

/* ── Indicadores ── */
.pl-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; margin-bottom: 1rem; }
.pl-stats.pl-stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pl-stats.pl-stats-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pl-stat { background: var(--mcdp-surface, #fff); border: 1px solid var(--pl-brd); border-radius: 20px; box-shadow: var(--pl-sombra); padding: 1rem 1.1rem; display: flex; align-items: center; justify-content: space-between; gap: .9rem; min-width: 0; }
.pl-stat-lbl { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--pl-mut); font-size: .74rem; margin-bottom: .3rem; }
.pl-stat-val { font-size: 1.4rem; font-weight: 900; color: var(--pl-txt); line-height: 1; white-space: nowrap; }
.pl-stat-ico { width: 50px; height: 50px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; border: 1px solid rgba(0, 0, 0, .04); flex-shrink: 0; }
.pl-ico-verde { background: rgba(114, 140, 106, .1); color: var(--pl-claro); }
.pl-ico-exito { background: rgba(25, 135, 84, .09); color: #198754; }
.pl-ico-ambar { background: rgba(245, 158, 11, .12); color: #b45309; }
.pl-ico-azul { background: rgba(59, 130, 246, .1); color: #2563eb; }
.pl-ico-rojo { background: rgba(220, 53, 69, .09); color: #dc3545; }
.pl-ico-gris { background: rgba(108, 117, 125, .1); color: #555d64; }
.pl-ico-violeta { background: rgba(111, 66, 193, .1); color: #6f42c1; }

/* ── Barra: filtros, buscador, exportar ── */
.pl-barra { background: var(--mcdp-surface, #fff); border: 1px solid var(--pl-brd); border-radius: 18px; box-shadow: var(--pl-sombra); padding: .7rem 1rem; margin-bottom: 1rem; display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.pl-barra-lbl { font-weight: 900; font-size: .77rem; color: var(--pl-mut); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.pl-pastillas { display: flex; gap: .4rem; flex-wrap: wrap; }
.pl-pastilla { border-radius: 11px; font-weight: 800; font-size: .82rem; padding: .38rem .85rem; border: 1px solid var(--pl-brd); background: var(--mcdp-surface, #fff); color: var(--pl-txt); cursor: pointer; transition: all .15s; white-space: nowrap; }
.pl-pastilla:hover { background: rgba(80, 102, 71, .07); border-color: var(--pl-claro); color: var(--pl-p); }
.pl-pastilla.on { background: var(--pl-p); color: #fff; border-color: var(--pl-p); }
.pl-barra-busq { display: flex; gap: .7rem; align-items: center; flex: 1; min-width: 200px; }
.pl-buscar { flex: 1; min-width: 160px; border-radius: 11px; border: 1px solid var(--pl-brd); padding: .38rem .8rem; font-family: 'Nunito', sans-serif; font-weight: 700; font-size: .87rem; outline: none; transition: border-color .15s; }
.pl-buscar:focus { border-color: var(--pl-claro); box-shadow: 0 0 0 3px rgba(114, 140, 106, .12); }
/* Enlaces del pie de las páginas internas (Accesibilidad, Datos personales): verde oscuro con contraste AA */
.pl-body footer .footer a { color: #2d5a24; font-weight: 700; text-decoration: underline; }
/* pagina_publica() y documento(): páginas que se leen sin iniciar sesión (accesibilidad, datos personales) */
.pl-saltar { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: #1f3a1b; color: #fff; padding: .6rem 1rem; border-radius: 10px; font-weight: 800; }
.pl-saltar:focus { top: 1rem; color: #fff; }
.pl-pub-cab { max-width: 1100px; margin: 0 auto; padding: 1rem 1.1rem; }
.pl-pub-marca { display: inline-flex; align-items: center; gap: .6rem; font-weight: 900; color: #1f3a1b; text-decoration: none; font-size: 1.05rem; }
.pl-pub-marca img { border-radius: 50%; background: #fff; box-shadow: var(--pl-sombra); }
.pl-pub { max-width: 1100px; }
.pl-pub:focus { outline: none; }
.pl-doc { background: #fff; border-radius: 22px; box-shadow: var(--pl-sombra); padding: 1.4rem 1.6rem; margin-bottom: 1.2rem; color: var(--pl-txt); font-size: 1.02rem; line-height: 1.65; }
.pl-doc-h { font-size: 1.2rem; font-weight: 800; color: #1f3a1b; margin: 1.3rem 0 .5rem; }
.pl-doc-h:first-child { margin-top: 0; }
.pl-doc p { margin: 0 0 .8rem; }
.pl-doc ul { margin: 0 0 .9rem; padding-left: 1.3rem; }
.pl-doc li { margin: .3rem 0; }
.pl-doc a { color: #2d5a24; font-weight: 700; text-decoration: underline; overflow-wrap: anywhere; }
.pl-doc-datos { display: grid; grid-template-columns: minmax(9rem, max-content) 1fr; gap: .4rem 1.2rem; margin: 0 0 1rem; }
.pl-doc-datos dt { font-weight: 800; }
.pl-doc-datos dd { margin: 0; }
@media (max-width: 600px) { .pl-doc { padding: 1.1rem; } .pl-doc-datos { grid-template-columns: 1fr; gap: .1rem; } .pl-doc-datos dd { margin-bottom: .5rem; } }
.pl-pub-pie { max-width: 1100px; margin: 0 auto; padding: 1rem 1.1rem 2.5rem; color: #3f4d3c; font-size: .92rem; }
.pl-pub-pie nav { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-bottom: .5rem; }
.pl-pub-pie a { color: #2d5a24; font-weight: 700; }
.pl-pub-pie a[aria-current] { color: #1f3a1b; text-decoration: none; }
/* Campo de solo lectura (lo completa un componente, p.ej. el largo del dibujo del mapa) */
.pl-lateral .form-control[readonly] { background: #eef1ec; color: var(--pl-txt); }
/* app_js(): pantallas interactivas armadas por un JS propio (p.ej. asistente de planillas de Calles) */
.pl-app { background: var(--pl-card, #fff); border-radius: 18px; box-shadow: var(--pl-sombra); padding: 1rem 1.1rem; margin-bottom: 1.25rem; }
.pl-app-estado:empty { display: none; }
.pl-app-estado { font-weight: 700; color: var(--pl-txt); margin: .75rem 0 0; }
.pl-app-resumen { margin-top: .75rem; }
.pl-app-resumen p { margin: .25rem 0; }
.pl-app-cuentas { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.pl-app-mapa { height: 340px; border-radius: 14px; margin: .75rem 0; }
.pl-app-tabla td { white-space: nowrap; }
.pl-app-tabla .form-control, .pl-app-tabla .form-select { min-width: 7rem; }
.pl-app-tabla input[type=number] { min-width: 5.5rem; }
.pl-app-omitida td { opacity: .45; }
.pl-app-foco td { background: #fff6dc; }
.pl-app-ver { border: 0; cursor: pointer; }
.pl-app-acciones { display: flex; justify-content: flex-end; margin-top: .75rem; }
/* mapa() con 'dibujar': lápiz activo, cursor de mira y barra de acciones abajo */
.pl-mapa-lapiz a { display: flex !important; align-items: center; justify-content: center; font-size: 1rem; }
.pl-mapa-lapiz a.pl-activo { background: var(--pl-p); color: #fff; }
.pl-mapa-dibujando, .pl-mapa-dibujando .leaflet-interactive { cursor: crosshair !important; }
.pl-mapa-barra { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; background: #fff; border-radius: 14px; padding: .5rem .7rem; box-shadow: var(--pl-sombra); max-width: calc(100vw - 2rem); }
.pl-mapa-barra[hidden] { display: none; }
.pl-mapa-barra-txt { font-weight: 800; font-size: .85rem; color: var(--pl-txt); margin-right: .3rem; }
/* Campo 'casillas': grilla de casillas (p.ej. permisos de un usuario) */
.pl-casillas { border: 0; padding: 0; margin: 0; min-width: 0; }
.pl-casillas legend { float: none; width: auto; font-size: inherit; }
.pl-casillas-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .35rem 1rem; padding: .6rem .8rem; border: 1px solid var(--pl-brd); border-radius: 14px; }
/* Campo 'ubicacion': mapa chico dentro del panel + coordenadas (solo lectura) y botón para quitar el punto */
.pl-ubicacion .pl-mapa { border-radius: 14px; border: 1px solid var(--pl-brd); }
.pl-ubic-coords { display: flex; gap: .4rem; align-items: center; margin-top: .45rem; }
.pl-ubic-coords input { flex: 1; min-width: 0; background: var(--bs-tertiary-bg, #f6f7f6); }
/* Foco del teclado siempre visible (WCAG 2.4.7, Decreto 406/022): contorno oscuro de 3 px en todo lo que se puede usar con Tab */
.pl-body :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.pl-body .pl-buscar:focus-visible, .pl-body .pl-html-editor:focus-visible { outline: 3px solid #1f3a1b !important; outline-offset: 2px; }
.pl-btn-ico.pl-btn-exportar { color: #198754; border-color: rgba(25, 135, 84, .35); font-size: 1rem; }
.pl-btn-ico.pl-btn-exportar:hover { background: #198754; border-color: #198754; color: #fff; }

/* ── Tarjetas ── */
.pl-grilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.pl-card { background: var(--mcdp-surface, #fff); border: 1px solid var(--pl-brd); border-radius: var(--pl-rad); box-shadow: var(--pl-sombra); display: flex; flex-direction: column; overflow: hidden; transition: box-shadow .18s, transform .18s; min-width: 0; }
.pl-card:hover { box-shadow: 0 22px 46px rgba(15, 23, 42, .13); transform: translateY(-2px); }
.pl-card-head { padding: .9rem 1rem .75rem; border-bottom: 1px solid var(--pl-brd); background: linear-gradient(180deg, rgba(80, 102, 71, .04), transparent); }
.pl-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.pl-card-titulo { font-weight: 900; font-size: .97rem; color: var(--pl-txt); line-height: 1.25; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pl-card-desc { font-size: .8rem; font-weight: 700; color: var(--pl-mut); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; margin-top: .5rem; }
.pl-card-body { padding: .85rem 1rem; flex: 1; }
.pl-meta-fila { display: flex; gap: .5rem 1.2rem; flex-wrap: wrap; }
.pl-meta { display: flex; align-items: center; gap: .3rem; font-size: .79rem; font-weight: 800; color: var(--pl-mut); }
.pl-meta i { font-size: .85rem; }
.pl-card-pie { padding: .6rem 1rem; border-top: 1px solid var(--pl-brd); background: rgba(80, 102, 71, .02); display: flex; gap: .3rem; align-items: center; justify-content: flex-end; }
.pl-btn-ico.pl-principal { color: var(--pl-p); border-color: rgba(80, 102, 71, .35); }
.pl-btn-ico.pl-principal:hover { background: var(--pl-p); border-color: var(--pl-p); color: #fff; }
.pl-btn-ico i::before { vertical-align: 0; }

/* Botones-ícono (lápiz, papelera…) */
.pl-btn-ico { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 11px; border: 1px solid var(--pl-brd); background: var(--mcdp-surface, #fff); cursor: pointer; transition: all .13s; font-size: .9rem; color: var(--pl-mut); flex-shrink: 0; text-decoration: none; }
.pl-btn-ico:hover { border-color: var(--pl-claro); background: rgba(80, 102, 71, .08); color: var(--pl-p); }
.pl-btn-ico.pl-borrar:hover { border-color: #dc3545; background: rgba(220, 53, 69, .07); color: #dc3545; }
.pl-acciones { display: inline-flex; gap: .3rem; }

/* Etiqueta de estado */
.pl-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .28rem .7rem; border-radius: 999px; font-size: .74rem; font-weight: 900; white-space: nowrap; flex-shrink: 0; }
.pl-badge-verde { background: rgba(25, 135, 84, .1); color: #146c43; }
.pl-badge-gris { background: rgba(108, 117, 125, .1); color: #555d64; }
.pl-badge-ambar { background: rgba(245, 158, 11, .13); color: #b45309; }
.pl-badge-azul { background: rgba(59, 130, 246, .1); color: #2563eb; }
.pl-badge-rojo { background: rgba(220, 53, 69, .1); color: #b02a37; }
.pl-badge-violeta { background: rgba(111, 66, 193, .1); color: #6f42c1; }

/* Franja de aviso (alerta()): rojo = alerta, ambar = precaución, azul = info, verde = ok */
.pl-alerta { display: flex; align-items: center; gap: .5rem; padding: .6rem .85rem; border-radius: 12px; border: 1px solid transparent; font-size: .87rem; font-weight: 800; margin: 0 0 1rem; }
.pl-alerta i { flex: none; }
.pl-alerta-rojo { background: rgba(220, 53, 69, .09); border-color: rgba(220, 53, 69, .35); color: #a52636; }
.pl-alerta-ambar { background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .4); color: #92400e; }
.pl-alerta-azul { background: rgba(59, 130, 246, .09); border-color: rgba(59, 130, 246, .35); color: #1d4ed8; }
.pl-alerta-verde { background: rgba(25, 135, 84, .09); border-color: rgba(25, 135, 84, .35); color: #146c43; }

/* ── Tabla (listados que no van en tarjetas) ── */
.pl-tabla-caja { background: var(--mcdp-surface, #fff); border: 1px solid var(--pl-brd); border-radius: var(--pl-rad); box-shadow: var(--pl-sombra); overflow-x: auto; }
.pl-tabla .pl-acciones { flex-wrap: nowrap; }
.pl-tabla td:last-child { white-space: nowrap; }
.pl-tabla { width: 100%; border-collapse: collapse; font-size: .86rem; }
.pl-tabla th { font-weight: 800; text-transform: uppercase; font-size: .69rem; letter-spacing: .04em; color: var(--pl-mut); padding: .65rem 1rem; border-bottom: 2px solid var(--pl-brd); background: rgba(80, 102, 71, .03); white-space: nowrap; text-align: left; }
.pl-tabla td { padding: .6rem 1rem; border-bottom: 1px solid rgba(0, 0, 0, .05); vertical-align: middle; font-weight: 700; color: var(--pl-txt); }
.pl-tabla tbody tr:last-child td { border-bottom: none; }
.pl-tabla tbody tr:hover td { background: rgba(114, 140, 106, .04); }

/* ── Vacío ── */
.pl-vacio { background: var(--mcdp-surface, #fff); border: 1px solid var(--pl-brd); border-radius: var(--pl-rad); box-shadow: var(--pl-sombra); padding: 3.5rem 1rem; text-align: center; color: var(--pl-mut); }
/* width:auto: una regla global deja los <i> en 16px y el ícono quedaba corrido a la izquierda */
.pl-vacio i { font-size: 2.8rem; display: block; width: auto; height: auto; line-height: 1; margin: 0 auto .7rem; opacity: .25; }
.pl-vacio p { margin: 0; font-weight: 700; font-size: .95rem; }
.pl-sin-resultados { display: none; grid-column: 1 / -1; }

/* ── Panel lateral (alta / edición) ── */
.pl-lateral { width: min(460px, 100vw) !important; }
.pl-lateral.pl-lateral-grande { width: min(760px, 100vw) !important; }
/* El contenedor recibe el foco al abrirse (Bootstrap); el contorno azul global de
   inc/header.php es para controles, no para el panel entero. Los campos lo conservan. */
.pl-lateral:focus, .pl-lateral[tabindex]:focus-visible { outline: none !important; }
.pl-lateral.offcanvas-end { border-left: 0 !important; box-shadow: -18px 0 48px rgba(15, 23, 42, .18); }
.pl-lateral > form { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.pl-lateral .offcanvas-header { background: linear-gradient(135deg, var(--pl-p), var(--pl-claro)); color: #fff; padding: 1rem 1.25rem; }
.pl-lateral .offcanvas-title { font-weight: 900; font-size: 1.05rem; color: #fff; }
.pl-lateral .btn-close { filter: invert(1) brightness(2); }
.pl-lateral .offcanvas-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1.15rem 1.25rem; }
.pl-lateral .form-label { font-weight: 800; font-size: .85rem; margin-bottom: .28rem; }
.pl-lateral .form-control, .pl-lateral .form-select { border-radius: 11px; border: 1px solid var(--pl-brd); font-family: 'Nunito', sans-serif; font-weight: 700; }
.pl-lateral .form-control:focus, .pl-lateral .form-select:focus { border-color: var(--pl-claro); box-shadow: 0 0 0 3px rgba(114, 140, 106, .14); }
.pl-lateral-pie { display: flex; justify-content: flex-end; gap: .5rem; padding: .85rem 1.25rem; border-top: 1px solid var(--pl-brd); background: var(--mcdp-surface, #fff); }
.pl-lateral-pie .btn { border-radius: 11px; font-weight: 900; }
.pl-lateral-pie .btn-primary { background: var(--pl-p); border-color: var(--pl-p); }
.pl-lateral-pie .btn-primary:hover { background: var(--pl-p-osc); border-color: var(--pl-p-osc); }
.pl-solo-editar { display: none; }
.pl-editando .pl-solo-editar { display: block; }
.pl-editando .pl-solo-agregar { display: none; }

/* ── Responsive ── */
@media (max-width: 1199.98px) { .pl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pl-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) {
    .pl-body #main-content { padding: 1rem !important; }
    .pl-wrap { padding: 0 .3rem 3.5rem; }
    .pl-hero { flex-direction: column; }
    .pl-hero-acc { justify-content: flex-start; }
    .pl-stats, .pl-stats.pl-stats-3, .pl-stats.pl-stats-2 { grid-template-columns: 1fr; gap: .7rem; }
    .pl-grilla { grid-template-columns: 1fr; }
    .pl-barra { flex-direction: column; align-items: stretch; }
    .pl-buscar { min-width: 0; }
    .pl-barra-busq { min-width: 0; }
    /* tabla → una tarjeta por fila */
    .pl-tabla thead { display: none; }
    .pl-tabla, .pl-tabla tbody, .pl-tabla tr, .pl-tabla td { display: block; width: 100%; }
    .pl-tabla tr { border-bottom: 1px solid var(--pl-brd); padding: .5rem .25rem; }
    .pl-tabla td { border: 0 !important; padding: .25rem .75rem; overflow-wrap: anywhere; }
    .pl-tabla td[data-label]::before { content: attr(data-label); display: block; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--pl-mut); }
    .pl-tabla td:empty { display: none; }
}

/* ── Campo de texto con formato (campo(..., 'html')) ── */
.pl-html-barra { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .45rem; }
.pl-html-barra .pl-btn-ico { width: 34px; height: 34px; }
.pl-html-en-codigo .pl-html-barra .pl-btn-ico:not([data-cmd="codigo"]) { opacity: .35; pointer-events: none; }
.pl-html-en-codigo [data-cmd="codigo"] { background: var(--pl-p); border-color: var(--pl-p); color: #fff; }
.pl-html-editor { min-height: 220px; max-height: 50vh; overflow: auto; font-weight: 600 !important; line-height: 1.55; }
.pl-html-editor:focus { outline: none; }
.pl-html-codigo { font-family: Consolas, monospace !important; font-size: .82rem !important; min-height: 220px; }

/* ── Lista de artículos (campo items), miniaturas y secciones ── */
.pl-items-fila { display: flex; gap: .4rem; align-items: center; }
.pl-items-fila .pl-items-sel { flex: 1; min-width: 0; }
.pl-items-fila .pl-items-cant { width: 84px; flex: 0 0 84px; }
.pl-items-lista { list-style: none; padding: 0; margin: .55rem 0 0; display: flex; flex-direction: column; gap: .35rem; }
.pl-items-lista li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .4rem .4rem .4rem .75rem; border: 1px solid var(--pl-brd); border-radius: 11px; font-weight: 800; font-size: .86rem; color: var(--pl-txt); background: rgba(80, 102, 71, .03); }
.pl-items-lista .pl-btn-ico { width: 30px; height: 30px; }
.pl-minis { display: inline-flex; gap: .3rem; }
.pl-mini img { width: 42px; height: 42px; object-fit: cover; border-radius: 9px; border: 1px solid var(--pl-brd); }
.pl-seccion { display: flex; align-items: baseline; gap: .5rem; font-size: 1.05rem; font-weight: 900; color: var(--pl-txt); margin: 1.4rem .2rem .7rem; }
.pl-seccion i { color: var(--pl-p); }
.pl-seccion span { font-size: .8rem; font-weight: 700; color: var(--pl-mut); }

/* ── Gráficos, filtros GET y columnas ── */
.pl-graf { background: var(--mcdp-surface, #fff); border: 1px solid var(--pl-brd); border-radius: var(--pl-rad); box-shadow: var(--pl-sombra); padding: 1rem 1.1rem 1.1rem; margin-bottom: 1rem; min-width: 0; }
.pl-graf-head h3 { font-size: .97rem; font-weight: 900; color: var(--pl-txt); margin: 0; }
.pl-graf-head p { font-size: .8rem; font-weight: 700; color: var(--pl-mut); margin: .2rem 0 0; }
.pl-graf-caja { position: relative; margin-top: .8rem; }
.pl-graf-vacio { padding: 2rem 1rem; text-align: center; color: var(--pl-mut); font-weight: 700; }
.pl-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.pl-columnas > * { margin-bottom: 0; }
.pl-columnas + * { margin-top: 1rem; }
.pl-filtros .pl-filtro-sel { width: auto; min-width: 150px; border-radius: 11px; font-weight: 700; font-size: .87rem; padding-top: .35rem; padding-bottom: .35rem; }
@media (max-width: 991.98px) { .pl-columnas { grid-template-columns: 1fr; } }
@media (max-width: 767.98px) { .pl-filtros .pl-filtro-sel { width: 100%; } }

/* ── Pestañas entre pantallas de un módulo ── */
.pl-pestanas { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .9rem; }
.pl-pestanas a { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .95rem; border-radius: 12px; font-weight: 800; font-size: .88rem; color: var(--pl-mut); text-decoration: none; background: var(--mcdp-surface, #fff); border: 1px solid var(--pl-brd); }
.pl-pestanas a:hover { color: var(--pl-p); border-color: var(--pl-claro); }
.pl-pestanas a.on { background: var(--pl-p); border-color: var(--pl-p); color: #fff; }
.pl-filtro { display: inline-flex; align-items: center; gap: .5rem; }
@media (max-width: 767.98px) { .pl-filtro { display: flex; width: 100%; } .pl-filtro .pl-barra-lbl { min-width: 90px; } }

/* ── Paginación (paginacion()) ── */
/* Hamburguesa del encabezado (solo celular): verde institucional, no el azul de Bootstrap */
.burger-btn { color: #506647; }
.burger-btn:hover, .burger-btn:focus-visible { color: #3d4f36; }

.pl-pagin { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin: .9rem .2rem .2rem; }
.pl-pag-info { font-size: .82rem; font-weight: 800; color: var(--pl-mut); }
.pl-pag-nums { display: inline-flex; align-items: center; gap: .25rem; }
.pl-pag-btn { display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .7rem; border: 1px solid var(--pl-brd); border-radius: 10px; background: var(--mcdp-surface, #fff); font-size: .82rem; font-weight: 800; color: var(--pl-txt); text-decoration: none; }
.pl-pag-btn:hover { color: var(--pl-p); border-color: var(--pl-claro); }
.pl-pag-btn.on { background: var(--pl-p); border-color: var(--pl-p); color: #fff; }
.pl-pag-btn.on:hover { color: #fff; }
.pl-pag-off { opacity: .4; pointer-events: none; }
.pl-pag-puntos { color: var(--pl-mut); font-weight: 800; padding: 0 .15rem; }
@media (max-width: 767.98px) { .pl-pagin { justify-content: center; } .pl-pag-info { width: 100%; text-align: center; } }

/* ── Calendario y leyenda ── */
.pl-calendario { padding: 1rem; }
.pl-calendario .fc { --fc-border-color: rgba(0, 0, 0, .07); --fc-button-bg-color: #fff; --fc-button-border-color: rgba(0, 0, 0, .1); --fc-button-text-color: #3f4f39;
    --fc-button-hover-bg-color: #eef5ec; --fc-button-hover-border-color: var(--pl-claro); --fc-button-active-bg-color: var(--pl-p); --fc-button-active-border-color: var(--pl-p);
    --fc-today-bg-color: rgba(114, 140, 106, .1); --fc-event-border-color: transparent; font-weight: 700; }
.pl-calendario .fc .fc-button { border-radius: 10px; font-weight: 800; font-size: .84rem; box-shadow: none !important; text-transform: none; }
.pl-calendario .fc .fc-button-primary:not(:disabled).fc-button-active { color: #fff; }
.pl-calendario .fc .fc-toolbar-title { font-size: 1.15rem; font-weight: 900; color: var(--pl-txt); }
.pl-calendario .fc .fc-toolbar-title::first-letter { text-transform: uppercase; }
.pl-calendario .fc-event { border-radius: 7px; padding: 1px 3px; cursor: pointer; }
.pl-calendario a { text-decoration: none; color: inherit; }
.pl-ev-parpadea { animation: pl-parpadeo 1.4s ease-in-out infinite; }
@keyframes pl-parpadeo { 50% { opacity: .45; } }
.pl-leyenda { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: -.3rem .2rem .8rem; font-size: .8rem; font-weight: 800; color: var(--pl-mut); }
.pl-leyenda span { display: inline-flex; align-items: center; gap: .4rem; }
.pl-leyenda i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.pl-btn-ico.pl-ico-exito { color: #198754; } .pl-btn-ico.pl-ico-exito:hover { background: #198754; border-color: #198754; color: #fff; }
.pl-btn-ico.pl-ico-rojo { color: #dc3545; } .pl-btn-ico.pl-ico-rojo:hover { background: #dc3545; border-color: #dc3545; color: #fff; }
@media (max-width: 767.98px) { .pl-calendario .fc .fc-toolbar { flex-direction: column; gap: .5rem; } .pl-calendario { padding: .6rem; } }
.pl-lateral-pie .pl-pie-eliminar { margin-right: auto; }
.pl-lateral:not(.pl-editando) .pl-pie-eliminar { display: none; }

/* ── Secciones con acciones y QR ── */
.pl-seccion-fila { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin: 1.4rem .2rem .7rem; }
.pl-seccion-fila .pl-seccion { margin: 0; }
.pl-qr-grande { display: inline-block; padding: .5rem; background: var(--mcdp-surface, #fff); }

/* Columna de acciones fija a la derecha cuando la tabla es más ancha que la pantalla */
.pl-tabla .pl-col-acciones { text-align: right; position: sticky; right: 0; background: var(--mcdp-surface, #fff); box-shadow: -10px 0 12px -10px rgba(15, 23, 42, .18); }
.pl-tabla th.pl-col-acciones { background: #f8faf7; }
.pl-tabla tbody tr:hover td.pl-col-acciones { background: #f7f9f6; }
@media (max-width: 767.98px) { .pl-tabla .pl-col-acciones { position: static; box-shadow: none; } }

/* ── "Ver detalle" desplegable ── */
.pl-detalle { margin-top: .35rem; }
.pl-detalle summary { cursor: pointer; font-size: .78rem; font-weight: 800; color: var(--pl-p); }
.pl-detalle-titulo { font-size: .7rem; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; color: var(--pl-mut); margin-top: .45rem; }
.pl-detalle-texto { font-size: .74rem; background: #f6f8f5; border: 1px solid var(--pl-brd); border-radius: 9px; padding: .45rem .6rem; margin: .2rem 0 0; max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-word; }

/* El bloque del título no estira el hero más allá de la pantalla */
.pl-hero > div:first-child { min-width: 0; flex: 1 1 auto; }
.pl-hero-titulo, .pl-hero-sub { overflow-wrap: anywhere; }
.pl-stat-val.pl-stat-val-largo { font-size: 1rem; white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }

/* Hero con foto (perfil) */
.pl-hero-con-foto { display: flex; align-items: center; gap: 1.1rem; }
.pl-hero-foto { width: 92px; height: 92px; border-radius: 24px; object-fit: cover; border: 3px solid rgba(255, 255, 255, .35); background: var(--mcdp-surface, #fff); flex-shrink: 0; }
@media (max-width: 767.98px) { .pl-hero-foto { width: 64px; height: 64px; border-radius: 18px; } }

/* =====================================================================
 * REVISIÓN CON SKILLS (2026-10-10): emil-design-eng, break-ui, mobile-native,
 * improve-animations, apple-design, Impeccable. Probado con Playwright
 * (datos extremos, 320–1920 px, tablet táctil). Detalle: prueba/revision-skills/
 * ===================================================================== */
/* ── Tokens de movimiento (improve-animations: cohesión) ── */
:root {
    --pl-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --pl-ease-cajon: cubic-bezier(0.32, 0.72, 0, 1);
    --pl-rapido: 150ms;
}

/* ── 1. break-ui: etiqueta larga aplasta el título de la tarjeta a una letra por línea ──
   (.pl-badge tiene nowrap + flex-shrink:0; con "Suspendido temporalmente por deuda con BPS"
   el título queda con 0 de ancho). La cabecera pasa a dos filas cuando no entra. */
.pl-card-top { flex-wrap: wrap; }
.pl-card-titulo { flex: 1 1 11rem; }
.pl-card-top .pl-badge { max-width: 100%; white-space: normal; text-align: left; line-height: 1.3; }

/* ── 2. break-ui: correos y enlaces largos se cortan en el borde de la tarjeta ── */
.pl-meta { min-width: 0; max-width: 100%; overflow-wrap: anywhere; align-items: flex-start; }
.pl-meta i { flex-shrink: 0; margin-top: .1em; }
.pl-card-desc { overflow-wrap: anywhere; }

/* ── 3. break-ui: en la tabla, un correo largo deja la primera columna en 8 renglones
   y la columna de acciones fija tapa la última sin avisar ── */
.pl-tabla td { overflow-wrap: break-word; }
.pl-tabla td:not(:first-child) { white-space: normal; }
.pl-tabla td > b:first-child { display: inline-block; min-width: min(12rem, 40vw); }
@media (min-width: 768px) {
    .pl-tabla td.pl-col-acciones, .pl-tabla th.pl-col-acciones { box-shadow: -10px 0 12px -10px rgba(15, 23, 42, .18); }
}

/* ── 4. break-ui: números que se comparan, con cifras de ancho fijo ── */
.pl-stat-val, .pl-tabla td, .pl-meta { font-variant-numeric: tabular-nums; }

/* ── 5. Impeccable (contraste): texto blanco sobre el final claro del degradado del
   encabezado = 2,9:1 (WCAG AA pide 4,5:1). Mismo verde institucional, final más oscuro. ── */
.pl-hero { background: linear-gradient(135deg, var(--pl-p), var(--pl-p2)); }
.pl-lateral .offcanvas-header { background: linear-gradient(135deg, var(--pl-p), var(--pl-p2)); }

/* ── 6. Impeccable (lectura): interlineado de títulos de varias líneas ── */
.pl-card-titulo, .pl-stat-val.pl-stat-val-largo { line-height: 1.32; }

/* ── 7. emil-design-eng: transiciones con propiedades exactas (no "all") y curva propia ── */
.pl-btn-ico, .pl-btn-hero, .pl-pastilla, .pl-lateral-pie .btn {
    transition: background-color var(--pl-rapido) ease, border-color var(--pl-rapido) ease,
                color var(--pl-rapido) ease, transform 160ms var(--pl-ease-out);
}
.pl-card { transition: box-shadow 200ms var(--pl-ease-out), transform 200ms var(--pl-ease-out); }

/* ── 8. emil-design-eng + mobile-native: respuesta al apretar, en mouse y en dedo ── */
.pl-btn-ico:active, .pl-btn-hero:active, .pl-pastilla:active, .pl-lateral-pie .btn:active { transform: scale(.97); }

/* ── 9. mobile-native: el hover queda pegado en el celular tras tocar; solo con mouse ── */
@media (hover: none), (pointer: coarse) {
    .pl-card:hover { transform: none; box-shadow: var(--pl-sombra); }
    .pl-tabla tbody tr:hover td { background: transparent; }
    .pl-btn-ico:hover { background: var(--mcdp-surface, #fff); border-color: var(--pl-brd); color: var(--pl-mut); }
    .pl-btn-ico.pl-principal:hover { background: var(--mcdp-surface, #fff); color: var(--pl-p); }
}

/* ── 10. mobile-native: sin destello gris al tocar, sin demora de doble toque,
   sin seleccionar el texto de un botón con pulsación larga ── */
html { -webkit-tap-highlight-color: transparent; }
.pl-btn-ico, .pl-btn-hero, .pl-pastilla, .pl-pestanas a, .pl-lateral-pie .btn {
    touch-action: manipulation; -webkit-user-select: none; user-select: none;
}

/* ── 11. mobile-native / Impeccable (responsive): botones de 44px para el dedo ── */
@media (pointer: coarse) {
    .pl-btn-ico { width: 44px; height: 44px; }
    .pl-pastilla { min-height: 44px; }
}

/* ── 12. mobile-native: 100vh no descuenta la barra del navegador del celular ── */
body.pl-body { min-height: 100dvh; }

/* ── 13. emil-design-eng: panel lateral con curva de cajón; cerrar más rápido que abrir ── */
.pl-lateral.offcanvas { transition: transform 300ms var(--pl-ease-cajon); }
.pl-lateral.offcanvas.hiding { transition-duration: 200ms; }
.pl-lateral .offcanvas-body { overscroll-behavior: contain; }

/* ── 14. Accesibilidad (emil + Impeccable): movimiento reducido ── */
@media (prefers-reduced-motion: reduce) {
    .pl-card, .pl-card:hover { transform: none; }
    .pl-btn-ico:active, .pl-btn-hero:active, .pl-pastilla:active { transform: none; }
    .pl-lateral.offcanvas { transition: opacity 150ms ease; }
    .pl-ev-parpadea { animation: none; outline: 2px solid currentColor; }
}
/* El parpadeo infinito del calendario cansa: dos pulsos y queda marcado */
.pl-ev-parpadea { animation-iteration-count: 2; }

/* ── PC y tablet ── */
/* ── 2. Impeccable adapt (Operate): los datos arriba del pliegue.
   Hoy en tablet horizontal (1024×768) la lista empieza en 517–940 px: debajo del pliegue.
   Encabezado compacto en una sola franja, subtítulo en una línea. ── */
@media (min-width: 768px) {
    .pl-hero { padding: 1rem 1.25rem; border-radius: 22px; align-items: center; margin-bottom: .9rem; }
    .pl-hero-titulo { font-size: clamp(1.25rem, 1.9vw, 1.65rem); margin: .35rem 0 .2rem; letter-spacing: -.01em; }
    .pl-hero-sub { font-size: .9rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
    .pl-hero-badge { font-size: .74rem; padding: .25rem .6rem; }
}

/* ── 3. Indicadores en una sola fila desde 1024 px (hoy 2×2 hasta 1199) y más bajos ── */
@media (min-width: 1024px) {
    .pl-stats { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: .75rem; margin-bottom: .8rem; }
    .pl-stat { padding: .85rem 1rem; }
}

/* ── 4. apple-design (materiales) + Impeccable: barra de búsqueda y filtros fija al
   desplazarse, con fondo translúcido; en listados de 7.000–22.000 px el buscador hoy
   se pierde arriba. ── */
@media (min-width: 768px) {
    .pl-barra {
        position: sticky; top: .5rem; z-index: 20;
        background: rgba(255, 255, 255, .82);
        -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
    }
}
@media (prefers-reduced-transparency: reduce) {
    .pl-barra { background: var(--mcdp-surface, #fff); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ── 5. Impeccable adapt (escritorio: tablas de datos) + break-ui (1000 filas):
   la tabla se desplaza dentro de su caja con el encabezado fijo; la página no mide
   22.000 px y los títulos de columna nunca se pierden. ── */
@media (min-width: 1024px) {
    .pl-tabla-caja { max-height: calc(100dvh - 9.5rem); overflow: auto; overscroll-behavior: contain; }
    .pl-tabla thead th { position: sticky; top: 0; z-index: 2; background: #f7f9f6; box-shadow: inset 0 -1px 0 var(--pl-brd); }
    .pl-tabla thead th.pl-col-acciones { z-index: 3; }
}

/* ── 6. PC: densidad — filas más compactas desde 1440 px ── */
@media (min-width: 1440px) {
    .pl-tabla td { padding-top: .5rem; padding-bottom: .5rem; }
}

/* ── 7. emil-design-eng: tooltips propios en los botones de solo ícono
   (el title nativo tarda ~1 s y no se puede estilar). Ver el JS de inc/plantilla.php.
   Primer tooltip con demora, los siguientes instantáneos; solo con mouse. ── */
.pl-tip {
    position: fixed; z-index: 2000; pointer-events: none;
    background: #1f2a1c; color: #fff; font: 800 .78rem 'Nunito', sans-serif;
    padding: .35rem .6rem; border-radius: 8px; white-space: nowrap;
    opacity: 0; transform: scale(.97); transform-origin: center bottom;
    transition: opacity 125ms ease-out, transform 125ms cubic-bezier(.23, 1, .32, 1);
}
.pl-tip.ver { opacity: 1; transform: none; }
.pl-tip.instantaneo { transition-duration: 0ms; }
@media (hover: none) { .pl-tip { display: none; } }

/* Fila recién guardada: se resalta una vez (ver JS de inc/plantilla.php) */
.pl-fila-guardada td, .pl-card.pl-fila-guardada { animation: pl-guardada 1.6s ease-out 1; }
@keyframes pl-guardada { 0%, 30% { background-color: rgba(114, 140, 106, .18); } 100% { background-color: transparent; } }

/* ── 9. Ayuda de atajos de teclado (sin animación: emil — nunca animar acciones de teclado) ── */
.pl-atajos { position: fixed; inset: 0; z-index: 2200; display: grid; place-items: center; background: rgba(15, 23, 42, .35); }
.pl-atajos[hidden] { display: none; }
.pl-atajos > div { background: var(--mcdp-surface, #fff); border-radius: 18px; padding: 1.2rem 1.4rem; min-width: 300px; box-shadow: 0 24px 60px rgba(0, 0, 0, .25); }
.pl-atajos h3 { font-size: 1rem; font-weight: 900; margin: 0 0 .7rem; }
.pl-atajos dl { display: grid; grid-template-columns: auto 1fr; gap: .45rem .9rem; margin: 0; font-weight: 700; }
.pl-atajos dd { margin: 0; }
.pl-atajos kbd { background: #f1f4f0; border: 1px solid var(--pl-brd); border-bottom-width: 2px; border-radius: 6px; padding: .05rem .45rem; font: 800 .82rem 'Nunito', sans-serif; color: var(--pl-txt); }

/* ── 10. Impeccable adapt (impresión): imprimir un listado sin menú, botones ni
   barras; tabla completa y fecha de impresión. ── */
@media print {
    #sidebar, header, .navbar, .pl-hero-acc, .pl-barra, .pl-filtros, .pl-col-acciones, .pl-acciones,
    .pl-card-pie, .offcanvas, .pl-lateral, .pl-toast, .pl-tip, .burger-btn, .pl-pagin, footer { display: none !important; }
    #main { margin: 0 !important; padding: 0 !important; }
    body, body.pl-body { background: #fff !important; }
    .pl-hero { background: none !important; color: #000 !important; box-shadow: none; border: 0; padding: 0 0 .5rem; border-bottom: 2px solid #000; border-radius: 0; }
    .pl-hero-titulo, .pl-hero-sub { color: #000 !important; -webkit-line-clamp: unset; }
    .pl-hero[data-impreso]::after { content: "Impreso el " attr(data-impreso); display: block; font-size: 9pt; margin-top: .3rem; }
    .pl-stats { grid-template-columns: repeat(4, 1fr) !important; }
    .pl-stat, .pl-card, .pl-tabla-caja { box-shadow: none !important; border: 1px solid #999 !important; }
    .pl-tabla-caja { max-height: none !important; overflow: visible !important; }
    .pl-tabla thead { display: table-header-group; }
    .pl-tabla tr { break-inside: avoid; }
    .pl-grilla { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Conversación: chat() (asistente IA) ── */
.pl-chat { background: var(--mcdp-surface, #fff); border: 1px solid var(--pl-brd); border-radius: var(--pl-rad); box-shadow: var(--pl-sombra); display: flex; flex-direction: column; height: calc(100dvh - 15rem); min-height: 460px; overflow: hidden; }
.pl-chat-cab { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem 1.15rem; border-bottom: 1px solid var(--pl-brd); }
.pl-chat-cab b { display: block; font-weight: 900; }
.pl-chat-cab span { font-size: .85rem; font-weight: 700; color: var(--pl-mut); }
.pl-chat-estado { display: flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 800; color: var(--pl-mut); white-space: nowrap; }
.pl-chat-punto { width: 9px; height: 9px; border-radius: 50%; background: #198754; box-shadow: 0 0 0 4px rgba(25, 135, 84, .14); }
.pl-chat-sugerencias { display: flex; gap: .4rem; flex-wrap: wrap; padding: .7rem 1.15rem; border-bottom: 1px solid var(--pl-brd); background: rgba(80, 102, 71, .03); }
.pl-chat-mensajes { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1.1rem; display: flex; flex-direction: column; gap: .9rem; background: #fbfcfb; }
.pl-chat-vacio { margin: auto; text-align: center; color: var(--pl-mut); max-width: 460px; }
.pl-chat-vacio i { display: block; font-size: 2.4rem; opacity: .3; margin-bottom: .6rem; }
.pl-chat-vacio b { display: block; color: var(--pl-txt); margin-bottom: .3rem; }
.pl-chat-vacio p { margin: 0; font-weight: 700; font-size: .9rem; }
.pl-chat-mensaje { display: flex; gap: .7rem; max-width: min(760px, 92%); }
.pl-chat-mensaje.user { margin-left: auto; flex-direction: row-reverse; }
.pl-chat-avatar { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; background: #eef3ec; color: var(--pl-p); }
.pl-chat-mensaje.user .pl-chat-avatar { background: var(--pl-p); color: #fff; }
.pl-chat-burbuja { padding: .8rem 1rem; border-radius: 16px; border: 1px solid var(--pl-brd); background: var(--mcdp-surface, #fff); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--pl-txt); font-weight: 600; }
.pl-chat-mensaje.assistant .pl-chat-burbuja { border-top-left-radius: 6px; }
.pl-chat-mensaje.user .pl-chat-burbuja { background: var(--pl-p); color: #fff; border-color: transparent; border-top-right-radius: 6px; }
.pl-chat-meta { margin-top: .3rem; font-size: .76rem; font-weight: 700; color: var(--pl-mut); }
.pl-chat-mensaje.user .pl-chat-meta { text-align: right; }
.pl-chat-escribiendo { display: inline-flex; gap: .3rem; }
.pl-chat-escribiendo span { width: 7px; height: 7px; border-radius: 50%; background: #8a9a86; animation: pl-chat-punto 1.2s infinite ease-in-out; }
.pl-chat-escribiendo span:nth-child(2) { animation-delay: .15s; }
.pl-chat-escribiendo span:nth-child(3) { animation-delay: .3s; }
@keyframes pl-chat-punto { 0%, 80%, 100% { opacity: .35; transform: scale(.75); } 40% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pl-chat-escribiendo span { animation: none; opacity: .6; } }
.pl-chat-redactar { border-top: 1px solid var(--pl-brd); padding: .8rem 1.15rem 1rem; background: var(--mcdp-surface, #fff); }
.pl-chat-redactar textarea { width: 100%; border: 1px solid var(--pl-brd); border-radius: 14px; padding: .7rem .9rem; resize: none; min-height: 72px; max-height: 200px; font-family: 'Nunito', sans-serif; font-weight: 600; outline: none; }
.pl-chat-redactar textarea:focus { border-color: var(--pl-claro); box-shadow: 0 0 0 3px rgba(114, 140, 106, .14); }
.pl-chat-pie { display: flex; justify-content: space-between; align-items: center; gap: .8rem; margin-top: .6rem; font-size: .8rem; font-weight: 700; color: var(--pl-mut); }
.pl-chat-enviar { border-radius: 11px; font-weight: 900; background: var(--pl-p); border-color: var(--pl-p); }
.pl-chat-enviar:hover { background: var(--pl-p-osc); border-color: var(--pl-p-osc); }
@media (max-width: 767.98px) { .pl-chat { height: calc(100dvh - 12rem); } .pl-chat-pie > span { display: none; } }

/* ── muestra_color() ── */
.pl-muestra { display: inline-flex; align-items: center; gap: .5rem; font-variant-numeric: tabular-nums; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .86rem; font-weight: 700; }
.pl-muestra-color { width: 26px; height: 26px; border-radius: 8px; border: 1px solid rgba(0, 0, 0, .12); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); flex-shrink: 0; }
.pl-lateral input[type="color"] { height: 42px; padding: .25rem; cursor: pointer; }

/* ── mapa() ── */
.pl-mapa { width: 100%; min-height: 380px; border-radius: var(--pl-rad); border: 1px solid var(--pl-brd); box-shadow: var(--pl-sombra); overflow: hidden; z-index: 0; }
.pl-mapa .leaflet-control-geocoder { border: 0 !important; border-radius: 12px !important; box-shadow: 0 8px 20px rgba(15, 23, 42, .14) !important; }
.pl-mapa .leaflet-control-geocoder-form input { height: 40px; padding: 0 .8rem; font: 700 16px 'Nunito', sans-serif; border-radius: 12px; min-width: min(320px, 60vw); }
.pl-mapa .leaflet-bar, .pl-mapa .leaflet-control-layers { border: 0 !important; border-radius: 12px !important; box-shadow: 0 8px 20px rgba(15, 23, 42, .14) !important; }
@media (max-width: 767.98px) { .pl-mapa { height: 60vh !important; } }

/* ── foto() ── */
.pl-foto { margin: 0; background: var(--mcdp-surface, #fff); border: 1px solid var(--pl-brd); border-radius: var(--pl-rad); box-shadow: var(--pl-sombra); overflow: hidden; }
.pl-foto img { display: block; width: 100%; max-height: 70vh; object-fit: contain; background: #f3f5f2; }
.pl-foto figcaption { padding: .6rem 1rem; font-size: .85rem; font-weight: 700; color: var(--pl-mut); border-top: 1px solid var(--pl-brd); }
.pl-foto-vacia { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 2.2rem 1rem; color: var(--pl-mut); font-weight: 700; }
.pl-foto-vacia i { font-size: 2rem; opacity: .35; }

/* ── progreso() ── */
.pl-progreso { display: flex; flex-direction: column; gap: .3rem; width: 100%; min-width: 120px; }
.pl-progreso-txt { display: flex; justify-content: space-between; gap: .5rem; font-size: .78rem; font-weight: 800; color: var(--pl-mut); }
.pl-progreso-txt b { color: var(--pl-txt); font-variant-numeric: tabular-nums; }
.pl-progreso-barra { height: 8px; border-radius: 999px; background: rgba(0, 0, 0, .07); overflow: hidden; }
.pl-progreso-barra > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--pl-claro), var(--pl-p)); }

/* Lista de verificación (campo 'verificacion'): Sí / No por ítem; al marcar No, detalle y foto */
.pl-verif { border: 1px solid var(--pl-brd); border-radius: 14px; overflow: hidden; }
.pl-verif-grupo { padding: .5rem .8rem; background: rgba(80, 102, 71, .06); font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--pl-p); }
.pl-verif-item { display: grid; grid-template-columns: 1fr auto; gap: .35rem .8rem; align-items: center; padding: .55rem .8rem; border-top: 1px solid var(--pl-brd); }
.pl-verif-txt { font-size: .9rem; }
.pl-verif-op { display: flex; gap: .35rem; }
.pl-verif-op label { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .7rem; border: 1px solid var(--pl-brd); border-radius: 999px; font-weight: 700; font-size: .85rem; cursor: pointer; }
.pl-verif-op input { accent-color: var(--pl-p); }
.pl-verif-si:has(input:checked) { background: rgba(25, 135, 84, .1); border-color: rgba(25, 135, 84, .45); }
.pl-verif-nolbl:has(input:checked) { background: rgba(220, 53, 69, .1); border-color: rgba(220, 53, 69, .45); }
.pl-verif-no { grid-column: 1 / -1; display: grid; gap: .4rem; }
.pl-verif-no[hidden] { display: none; }
/* Al marcar "No" se avisa que es una falla, no una aclaración */
.pl-verif-alerta { display: flex; align-items: center; gap: .4rem; padding: .4rem .65rem; border: 1px solid rgba(220, 53, 69, .35); border-radius: 10px; background: rgba(220, 53, 69, .09); color: #a52636; font-size: .8rem; font-weight: 800; }

/* Horario de la semana (campo 'horario'): día, inicio y fin */
.pl-horario { display: grid; gap: .35rem; }
.pl-horario-cab, .pl-horario-fila { display: grid; grid-template-columns: 6.5rem 1fr 1fr; gap: .5rem; align-items: center; }
.pl-horario-cab { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--pl-muted, #5c6b7d); }
.pl-horario-fila > span { font-weight: 700; font-size: .9rem; }

/* ── Pantalla de solo mapa (pagina(['pantalla' => 'mapa']), p.ej. calles) ── */
.pl-pantalla-mapa #main, .pl-pantalla-mapa #main-content { padding: 0 !important; }
.pl-pantalla-mapa .pl-wrap { max-width: none; padding: 0; }
.pl-pantalla-mapa footer { display: none; }
.pl-mapa-caja { position: relative; }
.pl-mapa.pl-mapa-completo { height: 100dvh !important; border-radius: 0; border: 0; box-shadow: none; }
@media (min-width: 768px) { .pl-pantalla-mapa #main > header { display: none; } }
@media (max-width: 767.98px) { .pl-mapa.pl-mapa-completo { height: calc(100dvh - 72px) !important; } }
.pl-mapa-herr { position: absolute; top: 12px; left: 12px; z-index: 1000; display: flex; flex-wrap: nowrap; align-items: center; gap: .4rem; max-width: calc(100% - 400px); }
.pl-mapa-herr .pl-btn-ico { background: #fff; box-shadow: 0 8px 20px rgba(15, 23, 42, .14); width: 40px; height: 40px; }
.pl-mapa-buscar { flex: 0 1 280px; min-width: 120px; height: 40px; border: 0; border-radius: 12px; box-shadow: 0 8px 20px rgba(15, 23, 42, .14); font-weight: 700; }
.pl-mapa-caja .leaflet-top.leaflet-left { top: 62px; }
.pl-mapa-leyenda { position: absolute; right: 12px; bottom: 26px; z-index: 1000; background: #fff; border-radius: 12px; box-shadow: 0 8px 20px rgba(15, 23, 42, .14); max-width: min(420px, 60%); }
.pl-mapa-leyenda summary { list-style: none; cursor: pointer; padding: .55rem .9rem; font-weight: 800; font-size: .85rem; color: var(--pl-txt); display: flex; align-items: center; gap: .4rem; }
.pl-mapa-leyenda summary::-webkit-details-marker { display: none; }
.pl-mapa-leyenda summary::after { content: "\F282"; font-family: "bootstrap-icons"; font-size: .75rem; margin-left: auto; transition: transform .15s; }
.pl-mapa-leyenda[open] summary::after { transform: rotate(180deg); }
.pl-mapa-leyenda summary:focus-visible { outline: 2px solid var(--pl-p); outline-offset: -2px; border-radius: 12px; }
.pl-mapa-leyenda .pl-leyenda { margin: 0; padding: 0 .9rem .7rem; color: var(--pl-txt); }
@media (max-width: 991.98px) {
    .pl-mapa-herr { right: 64px; max-width: none; }
    .pl-mapa-buscar { flex: 1 1 180px; }
    .pl-mapa-caja .leaflet-top.leaflet-left { top: 62px; }
    .pl-mapa-caja .leaflet-top.leaflet-right { top: 0; }
    .pl-mapa-caja .leaflet-control-geocoder { margin-top: 62px !important; }
}
@media (max-width: 575.98px) {
    .pl-mapa-herr { flex-wrap: wrap; }
    .pl-mapa-caja .leaflet-top.leaflet-left { top: 112px; }
    .pl-mapa-leyenda { left: 12px; right: auto; bottom: 64px; max-width: calc(100% - 24px); }
}
.pl-panel-info .offcanvas-body { padding-top: .5rem; }
.pl-panel-info .pl-grilla { grid-template-columns: 1fr; }

.pl-panel-info .pl-filtros { flex-direction: column; align-items: stretch; box-shadow: none; padding: 0; background: none; }
.pl-panel-info .pl-filtro { display: flex; flex-direction: column; align-items: stretch; gap: .25rem; text-align: left; }
.pl-panel-info .pl-filtro-sel { width: 100%; max-width: none; }

/* Orden por columna en tabla(): el encabezado es un botón que alterna de menor a mayor y al revés */
.pl-tabla th .pl-orden { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; }
/* La flechita aparece al pasar el mouse, con el foco o en la columna ordenada: en reposo el encabezado se ve como siempre */
.pl-tabla th .pl-orden i { font-size: .8em; opacity: 0; transition: opacity .12s; }
.pl-tabla th .pl-orden:hover i, .pl-tabla th .pl-orden:focus-visible i, .pl-tabla th[aria-sort="ascending"] .pl-orden i, .pl-tabla th[aria-sort="descending"] .pl-orden i { opacity: 1; color: var(--pl-p); }
.pl-tabla th .pl-orden:focus-visible { outline: 2px solid var(--pl-p); outline-offset: 3px; border-radius: 4px; }
@media print { .pl-tabla th .pl-orden i { display: none; } }