/* ════════════════════════════════════════════════════════
   Pisos de Resina — Shared CSS (páginas internas / herramientas)
   Importar en cada página: <link rel="stylesheet" href="../css/pdr-shared.css">
═══════════════════════════════════════════════════════════ */

:root{
    /* ── Tema claro ────────────────────────────────
       Grises FRÍOS (con azul dentro), no cálidos. El beige de antes
       peleaba con el azul de la marca: sobre fondo cálido, un azul
       saturado se ve morado. Blanco para las tarjetas, gris para el
       fondo, y así la tarjeta se separa sola sin necesidad de borde. */
    --l-bg:#F4F6FA; --l-bg-2:#EDF0F7; --l-bg-3:#E1E7F0; --l-bg-card:#FFFFFF;
    --l-ink:#0F172A; --l-ink-soft:rgba(15,23,42,.78);
    /* .64 y .52 (antes .55 y .36): el gris al 36% daba 2.6:1 y se usaba en
       horas, ejes y contadores que SÍ son información. --muted pasa de 5 en
       blanco y en --bg-2; --muted-2 queda para marcadores de posición e
       iconos (≥3:1), nunca para texto que haya que leer. */
    --l-muted:rgba(15,23,42,.64); --l-muted-2:rgba(15,23,42,.52);
    --l-line:rgba(15,23,42,.09); --l-line-2:rgba(15,23,42,.16);
    --l-hover:rgba(15,23,42,.04);
    /* ── Tema oscuro ──────────────────────────────── */
    --d-bg:#0B0F1A; --d-bg-2:#121826; --d-bg-3:#1B2333; --d-bg-card:#121826D9;
    --d-ink:#F1F5F9; --d-ink-soft:rgba(241,245,249,.78);
    --d-muted:rgba(241,245,249,.55); --d-muted-2:rgba(241,245,249,.52);
    --d-line:rgba(241,245,249,.08); --d-line-2:rgba(241,245,249,.15);
    --d-hover:rgba(241,245,249,.05);
    /* ── Acentos ──────────────────────────────────── */
    --c-cobalt:#1D4ED8;  --c-cobalt-2:#2563EB;
    --c-emerald:#059669; --c-emerald-2:#34D399;
    --c-amber:#B45309;   --c-amber-2:#F59E0B;
    --c-rose:#BE123C;    --c-rose-2:#F43F5E;

    /* ── Menú lateral ──────────────────────────────
       Va en azul marino SIEMPRE, en tema claro y en oscuro. Es el ancla
       visual de la plataforma: al lado del contenido blanco dice de un
       vistazo dónde termina la navegación y dónde empieza el trabajo. */
    --side-bg:#131A32; --side-bg-2:#1C2444;
    --side-ink:rgba(255,255,255,.72); --side-ink-on:#FFFFFF;
    /* .58 y no .42: al 42% daba 4.0:1 sobre el marino, por debajo del 4.5:1 que
       pide texto normal. Los títulos de sección y el plan se leían a medias. */
    --side-muted:rgba(255,255,255,.58);
    --side-line:rgba(255,255,255,.09);
    /* El anillo de foco del tema claro es el azul de marca, que sobre el marino
       da 2.6:1 y desaparece: quien navega con teclado pierde el cursor justo en
       el menú. Dentro del lateral el foco se marca en blanco. */
    --side-ring:rgba(255,255,255,.9);
    /* ── Estado base (light + cobalt por defecto) ─── */
    --bg:var(--l-bg); --bg-2:var(--l-bg-2); --bg-3:var(--l-bg-3); --bg-card:var(--l-bg-card);
    --ink:var(--l-ink); --ink-soft:var(--l-ink-soft);
    --muted:var(--l-muted); --muted-2:var(--l-muted-2);
    --line:var(--l-line); --line-2:var(--l-line-2);
    --hover:var(--l-hover);
    --accent:var(--c-cobalt); --accent-2:var(--c-cobalt-2);
    --accent-soft:rgba(30,58,138,.12); --accent-glow:rgba(30,58,138,.35);
    --green:#15803D; --green-2:#34D399; --green-soft:rgba(21,128,61,.12);
    /* --amber-2 y --red-2 son los tonos CLAROS, para trazos de gráfica y puntos
       de leyenda sobre fondo oscuro. Faltaba --amber-2 y varias reglas lo
       usaban: `stroke:var(--amber-2)` con la variable sin definir es una
       declaración inválida, así que el trazo heredaba y desaparecía. Se comían
       la línea de gastos de Finanzas y el color de las estrellas del directorio. */
    --amber:#B45309; --amber-2:#F59E0B; --amber-soft:rgba(180,83,9,.1);
    --red:#B91C1C; --red-2:#F43F5E; --red-soft:rgba(185,28,28,.1);
    /* Cuarto color, solo para tintar iconos y segmentos de gráfica cuando
       azul/verde/ámbar ya están tomados. No es un estado: no significa nada
       por sí solo, así que nunca se usa para "correcto" ni "error". */
    --violet:#6D28D9; --violet-2:#8B5CF6; --violet-soft:rgba(109,40,217,.12);
    /* Texto ENCIMA de un fondo sólido de estado (var(--red|green|amber)). En
       claro esos fondos son oscuros y el texto va en blanco; en oscuro los
       tonos pasan a claros (#4ADE80…) y el blanco daría ~1.6:1, así que ahí
       vale casi negro. Nunca escribir `color:#fff` sobre un fondo de estado. */
    --on-status:#fff;
    /* Tinta de acento: SOLO para `color:` (texto e iconos) y el anillo de foco.
       Los fondos siguen con --accent. En claro es el mismo acento salvo
       esmeralda (#059669 da 3.8:1 en blanco); en oscuro sube a un tono claro,
       porque el cobalto da 2.6-3.5:1 sobre el fondo marino. Se redefine en
       cada [data-accent] y en cada combinación oscuro × acento (más abajo). */
    --accent-ink:var(--accent);
    /* WhatsApp: el verde de la marca va SOLO como fondo del icono, con tinta
       oscura encima (blanco sobre #25D366 da 1.98:1). La palabra "WhatsApp"
       escrita va en var(--green), que sí pasa en los dos temas. */
    --wa:#25D366; --wa-ink:#0B141A;

    /* ── Escala tipográfica (una sola) ─────────────────
       Siete tamaños y ninguno por debajo de 11px. Las etiquetas mono en
       mayúsculas usan --fs-2xs; el H1 de página va de 24px (móvil) a 28px
       (escritorio), el tope de docs/herramientas-en-la-app.md; las cifras de
       KPI, de ~21 a 24px y además se ajustan al ancho de su tarjeta. */
    --fs-2xs:.7rem; --fs-xs:.78rem; --fs-sm:.86rem; --fs-md:.95rem; --fs-lg:1.1rem;
    --fs-num:clamp(1.3rem,1rem + 1vw,1.5rem);
    --fs-h1:clamp(1.5rem,1.2rem + 1vw,1.75rem);
    /* Controles nativos (casillas, selects, barras de scroll) en el tema de
       la página y con el color de acento. */
    color-scheme:light;

    /* ── Escala de radios ──────────────────────────────
       Una sola escala para toda la app. Antes cada página elegía su
       propio número (9, 10, 12, 14, 16px) y las esquinas no casaban
       entre tarjeta, botón y campo puestos uno al lado del otro. */
    --r-xs:6px; --r-sm:9px; --r:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;

    /* ── Escala de elevación ───────────────────────────
       Dos sombras por nivel (uno de contacto + uno de difusión) porque
       una sola sombra grande se ve como mancha gris. Los valores son
       negros translúcidos, no grises: sobre fondo cálido un gris tiñe. */
    --sh-1:0 1px 2px rgba(10,10,9,.05), 0 1px 3px -1px rgba(10,10,9,.04);
    --sh-2:0 2px 4px -1px rgba(10,10,9,.04), 0 10px 24px -14px rgba(10,10,9,.18);
    --sh-3:0 4px 8px -2px rgba(10,10,9,.05), 0 24px 48px -24px rgba(10,10,9,.26);
    --sh-pop:0 8px 16px -6px rgba(10,10,9,.1), 0 32px 64px -28px rgba(10,10,9,.32);
    /* Anillo de foco: SIEMPRE visible con teclado (WCAG 2.4.7). */
    --ring:0 0 0 3px var(--accent-soft);

    /* ── Escala de espaciado ───────────────────────────
       Múltiplos de 4. `--sp-fluid` es el respiro de sección: crece en
       escritorio sin ahogar el móvil (que es donde trabaja el aplicador). */
    --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
    --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:56px;
    --sp-fluid:clamp(20px,3.2vw,36px);

    /* ── Duraciones ───────────────────────────────────── */
    --t-fast:.13s; --t:.18s; --t-slow:.28s;
    --ease-out:cubic-bezier(.22,1,.36,1);
    --ease-spring:cubic-bezier(.34,1.4,.64,1);
}
/* ── Dark mode ([data-theme="dark"] en <html> o <body>) ──
   El selector sin elemento permite aplicar el tema desde <html>
   ANTES de que exista el body (pdr-theme.js corre en el head)
   y así eliminar el flash blanco al navegar. */
[data-theme="dark"]{
    --bg:var(--d-bg); --bg-2:var(--d-bg-2); --bg-3:var(--d-bg-3); --bg-card:var(--d-bg-card);
    --ink:var(--d-ink); --ink-soft:var(--d-ink-soft);
    --muted:var(--d-muted); --muted-2:var(--d-muted-2);
    --line:var(--d-line); --line-2:var(--d-line-2);
    --hover:var(--d-hover);
    /* En oscuro una sombra negra no se ve: el fondo ya es casi negro. La
       elevación se lee por sombra MÁS dura y por un borde superior claro
       (el "lip" que simula la luz cayendo desde arriba). */
    --sh-1:0 1px 2px rgba(0,0,0,.4);
    --sh-2:0 2px 6px rgba(0,0,0,.45), 0 12px 28px -16px rgba(0,0,0,.7);
    --sh-3:0 4px 10px rgba(0,0,0,.5), 0 28px 56px -26px rgba(0,0,0,.8);
    --sh-pop:0 10px 20px -8px rgba(0,0,0,.6), 0 40px 80px -30px rgba(0,0,0,.9);
    /* Estados propios del oscuro. Los de claro (#B91C1C, #15803D, #B45309)
       daban 2.6-3.3:1 sobre el fondo marino: "$52,345 por cobrar", "Hoy",
       "Siempre activa" se leían a medias. Estos pasan de 4.5 en fondo y en
       tarjeta; los tintes suaves se rehacen con el tono nuevo. */
    --red:#F87171;   --red-soft:rgba(248,113,113,.14);
    --green:#4ADE80; --green-soft:rgba(74,222,128,.13);
    --amber:#FBBF24; --amber-soft:rgba(251,191,36,.13);
    --violet:#A78BFA; --violet-soft:rgba(167,139,250,.14);
    --on-status:#0B0F1A;
    --accent-ink:#7AA2FF;
    /* El anillo de claro (acento al 12%) no se ve sobre el marino. */
    --ring:0 0 0 3px color-mix(in srgb, var(--accent-ink) 45%, transparent);
    color-scheme:dark;
}
/* ── Accents ─────────────────────────────────────── */
[data-accent="cobalt"]{--accent:var(--c-cobalt);--accent-2:var(--c-cobalt-2);--accent-soft:rgba(30,58,138,.12);--accent-glow:rgba(30,58,138,.35);--accent-ink:var(--c-cobalt);}
[data-accent="emerald"]{--accent:var(--c-emerald);--accent-2:var(--c-emerald-2);--accent-soft:rgba(5,150,105,.12);--accent-glow:rgba(5,150,105,.35);--accent-ink:#047857;}
[data-accent="amber"]{--accent:var(--c-amber);--accent-2:var(--c-amber-2);--accent-soft:rgba(180,83,9,.12);--accent-glow:rgba(180,83,9,.35);--accent-ink:var(--c-amber);}
[data-accent="rose"]{--accent:var(--c-rose);--accent-2:var(--c-rose-2);--accent-soft:rgba(190,18,60,.12);--accent-glow:rgba(190,18,60,.35);--accent-ink:var(--c-rose);}
/* Oscuro × acento. Dos atributos (0,2,0) para ganarle al bloque de acento de
   arriba, que va después del de oscuro y si no lo pisaría. pdr-theme.js pone
   los dos atributos en <html> y en <body>; la forma con espacio cubre el caso
   de un contenedor con su propio data-accent dentro de una página oscura. */
[data-theme="dark"][data-accent], [data-theme="dark"] [data-accent]{--accent-ink:#7AA2FF;}
[data-theme="dark"][data-accent="emerald"], [data-theme="dark"] [data-accent="emerald"]{--accent-ink:#34D399;}
[data-theme="dark"][data-accent="amber"], [data-theme="dark"] [data-accent="amber"]{--accent-ink:#FBBF24;}
[data-theme="dark"][data-accent="rose"], [data-theme="dark"] [data-accent="rose"]{--accent-ink:#FB7185;}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;}
html,body{
    background:var(--bg);color:var(--ink);
    font-family:'Inter',system-ui,sans-serif;
    min-height:100vh;
    font-feature-settings:'ss01','cv11';
    letter-spacing:-.005em;
    accent-color:var(--accent);
}
/* `hidden` manda siempre. Sin el !important, una clase con display:flex le
   ganaba al atributo y el elemento "oculto" seguía en pantalla (así asomaba
   el contador de filtros del directorio en 0). Para mostrar/ocultar desde JS:
   el.hidden = true/false, no style.display. */
[hidden]{display:none !important;}

/* ════════════════════════════════════════════════════════
   TOP NAV (páginas internas)
═══════════════════════════════════════════════════════════ */
.pdr-top-nav{
    position:sticky;top:0;z-index:30;
    /* Grises fríos del tema (antes un beige fijo que no casaba con --bg).
       Una sola regla para los dos temas: --bg ya cambia con [data-theme]. */
    background:color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter:blur(24px) saturate(180%);
    -webkit-backdrop-filter:blur(24px) saturate(180%);
    border-bottom:1px solid var(--line);
    padding:14px clamp(16px,4vw,32px);
    display:flex;align-items:center;gap:14px;
}
.pdr-back{
    display:inline-flex;align-items:center;gap:7px;
    background:transparent;border:0;color:var(--ink);
    font-family:'Inter Tight',sans-serif;font-weight:500;font-size:.82rem;
    cursor:pointer;text-decoration:none;
    padding:8px 14px;min-height:38px;border-radius:8px;
    transition:background .15s;
}
.pdr-back:hover{background:var(--hover);}
.pdr-back svg{width:14px;height:14px;}
.pdr-top-title{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:.95rem;letter-spacing:-.012em;}
.pdr-top-action{margin-left:auto;display:flex;gap:8px;align-items:center;}

/* ════════════════════════════════════════════════════════
   CONTAINER & SECTIONS
═══════════════════════════════════════════════════════════ */
.pdr-container{
    max-width:1180px;margin:0 auto;
    padding:clamp(20px,3vw,40px) clamp(16px,4vw,32px) 80px;
}
.pdr-container.narrow{max-width:780px;}
.pdr-container.medium{max-width:920px;}

.pdr-hero{margin-bottom:32px;}
.pdr-hero h1{
    font-family:'Inter Tight',sans-serif;font-weight:700;
    font-size:var(--fs-h1);
    letter-spacing:-.025em;line-height:1.1;
}
.pdr-hero p{
    margin-top:8px;color:var(--muted);
    font-size:.95rem;line-height:1.55;max-width:620px;
}

.pdr-section{margin-bottom:32px;}
.pdr-section-head{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:14px;gap:12px;flex-wrap:wrap;
}
.pdr-section-head h2{
    font-family:'JetBrains Mono',monospace;
    font-size:var(--fs-2xs);font-weight:600;
    color:var(--muted);letter-spacing:.06em;text-transform:uppercase;
}
.pdr-section-link{
    font-size:.74rem;color:var(--muted);text-decoration:none;
    display:flex;align-items:center;gap:5px;
}
.pdr-section-link:hover{color:var(--ink);}

/* ════════════════════════════════════════════════════════
   CARDS
═══════════════════════════════════════════════════════════ */
.pdr-card{
    background:var(--bg-card);
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    padding:24px;
    box-shadow:var(--sh-1);
}
.pdr-card.compact{padding:16px;}
.pdr-card.tight{padding:14px;}
.pdr-card.flat{box-shadow:none;}
/* Tarjeta que ES un enlace/botón: se levanta al pasar por encima.
   No se aplica a .pdr-card a secas para que una tarjeta de solo lectura
   no prometa un clic que no existe. */
a.pdr-card, button.pdr-card, .pdr-card.clickable{
    display:block;text-decoration:none;color:inherit;text-align:left;width:100%;
    transition:box-shadow var(--t) var(--ease-out), transform var(--t) var(--ease-out), border-color var(--t);
}
a.pdr-card:hover, button.pdr-card:hover, .pdr-card.clickable:hover{
    box-shadow:var(--sh-2);transform:translateY(-2px);border-color:var(--line-2);
}
@media (prefers-reduced-motion:reduce){
    a.pdr-card:hover, button.pdr-card:hover, .pdr-card.clickable:hover{transform:none;}
}

.pdr-card-head{
    margin-bottom:16px;padding-bottom:12px;
    border-bottom:1px solid var(--line);
}
.pdr-card-head h3{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:1.05rem;letter-spacing:-.012em;}
.pdr-card-head p{color:var(--muted);font-size:.82rem;margin-top:3px;}

/* ════════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════════ */
.pdr-btn{
    appearance:none;border:1px solid var(--line);
    background:var(--bg-card);color:var(--ink);
    font-family:'Inter Tight',sans-serif;font-weight:600;font-size:.82rem;
    /* 38px de alto: por debajo de eso el dedo falla. El botón grande (.lg)
       llega a 46px, que es el de las acciones principales en móvil. */
    padding:10px 16px;min-height:38px;border-radius:var(--r-sm);cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;gap:7px;
    transition:background var(--t), border-color var(--t), box-shadow var(--t), transform var(--t-fast);
    text-decoration:none;letter-spacing:-.005em;white-space:nowrap;
    box-shadow:var(--sh-1);
}
.pdr-btn:hover{background:var(--bg-2);border-color:var(--line-2);box-shadow:var(--sh-2);}
.pdr-btn:active{transform:translateY(1px);box-shadow:var(--sh-1);}
.pdr-btn:disabled, .pdr-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none;}
/* Principal apagado: gris sólido en vez de acento translúcido. Con la opacidad,
   "Generar previsualización" quedaba en 3.5:1 sobre el fondo oscuro. Es el
   mismo tratamiento que el Enviar del Asistente. Solo :disabled: el
   aria-disabled que usa el kit MIENTRAS corre una acción conserva el atenuado,
   que ahí significa "espera", no "apagado". */
.pdr-btn.primary:disabled{opacity:1;background:var(--bg-3);border-color:var(--line-2);color:var(--ink-soft);}
.pdr-btn svg{width:14px;height:14px;flex-shrink:0;}
.pdr-btn.primary{background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:600;}
.pdr-btn.primary:hover{background:var(--accent);border-color:var(--accent);color:#fff;}
.pdr-btn.accent{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600;}
.pdr-btn.accent:hover{background:var(--ink);border-color:var(--ink);color:var(--bg);}
.pdr-btn.danger{color:var(--red);border-color:color-mix(in srgb, var(--red) 25%, transparent);}
.pdr-btn.danger:hover{background:var(--red-soft);}
/* Terciario: sin caja. Para acciones que acompañan y no compiten. */
.pdr-btn.ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--ink-soft);}
.pdr-btn.ghost:hover{background:var(--hover);border-color:transparent;box-shadow:none;color:var(--ink);}
.pdr-btn.block{width:100%;}
.pdr-btn.sm{padding:6px 11px;min-height:30px;font-size:.74rem;}
.pdr-btn.lg{padding:13px 22px;min-height:46px;font-size:.95rem;border-radius:var(--r);}

/* ── Foco visible en TODO lo interactivo ───────────────────
   Regla de accesibilidad, no de estética: sin esto, quien navega con
   teclado no sabe dónde está. `:focus-visible` no molesta al ratón. */
.pdr-btn:focus-visible, .pdr-modal-btn:focus-visible, a:focus-visible,
button:focus-visible, [tabindex]:focus-visible, summary:focus-visible{
    outline:2px solid var(--accent-ink);outline-offset:2px;border-radius:var(--r-xs);
}
/* Campos: un contorno del mismo tono, pegado al borde. Muchos campos propios
   de página traen `outline:none` y su único aviso de foco era un cambio de
   borde de 1px que en oscuro no se distingue. `html` delante sube la
   especificidad a (0,2,1) para ganarles sin !important. */
html :is(input,select,textarea,[contenteditable]):focus-visible{
    outline:2px solid var(--accent-ink);outline-offset:1px;
}
/* El compositor del asistente marca el foco en la caja entera (:focus-within),
   no en el textarea de adentro: dos anillos juntos se ven como error. */
.asis-caja :is(textarea,input):focus-visible{outline:none;}
/* Sobre el marino del menú, el azul de marca no se ve: el foco va en blanco.
   Cubre el menú del hub (.sidebar) y el del armazón (.pdr-shell-sidebar). */
.sidebar :focus-visible, .pdr-shell-sidebar :focus-visible, .pdr-side :focus-visible,
html .sidebar :is(input,select,textarea):focus-visible,
html .pdr-shell-sidebar :is(input,select,textarea):focus-visible,
html .pdr-side :is(input,select,textarea):focus-visible{
    outline-color:var(--side-ring);
}

/* ════════════════════════════════════════════════════════
   FORMS
═══════════════════════════════════════════════════════════ */
.pdr-field{margin-bottom:16px;}
/* Etiqueta de campo en frase, no en mono mayúsculas: a 9.6px gris se leía mal
   de pie en obra, y el mismo estilo servía a la vez de etiqueta, título de
   sección, KPI y estado. El mono en mayúsculas queda para esos tres últimos. */
.pdr-label{
    display:block;
    font-family:inherit;font-size:.84rem;font-weight:600;
    color:var(--ink-soft);letter-spacing:-.005em;text-transform:none;
    margin-bottom:6px;
}
.pdr-input, .pdr-textarea, .pdr-select{
    width:100%;
    background:var(--bg-card);
    border:1px solid var(--line);
    border-radius:var(--r-sm);
    /* 16px de fuente en móvil o iOS hace zoom al enfocar el campo y
       descuadra la pantalla. Por eso el mínimo es 16px hasta 560px. */
    padding:11px 13px;min-height:44px;
    font-family:inherit;font-size:.92rem;
    color:var(--ink);outline:none;
    transition:border-color var(--t), box-shadow var(--t);
}
@media (max-width:560px){
    .pdr-input, .pdr-textarea, .pdr-select{font-size:16px;}
    /* Red de seguridad para los campos PROPIOS de página (.op-search,
       .ap-field input, .au-param input, .tools-search input…), que no usan
       .pdr-input y se quedaban en 13-14px: iOS hace zoom al enfocarlos. El
       :is() toma la especificidad de su argumento más fuerte (0,4,1), así
       también select y textarea le ganan a un `.clase select`. */
    :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea){font-size:16px;}
}
.pdr-input:hover, .pdr-textarea:hover, .pdr-select:hover{border-color:var(--line-2);}
.pdr-input:focus, .pdr-textarea:focus, .pdr-select:focus{
    border-color:var(--accent);
    box-shadow:var(--ring);
}
.pdr-input[aria-invalid="true"], .pdr-textarea[aria-invalid="true"]{
    border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft);
}
.pdr-textarea{min-height:90px;resize:vertical;line-height:1.5;}
.pdr-input::placeholder, .pdr-textarea::placeholder{color:var(--muted-2);}

/* El hueco bajo la fila lo pone la fila, no cada campo: con los dos, entre
   una fila y la siguiente se sumaban 16 + 14px y el formulario se veía roto. */
.pdr-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px;}
.pdr-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:16px;}
.pdr-row > .pdr-field, .pdr-row-3 > .pdr-field{margin-bottom:0;}
@media (max-width:560px){
    .pdr-row, .pdr-row-3{grid-template-columns:1fr;}
}

/* ════════════════════════════════════════════════════════
   TABLA / LISTA
═══════════════════════════════════════════════════════════ */
.pdr-list{
    background:var(--bg-card);
    border:1px solid var(--line);
    border-radius:var(--r-lg);overflow:hidden;
    box-shadow:var(--sh-1);
}
.pdr-list-row{
    display:grid;
    align-items:center;gap:14px;
    padding:14px 18px;
    border-bottom:1px solid var(--line);
    transition:background .12s;
    text-decoration:none;color:inherit;
}
.pdr-list-row:last-child{border-bottom:0;}
.pdr-list-row:hover{background:var(--bg-2);}
.pdr-list-row.head{
    background:var(--bg-2);font-family:'JetBrains Mono',monospace;
    font-size:var(--fs-2xs);color:var(--muted);
    letter-spacing:.06em;text-transform:uppercase;font-weight:500;
}
.pdr-list-row.head:hover{background:var(--bg-2);}

.pdr-tag{
    display:inline-flex;align-items:center;gap:5px;
    padding:4px 10px;border-radius:999px;
    font-family:'JetBrains Mono',monospace;font-size:var(--fs-2xs);
    font-weight:600;letter-spacing:.06em;text-transform:uppercase;
}
/* Texto sobre tinte: el tono puro sobre su propio tinte baja de 4.5 en claro
   (verde 4.2, ámbar 4.3, azul 3.4). Se oscurece un 15% hacia la tinta, que en
   oscuro es clara, así que allí lo aclara: pasa de 5:1 en los dos temas. */
.pdr-tag.success{background:var(--green-soft);color:var(--green);color:color-mix(in srgb, var(--green) 85%, var(--ink));}
.pdr-tag.warning{background:var(--amber-soft);color:var(--amber);color:color-mix(in srgb, var(--amber) 85%, var(--ink));}
.pdr-tag.danger{background:var(--red-soft);color:var(--red);color:color-mix(in srgb, var(--red) 85%, var(--ink));}
.pdr-tag.info{background:var(--accent-soft);color:var(--accent-ink);color:color-mix(in srgb, var(--accent-ink) 85%, var(--ink));}
.pdr-tag.neutral{background:var(--bg-2);color:var(--muted);}

/* ════════════════════════════════════════════════════════
   KPIs / STATS
═══════════════════════════════════════════════════════════ */
.pdr-stats{display:grid;grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));gap:12px;margin-bottom:24px;}
/* En móvil 2 columnas, no 1: cuatro cifras apiladas obligan a hacer
   scroll para ver el estado del negocio, que es justo lo que se viene
   a ver de un vistazo. A 400px sí cae a una sola. */
@media (max-width:560px){ .pdr-stats{grid-template-columns:1fr 1fr;gap:10px;} }
/* A ≤400px siguen en 2×2 (ver el bloque al final de esta sección): antes
   caían a una columna y contradecían el comentario de arriba. */
/* El cuadro del icono va a la IZQUIERDA, ocupando el alto de la tarjeta, y
   etiqueta/cifra/variación se apilan a su derecha. Con los hijos sueltos
   (sin envoltorio) la rejilla es la única forma de lograrlo sin tocar el
   marcado de las páginas que ya usan .pdr-stat. */
.pdr-stat{
    background:var(--bg-card);border:1px solid var(--line);
    border-radius:var(--r-lg);padding:17px 18px;
    box-shadow:var(--sh-1);
    display:grid;grid-template-columns:auto 1fr;column-gap:13px;
    align-content:start;min-width:0;
    /* La cifra se dimensiona con el ancho de SU tarjeta (cqi), no con el de
       la ventana: en 4 columnas de escritorio o en 2×2 a 360px cabe entera. */
    container-type:inline-size;
}
.pdr-stat > *{grid-column:2;min-width:0;}
.pdr-stat-label{
    font-family:'JetBrains Mono',monospace;font-size:var(--fs-2xs);
    color:var(--muted);letter-spacing:.06em;text-transform:uppercase;
}
.pdr-stat-value{
    font-family:'Inter Tight',sans-serif;font-weight:700;
    font-size:var(--fs-num);
    font-size:clamp(1.15rem, 11cqi, var(--fs-num));
    letter-spacing:-.03em;
    margin-top:8px;line-height:1;font-variant-numeric:tabular-nums;
    /* En un renglón: con overflow-wrap:anywhere "$202,806" se partía en
       "$202,80 / 6". El tamaño de arriba ya lo hace caber. */
    white-space:nowrap;overflow-wrap:normal;
}
/* Cargando: mismo brillo que .pdr-skel, para que no aparezca un "0" que
   parece dato real. El JS pone aria-busy="true" y lo quita al escribir. */
.pdr-stat-value[aria-busy="true"]{
    color:transparent !important;user-select:none;
    width:fit-content;min-width:5ch;border-radius:var(--r-xs);
    background:linear-gradient(90deg,var(--bg-2) 25%,var(--bg-3) 37%,var(--bg-2) 63%);
    background-size:400% 100%;
    animation:pdr-shimmer 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){ .pdr-stat-value[aria-busy="true"]{animation:none;} }
.pdr-stat-delta{margin-top:6px;font-size:.7rem;color:var(--muted);}
.pdr-stat-delta.up{color:var(--green);}
.pdr-stat-delta.down{color:var(--red);}
/* Cuadro de icono con tinte: el color entra por aquí y no por el número,
   que debe seguir siendo del color del texto para poder leerlo. */
.pdr-stat-icon{
    grid-column:1;grid-row:1 / span 3;
    width:42px;height:42px;border-radius:var(--r);
    display:flex;align-items:center;justify-content:center;
    background:var(--accent-soft);color:var(--accent-ink);
    flex-shrink:0;align-self:start;
}
.pdr-stat-icon svg{width:19px;height:19px;}
.pdr-stat-icon.green{background:var(--green-soft);color:var(--green);}
.pdr-stat-icon.amber{background:var(--amber-soft);color:var(--amber);}
.pdr-stat-icon.red{background:var(--red-soft);color:var(--red);}
.pdr-stat-icon.neutral{background:var(--bg-2);color:var(--muted);}
/* Delta en píldora (la variación va dentro de una cápsula tintada, que
   es lo que la separa de la etiqueta y la hace escaneable). */
.pdr-stat-delta.pill{
    align-self:flex-start;margin-top:9px;
    display:inline-flex;align-items:center;gap:4px;
    padding:3px 9px;border-radius:var(--r-pill);
    background:var(--bg-2);font-weight:600;font-size:var(--fs-2xs);
}
.pdr-stat-delta.pill.up{background:var(--green-soft);color:color-mix(in srgb, var(--green) 85%, var(--ink));}
.pdr-stat-delta.pill.down{background:var(--red-soft);color:color-mix(in srgb, var(--red) 85%, var(--ink));}
.pdr-stat-delta.pill svg{width:11px;height:11px;}
/* Tarjeta sin cuadro de icono: la rejilla de 2 columnas dejaba un hueco
   vacío a la izquierda y la cifra corrida. */
.pdr-stat:not(:has(> .pdr-stat-icon)){grid-template-columns:1fr;column-gap:0;}
.pdr-stat:not(:has(> .pdr-stat-icon)) > *{grid-column:1;}
/* ≤400px: SIGUEN en 2×2 (lo que se viene a ver de un vistazo). Para que
   quepan se quita el cuadro de icono y se aprieta el relleno. Va después de
   las reglas base de la tarjeta para ganarles. .kpi-grid es la rejilla de
   cifras del Resumen (hub). */
@media (max-width:400px){
    .pdr-stats, .kpi-grid{grid-template-columns:1fr 1fr;gap:8px;}
    .pdr-stat{padding:10px 12px;grid-template-columns:1fr;column-gap:0;}
    .pdr-stat > *{grid-column:1;}
    .pdr-stat-icon{display:none;}
}

/* ════════════════════════════════════════════════════════
   EMPTY STATE
═══════════════════════════════════════════════════════════ */
.pdr-empty{
    background:var(--bg-card);
    border:1px dashed var(--line-2);
    border-radius:var(--r-lg);
    padding:clamp(30px,6vw,48px) 28px;text-align:center;
    color:var(--muted);
}
.pdr-empty svg{width:40px;height:40px;color:var(--muted-2);margin-bottom:14px;}
.pdr-empty h3{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:1.1rem;color:var(--ink);margin-bottom:6px;}
.pdr-empty p{font-size:.88rem;line-height:1.5;max-width:380px;margin:0 auto;}
.pdr-empty .pdr-btn{margin-top:18px;}

/* ════════════════════════════════════════════════════════
   AVISO EN LÍNEA (.pdr-note)  ·  TEXTO LEGAL (.pdr-legal)
   Una sola forma de pintar un aviso dentro de la página (antes había seis:
   cajas azules con texto azul corrido, amarillas con borde izquierdo…).
   El color entra por el fondo tintado y el icono; el texto queda en tinta
   suave, que se lee en los dos temas.
   <div class="pdr-note warn" role="note"><svg…/><div>Texto…</div></div>
═══════════════════════════════════════════════════════════ */
.pdr-note{
    display:flex;align-items:flex-start;gap:10px;
    background:var(--bg-2);border:1px solid var(--line);
    border-radius:var(--r);padding:12px 14px;
    font-size:var(--fs-sm);line-height:1.5;color:var(--ink-soft);
}
.pdr-note > svg, .pdr-note > .ic{width:16px;height:16px;flex-shrink:0;margin-top:2px;color:var(--muted);}
.pdr-note > :not(svg):not(.ic){flex:1;min-width:0;}
.pdr-note b, .pdr-note strong{color:var(--ink);font-weight:600;}
.pdr-note a{color:var(--accent-ink);font-weight:600;}
.pdr-note p + p{margin-top:4px;}
.pdr-note.info{background:var(--accent-soft);border-color:color-mix(in srgb, var(--accent) 20%, transparent);}
.pdr-note.info > svg, .pdr-note.info > .ic{color:var(--accent-ink);}
.pdr-note.warn{background:var(--amber-soft);border-color:color-mix(in srgb, var(--amber) 26%, transparent);}
.pdr-note.warn > svg, .pdr-note.warn > .ic{color:var(--amber);}
.pdr-note.danger{background:var(--red-soft);border-color:color-mix(in srgb, var(--red) 26%, transparent);}
.pdr-note.danger > svg, .pdr-note.danger > .ic{color:var(--red);}

.pdr-legal{
    font-size:.76rem;line-height:1.5;color:var(--muted);text-align:center;
    margin-top:var(--sp-6);
}
.pdr-legal a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
.pdr-legal a:hover{color:var(--ink);}

/* Icono de WhatsApp: el verde de la marca solo como fondo, tinta oscura. */
.pdr-wa-ic{background:var(--wa);color:var(--wa-ink);}

/* ════════════════════════════════════════════════════════
   MODAL GENÉRICO (pdr-modal)
═══════════════════════════════════════════════════════════ */
.pdr-modal{
    position:fixed;inset:0;z-index:200;
    display:none;align-items:center;justify-content:center;
    padding:20px;
    opacity:0;transition:opacity .2s ease;
}
.pdr-modal.open{display:flex;opacity:1;}
.pdr-modal-overlay{
    position:absolute;inset:0;
    background:rgba(10,10,9,.55);
    backdrop-filter:blur(8px);
    cursor:pointer;
}
.pdr-modal-card{
    position:relative;
    background:var(--bg);border:1px solid var(--line-2);
    border-radius:18px;padding:32px;
    max-width:480px;width:100%;
    /* En celular, un modal alto (formulario largo, lista de ayudantes) debe hacer
       scroll dentro de la tarjeta en vez de cortarse. El .pdr-modal ya da padding:20px. */
    max-height:calc(100dvh - 40px);overflow-y:auto;
    box-shadow:0 40px 100px -20px rgba(0,0,0,.4);
    transform:translateY(10px);
    transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
@media (max-width:560px){ .pdr-modal{padding:14px;} .pdr-modal-card{padding:24px 20px;} }
.pdr-modal.open .pdr-modal-card{transform:translateY(0);}
.pdr-modal-close{
    position:absolute;top:10px;right:10px;
    width:38px;height:38px;border-radius:50%;
    background:transparent;border:0;
    color:var(--muted);cursor:pointer;
    font-size:1.4rem;line-height:1;
    display:flex;align-items:center;justify-content:center;
    transition:background .15s;
}
.pdr-modal-close:hover{background:var(--bg-2);color:var(--ink);}
.pdr-modal-icon{
    width:48px;height:48px;border-radius:12px;
    background:var(--accent-soft);color:var(--accent-ink);
    display:flex;align-items:center;justify-content:center;
    margin-bottom:14px;
}
.pdr-modal-icon svg{width:24px;height:24px;}
.pdr-modal-title{
    font-family:'Inter Tight',sans-serif;font-weight:700;
    font-size:1.3rem;letter-spacing:-.02em;line-height:1.2;
}
.pdr-modal-title em{font-style:normal;color:var(--accent-ink);}
.pdr-modal-desc{margin-top:10px;font-size:.92rem;color:var(--muted);line-height:1.55;}
.pdr-modal-body{margin:14px 0;}
.pdr-modal-actions{margin-top:20px;display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;}
.pdr-modal-btn{
    appearance:none;border:1px solid var(--line);
    background:var(--bg-card);color:var(--ink);
    font-family:'Inter Tight',sans-serif;font-weight:500;font-size:.85rem;
    padding:10px 18px;border-radius:9px;cursor:pointer;
    display:inline-flex;align-items:center;gap:7px;
    text-decoration:none;
    transition:all .15s;
}
.pdr-modal-btn:hover{background:var(--bg-2);}
.pdr-modal-btn.primary{background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:600;}
/* color:#fff al pasar: con var(--bg) quedaba casi negro sobre el cobalto en
   oscuro (2.9:1). Igual que .pdr-btn.primary:hover. */
.pdr-modal-btn.primary:hover{background:var(--accent);border-color:var(--accent);color:#fff;}
.pdr-modal-btn.danger{color:var(--red);border-color:color-mix(in srgb, var(--red) 25%, transparent);}
/* Confirmación de borrado: el botón que borra se pinta de rojo, no de negro,
   para que no se confunda con "Guardar". */
.pdr-modal-btn.danger.primary{background:var(--red);border-color:var(--red);color:var(--on-status);}
.pdr-modal-btn.danger.primary:hover{
    background:color-mix(in srgb, var(--red) 86%, #000);
    border-color:color-mix(in srgb, var(--red) 86%, #000);color:var(--on-status);
}
.pdr-modal-btn svg{width:13px;height:13px;}
@media (max-width:560px){
    /* Botones a lo ancho y apilados, la acción principal arriba: con el pulgar
       se alcanza sin estirarse y no se toca la de al lado por error. Casi
       todos los diálogos escriben la principal AL FINAL (por eso el reverse);
       el de "mejora tu plan" (js/pdr-premium.js) la escribe primero, y con el
       reverse a secas dejaba "Más tarde" encima de "Ver planes". Con :has()
       cada uno cae en el orden que sube su principal. */
    .pdr-modal-actions{flex-direction:column;}
    .pdr-modal-actions:has(> .primary:last-child){flex-direction:column-reverse;}
    .pdr-modal-btn{min-height:46px;justify-content:center;}
    .pdr-modal-actions > .pdr-modal-btn{width:100%;}
}

/* ════════════════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════════════════ */
/* z 9100: por encima del Tutor IA flotante (9000), que tapaba el aviso. */
.pdr-toast-stack{
    position:fixed;bottom:24px;right:24px;z-index:9100;
    display:flex;flex-direction:column;gap:10px;
    max-width:380px;
}
.pdr-toast{
    background:var(--bg-card);border:1px solid var(--line);
    border-radius:11px;padding:13px 16px;
    display:flex;align-items:center;gap:11px;
    box-shadow:0 20px 50px -10px rgba(0,0,0,.18);
    transform:translateX(110%);opacity:0;
    transition:transform .35s cubic-bezier(.34,1.56,.64,1), opacity .25s;
}
.pdr-toast.in{transform:translateX(0);opacity:1;}
.pdr-toast-icon{
    width:24px;height:24px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:.85rem;flex-shrink:0;
}
.pdr-toast-success .pdr-toast-icon{background:var(--green-soft);color:var(--green);}
.pdr-toast-error .pdr-toast-icon{background:var(--red-soft);color:var(--red);}
.pdr-toast-info .pdr-toast-icon{background:var(--accent-soft);color:var(--accent-ink);}
.pdr-toast-msg{flex:1;min-width:0;font-size:.85rem;color:var(--ink);line-height:1.4;}
/* "Deshacer" dentro del aviso (lo pinta PDR.UI.toast con opts.action). */
.pdr-toast-act{
    appearance:none;background:transparent;border:0;cursor:pointer;
    font-family:'Inter Tight',sans-serif;font-weight:700;font-size:.85rem;
    color:var(--accent-ink);white-space:nowrap;flex-shrink:0;
    min-height:38px;padding:0 10px;margin:-8px 0;border-radius:var(--r-xs);
    transition:background var(--t-fast);
}
.pdr-toast-act:hover{background:var(--hover);}
/* Cerrar: 38×38 de área aunque el aviso sea bajo (margen negativo). */
.pdr-toast-x{
    appearance:none;background:transparent;border:0;cursor:pointer;
    width:38px;height:38px;flex-shrink:0;margin:-8px -10px -8px 0;
    border-radius:50%;color:var(--muted);font-size:1.25rem;line-height:1;
    display:inline-flex;align-items:center;justify-content:center;
    transition:background var(--t-fast), color var(--t-fast);
}
.pdr-toast-x:hover{background:var(--hover);color:var(--ink);}

/* Mismo corte que la barra inferior (760): entre 521 y 760 el aviso salía
   abajo a la derecha, ENCIMA de la barra, y se comía el toque de sus botones. */
@media (max-width:760px){
    .pdr-toast-stack{left:16px;right:16px;bottom:16px;max-width:none;}
    .pdr-toast{transform:translateY(120%);}
    .pdr-toast.in{transform:translateY(0);}
    body.has-bottombar .pdr-toast-stack{
        left:16px;right:16px;max-width:none;
        bottom:calc(var(--pdr-bb-h,53px) + 12px + env(safe-area-inset-bottom,0px));
    }
}
@media (prefers-reduced-motion:reduce){
    .pdr-toast{transition:opacity .15s;transform:none !important;}
}

/* ════════════════════════════════════════════════════════
   PREMIUM LOCKS — sin badge, solo opacidad sutil + cursor
   El click se intercepta vía JS y abre el modal de upgrade
   Usamos !important porque algunos contenedores (.nav-link, etc.)
   tienen reglas de opacity propias.
   No usamos `transition` porque puede quedar atorado en navegadores
   cuando un padre tiene transiciones en cadena.
═══════════════════════════════════════════════════════════ */
.pdr-locked{
    position:relative !important;
    cursor:pointer !important;
    opacity:.55 !important;
    /* Forzar SIN transición: si el padre tiene transition:all, la transición
       de opacity puede quedarse atorada en headless/preview. */
    transition:none !important;
    animation:none !important;
}
.pdr-locked:hover{
    opacity:.85 !important;
    transition:opacity .15s ease !important;
}
/* Legacy: si quedan overlays/badges en DOM antiguo, ocultarlos */
.pdr-lock-overlay,
.pdr-lock-badge{display:none !important;}

/* ════════════════════════════════════════════════════════
   TABLA MONDAY-STYLE
   Estructura:
   <div class="pdr-mtable">
     <div class="pdr-mtable-head">
       <div class="pdr-mt-h status">Estado</div>
       <div class="pdr-mt-h">Nombre</div>
       ...
     </div>
     <div class="pdr-mtable-group">
       <div class="pdr-mt-grouptitle">En proceso (3)</div>
       <div class="pdr-mt-row">
         <div class="pdr-mt-status status-green">En proceso</div>
         <div class="pdr-mt-cell">Café Roma</div>
         ...
       </div>
     </div>
   </div>
═══════════════════════════════════════════════════════════ */
.pdr-mtable{
    background:var(--bg-card);
    border:1px solid var(--line);
    border-radius:14px;
    overflow:hidden;
    margin-bottom:24px;
}
.pdr-mtable-head{
    display:grid;
    grid-template-columns:140px 1fr 160px 130px 110px 90px;
    align-items:center;
    background:var(--bg-2);
    border-bottom:1px solid var(--line);
    padding:0;
}
.pdr-mt-h{
    padding:11px 14px;
    font-family:'JetBrains Mono',monospace;
    font-size:var(--fs-2xs);letter-spacing:.06em;text-transform:uppercase;
    color:var(--muted);font-weight:600;
    border-right:1px solid var(--line);
}
.pdr-mt-h:last-child{border-right:0;}

.pdr-mtable-group{border-bottom:1px solid var(--line);}
.pdr-mtable-group:last-child{border-bottom:0;}

.pdr-mt-grouptitle{
    display:flex;align-items:center;gap:10px;
    padding:12px 16px;
    background:var(--bg-3);
    font-family:'Inter Tight',sans-serif;
    font-weight:700;font-size:.82rem;letter-spacing:-.01em;
    border-bottom:1px solid var(--line);
}
.pdr-mt-grouptitle .pdr-mt-gdot{
    width:10px;height:10px;border-radius:50%;background:var(--accent);flex-shrink:0;
}
.pdr-mt-grouptitle .pdr-mt-gcount{
    font-family:'JetBrains Mono',monospace;font-size:var(--fs-2xs);
    color:var(--muted);font-weight:500;margin-left:auto;
}

.pdr-mt-row{
    display:grid;
    grid-template-columns:140px 1fr 160px 130px 110px 90px;
    align-items:stretch;
    border-bottom:1px solid var(--line);
    background:var(--bg-card);
    transition:background .12s;
    cursor:pointer;
}
.pdr-mt-row:last-child{border-bottom:0;}
.pdr-mt-row:hover{background:var(--hover);}

.pdr-mt-cell{
    padding:12px 14px;
    font-size:.85rem;color:var(--ink-soft);
    border-right:1px solid var(--line);
    display:flex;align-items:center;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pdr-mt-cell:last-child{border-right:0;}
.pdr-mt-cell strong{font-weight:600;color:var(--ink);}
.pdr-mt-cell .pdr-mt-sub{font-size:.7rem;color:var(--muted);display:block;margin-top:1px;}

/* Status pill (la primera columna típicamente).
   Tinte suave con el texto del tono, igual que .pdr-pill. El relleno sólido
   "Monday" con texto blanco daba 1.9-2.2:1 (blanco sobre #FDAB3D o #00C875)
   y en oscuro gritaba más que el propio dato. */
.pdr-mt-status{
    padding:6px 12px;margin:6px 8px;
    border-radius:6px;
    font-family:'Inter Tight',sans-serif;font-weight:600;
    font-size:.74rem;letter-spacing:-.005em;
    text-align:center;
    background:var(--bg-2);color:var(--ink-soft);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    transition:filter .15s;
}
.pdr-mt-status:hover{filter:brightness(.97);}
[data-theme="dark"] .pdr-mt-status:hover{filter:brightness(1.15);}
.pdr-mt-status.status-green, .pdr-mt-status.status-done{
    background:var(--green-soft);color:color-mix(in srgb, var(--green) 85%, var(--ink));
}
.pdr-mt-status.status-blue{
    background:var(--accent-soft);color:color-mix(in srgb, var(--accent-ink) 85%, var(--ink));
}
.pdr-mt-status.status-purple{
    background:var(--violet-soft);color:color-mix(in srgb, var(--violet) 85%, var(--ink));
}
.pdr-mt-status.status-orange, .pdr-mt-status.status-yellow, .pdr-mt-status.status-pending{
    background:var(--amber-soft);color:color-mix(in srgb, var(--amber) 85%, var(--ink));
}
.pdr-mt-status.status-red, .pdr-mt-status.status-stuck{
    background:var(--red-soft);color:color-mix(in srgb, var(--red) 85%, var(--ink));
}
.pdr-mt-status.status-gray{background:var(--bg-3);color:var(--ink-soft);}

/* Avatar persona */
.pdr-mt-avatar{
    width:28px;height:28px;border-radius:50%;
    background:linear-gradient(135deg, var(--accent), var(--accent-2));
    color:#fff;display:flex;align-items:center;justify-content:center;
    font-family:'Inter Tight',sans-serif;font-weight:700;font-size:.72rem;
    flex-shrink:0;
}

/* Tag */
.pdr-mt-tag{
    display:inline-flex;align-items:center;gap:5px;
    padding:3px 9px;border-radius:6px;
    font-family:'JetBrains Mono',monospace;font-size:var(--fs-2xs);
    letter-spacing:.06em;text-transform:uppercase;font-weight:600;
    background:var(--bg-2);color:var(--muted);
}

/* Acciones en hover */
.pdr-mt-actions{
    display:flex;gap:4px;align-items:center;justify-content:center;
    opacity:0;transition:opacity .15s;
}
.pdr-mt-row:hover .pdr-mt-actions{opacity:1;}
.pdr-mt-action-btn{
    appearance:none;background:transparent;border:0;
    width:28px;height:28px;border-radius:6px;
    display:flex;align-items:center;justify-content:center;
    color:var(--muted);cursor:pointer;
    transition:all .12s;
}
.pdr-mt-action-btn:hover{background:var(--bg-2);color:var(--ink);}
.pdr-mt-action-btn svg{width:14px;height:14px;}

/* En móvil no hay hover: acciones (Cobrado, editar) siempre visibles, y con
   38px de área: a 28px el dedo caía en la fila y abría el detalle. */
@media (max-width:768px){
    .pdr-mt-actions{opacity:1;}
    .pdr-mt-action-btn{width:38px;height:38px;}
}

/* Add row button (bottom) */
.pdr-mt-addrow{
    display:flex;align-items:center;gap:8px;
    padding:11px 16px;
    background:var(--bg-card);
    color:var(--muted);
    font-family:'Inter',sans-serif;font-size:.82rem;font-weight:500;
    cursor:pointer;border:0;width:100%;
    transition:background .15s, color .15s;
    border-top:1px dashed var(--line-2);
}
.pdr-mt-addrow:hover{background:var(--bg-2);color:var(--ink);}
.pdr-mt-addrow svg{width:14px;height:14px;}

/* Responsive — colapsa columnas en pantallas pequeñas.
   La 3.ª columna es casi siempre el MONTO y a 70px fijos se cortaba a media
   cifra DENTRO de la tabla ("$107,59…" en finanzas, cobranza y gastos;
   auditoría del 15/09/2026, medido a 375). Con `auto` la columna vale lo que
   mide su contenido y el ancho lo cede el nombre, que ya lleva ellipsis. */
@media (max-width:880px){
    .pdr-mtable-head,
    .pdr-mt-row{
        grid-template-columns:100px minmax(0,1fr) auto;
    }
    .pdr-mtable-head > :nth-child(n+4):not(:last-child),
    .pdr-mt-row > :nth-child(n+4):not(:last-child){display:none;}
}
/* En el celular ni con `auto` caben cuatro cosas en un renglón (estado, nombre,
   monto y la acción, que además se iba sola a un segundo renglón vacío). La
   fila pasa a DOS renglones, que es como se lee una tarjeta:
       Cliente / obra ............... $12,345.00
       [ pendiente ]                    [acción]
   El encabezado se va (rotula columnas que ya no existen) y con él los bordes
   verticales. No cambia ni una línea de marcado: cada celda se coloca por su
   POSICIÓN, así que vale igual para las tablas de 4, 5 y 6 columnas.
   La fila deja de ser GRID y pasa a FLEX a propósito. Cobranza, gastos,
   ayudantes, tareas y equipo ya tienen su propio reparto de columnas para el
   celular, afinado página por página, y le ganan a esta hoja por especificidad
   (equipo hasta con un id). En una caja flex esas reglas de
   `grid-template-columns` no aplican y quedan inertes solas: la tarjeta sale
   igual en las nueve tablas sin tocar ninguna de esas páginas.
   El corte de renglón lo hace un ::after de ancho completo entre los dos
   grupos (order 1 = arriba, order 3 = abajo). */
@media (max-width:560px){
    .pdr-mtable-head{display:none;}
    .pdr-mt-row{
        display:flex;flex-wrap:wrap;align-items:center;
        column-gap:12px;row-gap:2px;
        padding:8px 14px;
    }
    .pdr-mt-row::after{content:'';order:2;flex:0 0 100%;height:0;}
    /* flex-basis 0 en el nombre: con `auto` un nombre largo llenaba el renglón
       y empujaba el monto abajo. Así el monto se queda siempre a su derecha y
       lo que cede es el nombre, que ya recorta con puntos suspensivos. */
    .pdr-mt-row > :nth-child(2){order:1;flex:1 1 0;min-width:0;}                     /* nombre */
    .pdr-mt-row > :nth-child(3):not(:last-child){order:1;flex:0 0 auto;margin-left:auto;text-align:right;}
    .pdr-mt-row > :nth-child(1){order:3;flex:0 0 auto;}                              /* estado */
    /* ...salvo cuando la primera celda NO es un estado sino un control: la
       palomita "Completar" de las tareas de Equipo. Esa acción pertenece al
       título que tiene al lado, así que se queda con él en el primer renglón.
       Si el navegador no entiende :has, esta regla sola se descarta. */
    .pdr-mt-row > :nth-child(1):has(button,a,input){order:1;flex:0 0 auto;}
    .pdr-mt-row > :last-child{order:3;flex:0 0 auto;margin-left:auto;}
    /* El nombre se recorta con puntos suspensivos, no a media letra. La celda
       ya lleva text-overflow:ellipsis, pero es `display:flex` y ahí el ellipsis
       no aplica: hay que ponérselo al hijo (el <strong> del nombre), que como
       elemento flex se comporta como bloque. */
    .pdr-mtable .pdr-mt-row > .pdr-mt-cell > strong{
        min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    }
    /* .pdr-mtable delante: esas mismas páginas redefinen el relleno de la
       celda, y aquí el hueco lo da la fila. */
    .pdr-mtable .pdr-mt-row > .pdr-mt-cell{border-right:0;padding:2px 0;}
    .pdr-mtable .pdr-mt-row .pdr-mt-status{margin:0;}
}

/* ════════════════════════════════════════════════════════
   UTILS
═══════════════════════════════════════════════════════════ */
.pdr-spacer{flex:1;}
.pdr-muted{color:var(--muted);}
.pdr-mono{font-family:'JetBrains Mono',monospace;}
.pdr-mb-sm{margin-bottom:12px;}
.pdr-mb-md{margin-bottom:24px;}
.pdr-mb-lg{margin-bottom:40px;}

/* ════════════════════════════════════════════════════════════════════
   ██  CAPA DE COMPONENTES v2
   ────────────────────────────────────────────────────────────────────
   Dos lenguajes visuales que conviven sobre los mismos tokens:

   · PLATAFORMA (lo que ve el APLICADOR cuando trabaja): fondo claro,
     tarjetas con sombra suave, cuadro de icono tintado, cifras grandes
     tabulares, píldoras de estado. Denso pero respirado.

   · SITIO PÚBLICO (lo que ve el CLIENTE que busca aplicador): editorial.
     Barra oscura, portada a sangre, tipografía grande, mucho blanco,
     tarjetas de aplicador, panel de contacto pegajoso.

   Todo es móvil primero (el aplicador trabaja desde el celular en obra) y
   todo funciona SIN FOTOS: `.pdr-media` dibuja un relleno con textura
   cuando no hay imagen, para no depender de almacenamiento.
════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════
   ENCABEZADO DE PÁGINA  ·  plataforma
═══════════════════════════════════════════════════════════ */
.pdr-page-head{
    display:flex;align-items:flex-start;justify-content:space-between;
    gap:16px;flex-wrap:wrap;margin-bottom:var(--sp-6);
}
.pdr-page-head h1{
    font-family:'Inter Tight',sans-serif;font-weight:700;
    font-size:var(--fs-h1);letter-spacing:-.028em;line-height:1.1;
}
.pdr-page-head .sub{margin-top:5px;color:var(--muted);font-size:.9rem;line-height:1.5;max-width:56ch;}
.pdr-page-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
@media (max-width:560px){
    /* Las acciones bajan y ocupan el ancho: caen donde llega el pulgar,
       no arriba a la derecha donde no se alcanza con una mano. */
    .pdr-page-head{flex-direction:column;gap:12px;}
    .pdr-page-actions{width:100%;}
    .pdr-page-actions > .pdr-btn{flex:1;}
}
/* Botones de la barra superior en táctil: .pdr-btn.sm mide 30px y ahí es
   donde viven "Nueva obra", "Nuevo ayudante"… (la acción principal). */
@media (max-width:760px){
    .pdr-top-action .pdr-btn, .ps-topbar .pdr-btn.sm{min-height:40px;}
}

/* ════════════════════════════════════════════════════════
   BARRA DE HERRAMIENTAS  (buscar + filtros + orden)
═══════════════════════════════════════════════════════════ */
.pdr-toolbar{
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    margin-bottom:var(--sp-4);
}
.pdr-toolbar .grow{flex:1;min-width:180px;}
.pdr-toolbar .right{margin-left:auto;display:flex;gap:8px;align-items:center;}
@media (max-width:560px){ .pdr-toolbar .right{margin-left:0;width:100%;} }

/* Campo de búsqueda con lupa dentro */
.pdr-search{position:relative;display:flex;align-items:center;min-width:0;}
.pdr-search svg{
    position:absolute;left:12px;width:15px;height:15px;
    color:var(--muted-2);pointer-events:none;
}
.pdr-search input{
    width:100%;background:var(--bg-card);
    border:1px solid var(--line);border-radius:var(--r-pill);
    padding:10px 14px 10px 34px;min-height:40px;
    font-family:inherit;font-size:.88rem;color:var(--ink);outline:none;
    transition:border-color var(--t), box-shadow var(--t);
}
@media (max-width:560px){ .pdr-search input{font-size:16px;} }
.pdr-search input::placeholder{color:var(--muted-2);}
.pdr-search input:focus{border-color:var(--accent);box-shadow:var(--ring);}
.pdr-search:focus-within svg{color:var(--accent-ink);}

/* ════════════════════════════════════════════════════════
   PESTAÑAS con contador  ·  CONTROL SEGMENTADO
═══════════════════════════════════════════════════════════ */
.pdr-tabs{
    display:flex;gap:2px;align-items:center;
    border-bottom:1px solid var(--line);
    margin-bottom:var(--sp-4);
    /* Se desplaza en horizontal en vez de partirse en dos filas: partida,
       en móvil se pierde de vista cuál está activa. */
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.pdr-tabs::-webkit-scrollbar{display:none;}
.pdr-tab{
    appearance:none;background:transparent;border:0;cursor:pointer;
    font-family:'Inter Tight',sans-serif;font-weight:600;font-size:.85rem;
    color:var(--muted);padding:11px 14px;white-space:nowrap;
    border-bottom:2px solid transparent;margin-bottom:-1px;
    display:inline-flex;align-items:center;gap:7px;
    transition:color var(--t), border-color var(--t);
    text-decoration:none;
}
.pdr-tab:hover{color:var(--ink);}
.pdr-tab.on, .pdr-tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent);}
.pdr-tab .n{
    font-family:'JetBrains Mono',monospace;font-size:var(--fs-2xs);font-weight:600;
    background:var(--bg-2);color:var(--muted);
    padding:2px 7px;border-radius:var(--r-pill);
}
.pdr-tab.on .n, .pdr-tab[aria-selected="true"] .n{background:var(--accent-soft);color:var(--accent-ink);}

/* Control segmentado. Si no cabe, se desliza DENTRO de sí mismo en vez de
   ensanchar la página (así se iba Finanzas a 486px en el celular). */
.pdr-seg{
    display:inline-flex;background:var(--bg-2);
    border:1px solid var(--line);border-radius:var(--r-sm);padding:3px;gap:2px;
    max-width:100%;overflow-x:auto;scrollbar-width:none;
}
.pdr-seg::-webkit-scrollbar{display:none;}
.pdr-seg button{
    appearance:none;background:transparent;border:0;cursor:pointer;
    font-family:'Inter Tight',sans-serif;font-weight:600;font-size:.76rem;
    color:var(--muted);padding:6px 13px;border-radius:6px;
    white-space:nowrap;flex-shrink:0;
    transition:background var(--t), color var(--t), box-shadow var(--t);
}
/* El contenedor recorta (overflow): el foco va por dentro para no cortarse. */
.pdr-seg button:focus-visible{outline-offset:-2px;}
.pdr-seg button:hover{color:var(--ink);}
.pdr-seg button.on, .pdr-seg button.active, .pdr-seg button[aria-pressed="true"]{
    background:var(--bg-card);color:var(--ink);box-shadow:var(--sh-1);
}
/* A lo ancho, opciones del mismo tamaño (conmutadores de vista en móvil). */
.pdr-seg.block{display:flex;}
.pdr-seg.block button{flex:1;}
@media (max-width:760px){
    /* En táctil el segmentado crece: a 27px de alto el dedo cae entre dos
       opciones y cambia la que no era. */
    .pdr-seg button{padding:9px 14px;min-height:40px;}
}

/* ════════════════════════════════════════════════════════
   CHIPS de filtro
═══════════════════════════════════════════════════════════ */
.pdr-chips{display:flex;gap:7px;flex-wrap:wrap;align-items:center;}
.pdr-chip{
    appearance:none;cursor:pointer;user-select:none;text-decoration:none;
    display:inline-flex;align-items:center;gap:6px;
    font-family:inherit;font-size:.78rem;font-weight:500;
    background:var(--bg-card);color:var(--ink-soft);
    border:1px solid var(--line);border-radius:var(--r-pill);
    padding:6px 12px;min-height:38px;
    transition:background var(--t), border-color var(--t), color var(--t);
}
.pdr-chip:hover{border-color:var(--line-2);background:var(--bg-2);}
.pdr-chip.on, .pdr-chip[aria-pressed="true"]{
    background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:600;
}
.pdr-chip svg{width:13px;height:13px;}
.pdr-chip .x{opacity:.6;font-size:1rem;line-height:1;}
.pdr-chip .x:hover{opacity:1;}

/* ════════════════════════════════════════════════════════
   PANEL  (tarjeta con cabecera / cuerpo / pie)
═══════════════════════════════════════════════════════════ */
.pdr-panel{
    background:var(--bg-card);border:1px solid var(--line);
    border-radius:var(--r-lg);box-shadow:var(--sh-1);
    overflow:hidden;display:flex;flex-direction:column;min-width:0;
}
.pdr-panel-head{
    display:flex;align-items:center;justify-content:space-between;
    gap:12px;padding:15px 18px;border-bottom:1px solid var(--line);
}
.pdr-panel-head h3{
    font-family:'Inter Tight',sans-serif;font-weight:600;
    font-size:.98rem;letter-spacing:-.015em;display:flex;align-items:center;gap:8px;
}
.pdr-panel-head h3 svg{width:15px;height:15px;color:var(--muted);}
.pdr-panel-head .link{
    font-size:.78rem;color:var(--muted);text-decoration:none;font-weight:500;
    display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
}
.pdr-panel-head .link:hover{color:var(--accent-ink);}
.pdr-panel-body{padding:18px;flex:1;min-width:0;}
.pdr-panel-body.flush{padding:0;}
.pdr-panel-foot{padding:12px 18px;border-top:1px solid var(--line);background:var(--bg-2);}

/* Rejillas de tablero: 2/3 + 1/3, apiladas en móvil */
.pdr-grid-2{display:grid;grid-template-columns:1.7fr 1fr;gap:14px;align-items:start;}
.pdr-grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;}
@media (max-width:900px){ .pdr-grid-2{grid-template-columns:1fr;} }

/* ════════════════════════════════════════════════════════
   AVATAR
═══════════════════════════════════════════════════════════ */
.pdr-av{
    width:38px;height:38px;border-radius:50%;flex-shrink:0;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    color:#fff;display:inline-flex;align-items:center;justify-content:center;
    font-family:'Inter Tight',sans-serif;font-weight:700;font-size:.85rem;
    letter-spacing:-.01em;overflow:hidden;user-select:none;
}
.pdr-av img{width:100%;height:100%;object-fit:cover;}
.pdr-av.sm{width:30px;height:30px;font-size:.72rem;}
.pdr-av.lg{width:56px;height:56px;font-size:1.2rem;border-radius:var(--r-lg);}
.pdr-av.xl{width:78px;height:78px;font-size:1.7rem;border-radius:var(--r-xl);}
.pdr-av.sq{border-radius:var(--r);}
/* El punto de conexión va FUERA del avatar, que recorta con overflow:hidden */
.pdr-av-wrap{position:relative;display:inline-flex;flex-shrink:0;}
.pdr-av-dot{
    position:absolute;right:-1px;bottom:-1px;
    width:11px;height:11px;border-radius:50%;
    background:var(--muted-2);border:2px solid var(--bg-card);
}
.pdr-av-dot.on{background:var(--green-2);}

/* ════════════════════════════════════════════════════════
   TABLA DE DATOS
   En móvil cada fila se vuelve tarjeta y las celdas usan `data-th` como
   etiqueta. Una tabla con scroll horizontal en celular obliga a arrastrar
   para leer el estado, que es justo el dato que se viene a buscar.
═══════════════════════════════════════════════════════════ */
.pdr-table-wrap{
    background:var(--bg-card);border:1px solid var(--line);
    border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden;
}
.pdr-table{width:100%;border-collapse:collapse;font-size:.86rem;}
.pdr-table thead th{
    text-align:left;padding:11px 16px;
    background:var(--bg-2);
    font-family:'JetBrains Mono',monospace;font-size:var(--fs-2xs);font-weight:600;
    color:var(--muted);letter-spacing:.06em;text-transform:uppercase;
    border-bottom:1px solid var(--line);white-space:nowrap;
}
.pdr-table tbody td{
    padding:13px 16px;border-bottom:1px solid var(--line);
    color:var(--ink-soft);vertical-align:middle;
}
.pdr-table tbody tr:last-child td{border-bottom:0;}
.pdr-table tbody tr{transition:background var(--t-fast);}
.pdr-table tbody tr:hover{background:var(--hover);}
.pdr-table .num{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;text-align:right;color:var(--ink);}
.pdr-table .strong{color:var(--ink);font-weight:600;}
@media (max-width:720px){
    .pdr-table-wrap{border:0;background:transparent;box-shadow:none;border-radius:0;}
    .pdr-table, .pdr-table tbody, .pdr-table tr, .pdr-table td{display:block;width:100%;}
    .pdr-table thead{display:none;}
    .pdr-table tbody tr{
        background:var(--bg-card);border:1px solid var(--line);
        border-radius:var(--r);box-shadow:var(--sh-1);
        padding:6px 2px;margin-bottom:10px;
    }
    .pdr-table tbody td{
        display:flex;align-items:center;justify-content:space-between;gap:14px;
        padding:8px 14px;border-bottom:0;text-align:right;
    }
    .pdr-table tbody td::before{
        content:attr(data-th);
        font-family:'JetBrains Mono',monospace;font-size:var(--fs-2xs);font-weight:600;
        color:var(--muted);letter-spacing:.06em;text-transform:uppercase;
        text-align:left;flex-shrink:0;
    }
}

/* Píldora de estado ("En preparación" / "Entregado" / "Vencido") */
.pdr-pill{
    display:inline-flex;align-items:center;gap:5px;
    padding:4px 10px;border-radius:var(--r-pill);
    font-size:.72rem;font-weight:600;white-space:nowrap;
    background:var(--bg-2);color:var(--muted);
}
.pdr-pill::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0;}
/* Mismo criterio que .pdr-tag: el tono se oscurece 15% hacia la tinta para
   pasar de 4.5 sobre su tinte ("Preparación" en ámbar daba 4.3 en claro). */
.pdr-pill.green{background:var(--green-soft);color:var(--green);color:color-mix(in srgb, var(--green) 85%, var(--ink));}
.pdr-pill.amber{background:var(--amber-soft);color:var(--amber);color:color-mix(in srgb, var(--amber) 85%, var(--ink));}
.pdr-pill.red{background:var(--red-soft);color:var(--red);color:color-mix(in srgb, var(--red) 85%, var(--ink));}
.pdr-pill.blue{background:var(--accent-soft);color:var(--accent-ink);color:color-mix(in srgb, var(--accent-ink) 85%, var(--ink));}
.pdr-pill.plain::before{display:none;}

/* Paginación */
.pdr-pager{display:flex;align-items:center;justify-content:center;gap:5px;padding:14px;flex-wrap:wrap;}
.pdr-pager button, .pdr-pager a{
    appearance:none;background:transparent;border:1px solid transparent;
    color:var(--muted);cursor:pointer;text-decoration:none;
    min-width:32px;height:32px;border-radius:var(--r-xs);
    display:inline-flex;align-items:center;justify-content:center;
    font-family:'JetBrains Mono',monospace;font-size:.76rem;
    transition:background var(--t), color var(--t);
}
.pdr-pager button:hover:not(:disabled), .pdr-pager a:hover{background:var(--bg-2);color:var(--ink);}
.pdr-pager .on{background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:600;}
.pdr-pager button:disabled{opacity:.35;cursor:not-allowed;}
@media (max-width:760px){ .pdr-pager button, .pdr-pager a{min-width:38px;height:38px;} }

/* ════════════════════════════════════════════════════════
   LISTA DE ACTIVIDAD / CONVERSACIONES RECIENTES
═══════════════════════════════════════════════════════════ */
.pdr-feed{display:flex;flex-direction:column;}
.pdr-feed-row{
    display:flex;align-items:center;gap:11px;
    padding:11px 18px;text-decoration:none;color:inherit;
    border-bottom:1px solid var(--line);
    transition:background var(--t-fast);min-width:0;
}
.pdr-feed-row:last-child{border-bottom:0;}
.pdr-feed-row:hover{background:var(--hover);}
.pdr-feed-main{flex:1;min-width:0;}
/* Igual que en la bandeja: se escriben como <span> y sin `display:block`
   quedan en la misma línea y sin recorte. */
.pdr-feed-name{
    display:block;font-weight:600;font-size:.88rem;color:var(--ink);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pdr-feed-sub{
    display:block;font-size:.8rem;color:var(--muted);margin-top:1px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pdr-feed-side{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0;}
/* --muted y no --muted-2: la hora SÍ es información ("hace 1 d" daba 2.96:1). */
.pdr-feed-time{font-size:.7rem;color:var(--muted);white-space:nowrap;}
.pdr-badge-n{
    min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);
    background:var(--accent);color:#fff;
    font-family:'JetBrains Mono',monospace;font-size:var(--fs-2xs);font-weight:600;
    display:inline-flex;align-items:center;justify-content:center;
}
.pdr-badge-n.green{background:var(--green);color:var(--on-status);}

/* ════════════════════════════════════════════════════════
   TARJETAS DE SUGERENCIA  ("Lo que tu negocio necesita hoy")
═══════════════════════════════════════════════════════════ */
.pdr-suggests{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;}
.pdr-suggest{
    background:var(--bg-card);border:1px solid var(--line);
    border-radius:var(--r);padding:15px;text-decoration:none;color:inherit;
    display:flex;flex-direction:column;gap:8px;
    transition:border-color var(--t), box-shadow var(--t), transform var(--t) var(--ease-out);
}
.pdr-suggest:hover{border-color:var(--line-2);box-shadow:var(--sh-2);transform:translateY(-2px);}
.pdr-suggest .ic{
    width:32px;height:32px;border-radius:9px;
    background:var(--accent-soft);color:var(--accent-ink);
    display:flex;align-items:center;justify-content:center;
}
.pdr-suggest .ic svg{width:16px;height:16px;}
.pdr-suggest .t{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:.9rem;letter-spacing:-.01em;}
.pdr-suggest .d{font-size:.79rem;color:var(--muted);line-height:1.45;}
@media (prefers-reduced-motion:reduce){ .pdr-suggest:hover{transform:none;} }

/* ════════════════════════════════════════════════════════
   GRÁFICAS  ·  primitivas sin librería
   SVG/CSS con `currentColor`: cambian solas al cambiar de tema o de
   acento, y no arrastran una librería de 60 KB a la obra.
═══════════════════════════════════════════════════════════ */
/* Alto FIJO, no proporcional. Con `height:auto` el SVG crece con el ancho: en
   un panel de 1100px la gráfica se iba a ~340px de alto y se comía la pantalla.
   Se estira solo en horizontal (preserveAspectRatio="none" en el SVG) y los
   trazos conservan su grosor con vector-effect="non-scaling-stroke". */
.pdr-chart{
    width:100%;height:clamp(130px,15vw,190px);
    display:block;overflow:visible;
}
.pdr-chart .grid line{stroke:var(--line);stroke-width:1;}
.pdr-chart .axis{fill:var(--muted);font-size:9px;font-family:'JetBrains Mono',monospace;}
.pdr-chart .ln{fill:none;stroke:var(--accent-2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;}
.pdr-chart .grid line{vector-effect:non-scaling-stroke;}
.pdr-chart .ln.g{stroke:var(--green-2);}
.pdr-chart .ln.a{stroke:var(--amber-2);}
.pdr-chart .area{fill:var(--accent-soft);stroke:none;}
/* Sin puntos redondos en estas gráficas: el SVG se estira solo a lo ancho
   (preserveAspectRatio="none"), y un <circle> se deformaría en óvalo. */
.pdr-legend{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:.74rem;color:var(--muted);}
.pdr-legend i{width:8px;height:8px;border-radius:50%;background:var(--accent-2);display:inline-block;margin-right:5px;}
.pdr-legend i.g{background:var(--green-2);}
.pdr-legend i.a{background:var(--amber-2);}
.pdr-legend i.v{background:var(--violet-2);}
.pdr-legend i.m{background:var(--muted-2);}
/* Leyenda en columna, con el porcentaje alineado a la derecha: es la que
   acompaña a la dona, donde hay que poder comparar cifras de un vistazo. */
.pdr-legend.col{flex-direction:column;align-items:stretch;gap:9px;flex:1;min-width:150px;}
.pdr-legend.col > span{display:flex;align-items:center;gap:8px;}
.pdr-legend.col .v{
    margin-left:auto;font-family:'JetBrains Mono',monospace;
    font-size:.76rem;color:var(--ink);font-variant-numeric:tabular-nums;
}

/* Lista con barra de proporción (sistemas más cotizados, ciudades…) */
.pdr-meter{display:flex;flex-direction:column;gap:13px;}
.pdr-meter-row{display:grid;grid-template-columns:auto 1fr auto;gap:4px 10px;align-items:center;}
.pdr-meter-row .dot{width:9px;height:9px;border-radius:50%;background:var(--accent-2);flex-shrink:0;}
.pdr-meter-row .dot.g{background:var(--green);}
.pdr-meter-row .dot.a{background:var(--amber);}
.pdr-meter-row .dot.r{background:var(--red);}
.pdr-meter-row .dot.v{background:var(--violet);}
.pdr-meter-row .lbl{font-size:.83rem;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pdr-meter-row .val{font-family:'JetBrains Mono',monospace;font-size:.78rem;color:var(--ink);font-variant-numeric:tabular-nums;}
.pdr-meter-row .bar{grid-column:1/-1;height:6px;border-radius:var(--r-pill);background:var(--bg-2);overflow:hidden;}
.pdr-meter-row .bar span{display:block;height:100%;border-radius:inherit;background:var(--accent-2);}
.pdr-meter-row .bar span.g{background:var(--green-2);}
.pdr-meter-row .bar span.a{background:var(--amber-2);}

/* Barras verticales (actividad por hora / por día) */
.pdr-bars{display:flex;align-items:flex-end;gap:4px;height:86px;}
.pdr-bars .b{flex:1;background:var(--accent-soft);border-radius:3px 3px 0 0;min-height:3px;}
.pdr-bars .b.on{background:var(--accent-2);}
.pdr-bars-x{display:flex;gap:4px;margin-top:6px;}
.pdr-bars-x span{flex:1;min-width:0;text-align:center;font-family:'JetBrains Mono',monospace;font-size:var(--fs-2xs);color:var(--muted);}

/* Dona. El porcentaje va en la variable `--p` (0-100). */
/* Una sola porción: `--p` (0-100). Varias: `--stops` con los tramos ya
   escritos, p. ej. --stops:var(--accent) 0 42%, var(--green) 0 70%, ... */
.pdr-donut{
    --p:0;--c:var(--accent-2);
    width:140px;height:140px;border-radius:50%;flex-shrink:0;
    background:conic-gradient(var(--stops, var(--c) calc(var(--p)*1%), var(--bg-2) 0));
    display:flex;align-items:center;justify-content:center;position:relative;
}
.pdr-donut::after{content:'';position:absolute;inset:21px;border-radius:50%;background:var(--bg-card);}
/* El texto del centro no puede pasar del hueco (140px menos los 21px de anillo
   por lado): si se sale, se lee encima de la dona y se pierden los dos. */
.pdr-donut .mid{
    position:relative;z-index:1;text-align:center;line-height:1.15;
    max-width:92px;overflow-wrap:break-word;
}
.pdr-donut .mid b{
    display:block;font-family:'Inter Tight',sans-serif;font-size:1.15rem;
    font-weight:700;letter-spacing:-.025em;font-variant-numeric:tabular-nums;
}
.pdr-donut .mid small{display:block;font-size:var(--fs-2xs);color:var(--muted);margin-top:2px;}

/* ════════════════════════════════════════════════════════
   BANDEJA DE CONVERSACIONES  (3 paneles)
   Escritorio: lista | hilo | ficha.   Tablet: lista | hilo.
   Móvil: un panel a la vez — `data-pane` en el contenedor dice cuál.
═══════════════════════════════════════════════════════════ */
.pdr-inbox{
    display:grid;grid-template-columns:290px 1fr 300px;
    background:var(--bg-card);border:1px solid var(--line);
    border-radius:var(--r-lg);box-shadow:var(--sh-1);
    overflow:hidden;min-height:min(72vh,640px);
}
.pdr-inbox > *{min-width:0;min-height:0;display:flex;flex-direction:column;}
.pdr-inbox-list{border-right:1px solid var(--line);overflow-y:auto;}
.pdr-inbox-thread{background:var(--bg);}
.pdr-inbox-info{border-left:1px solid var(--line);overflow-y:auto;padding:16px;}
@media (max-width:1100px){
    .pdr-inbox{grid-template-columns:270px 1fr;}
    .pdr-inbox-info{display:none;}
    .pdr-inbox[data-pane="info"] .pdr-inbox-info{display:flex;}
}
@media (max-width:760px){
    .pdr-inbox{grid-template-columns:1fr;min-height:min(78vh,600px);}
    .pdr-inbox-list{border-right:0;}
    .pdr-inbox[data-pane="thread"] .pdr-inbox-list{display:none;}
    .pdr-inbox[data-pane="info"] .pdr-inbox-list{display:none;}
    .pdr-inbox[data-pane="list"] .pdr-inbox-thread{display:none;}
    .pdr-inbox[data-pane="info"] .pdr-inbox-thread{display:none;}
    .pdr-inbox[data-pane="info"] .pdr-inbox-info{display:flex;border-left:0;}
}
.pdr-inbox-item{
    display:flex;gap:10px;padding:12px 14px;cursor:pointer;
    border:0;border-bottom:1px solid var(--line);border-left:3px solid transparent;
    background:transparent;text-align:left;width:100%;appearance:none;
    font-family:inherit;color:inherit;transition:background var(--t-fast);
}
.pdr-inbox-item:hover{background:var(--hover);}
.pdr-inbox-item.on{background:var(--accent-soft);border-left-color:var(--accent);}
.pdr-inbox-item .m{flex:1;min-width:0;}
/* `display:block` explícito: estos dos suelen escribirse como <span> (van
   dentro de un <button>, donde un <div> no es válido) y en línea se encimaban
   uno con otro, además de ignorar el recorte con puntos suspensivos. */
.pdr-inbox-item .nm{display:block;font-weight:600;font-size:.86rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pdr-inbox-item .pv{display:block;font-size:.79rem;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pdr-inbox-item.unread .nm::after{
    content:'';display:inline-block;width:6px;height:6px;border-radius:50%;
    background:var(--accent);margin-left:6px;vertical-align:middle;
}

/* Hilo */
.pdr-thread-head{
    display:flex;align-items:center;gap:10px;padding:12px 16px;
    border-bottom:1px solid var(--line);background:var(--bg-card);flex-shrink:0;
}
.pdr-thread-body{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:10px;}
.pdr-msg{max-width:min(78%,460px);display:flex;flex-direction:column;gap:3px;}
.pdr-msg .bub{
    padding:10px 13px;border-radius:var(--r-lg);border-bottom-left-radius:5px;
    font-size:.87rem;line-height:1.45;overflow-wrap:anywhere;
    background:var(--bg-card);border:1px solid var(--line);color:var(--ink);
}
.pdr-msg .ts{font-size:var(--fs-2xs);color:var(--muted);padding:0 4px;}
.pdr-msg.me{align-self:flex-end;align-items:flex-end;}
.pdr-msg.me .bub{
    background:var(--accent);border-color:var(--accent);color:#fff;
    border-bottom-left-radius:var(--r-lg);border-bottom-right-radius:5px;
}
.pdr-thread-foot{
    display:flex;gap:8px;align-items:flex-end;padding:12px 14px;
    border-top:1px solid var(--line);background:var(--bg-card);flex-shrink:0;
}
.pdr-thread-foot textarea{
    flex:1;resize:none;min-height:40px;max-height:130px;
    background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);
    padding:10px 14px;font-family:inherit;font-size:.88rem;color:var(--ink);outline:none;
}
@media (max-width:560px){ .pdr-thread-foot textarea{font-size:16px;} }
.pdr-thread-foot textarea:focus{border-color:var(--accent);box-shadow:var(--ring);}
.pdr-send{
    width:40px;height:40px;border-radius:50%;flex-shrink:0;
    background:var(--accent);color:#fff;border:0;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;
    transition:background var(--t);
}
.pdr-send:hover{background:var(--ink);}
.pdr-send svg{width:16px;height:16px;}
/* "Volver a la lista": solo cuando la bandeja está reducida a un panel */
.pdr-inbox-back{display:none;}
@media (max-width:760px){ .pdr-inbox-back{display:inline-flex;} }

/* ════════════════════════════════════════════════════════
   AGENDA / LÍNEA DE TIEMPO
═══════════════════════════════════════════════════════════ */
/* Nodos unidos por una línea vertical: se lee como una secuencia del día,
   no como tres tarjetas sueltas. La línea la dibuja cada fila salvo la
   última, así no hay que contarlas ni marcar la final desde el JS. */
.pdr-tl{display:flex;flex-direction:column;}
.pdr-tl-row{
    position:relative;
    display:grid;grid-template-columns:28px 52px 1fr;gap:0 13px;
    padding-bottom:20px;align-items:start;
}
.pdr-tl-row:last-child{padding-bottom:0;}
.pdr-tl-row:not(:last-child)::before{
    content:'';position:absolute;left:13px;top:30px;bottom:-2px;
    width:2px;background:var(--line-2);border-radius:1px;
}
.pdr-tl-dot{
    grid-column:1;width:28px;height:28px;border-radius:50%;
    background:var(--accent);color:#fff;position:relative;z-index:1;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.pdr-tl-dot svg{width:14px;height:14px;}
.pdr-tl-dot.green{background:var(--green);color:var(--on-status);}
.pdr-tl-dot.amber{background:var(--amber);color:var(--on-status);}
.pdr-tl-dot.plain{background:var(--bg-card);border:2px solid var(--accent);color:var(--accent-ink);}
.pdr-tl-time{
    grid-column:2;padding-top:6px;
    font-family:'JetBrains Mono',monospace;font-size:.74rem;color:var(--muted);
    white-space:nowrap;font-variant-numeric:tabular-nums;
}
.pdr-tl-card{grid-column:3;padding-top:4px;min-width:0;}
.pdr-tl-card .t{font-weight:600;font-size:.89rem;color:var(--ink);}
.pdr-tl-card .s{font-size:.82rem;color:var(--muted);margin-top:2px;line-height:1.45;}
@media (max-width:440px){
    /* La hora se va debajo del título: en 3 columnas, con el nodo y la hora
       fijos, al título le quedan ~180px y se parte en cuatro renglones. */
    .pdr-tl-row{grid-template-columns:28px 1fr;}
    .pdr-tl-time{grid-column:2;grid-row:2;padding-top:3px;}
    .pdr-tl-card{grid-column:2;grid-row:1;}
}

/* ════════════════════════════════════════════════════════
   ESQUELETOS de carga
   Evitan el salto de contenido y el "0" que parece dato real cuando
   todavía no se ha leído nada.
═══════════════════════════════════════════════════════════ */
.pdr-skel{
    background:linear-gradient(90deg,var(--bg-2) 25%,var(--bg-3) 37%,var(--bg-2) 63%);
    background-size:400% 100%;border-radius:var(--r-xs);
    animation:pdr-shimmer 1.4s ease-in-out infinite;
    color:transparent !important;user-select:none;
}
.pdr-skel.line{height:11px;margin:6px 0;}
.pdr-skel.title{height:20px;width:45%;}
.pdr-skel.box{height:74px;border-radius:var(--r);}
.pdr-skel.circle{border-radius:50%;}
@keyframes pdr-shimmer{ 0%{background-position:100% 50%;} 100%{background-position:0 50%;} }
@media (prefers-reduced-motion:reduce){ .pdr-skel{animation:none;} }

/* ════════════════════════════════════════════════════════
   BARRA INFERIOR (móvil)
   El menú lateral sigue existiendo; esto son los destinos de uso diario
   para no tener que abrirlo con una mano ocupada.
═══════════════════════════════════════════════════════════ */
.pdr-bottombar{display:none;}
@media (max-width:760px){
    .pdr-bottombar{
        display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
        position:fixed;left:0;right:0;bottom:0;z-index:40;
        background:color-mix(in srgb,var(--bg-card) 92%,transparent);
        backdrop-filter:blur(18px) saturate(180%);
        -webkit-backdrop-filter:blur(18px) saturate(180%);
        border-top:1px solid var(--line);
        padding-bottom:env(safe-area-inset-bottom,0);
    }
    .pdr-bottombar a{
        display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
        padding:6px 4px;text-decoration:none;color:var(--muted);min-width:0;
        font-size:var(--fs-2xs);font-weight:600;min-height:52px;
    }
    .pdr-bottombar a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    /* Píldora detrás del icono activo (el patrón de las barras de Android/iOS):
       el color solo no bastaba, en oscuro daba 3.5:1. Todos los iconos llevan
       el mismo relleno para que activo e inactivo queden a la misma altura;
       con 6px arriba y abajo la barra conserva sus 53px. */
    .pdr-bottombar a svg{
        width:19px;height:19px;box-sizing:content-box;
        padding:2px 14px;border-radius:var(--r-pill);
        transition:background var(--t), color var(--t);
    }
    .pdr-bottombar a.on, .pdr-bottombar a[aria-current="page"]{color:var(--accent-ink);font-weight:700;}
    .pdr-bottombar a.on svg, .pdr-bottombar a[aria-current="page"] svg{background:var(--accent-soft);}
    [data-theme="dark"] .pdr-bottombar a.on svg,
    [data-theme="dark"] .pdr-bottombar a[aria-current="page"] svg{background:rgba(122,162,255,.16);}
    /* El botón "Menú" lo pinta el armazón (pdr-shell.js) con su propio relleno
       y tamaño; se iguala aquí para que su rótulo no quede más chico ni más
       bajo que los otros cuatro. `body` delante le gana a esa hoja inyectada. */
    body .pdr-bottombar .ps-bb-menu{padding:6px 4px;font-size:var(--fs-2xs);min-width:0;}
    body .pdr-bottombar .ps-bb-menu svg{box-sizing:content-box;padding:2px 14px;border-radius:var(--r-pill);}
    /* Aire al final para que la barra no tape el último botón del formulario */
    body.has-bottombar{padding-bottom:60px;}
}

/* ════════════════════════════════════════════════════════════════════
   ██  SITIO PÚBLICO  ·  lo que ve el CLIENTE que busca aplicador
   ────────────────────────────────────────────────────────────────────
   Registro editorial, no de panel: barra oscura, portada a sangre,
   titulares grandes, mucho aire y una sola acción clara por pantalla
   ("Pedir cotización"). Es la cara que llega desde Google, así que pesa
   más la confianza que la densidad de datos.

   REGLA ANTI-BYPASS (no tocar): aquí NUNCA se muestra teléfono ni correo
   de nadie. El único contacto es el formulario que crea el lead.
════════════════════════════════════════════════════════════════════ */

/* ── Marca de agua para bloques de imagen ──────────────────
   El proyecto todavía no guarda fotos (decisión de costo: el plan libre
   de almacenamiento aguanta texto, no imágenes). Sin esto quedaría un
   hueco gris que parece un error de carga. Con `--mono` se pone la
   inicial del negocio; si luego hay foto, se mete un <img> dentro y
   la textura queda debajo sin cambiar nada más. */
.pdr-media{
    --mono:'';
    position:relative;overflow:hidden;
    /* La inicial se dimensiona con el ANCHO DE LA TARJETA (`cqw`), no con
       el de la ventana: si no, en una rejilla de 4 columnas sale gigante
       y en el móvil diminuta. */
    container-type:inline-size;
    background:
        repeating-linear-gradient(45deg, var(--accent-soft) 0 2px, transparent 2px 9px),
        linear-gradient(150deg, var(--bg-2), var(--bg-3));
    border-radius:var(--r);
    display:flex;align-items:center;justify-content:center;
    aspect-ratio:4/3;color:var(--muted-2);
}
.pdr-media::after{
    content:var(--mono);
    font-family:'Inter Tight',sans-serif;font-weight:800;
    font-size:clamp(1.6rem,7cqw,3rem);letter-spacing:-.04em;
    color:color-mix(in srgb, var(--accent) 26%, transparent);
}
.pdr-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.pdr-media.wide{aspect-ratio:16/9;}
.pdr-media.square{aspect-ratio:1;}

/* ════════════════════════════════════════════════════════
   BARRA SUPERIOR OSCURA
   Va en oscuro SIEMPRE (no sigue el tema): es la firma visual del sitio
   público y lo que separa "estoy en la web" de "estoy en mi panel".
═══════════════════════════════════════════════════════════ */
.pdr-sitenav{
    position:sticky;top:0;z-index:40;
    background:rgba(12,12,11,.92);
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    color:#FAFAF7;
    display:flex;align-items:center;gap:18px;
    padding:13px clamp(16px,4vw,34px);
    border-bottom:1px solid rgba(250,250,247,.1);
}
.pdr-sitenav .brand{
    display:inline-flex;align-items:center;gap:9px;
    font-family:'Inter Tight',sans-serif;font-weight:700;font-size:.98rem;
    letter-spacing:-.02em;color:inherit;text-decoration:none;
}
.pdr-sitenav .brand .dot{
    width:9px;height:9px;border-radius:50%;
    background:linear-gradient(135deg,var(--accent-2),#fff);flex-shrink:0;
}
.pdr-sitenav .links{display:flex;gap:4px;margin-left:auto;align-items:center;}
.pdr-sitenav .links a{
    color:rgba(250,250,247,.72);text-decoration:none;
    font-size:.85rem;font-weight:500;padding:8px 13px;border-radius:var(--r-sm);
    transition:color var(--t), background var(--t);
}
.pdr-sitenav .links a:hover{color:#fff;background:rgba(250,250,247,.09);}
.pdr-sitenav .links a.on{color:#fff;background:rgba(250,250,247,.13);}
.pdr-sitenav .nav-cta{
    background:#FAFAF7;color:#0A0A09;border:0;border-radius:var(--r-pill);
    padding:9px 17px;font-family:'Inter Tight',sans-serif;font-weight:700;font-size:.83rem;
    text-decoration:none;white-space:nowrap;transition:transform var(--t-fast), background var(--t);
    display:inline-flex;align-items:center;gap:6px;
}
.pdr-sitenav .nav-cta:hover{background:#fff;transform:translateY(-1px);}
.pdr-sitenav .burger{
    display:none;background:transparent;border:0;color:#FAFAF7;cursor:pointer;
    width:38px;height:38px;border-radius:var(--r-sm);margin-left:auto;
    align-items:center;justify-content:center;
}
.pdr-sitenav .burger:hover{background:rgba(250,250,247,.09);}
.pdr-sitenav .burger svg{width:20px;height:20px;}
@media (max-width:820px){
    .pdr-sitenav .links{display:none;}
    .pdr-sitenav .burger{display:inline-flex;}
    .pdr-sitenav .nav-cta{display:none;}
}

/* Cajón lateral oscuro (menú móvil del sitio público) */
.pdr-drawer{
    position:fixed;inset:0;z-index:60;display:none;
}
.pdr-drawer.open{display:block;}
.pdr-drawer .veil{position:absolute;inset:0;background:rgba(10,10,9,.55);backdrop-filter:blur(3px);}
.pdr-drawer .panel{
    position:absolute;top:0;right:0;bottom:0;width:min(88vw,330px);
    background:#101010;color:#FAFAF7;
    display:flex;flex-direction:column;
    padding:14px 14px calc(14px + env(safe-area-inset-bottom,0));
    box-shadow:var(--sh-pop);
    animation:pdr-slide-in .26s var(--ease-out);
}
@keyframes pdr-slide-in{ from{transform:translateX(100%);} to{transform:translateX(0);} }
@media (prefers-reduced-motion:reduce){ .pdr-drawer .panel{animation:none;} }
.pdr-drawer .dhead{display:flex;align-items:center;justify-content:space-between;padding:6px 6px 14px;}
.pdr-drawer .dhead button{background:transparent;border:0;color:inherit;cursor:pointer;font-size:1.5rem;line-height:1;padding:4px 8px;}
.pdr-drawer a.item{
    display:flex;align-items:center;gap:12px;
    padding:14px 12px;border-radius:var(--r);
    color:rgba(250,250,247,.86);text-decoration:none;font-size:.95rem;font-weight:500;
}
.pdr-drawer a.item:hover{background:rgba(250,250,247,.07);color:#fff;}
.pdr-drawer a.item svg{width:18px;height:18px;opacity:.7;}
.pdr-drawer a.item .chev{margin-left:auto;opacity:.35;}
.pdr-drawer .dhelp{
    margin-top:auto;background:rgba(250,250,247,.06);
    border:1px solid rgba(250,250,247,.1);border-radius:var(--r);padding:16px;
}
.pdr-drawer .dhelp b{display:block;font-family:'Inter Tight',sans-serif;font-size:.95rem;margin-bottom:4px;}
.pdr-drawer .dhelp p{font-size:.82rem;color:rgba(250,250,247,.6);line-height:1.5;margin-bottom:12px;}

/* ════════════════════════════════════════════════════════
   PORTADA
═══════════════════════════════════════════════════════════ */
.pdr-eyebrow{
    font-family:'JetBrains Mono',monospace;font-size:var(--fs-2xs);font-weight:600;
    letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
    display:block;margin-bottom:14px;
}
.pdr-shero{
    position:relative;overflow:hidden;isolation:isolate;
    background:linear-gradient(155deg,#16150F 0%,#0A0A09 62%);
    color:#FAFAF7;border-radius:var(--r-xl);
    display:flex;align-items:flex-end;
    min-height:clamp(340px,52vh,520px);
    padding:clamp(24px,5vw,52px);
}
/* Trama diagonal: le da textura de resina pulida sin cargar una foto */
.pdr-shero::before{
    content:'';position:absolute;inset:0;z-index:-1;
    background:
        radial-gradient(120% 90% at 82% 8%, color-mix(in srgb,var(--accent) 42%, transparent) 0%, transparent 58%),
        repeating-linear-gradient(120deg, rgba(250,250,247,.045) 0 1px, transparent 1px 14px);
}
.pdr-shero img.bg{
    position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;opacity:.5;
}
.pdr-shero .in{max-width:640px;}
.pdr-shero .pdr-eyebrow{color:rgba(250,250,247,.62);}
.pdr-shero h1{
    font-family:'Inter Tight',sans-serif;font-weight:700;
    font-size:clamp(1.9rem,5.4vw,3.4rem);line-height:1.04;letter-spacing:-.035em;
    text-wrap:balance;
}
.pdr-shero p{
    margin-top:14px;font-size:clamp(.95rem,2.2vw,1.08rem);line-height:1.6;
    color:rgba(250,250,247,.74);max-width:52ch;
}
.pdr-shero .ctas{margin-top:26px;display:flex;gap:10px;flex-wrap:wrap;}
.pdr-cta{
    display:inline-flex;align-items:center;gap:9px;
    background:#FAFAF7;color:#0A0A09;border:1px solid #FAFAF7;
    border-radius:var(--r-pill);padding:14px 26px;min-height:48px;
    font-family:'Inter Tight',sans-serif;font-weight:700;font-size:.95rem;
    text-decoration:none;cursor:pointer;
    transition:transform var(--t-fast) var(--ease-out), background var(--t);
}
.pdr-cta:hover{transform:translateY(-2px);background:#fff;}
.pdr-cta svg{width:16px;height:16px;transition:transform var(--t);}
.pdr-cta:hover svg{transform:translateX(3px);}
.pdr-cta.outline{background:transparent;color:#FAFAF7;border-color:rgba(250,250,247,.32);}
.pdr-cta.outline:hover{background:rgba(250,250,247,.1);border-color:rgba(250,250,247,.55);}
@media (prefers-reduced-motion:reduce){ .pdr-cta:hover{transform:none;} .pdr-cta:hover svg{transform:none;} }

/* Franja de argumentos bajo la portada */
.pdr-strip{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
    gap:12px;
}
.pdr-strip .cell{
    background:var(--bg-card);border:1px solid var(--line);
    border-radius:var(--r-lg);box-shadow:var(--sh-1);
    padding:18px;display:flex;align-items:center;gap:13px;
}
/* Cuadro tintado, no círculo con borde: el color entra por el fondo del
   icono, que es lo único a color de la franja. El texto se queda neutro. */
.pdr-strip .ic{
    width:38px;height:38px;border-radius:var(--r);flex-shrink:0;
    background:var(--accent-soft);color:var(--accent-ink);
    display:flex;align-items:center;justify-content:center;
}
.pdr-strip .ic svg{width:18px;height:18px;}
.pdr-strip .ic.green{background:var(--green-soft);color:var(--green);}
.pdr-strip .ic.amber{background:var(--amber-soft);color:var(--amber);}
.pdr-strip .ic.violet{background:var(--violet-soft);color:var(--violet);}
.pdr-strip b{display:block;font-family:'Inter Tight',sans-serif;font-weight:600;font-size:.9rem;letter-spacing:-.012em;}
.pdr-strip span{display:block;font-size:.8rem;color:var(--muted);margin-top:2px;line-height:1.45;}

/* ════════════════════════════════════════════════════════
   MIGAS DE PAN
═══════════════════════════════════════════════════════════ */
.pdr-crumbs{
    display:flex;align-items:center;gap:7px;flex-wrap:wrap;
    font-size:.78rem;color:var(--muted);margin-bottom:var(--sp-4);
}
.pdr-crumbs a{color:var(--muted);text-decoration:none;}
.pdr-crumbs a:hover{color:var(--ink);text-decoration:underline;}
.pdr-crumbs .sep{opacity:.4;}
.pdr-crumbs .cur{color:var(--ink);font-weight:600;}

/* ════════════════════════════════════════════════════════
   LISTADO CON CARRIL DE FILTROS
   Escritorio: carril fijo a la izquierda. Móvil: el carril se convierte
   en una hoja que sube desde abajo (el botón "Filtrar" la abre), porque
   un carril apilado arriba empuja los resultados fuera de pantalla.
═══════════════════════════════════════════════════════════ */
.pdr-browse{display:grid;grid-template-columns:236px 1fr;gap:26px;align-items:start;}
/* Sin esto, un hijo que no puede encogerse —la fila de chips con nowrap— hace
   crecer su columna por encima del ancho de la pantalla y desborda la página
   entera en horizontal. `min-width:auto` es el valor por defecto de un ítem de
   rejilla y casi nunca es el que se quiere. */
.pdr-browse > *{min-width:0;}
@media (max-width:900px){ .pdr-browse{grid-template-columns:1fr;gap:16px;} }

.pdr-rail{
    position:sticky;top:78px;
    display:flex;flex-direction:column;gap:22px;
    max-height:calc(100dvh - 100px);overflow-y:auto;padding-right:4px;
}
.pdr-rail h4{
    font-family:'JetBrains Mono',monospace;font-size:var(--fs-2xs);font-weight:600;
    color:var(--muted);letter-spacing:.16em;text-transform:uppercase;margin-bottom:11px;
}
.pdr-rail-group{border-bottom:1px solid var(--line);padding-bottom:18px;}
.pdr-rail-group:last-child{border-bottom:0;}
.pdr-opt{
    display:flex;align-items:center;gap:10px;
    padding:7px 2px;cursor:pointer;font-size:.87rem;color:var(--ink-soft);
    border-radius:var(--r-xs);
}
.pdr-opt:hover{color:var(--ink);}
.pdr-opt input{accent-color:var(--accent);width:16px;height:16px;flex-shrink:0;cursor:pointer;}
.pdr-opt .n{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--muted);}

.pdr-rail-toggle{display:none;}
@media (max-width:900px){
    .pdr-rail-toggle{display:inline-flex;}
    /* La hoja de filtros: fuera de flujo, sobre el contenido, cerrable */
    .pdr-rail{
        position:fixed;left:0;right:0;bottom:0;top:auto;z-index:55;
        background:var(--bg-card);border-top:1px solid var(--line-2);
        border-radius:var(--r-xl) var(--r-xl) 0 0;
        box-shadow:var(--sh-pop);
        padding:20px 20px calc(20px + env(safe-area-inset-bottom,0));
        max-height:82dvh;overflow-y:auto;
        transform:translateY(100%);transition:transform var(--t-slow) var(--ease-out);
    }
    .pdr-rail.open{transform:translateY(0);}
    @media (prefers-reduced-motion:reduce){ .pdr-rail{transition:none;} }
}

/* ════════════════════════════════════════════════════════
   TARJETA DE APLICADOR  (el resultado del directorio)
═══════════════════════════════════════════════════════════ */
.pdr-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;}
@media (max-width:440px){ .pdr-cards{grid-template-columns:1fr;} }
.pdr-procard{
    position:relative;
    background:var(--bg-card);border:1px solid var(--line);
    border-radius:var(--r-lg);box-shadow:var(--sh-1);
    padding:16px;display:flex;flex-direction:column;gap:11px;
    transition:box-shadow var(--t), border-color var(--t), transform var(--t) var(--ease-out);
}
.pdr-procard:hover{box-shadow:var(--sh-2);border-color:var(--line-2);transform:translateY(-2px);}
@media (prefers-reduced-motion:reduce){ .pdr-procard:hover{transform:none;} }
.pdr-procard.featured{border-color:color-mix(in srgb,var(--amber) 42%,var(--line));}
.pdr-procard-flag{
    position:absolute;top:10px;right:10px;z-index:2;
    background:var(--amber);color:var(--on-status);
    font-size:var(--fs-2xs);font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    padding:4px 9px;border-radius:var(--r-pill);
}
/* Foto de portada a sangre arriba de la tarjeta. Hoy no hay fotos, así que
   `.pdr-media` dibuja su trama con la inicial; el día que las haya, se mete
   un <img> dentro y no cambia nada más. El escudo circular del negocio va
   montado sobre el borde inferior de la foto, con un aro del color de la
   tarjeta para que se recorte limpio contra cualquier imagen. */
.pdr-procard-cover{
    margin:-16px -16px 0;border-radius:var(--r-lg) var(--r-lg) 0 0;
    aspect-ratio:16/10;position:relative;
}
/* Solo la portada se estira. Sin el :not(), el escudo —que también es un
   .pdr-media— se inflaba hasta el tamaño de la foto y la tapaba entera. */
.pdr-procard-cover > .pdr-media:not(.pdr-procard-badge){
    width:100%;height:100%;aspect-ratio:auto;
    border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.pdr-procard-badge{
    position:absolute;left:14px;bottom:-19px;z-index:1;
    width:46px;height:46px;aspect-ratio:1;border-radius:50%;
    border:3px solid var(--bg-card);box-shadow:var(--sh-1);
}
.pdr-procard-badge::after{font-size:.9rem;}
.pdr-procard-cover + .pdr-procard-top{margin-top:24px;}
.pdr-procard-top{display:flex;gap:13px;align-items:flex-start;}
.pdr-procard-id{flex:1;min-width:0;}
/* Precio de referencia: la etiqueta pequeña y el número grande, porque es
   lo que la gente compara entre tarjeta y tarjeta. */
.pdr-procard-price{font-size:.78rem;color:var(--muted);}
.pdr-procard-price b{
    font-family:'Inter Tight',sans-serif;font-weight:700;font-size:1.02rem;
    color:var(--ink);letter-spacing:-.02em;margin-left:5px;
    font-variant-numeric:tabular-nums;
}
.pdr-procard-name{
    font-family:'Inter Tight',sans-serif;font-weight:700;font-size:1.05rem;
    letter-spacing:-.018em;line-height:1.2;
    display:flex;align-items:center;gap:7px;flex-wrap:wrap;
}
.pdr-procard-sub{font-size:.83rem;color:var(--muted);margin-top:3px;}
.pdr-verified{
    display:inline-flex;align-items:center;gap:4px;
    font-size:var(--fs-2xs);font-weight:700;letter-spacing:.03em;
    color:var(--green);color:color-mix(in srgb, var(--green) 85%, var(--ink));
    background:var(--green-soft);
    padding:3px 8px;border-radius:var(--r-pill);white-space:nowrap;
}
.pdr-verified svg{width:10px;height:10px;}
.pdr-procard-facts{display:flex;gap:7px;flex-wrap:wrap;}
.pdr-fact{
    display:inline-flex;align-items:center;gap:5px;
    font-size:.76rem;color:var(--ink-soft);
    background:var(--bg-2);border:1px solid var(--line);
    border-radius:var(--r-sm);padding:4px 9px;
}
.pdr-fact svg{width:12px;height:12px;color:var(--muted);}
.pdr-procard-foot{display:flex;gap:9px;margin-top:auto;padding-top:4px;}
.pdr-procard-foot .pdr-btn{flex:1;}

/* Estrellas de reputación */
.pdr-stars{display:inline-flex;align-items:center;gap:1px;color:var(--amber-2);}
.pdr-stars svg{width:14px;height:14px;}
.pdr-stars .off{color:var(--line-2);}
.pdr-rating{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:.81rem;}
.pdr-rating b{font-family:'JetBrains Mono',monospace;color:var(--ink);font-weight:700;}
/* `:not(.pdr-stars)` porque las estrellas también son un <span> aquí dentro:
   sin excluirlas, esta regla les ganaba por especificidad y salían grises. */
.pdr-rating > span:not(.pdr-stars){color:var(--muted);}

/* ════════════════════════════════════════════════════════
   FICHA DE APLICADOR  (perfil público)
   Contenido a la izquierda, caja de contacto pegajosa a la derecha.
═══════════════════════════════════════════════════════════ */
.pdr-detail{display:grid;grid-template-columns:1fr 340px;gap:28px;align-items:start;}
@media (max-width:920px){ .pdr-detail{grid-template-columns:1fr;gap:20px;} }
.pdr-buybox{
    position:sticky;top:78px;
    background:var(--bg-card);border:1px solid var(--line);
    border-radius:var(--r-lg);box-shadow:var(--sh-2);
    padding:22px;display:flex;flex-direction:column;gap:14px;
}
@media (max-width:920px){
    /* En móvil deja de ser pegajosa: la acción vive en la barra inferior */
    .pdr-buybox{position:static;box-shadow:var(--sh-1);}
}
.pdr-buybox .price{
    font-family:'Inter Tight',sans-serif;font-weight:700;
    font-size:1.9rem;letter-spacing:-.03em;line-height:1;
}
.pdr-buybox .price small{font-size:.85rem;font-weight:500;color:var(--muted);letter-spacing:0;}
.pdr-buybox .note{font-size:.78rem;color:var(--muted);line-height:1.5;}

/* Acción fija abajo (móvil): el "Pedir cotización" siempre a la mano */
.pdr-sticky-cta{
    position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;
    background:color-mix(in srgb,var(--bg-card) 94%,transparent);
    backdrop-filter:blur(18px) saturate(180%);
    -webkit-backdrop-filter:blur(18px) saturate(180%);
    border-top:1px solid var(--line);
    padding:11px 14px calc(11px + env(safe-area-inset-bottom,0));
    gap:10px;align-items:center;
}
@media (max-width:920px){
    .pdr-sticky-cta{display:flex;}
    body.has-sticky-cta{padding-bottom:74px;}
}
.pdr-sticky-cta .info{flex:1;min-width:0;line-height:1.2;}
.pdr-sticky-cta .info b{font-family:'Inter Tight',sans-serif;font-size:.95rem;display:block;}
.pdr-sticky-cta .info small{font-size:.72rem;color:var(--muted);}

/* ════════════════════════════════════════════════════════
   PASOS  1 · 2 · 3   (formulario de cotización por etapas)
═══════════════════════════════════════════════════════════ */
.pdr-steps{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:var(--sp-6);}
.pdr-step{
    display:inline-flex;align-items:center;gap:9px;
    font-size:.85rem;color:var(--muted);font-weight:500;white-space:nowrap;
}
.pdr-step .n{
    width:26px;height:26px;border-radius:50%;flex-shrink:0;
    border:1px solid var(--line-2);color:var(--muted);
    display:inline-flex;align-items:center;justify-content:center;
    font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:600;
    transition:background var(--t), color var(--t), border-color var(--t);
}
.pdr-step.on{color:var(--ink);font-weight:600;}
.pdr-step.on .n{background:var(--ink);border-color:var(--ink);color:var(--bg);}
.pdr-step.done{color:var(--ink-soft);}
.pdr-step.done .n{background:var(--green-soft);border-color:transparent;color:var(--green);}
.pdr-steps .bar{flex:1;min-width:18px;height:1px;background:var(--line);}
@media (max-width:560px){
    /* Solo los números: los rótulos completos no caben y se parten feo */
    .pdr-step .lbl{display:none;}
    .pdr-step.on .lbl{display:inline;}
}

/* ════════════════════════════════════════════════════════
   MUESTRAS DE COLOR  ·  CANTIDAD
═══════════════════════════════════════════════════════════ */
.pdr-swatches{display:flex;gap:9px;flex-wrap:wrap;}
.pdr-swatch{
    width:32px;height:32px;border-radius:50%;cursor:pointer;
    border:1px solid var(--line-2);padding:0;appearance:none;
    box-shadow:inset 0 -6px 10px -8px rgba(0,0,0,.5);
    transition:transform var(--t-fast), box-shadow var(--t);
    position:relative;
}
.pdr-swatch:hover{transform:scale(1.08);}
.pdr-swatch[aria-pressed="true"]{
    box-shadow:0 0 0 2px var(--bg-card), 0 0 0 4px var(--ink);
}

.pdr-qty{
    display:inline-flex;align-items:center;
    border:1px solid var(--line);border-radius:var(--r-sm);
    background:var(--bg-card);overflow:hidden;
}
.pdr-qty button{
    appearance:none;background:transparent;border:0;cursor:pointer;
    width:40px;height:40px;color:var(--ink);font-size:1.1rem;line-height:1;
    display:inline-flex;align-items:center;justify-content:center;
    transition:background var(--t-fast);
}
.pdr-qty button:hover{background:var(--bg-2);}
.pdr-qty input{
    width:56px;text-align:center;border:0;background:transparent;
    font-family:'JetBrains Mono',monospace;font-size:.9rem;color:var(--ink);
    outline:none;-moz-appearance:textfield;
}
/* Misma razón que el resto de campos: por debajo de 16px, iOS hace zoom
   al enfocar y descuadra la pantalla. */
@media (max-width:560px){ .pdr-qty input{font-size:16px;} }
.pdr-qty input::-webkit-outer-spin-button,
.pdr-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

/* ════════════════════════════════════════════════════════
   GALERÍA  (miniaturas + imagen grande)
═══════════════════════════════════════════════════════════ */
.pdr-gallery{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:start;}
@media (max-width:560px){
    /* Miniaturas debajo y en fila: en columna se comen media pantalla */
    .pdr-gallery{grid-template-columns:1fr;}
    .pdr-gallery .thumbs{flex-direction:row;overflow-x:auto;order:2;}
    .pdr-gallery .thumbs .pdr-media{width:64px;flex-shrink:0;}
}
.pdr-gallery .thumbs{display:flex;flex-direction:column;gap:9px;}
.pdr-gallery .thumbs .pdr-media{
    aspect-ratio:1;cursor:pointer;border:1px solid var(--line);
    transition:border-color var(--t);
}
.pdr-gallery .thumbs .pdr-media[aria-pressed="true"]{border-color:var(--ink);}

/* ════════════════════════════════════════════════════════
   PIE DEL SITIO PÚBLICO
═══════════════════════════════════════════════════════════ */
.pdr-sitefoot{
    background:#0C0C0B;color:rgba(250,250,247,.62);
    padding:clamp(30px,5vw,52px) clamp(16px,4vw,34px) 34px;
    margin-top:clamp(40px,7vw,80px);
}
.pdr-sitefoot .cols{
    max-width:1100px;margin:0 auto;
    display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:28px;
}
.pdr-sitefoot h5{
    font-family:'JetBrains Mono',monospace;font-size:var(--fs-2xs);font-weight:600;
    letter-spacing:.16em;text-transform:uppercase;color:rgba(250,250,247,.42);margin-bottom:12px;
}
.pdr-sitefoot a{display:block;color:rgba(250,250,247,.72);text-decoration:none;font-size:.86rem;padding:5px 0;}
.pdr-sitefoot a:hover{color:#fff;}
.pdr-sitefoot .legal{
    max-width:1100px;margin:30px auto 0;padding-top:20px;
    border-top:1px solid rgba(250,250,247,.1);
    font-size:.76rem;color:rgba(250,250,247,.42);
    display:flex;gap:14px;flex-wrap:wrap;justify-content:space-between;
}

/* ════════════════════════════════════════════════════════
   AYUDAS DE MAQUETADO
═══════════════════════════════════════════════════════════ */
.pdr-wrap{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,34px);}
.pdr-wrap.narrow{max-width:820px;}
.pdr-block{padding-block:var(--sp-fluid);}
.pdr-stack{display:flex;flex-direction:column;gap:var(--sp-4);}
.pdr-hstack{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;}
.pdr-h2{
    font-family:'Inter Tight',sans-serif;font-weight:700;
    font-size:clamp(1.35rem,3.4vw,2rem);letter-spacing:-.028em;line-height:1.12;
    text-wrap:balance;
}
.pdr-lead{color:var(--muted);font-size:clamp(.92rem,2.2vw,1.02rem);line-height:1.6;max-width:60ch;margin-top:8px;}
/* Salto a contenido: primer tabulador de la página, invisible con ratón */
.pdr-skip{
    position:absolute;left:-9999px;top:0;z-index:100;
    background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:0 0 var(--r-sm) 0;
    font-weight:600;font-size:.85rem;text-decoration:none;
}
.pdr-skip:focus{left:0;}

/* ════════════════════════════════════════════════════════════════════
   ██  v3 — dirección visual clara
   ────────────────────────────────────────────────────────────────────
   El sitio público deja el registro editorial oscuro y pasa a claro con
   azul: portada blanca, buscador en barra, rejilla de tarjetas con foto.
   La portada oscura (.pdr-shero sin modificador) se conserva porque la
   usan las landings de campaña, donde sí manda la imagen.
════════════════════════════════════════════════════════════════════ */

/* ── Portada clara ────────────────────────────────────────
   Texto a la izquierda, imagen a la derecha. La imagen es decorativa:
   si no hay foto, `.pdr-media` pone su trama y la portada sigue en pie. */
.pdr-shero.claro{
    background:var(--bg-card);color:var(--ink);
    border:1px solid var(--line);box-shadow:var(--sh-1);
    border-radius:var(--r-xl);
    display:grid;grid-template-columns:1.1fr .9fr;
    column-gap:clamp(20px,3vw,38px);row-gap:var(--sp-5);
    align-items:center;
    min-height:0;padding:clamp(22px,3.6vw,42px);
}
.pdr-shero.claro::before{display:none;}
.pdr-shero.claro .in{max-width:none;}
.pdr-shero.claro .pdr-eyebrow{color:var(--accent-ink);}
.pdr-shero.claro h1{font-size:clamp(1.6rem,3.6vw,2.5rem);}
.pdr-shero.claro h1 em{font-style:normal;color:var(--accent-ink);}
.pdr-shero.claro p{color:var(--muted);}
.pdr-shero.claro .arte{
    align-self:stretch;min-height:220px;
    border-radius:var(--r-lg);overflow:hidden;
}
.pdr-shero.claro .arte .pdr-media{width:100%;height:100%;aspect-ratio:auto;border-radius:var(--r-lg);}
.pdr-shero.claro .pdr-cta{
    background:var(--accent);color:#fff;border-color:var(--accent);
}
.pdr-shero.claro .pdr-cta:hover{background:var(--ink);border-color:var(--ink);}
.pdr-shero.claro .pdr-cta.outline{
    background:transparent;color:var(--ink);border-color:var(--line-2);
}
.pdr-shero.claro .pdr-cta.outline:hover{background:var(--bg-2);border-color:var(--line-2);}
@media (max-width:820px){
    .pdr-shero.claro{grid-template-columns:1fr;}
    /* La imagen es decoración: en pantalla angosta empuja el buscador
       fuera de vista y no aporta nada, así que se retira. */
    .pdr-shero.claro .arte{display:none;}
}

/* ── Buscador de portada ──────────────────────────────────
   Campos y botón en una sola barra blanca. En móvil se apila y el botón
   ocupa el ancho, que es donde cae el pulgar. */
.pdr-searchbar{
    margin-top:22px;
    background:var(--bg-card);border:1px solid var(--line);
    border-radius:var(--r-lg);box-shadow:var(--sh-2);
    padding:12px;display:grid;gap:10px;
    grid-template-columns:1fr 1fr auto;align-items:end;
}
.pdr-searchbar .campo{display:flex;flex-direction:column;gap:5px;min-width:0;}
.pdr-searchbar label{
    font-size:var(--fs-2xs);font-weight:600;color:var(--muted);
    letter-spacing:.02em;padding-left:2px;
}
.pdr-searchbar .pdr-btn{min-height:44px;padding-inline:22px;}
@media (max-width:760px){
    .pdr-searchbar{grid-template-columns:1fr;}
    .pdr-searchbar .pdr-btn{width:100%;}
}

/* ── Barra de filtros del listado ─────────────────────────
   Buscar + "Filtros" a la derecha, y debajo los desplegables rápidos.
   Los filtros finos viven en el panel que abre "Filtros": tenerlos todos
   a la vista ocupaba media pantalla antes del primer resultado. */
.pdr-filterbar{display:flex;flex-direction:column;gap:11px;margin-bottom:var(--sp-5);min-width:0;}
.pdr-filterbar .fila{display:flex;gap:10px;align-items:center;min-width:0;}
.pdr-filterbar .fila .pdr-search{flex:1;min-width:0;}
.pdr-filterbar .rapidos{display:flex;gap:8px;flex-wrap:wrap;min-width:0;}
/* Desplegable con pinta de chip: es un <select> de verdad, así que en
   celular abre el selector nativo del sistema en vez de una lista propia
   que habría que volver a hacer accesible. */
.pdr-selchip{
    appearance:none;cursor:pointer;
    font-family:inherit;font-size:.79rem;font-weight:500;color:var(--ink-soft);
    background:var(--bg-card);border:1px solid var(--line);
    border-radius:var(--r-pill);
    padding:7px 30px 7px 13px;min-height:38px;
    background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                     linear-gradient(135deg,currentColor 50%,transparent 50%);
    background-position:calc(100% - 16px) 51%, calc(100% - 11px) 51%;
    background-size:5px 5px, 5px 5px;background-repeat:no-repeat;
    transition:border-color var(--t), background-color var(--t);
}
.pdr-selchip:hover{border-color:var(--line-2);}
.pdr-selchip:focus-visible{border-color:var(--accent);box-shadow:var(--ring);outline:none;}
.pdr-selchip.on{
    border-color:var(--accent);color:var(--accent-ink);
    background-color:var(--accent-soft);font-weight:600;
}
@media (max-width:560px){
    .pdr-selchip{font-size:16px;padding-block:9px;}
    /* Se desplazan en horizontal en vez de partirse en tres renglones */
    .pdr-filterbar .rapidos{
        flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
        margin-inline:calc(-1 * var(--sp-4));padding-inline:var(--sp-4);
    }
    .pdr-filterbar .rapidos::-webkit-scrollbar{display:none;}
}

/* ── Menú lateral azul marino ─────────────────────────────
   Clases genéricas que consumen los tokens --side-*. El hub y el armazón
   de las páginas internas las aplican sobre su propio contenedor. */
.pdr-side{
    background:var(--side-bg);color:var(--side-ink);
    border-right:1px solid var(--side-line);
}
.pdr-side .pdr-side-title{
    font-family:'JetBrains Mono',monospace;font-size:var(--fs-2xs);font-weight:600;
    color:var(--side-muted);letter-spacing:.16em;text-transform:uppercase;
    padding:18px 14px 7px;
}
.pdr-side a, .pdr-side .item{
    display:flex;align-items:center;gap:13px;
    padding:11px 13px;margin:1px 8px;border-radius:var(--r-sm);
    color:var(--side-ink);text-decoration:none;
    font-size:.89rem;font-weight:500;cursor:pointer;
    transition:background var(--t-fast), color var(--t-fast);
}
.pdr-side a svg, .pdr-side .item svg{width:18px;height:18px;flex-shrink:0;opacity:.8;}
.pdr-side a:hover, .pdr-side .item:hover{background:var(--side-bg-2);color:var(--side-ink-on);}
.pdr-side a.active, .pdr-side .item.active{
    background:var(--accent);color:var(--side-ink-on);font-weight:600;
}
.pdr-side a.active svg, .pdr-side .item.active svg{opacity:1;}
.pdr-side .contador{
    margin-left:auto;
    background:rgba(255,255,255,.12);color:var(--side-ink);
    font-family:'JetBrains Mono',monospace;font-size:var(--fs-2xs);font-weight:600;
    padding:2px 8px;border-radius:var(--r-pill);
}
/* Igual que en el armazón: sobre el acento el velo blanco al 24% dejaba el
   número en 4.07:1; oscurecerlo lo sube por encima de 9:1. */
.pdr-side a.active .contador{background:rgba(0,0,0,.26);color:#fff;}

/* ════════════════════════════════════════════════════════
   TRANSICIÓN · fondos de estado con texto blanco fijo
   Con los estados propios del oscuro (#4ADE80, #F87171…), un `color:#fff`
   escrito encima en una página o en el armazón queda a 1.7-2.8:1 (medido:
   el contador de la campana y las palomitas de "hecho"). Lo correcto es que
   cada archivo use color:var(--on-status); mientras tanto esto lo corrige
   SOLO en oscuro para los casos conocidos (auditoría 15/09/2026). Borrar
   cada línea cuando su archivo ya use --on-status.
═══════════════════════════════════════════════════════════ */
/* Ya solo queda agenda.html, que ningún paquete tocó: el armazón, aplicador,
   operación y equipo (también sus style="" desde el JS) escriben --on-status
   en el origen, así que sus líneas se borraron el 15/09. */
[data-theme="dark"] .event-row.done .check-btn{color:var(--on-status);}
/* El mismo caso escrito como color:var(--l-bg-card) ("blanco de marca") en
   páginas que ningún paquete tocó. Medido en oscuro: "obligatorio" de la
   ficha de EPP daba 2.77:1. Aquí van solo las etiquetas y botones cuyo fondo
   es un estado (verde/ámbar/rojo); las que van sobre el acento (portal del
   cliente, agenda_obra) se quedan en blanco porque el acento no cambia. */
[data-theme="dark"] .lv.obl, [data-theme="dark"] .lv.rec,
[data-theme="dark"] .sev.baja, [data-theme="dark"] .sev.media, [data-theme="dark"] .sev.alta,
[data-theme="dark"] .tag.recomendado, [data-theme="dark"] .tag.evitar,
[data-theme="dark"] .risk.bajo, [data-theme="dark"] .risk.medio, [data-theme="dark"] .risk.alto,
[data-theme="dark"] .res-verdict.v-OK, [data-theme="dark"] .res-verdict.v-WARNING,
[data-theme="dark"] .res-verdict.v-BLOCK, [data-theme="dark"] .vip-ov .vb,
[data-theme="dark"] .btn.wa.pdr-btn, [data-theme="dark"] .btn.wa.pdr-btn:hover,
[data-theme="dark"] .cbtn.pdr-btn, [data-theme="dark"] .cbtn.pdr-btn:hover,
[data-theme="dark"] .mini.wa:hover,
[data-theme="dark"] .phase-check.checked{color:var(--on-status);}
/* Al revés: tinte de estado escrito sobre una superficie clara fija. La
   palomita del tablero de acabados va sobre un blanco al 85%, así que en
   oscuro el verde claro daría 1.6:1; se oscurece hacia la tinta. */
[data-theme="dark"] .finish .pin{color:color-mix(in srgb, var(--green) 40%, var(--l-ink));}
/* Archivos que faltan llevar a --on-status EN EL ORIGEN para poder borrar los
   selectores de arriba, uno por uno (15/09/2026):
     .event-row.done .check-btn  → pdr/agenda.html
     .lv.obl / .lv.rec           → pdr/herramientas/ficha-epp.html
     .sev.*                      → pdr/herramientas/ia-diagnostico-visual.html
     .tag.recomendado / .evitar  → pdr/herramientas/ia-seleccion-resina.html
     .risk.*                     → pdr/herramientas/test-contaminacion.html
     .res-verdict.*              → pdr/herramientas/calculadora*.html y Herramientas/calculadora.html
     .vip-ov .vb                 → Herramientas/calculadora.html y cotizador.html
     .btn.wa.pdr-btn             → pdr/herramientas/portal-cliente.html
     .cbtn.pdr-btn               → pdr/herramientas/soporte.html
     .mini.wa                    → pdr/herramientas/proveedores.html
     .phase-check.checked        → Herramientas/agenda_obra.html
     .finish .pin                → pdr/herramientas/mood-board.html
   Ninguno entra en los paquetes de esta tanda; el parche se queda mientras
   tanto, pero esconde deuda: al tocar cualquiera de esos archivos, cámbialo
   allí y borra su línea aquí. */

/* ── WhatsApp en :hover, en TODA la plataforma ───────────────────────────
   El verde de la marca (#25D366) con texto blanco da 1.98:1 y el texto del
   botón desaparece justo al pasar por encima. Los tokens --wa/--wa-ink existen
   para esto y operación y equipo ya los usan; clientes, CRM y Conversaciones
   siguen escribiendo `color:#fff` en su <style>, que se carga DESPUÉS de esta
   hoja: de ahí el `body` delante, que le gana por especificidad sin usar
   !important. Con --wa-ink (#0B141A) el mismo verde da 9.38:1 (medido).
   Borrar cada selector cuando su archivo adopte los tokens. */
body .cli-wa-btn:hover, body .fc-wa:hover, body .cv-wa:hover{
    background:var(--wa);border-color:var(--wa);color:var(--wa-ink);
}

/* ── El "?" del glosario, en TODA la plataforma ──────────────────────────
   js/pdr-glossary.js lo inyecta al 55% de opacidad y sin contorno de foco:
   2.23:1 en claro y 2.59:1 en oscuro, con una caja de 18px. El paquete E ya
   lo había arreglado dentro de las herramientas (.pdr-tool); aquí vale para
   las demás pantallas que lo usan (finanzas, entre otras). `body` delante
   porque el glosario inyecta su hoja después de esta.
   El área de toque pasó de -10px (38.0 CSS px justos, que con el "?" en una
   coordenada fraccionaria dejaba 37 píxeles enteros medibles) a -11px = 40:
   el mínimo se cumple sin depender del redondeo. El dibujo no cambia; la misma
   regla está en el ORIGEN (js/pdr-glossary.js) para las páginas sin esta hoja. */
body .pdr-term-help{opacity:1;color:var(--muted);position:relative;}
body .pdr-term-help::after{content:'';position:absolute;inset:-11px;}
body .pdr-term-help:hover{color:var(--ink);}
body .pdr-term-help:focus-visible{color:var(--ink);outline:2px solid var(--accent-ink);outline-offset:2px;}