:root{
    --white:#FFFFFF;
    --ink:#14121F;
    --body:#3A3752;
    --muted:#6E6B84;
    --rule:#E7E5F0;
    /* Un gris de línea un punto más marcado que `--rule`. Lo pide la
       barra de avance de una postulación cerrada: el tramo recorrido
       tiene que verse recorrido, y `--rule` se confunde con el tramo
       que falta. */
    --rule-fuerte:#C9C6DA;
    --wash:#F7F6FB;
    /* Marca del 26-10-2026: azul #0054FF y cian #00C7E1. Las variables
       siguen llamándose `--violet` y `--aqua` porque las leen cientos de reglas
       de este archivo, que se está retirando pantalla por pantalla:
       renombrarlas ahora sería tocar todo para tirarlo después. El color
       de verdad está en app/estilos/tema.css (--primario, --acento). */
    --violet:#0054FF;
    --violet-soft:#E6EEFF;
    --aqua:#00C7E1;
    --aqua-soft:#E0F8FB;
    /* El ámbar de «esto falta». No es el violeta —que es el acento de la
       marca y está en cada botón, así que no distingue nada— ni un rojo
       —que dice «te equivocaste», y un campo vacío no es un error—. El
       contraste sobre blanco da 4.6:1, que pasa para texto. */
    --ambar:#9A5B00;
    --ambar-soft:#FFF4E0;
    /* El aqua de la marca no tiene contraste suficiente para texto
       sobre blanco; este es su versión legible, y ya se usaba a pelo
       en cinco sitios antes de tener nombre. */
    --aqua-fuerte:#00707F;
    /* El borde de los campos de formulario, en el azul de la marca
       (pedido del usuario, 26-10-2026: «deberían llevar borde de algún
       color de la aplicación»). Antes era `--rule` (#E7E5F0), que además
       daba 1,25:1 y no llegaba al 3:1 que WCAG 1.4.11 pide para
       delimitar un control. Este da 3,74 sobre blanco. Es el mismo valor
       que `--borde-control` de tema.css: si cambias uno, cambia el otro. */
    --borde-campo:#4F7BFF;
    /* El verde de «sube» y el rojo de «baja» y «descartado». No son
       estados de error: son el signo de una variación y el final de un
       proceso que no acabó en contrato. */
    --verde:#0B6B3A;
    --rosa:#B3261E;
    --rosa-soft:#FDECEA;
    --gutter: clamp(1rem, 3.5vw, 3rem);
    --radius:14px;
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

  body{
    margin:0;
    background:var(--white);
    color:var(--ink);
    font-family:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
    font-variation-settings:"wdth" 100,"wght" 400;
    /* `1rem` y no `16px`: en píxeles se ignora el tamaño de texto que
       la persona haya puesto en su navegador, y todo lo demás está en
       `rem`, así que la página entera se quedaba clavada. */
    font-size:1rem;
    line-height:1.55;
  }

  button, .btn, .chip, .fake-link{ font-family:inherit; }
  /* nada navega ni envía: es un prototipo */
  button{ cursor:pointer; }
  .fake-link{ cursor:pointer; }

  /* ---------- aviso de prototipo ---------- */
  .demo-bar{
    background:var(--ink);
    color:#CFCBE6;
    font-size:0.78rem;
    letter-spacing:0.02em;
    text-align:center;
    padding:0.5rem var(--gutter);
  }
  .demo-bar b{ color:var(--white); font-variation-settings:"wdth" 100,"wght" 600; }

  /* ---------- cabecera ---------- */
  .head{
    position:sticky; top:0; z-index:20;
    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--rule);
  }
  /* SIN TOPE DE ANCHO. Hasta hoy todo el sitio se encajaba en 1 280 px
     —el panel en 1 180— y en un monitor normal eso dejaba dos franjas
     grises a los lados mientras una tabla de catorce columnas se
     desplazaba por dentro. Lo que limita ahora es el `--gutter`, que
     es un `clamp`: en el teléfono deja 1 rem a cada lado y en el
     escritorio 3 rem. Nada de esto cambia el comportamiento
     responsive, que lo llevan las rejillas con `fr` y `auto-fit`. */
  .head-in{
    padding:0.85rem var(--gutter);
    display:flex; align-items:center; gap:1.5rem;
  }
  .brand{ display:flex; align-items:center; gap:0.6rem; }
  /* El logo es el que dibujó el usuario (assets/marca/, decisión 82):
     isotipo y nombre en UNA imagen, tal cual. Antes era una «S» de texto
     sobre un degradado y, después, el isotipo más el nombre en texto. El
     nombre accesible lo da el `alt`, que sigue saliendo de la base
     (`plataforma.marca`). Con la barra del panel plegada no cabe el logo
     entero y queda solo el isotipo (`.solo-mini`). */
  .brand-logo{ height:34px; width:auto; flex:none; display:block; }
  .brand-mark{ width:32px; height:32px; flex:none; display:block; }
  .solo-mini{ display:none; }

  .nav{ display:flex; gap:1.4rem; margin-left:0.75rem; }
  .nav .fake-link{
    color:var(--body); font-size:0.9rem; padding:0.35rem 0;
    border-bottom:2px solid transparent;
  }
  .nav .fake-link:hover{ color:var(--violet); border-bottom-color:var(--violet); }
  .nav .on{ color:var(--violet); border-bottom-color:var(--violet); font-variation-settings:"wdth" 100,"wght" 600; }

  .head-actions{ margin-left:auto; display:flex; align-items:center; gap:0.6rem; }

  .btn{
    border:1px solid transparent; border-radius:10px;
    padding:0.6rem 1.1rem; font-size:0.9rem;
    font-variation-settings:"wdth" 100,"wght" 600;
    transition:background 150ms ease, color 150ms ease, border-color 150ms ease;
  }
  .btn-solid{ background:var(--violet); color:#fff; }
  .btn-solid:hover{ background:#0043CC; }  /* blanco encima: 7,85 */
  .btn-ghost{ background:transparent; color:var(--ink); border-color:var(--rule); }
  .btn-ghost:hover{ border-color:var(--violet); color:var(--violet); }
  .btn-aqua{ background:var(--aqua); color:#023540; }
  /* El hover del acento ACLARA: el texto es oscuro, y oscurecer el
     fondo lo bajaba de 4,5 (con el menta anterior quedaba en 4,13,
     #0E9E7E). Con el cian, #33D4E8 da 7,39. */
  .btn-aqua:hover{ background:#33D4E8; }
  .btn-sm{ padding:0.45rem 0.85rem; font-size:0.82rem; }

  .avatar{
    width:34px; height:34px; border-radius:50%;
    background:var(--violet-soft); color:var(--violet);
    display:grid; place-items:center; font-size:0.8rem;
    font-variation-settings:"wdth" 100,"wght" 700;
    border:1px solid #CCDCFF;
  }

  .burger{ display:none; background:none; border:0; padding:0.4rem; }
  .burger span{ display:block; width:20px; height:2px; background:var(--ink); margin:4px 0; border-radius:2px; }

  /* ---------- buscador ---------- */
  #net{
    position:absolute; inset:0; width:100%; height:100%;
    -webkit-mask-image:linear-gradient(95deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.10) 45%, rgba(0,0,0,0.55) 70%, #000 100%);
    mask-image:linear-gradient(95deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.10) 45%, rgba(0,0,0,0.55) 70%, #000 100%);
  }

  .field{ display:flex; align-items:center; gap:0.55rem; padding:0.55rem 0.7rem; border-radius:10px; }
  .field + .field{ border-left:1px solid var(--rule); border-radius:0; }
  .field svg{ flex:none; color:var(--muted); }
  .field input, .field select{
    border:0; outline:0; background:transparent; width:100%;
    font-family:inherit; font-size:0.92rem; color:var(--ink);
  }
  .field input::placeholder{ color:#9A97AD; }

  .chips{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:1rem; align-items:center; }
  .chips-label{ font-size:0.82rem; color:var(--muted); margin-right:0.25rem; }
  .chip{
    background:#fff; border:1px solid var(--rule); border-radius:999px;
    padding:0.35rem 0.8rem; font-size:0.82rem; color:var(--body);
  }
  .chip:hover{ border-color:var(--violet); color:var(--violet); }

  /* ---------- estructura ---------- */
  .wrap{
    padding:clamp(1.5rem,3vw,2.5rem) var(--gutter) 3rem;
    display:grid; gap:clamp(1.25rem,2.5vw,2rem);
    grid-template-columns:270px minmax(0,1fr);
    align-items:start;
  }

  /* ---------- filtros ---------- */
  .clear{ background:none; border:0; color:var(--violet); font-size:0.8rem; padding:0; }
  .clear:hover{ text-decoration:underline; }

  .opt{ display:flex; align-items:center; gap:0.55rem; padding:0.22rem 0; font-size:0.88rem; color:var(--body); cursor:pointer; }
  .opt input{ accent-color:var(--violet); width:15px; height:15px; }
  .opt .count{ margin-left:auto; font-size:0.76rem; color:#9A97AD; }

  /* ---------- listado ---------- */
  .alert-strip{
    display:flex; flex-wrap:wrap; align-items:center; gap:0.75rem;
    background:var(--aqua-soft); border:1px solid #B3EEF6;
    border-radius:var(--radius); padding:0.85rem 1rem; margin-bottom:1.25rem;
    font-size:0.88rem; color:#00505C;
  }
  .alert-strip .btn{ margin-left:auto; }



  .logo{
    width:46px; height:46px; border-radius:12px; flex:none;
    display:grid; place-items:center; color:#fff;
    font-size:1rem; font-variation-settings:"wdth" 100,"wght" 700;
    grid-row:span 2;
  }
  /* ------------------------------------------------------------------
     LOS COLORES DE LA EMPRESA  ·  bd/71

     `empresa.color_primario` y `color_acento` se pedían en el panel, se
     validaban en el SQL y `rpc_catalogo_formulario` ya los devolvía…
     y ninguna plantilla los emitía nunca. Quien los ponía no veía
     NADA.

     Ahora la cabecera del formulario de postular los trae en dos
     variables (`--marca`, `--marca-acento`) puestas en el propio
     elemento, y el degradado del cuadro del logo sale de ahí. Con
     `var(…, <valor>)` el segundo argumento es el de siempre: una
     empresa sin colores se ve exactamente como antes.

     DÓNDE NO SE USAN, Y POR QUÉ: en el panel. Esa es la interfaz del
     producto —la del operador— y teñirla con un color que elige un
     cliente es pedir un problema de contraste en la pantalla donde
     alguien trabaja ocho horas. La marca del cliente va donde la ve su
     candidato.
     ------------------------------------------------------------------ */
  .g1{
    background:linear-gradient(135deg,
      var(--marca, #0054FF), var(--marca-acento, #6C6EFF));
  }
  /* La muestra de la pantalla de datos de la empresa: el mismo cuadro
     que verá el candidato, para que quien elige el color lo vea sin
     tener que abrir la bolsa en otra pestaña. */
  .emp-muestra{ display:inline-flex; align-items:center; gap:0.4rem; }
  .emp-muestra-caja{ width:1.15rem; height:1.15rem; border-radius:5px; }

  /* El logo propio de la empresa: un filo con su color en vez del gris
     de todos. Si no hay color, el gris de la regla. */
  .form-cab > .logo-lg[src]{
    border:2px solid var(--marca, var(--rule));
    background:#fff; object-fit:contain; padding:4px;
  }
  .g2{ background:linear-gradient(135deg,#00C7E1,#0054FF); }
  .g3{ background:linear-gradient(135deg,#0035A8,#0054FF); }
  .g4{ background:linear-gradient(135deg,#0099B0,#00C7E1); }
  .g5{ background:linear-gradient(135deg,#6C6EFF,#00C7E1); }

  .company{ font-size:0.88rem; color:var(--body); margin:0 0 0.5rem; }
  .company .fake-link:hover{ color:var(--violet); text-decoration:underline; }




  .icon-btn{
    width:36px; height:36px; border-radius:10px; border:1px solid var(--rule);
    background:#fff; color:var(--muted); display:grid; place-items:center;
  }
  .icon-btn:hover{ border-color:var(--violet); color:var(--violet); }

  /* ---------- paginación ---------- */

  /* ---------- pie ---------- */
  .foot{ border-top:1px solid var(--rule); background:var(--wash); }
  .foot-in{
    padding:2.5rem var(--gutter);
    display:grid; gap:2rem;
    grid-template-columns:1.4fr repeat(3, minmax(0,1fr));
  }
  .foot h4{ margin:0 0 0.75rem; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); font-variation-settings:"wdth" 100,"wght" 600; }
  .foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:0.45rem; }
  .foot li .fake-link{ font-size:0.88rem; color:var(--body); }
  .foot li .fake-link:hover{ color:var(--violet); }
  .foot-note{ font-size:0.85rem; color:var(--body); max-width:34ch; }
  .foot-bottom{
    border-top:1px solid var(--rule);
    padding:1.1rem var(--gutter);
    display:flex; flex-wrap:wrap; gap:0.5rem 2rem; justify-content:space-between;
    font-size:0.8rem; color:var(--muted);
  }

  /* ---------- responsive ---------- */
  @media (max-width:1080px){
    .nav{ display:none; }
    .burger{ display:block; }
    .field + .field{ border-left:0; border-radius:10px; }
  }
  @media (max-width:900px){
    .wrap{ grid-template-columns:1fr; }
    .foot-in{ grid-template-columns:1fr 1fr; }
  }
  @media (max-width:680px){
    .head-actions .btn-ghost{ display:none; }
    .logo{ grid-row:span 1; width:40px; height:40px; }
    .foot-in{ grid-template-columns:1fr; }
  }

  /* ═══════════════════════════════════════════════════════════════
     Añadido al pasar el prototipo a aplicación.
     Lo de arriba viene del prototipo sin tocar; esto es lo nuevo:
     ficha del aviso, formulario, estados y accesibilidad.
     ═══════════════════════════════════════════════════════════════ */

  /* --- Accesibilidad ------------------------------------------- */
  .saltar{
    position:absolute; left:-9999px; top:0; z-index:99;
    background:var(--violet); color:#fff; padding:0.7rem 1.1rem;
    border-radius:0 0 var(--radius) 0; font-size:0.9rem;
  }
  .saltar:focus{ left:0; }

  .oculto{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  }

  /* Foco siempre visible. El prototipo no lo tenía porque nada
     recibía foco de verdad. */
  a:focus-visible, button:focus-visible, input:focus-visible,
  select:focus-visible, textarea:focus-visible{
    outline:2px solid var(--violet); outline-offset:2px;
  }

  /* Casillas y radios con la marca (26-10-2026). Los nativos salen con
     el borde gris o negro del sistema y solo se tiñen al marcarlos; el
     usuario pidió el color de la aplicación también apagados. Se dibujan
     con `appearance:none` y la marca es un `::before` recortado con
     `mask`, que toma `--white` y no un color metido en el SVG. Viven aquí
     y no en Tailwind para que sirvan también a las pantallas que aún no
     se migraron (postular, mis datos, empresas). Se ponen con clase, NO a
     todos los `input`: el panel tiene casillas propias (`.av-chk`) que
     esto rompería. En alto contraste vuelve el control del sistema. */
  .casilla, .casilla-radio{
    -webkit-appearance:none; appearance:none; flex:none;
    display:inline-grid; place-content:center;
    width:1.125rem; height:1.125rem; margin:0;
    border:1.5px solid var(--borde-campo); border-radius:5px;
    background:var(--white); cursor:pointer; vertical-align:middle;
    transition:background-color 120ms ease, border-color 120ms ease;
  }
  .casilla-radio{ border-radius:50%; }
  .casilla::before, .casilla-radio::before{
    content:""; width:0.7rem; height:0.7rem; transform:scale(0);
    transition:transform 120ms ease; background:var(--white);
  }
  .casilla::before{
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .casilla-radio::before{ width:0.5rem; height:0.5rem; border-radius:50%; }
  .casilla:hover, .casilla-radio:hover{ border-color:var(--violet); }
  .casilla:checked, .casilla-radio:checked{ background:var(--violet); border-color:var(--violet); }
  .casilla:checked::before, .casilla-radio:checked::before{ transform:scale(1); }
  .casilla:disabled, .casilla-radio:disabled{ cursor:not-allowed; opacity:0.5; }
  @media (prefers-reduced-motion: reduce){
    .casilla, .casilla-radio, .casilla::before, .casilla-radio::before{ transition:none; }
  }
  @media (forced-colors: active){
    .casilla, .casilla-radio{ -webkit-appearance:auto; appearance:auto; }
    .casilla::before, .casilla-radio::before{ display:none; }
  }
  /* Lo que no se redibuja (rangos, barras) toma al menos el color de la
     marca en lo que el navegador deja teñir. */
  input[type=range], progress{ accent-color:var(--violet); }

  /* --- Cabecera y marca como enlaces --------------------------- */
  .brand{ text-decoration:none; color:inherit; }
  .nav a{ text-decoration:none; }

  /* --- Filtros: ahora son un <form> con <fieldset> -------------- */
  .clear{ background:none; border:0; padding:0; font-size:0.82rem; color:var(--violet); cursor:pointer; text-decoration:none; }

  /* --- Listado vacío ------------------------------------------- */
  .vacio{
    border:1px dashed var(--rule); border-radius:var(--radius);
    padding:3rem 1.5rem; text-align:center; background:var(--white);
  }
  .vacio h3{ margin:0 0 0.4rem; font-size:1.05rem; }
  .vacio p{ margin:0 0 1.2rem; color:var(--muted); }


  /* --- Páginas de una sola columna ------------------------------ */
  .wrap-ficha{ display:block; max-width:820px; }

  /* `.migas` se quedó al migrar la bolsa: la sigue usando la ficha del
     candidato del panel (`panel/ficha.php`), que carga este archivo a
     pelo. Se borró una vez creyendo que era solo de la bolsa. */
  .migas{ font-size:0.84rem; color:var(--muted); margin-bottom:1.2rem; }
  .migas a{ color:var(--violet); text-decoration:none; }
  .migas span{ margin:0 0.4rem; }


  .formulario, .resultado{
    background:var(--white); border:1px solid var(--rule);
    border-radius:var(--radius); padding:clamp(1.25rem, 4vw, 2.25rem);
  }

  .form-cab{
    display:grid; grid-template-columns:auto 1fr auto; gap:1.1rem;
    align-items:start; padding-bottom:1.4rem; border-bottom:1px solid var(--rule);
  }
  .form-cab{ grid-template-columns:auto 1fr; }
  .form-cab h1{ margin:0 0 0.3rem; font-size:clamp(1.3rem, 3.2vw, 1.75rem); line-height:1.2; }
  .logo-lg{ width:64px; height:64px; font-size:1.3rem; border-radius:12px; }



  .form-pie{
    display:flex; flex-wrap:wrap; gap:0.7rem; align-items:center;
    margin-top:1.8rem; padding-top:1.4rem; border-top:1px solid var(--rule);
  }

  /* --- Formulario ---------------------------------------------- */
  .formulario form fieldset{
    border:0; margin:0 0 1.6rem; padding:1.4rem 0 0; border-top:1px solid var(--rule);
  }
  .formulario form fieldset:first-of-type{ border-top:0; padding-top:1.4rem; }
  .formulario legend{
    padding:0; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--muted); font-variation-settings:"wght" 700;
  }

  .fila{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
  .campo{ margin-top:1rem; }
  .campo-corto{ max-width:16rem; }

  .campo label{
    display:block; margin-bottom:0.35rem; font-size:0.88rem;
    color:var(--ink); font-variation-settings:"wght" 600;
  }
  .opcional{ color:var(--muted); font-variation-settings:"wght" 400; }

  /* Se listan los tipos que NO se estilan, no los que sí.
     Antes era al revés —text, email, tel, number— y venía del prototipo,
     que no tenía formulario de acceso. El día que apareció uno, el campo
     de contraseña salió con el aspecto nativo del navegador al lado de
     los demás, y parecía que la página entera se había quedado sin CSS.
     Con la lista invertida, un tipo nuevo hereda el estilo en vez de
     quedarse fuera en silencio. */
  .campo input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=image]):not([type=hidden]),
  .campo select, .campo textarea{
    width:100%; padding:0.68rem 0.8rem; font:inherit; font-size:0.94rem;
    color:var(--ink); background:var(--white);
    border:1px solid var(--borde-campo); border-radius:10px;
  }
  .campo textarea{ resize:vertical; min-height:5.5rem; }
  .campo input[type=file]{
    width:100%; padding:0.8rem; font-size:0.88rem;
    border:1px dashed var(--rule); border-radius:10px; background:var(--wash);
  }
  .campo input:focus, .campo select:focus, .campo textarea:focus{
    border-color:var(--violet); outline:2px solid var(--violet-soft); outline-offset:0;
  }

  .ayuda{ margin:0.35rem 0 0; font-size:0.8rem; color:var(--muted); }
  .error{ margin:0.35rem 0 0; font-size:0.82rem; color:#B3261E; font-variation-settings:"wght" 600; }
  .con-error input, .con-error select, .con-error textarea{ border-color:#B3261E; }

  .aviso{
    padding:0.85rem 1rem; border-radius:10px; margin:1.2rem 0 0; font-size:0.9rem;
  }
  .aviso-error{ background:#FDECEA; color:#8C1D18; border:1px solid #F3C9C4; }
  .aviso-ok{ background:var(--violet-soft); color:var(--ink); border:1px solid var(--violet); }
  .aviso-ok a{ color:var(--violet); }

  /* La invitación a entrar, encima del formulario anónimo. Va pegada a
     lo que sigue —el bloque de identificación— porque es la alternativa
     a escribirlo: separada parecería un anuncio y se saltaría. */
  .p-entrar-antes{ margin-bottom:0.9rem; }

  /* --- Postular con sesión -------------------------------------- */
  /* La identidad se ENSEÑA y no se pide. Ni un `name=` en este bloque:
     estos datos no viajan, los resuelve la base por `auth_user_id`. Se
     enseñan porque verlos es lo que permite notar que el CV va a otro
     nombre, y se ven como una tarjeta y no como campos apagados para
     que nadie intente escribir en ellos. */
  .soy-yo-datos{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(11rem, 1fr));
    gap:0.9rem 1.4rem; margin:1rem 0 0; padding:1rem 1.15rem;
    border:1px solid var(--rule); border-radius:12px; background:var(--wash);
  }
  .soy-yo-datos div{ margin:0; }
  .soy-yo-datos dt{
    margin:0 0 0.15rem; font-size:0.72rem; letter-spacing:0.06em;
    text-transform:uppercase; color:var(--muted); font-variation-settings:"wght" 600;
  }
  .soy-yo-datos dd{ margin:0; font-size:0.94rem; color:var(--ink); word-break:break-word; }

  /* Dos opciones de CV, con radios. Las dos se ven siempre: sin
     JavaScript no hay nada que aparezca ni desaparezca, y la elección la
     hace el radio, que es para lo que existe. */
  .cv-opcion{ margin:0.9rem 0 0; }
  .cv-opcion label{ display:flex; align-items:flex-start; gap:0.6rem; cursor:pointer; }
  .cv-opcion input[type=radio]{ margin-top:0.25rem; flex:0 0 auto; }
  .cv-opcion strong{ display:block; font-size:0.92rem; font-variation-settings:"wght" 600; }
  .cv-detalle{ display:block; margin-top:0.15rem; font-size:0.82rem; color:var(--muted); }
  .cv-subir{ margin-left:1.6rem; padding-left:0.9rem; border-left:2px solid var(--rule); }
  .cv-archivo{ display:block; margin:0.55rem 0 0.35rem; font-size:0.88rem;
    color:var(--ink); font-variation-settings:"wght" 600; }
  .cv-subir input[type=file]{
    width:100%; padding:0.8rem; font-size:0.88rem;
    border:1px dashed var(--rule); border-radius:10px; background:var(--wash);
  }
  @media (max-width:34rem){ .cv-subir{ margin-left:0.5rem; } }

  /* --- Declaraciones legales ------------------------------------ */
  .legales.con-error{ border:1px solid #F3C9C4; border-radius:var(--radius); padding:1.2rem; }
  .legal{ margin-top:1.1rem; }
  .legal .opt{ align-items:flex-start; font-size:0.92rem; color:var(--ink); }
  .legal .opt input{ margin-top:0.2rem; flex:0 0 auto; }
  .legal-texto{
    margin:0.6rem 0 0 2rem; padding:0.9rem 1rem; max-height:11rem; overflow-y:auto;
    background:var(--wash); border:1px solid var(--rule); border-radius:10px;
    font-size:0.82rem; line-height:1.6; color:var(--body);
  }

  /* Honeypot: fuera de la vista sin display:none, que algunos
     programas detectan y saltan. */
  .trampa{
    position:absolute; left:-9999px; top:-9999px;
    width:1px; height:1px; overflow:hidden;
  }

  /* --- Resultado ------------------------------------------------ */
  .resultado{ text-align:center; padding:clamp(2rem, 6vw, 3.5rem); }
  .resultado-marca{ color:var(--aqua); margin-bottom:1rem; }
  .resultado h1{ margin:0 0 0.6rem; font-size:clamp(1.3rem, 3.2vw, 1.8rem); }
  .resultado p{ margin:0 auto 1.4rem; max-width:46ch; color:var(--body); line-height:1.65; }
  .resultado-nota{ font-size:0.84rem; color:var(--muted); }

  /* --- Paginador con enlaces ------------------------------------ */

  /* --- Estrecho -------------------------------------------------- */
  @media (max-width: 760px){
    .fila{ grid-template-columns:1fr; }
    .legal-texto{ margin-left:0; }
  }

  /* ═══════════════════════════════════════════════════════════════
     PANEL DEL CLIENTE
     Otra piel sobre los mismos tokens: más densa, sin hero, pensada
     para mirar muchas filas seguidas.
     ═══════════════════════════════════════════════════════════════ */

  body.panel{ background:var(--wash); }

  /* --- El armazón: barra lateral fija y contenido ---------------
     Rejilla de dos columnas. La barra se queda quieta mientras el
     contenido se desplaza (`position:sticky`, no `fixed`: así sigue
     ocupando su columna y no hay que compensarla con un margen). */
  .p-app{
    display:grid;
    grid-template-columns:min(248px, 22vw) minmax(0, 1fr);
    min-height:100vh;
  }

  .p-lado{
    position:sticky; top:0; align-self:start;
    height:100vh; overflow-y:auto;
    background:var(--white); border-right:1px solid var(--rule);
    display:flex; flex-direction:column; gap:1.2rem;
    padding:1rem 0.8rem 1.1rem;
  }
  .p-lado-marca{ padding:0.3rem 0.5rem 0; text-decoration:none; }

  /* --- Plegada ---------------------------------------------------
     La preferencia la pinta el SERVIDOR leyendo una cookie, así que la
     barra sale ya plegada y no hay salto al cargar. El ancho se anima
     porque es lo único que se mueve y dura menos que un parpadeo. */
  .p-lado{ transition:width 140ms ease-out; }
  body.barra-mini .p-app{ grid-template-columns:68px minmax(0, 1fr); }
  body.barra-mini .p-lado{ padding-left:0.6rem; padding-right:0.6rem; align-items:center; }
  body.barra-mini .solo-amplia{ display:none; }
  body.barra-mini .solo-mini{ display:block; }
  body.barra-mini .p-menu-item,
  body.barra-mini .p-lado-yo{ justify-content:center; padding-left:0.5rem; padding-right:0.5rem; }
  body.barra-mini .p-lado-marca{ padding:0.3rem 0; }

  @media (prefers-reduced-motion: reduce){
    .p-lado{ transition:none; }
  }

  .p-menu{ display:flex; flex-direction:column; gap:0.15rem; }
  .p-menu-item{
    display:flex; align-items:center; gap:0.65rem;
    padding:0.58rem 0.7rem; border-radius:10px;
    color:var(--body); text-decoration:none; font-size:0.92rem;
  }
  .p-menu-item:hover{ background:var(--wash); color:var(--ink); }
  .p-menu-item.on{
    background:var(--violet-soft); color:var(--violet);
    font-variation-settings:"wght" 600;
  }
  .p-menu-icono{ width:18px; height:18px; flex:none; fill:currentColor; opacity:0.8; }
  .p-menu-item.on .p-menu-icono{ opacity:1; }

  /* La persona, abajo del todo y en corto: avatar, nombre y cargo. Lo
     completo está en la barra de arriba y en Mi cuenta; repetirlo aquí
     sería gastar la parte más estrecha de la pantalla en decir dos
     veces lo mismo. */
  .p-lado-yo{
    margin-top:auto; padding:0.7rem; border-radius:10px;
    display:flex; align-items:center; gap:0.6rem;
    text-decoration:none; color:inherit; border-top:1px solid var(--rule);
    border-top-left-radius:0; border-top-right-radius:0;
  }
  .p-lado-yo:hover{ background:var(--wash); }
  .p-lado-yo-txt{ display:flex; flex-direction:column; min-width:0; }
  .p-lado-yo-txt b{ font-size:0.86rem; font-variation-settings:"wght" 600; }
  .p-lado-yo-txt b, .p-lado-yo-txt small{
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:11rem;
  }
  .p-lado-yo-txt small{ font-size:0.75rem; color:var(--muted); }

  /* Iniciales sobre color. Es un `aria-hidden`: el nombre completo está
     al lado o en el `title`, y un lector de pantalla que leyera «EA» no
     estaría diciendo nada. */
  .p-avatar{
    width:30px; height:30px; flex:none; border-radius:50%;
    background:var(--violet-soft); color:var(--violet);
    display:inline-flex; align-items:center; justify-content:center;
    font-size:0.76rem; font-variation-settings:"wght" 700; letter-spacing:0.02em;
  }
  .p-avatar-xl{ width:52px; height:52px; font-size:1.1rem; }

  .p-empresa select{
    font:inherit; font-size:0.88rem; padding:0.38rem 0.6rem;
    border:1px solid var(--borde-campo); border-radius:9px; background:var(--white); color:var(--ink);
    max-width:14rem;
  }
  .p-empresa-fija{
    font-size:0.86rem; color:var(--muted);
    max-width:14rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .p-rol{
    background:var(--violet-soft); color:var(--violet); border-radius:999px;
    padding:0.1rem 0.5rem; font-size:0.72rem; font-variation-settings:"wght" 700;
  }
  .p-rol-operador{ background:#FFE9D6; color:#8A4B00; }

  /* ---------- Barra superior ---------- */
  .p-top{
    position:sticky; top:0; z-index:15;
    display:flex; align-items:center; gap:0.8rem;
    padding:0.6rem var(--gutter);
    background:rgba(255,255,255,0.88);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--rule);
  }
  /* Si el navegador no sabe difuminar, o si la persona pidió menos
     transparencia, la barra se vuelve opaca: un fondo translúcido sin
     desenfoque deja el texto ilegible sobre una tabla. */
  @supports not (backdrop-filter: blur(4px)){
    .p-top{ background:var(--white); }
  }
  @media (prefers-reduced-transparency: reduce){
    .p-top{ background:var(--white); backdrop-filter:none; }
  }

  .p-icono-btn{
    display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px; flex:none; padding:0;
    border:1px solid transparent; border-radius:9px;
    background:transparent; color:var(--body);
  }
  .p-icono-btn:hover{ background:var(--wash); color:var(--ink); }
  .p-icono-btn svg{ width:18px; height:18px; }
  .p-plegar{ display:flex; }

  /* `min-width:0` en los tres: un hijo de flex no baja de su tamaño de
     contenido a menos que se le diga, y sin esto la caja de búsqueda
     empujaba la barra entera más allá del ancho de la pantalla en el
     móvil. */
  .p-cuerpo{ min-width:0; }
  .p-top{ min-width:0; }
  .p-buscar{ position:relative; flex:1 1 auto; min-width:0; max-width:34rem; }
  .p-buscar-lupa{
    position:absolute; left:0.7rem; top:50%; transform:translateY(-50%);
    /* En el azul de la marca, como el icono de todo campo (26-10-2026). */
    width:16px; height:16px; color:var(--violet); pointer-events:none;
  }
  .p-buscar input{
    width:100%; font:inherit; font-size:0.9rem;
    padding:0.5rem 0.8rem 0.5rem 2.2rem;
    border:1px solid var(--borde-campo); border-radius:999px;
    background:var(--wash); color:var(--ink);
  }
  .p-buscar input:focus{ background:var(--white); }

  .p-top-fin{ margin-left:auto; display:flex; align-items:center; gap:0.7rem; }

  /* ---------- El menú de la cuenta ----------
     Un `<details>`: se abre y se cierra sin una línea de JavaScript. El
     script solo añade cerrarlo al pulsar fuera. */
  .p-cuenta{ position:relative; }
  .p-cuenta > summary{
    display:flex; align-items:center; gap:0.5rem;
    padding:0.25rem 0.5rem 0.25rem 0.25rem; border-radius:999px;
    cursor:pointer; list-style:none; user-select:none;
  }
  .p-cuenta > summary::-webkit-details-marker{ display:none; }
  .p-cuenta > summary:hover{ background:var(--wash); }
  .p-cuenta-nombre{
    font-size:0.86rem; font-variation-settings:"wght" 600;
    max-width:9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .p-chevron{ width:14px; height:14px; color:var(--muted); transition:transform 120ms ease-out; }
  .p-cuenta[open] .p-chevron{ transform:rotate(180deg); }
  @media (prefers-reduced-motion: reduce){ .p-chevron{ transition:none; } }

  .p-cuenta-pop{
    position:absolute; right:0; top:calc(100% + 0.5rem); z-index:30;
    min-width:15rem; padding:0.4rem;
    background:var(--white); border:1px solid var(--rule); border-radius:12px;
    box-shadow:0 12px 32px rgba(20,18,31,0.12);
    display:flex; flex-direction:column;
  }
  .p-cuenta-cab{
    display:flex; flex-direction:column; gap:0.15rem;
    padding:0.6rem 0.7rem 0.7rem; border-bottom:1px solid var(--rule); margin-bottom:0.3rem;
  }
  .p-cuenta-cab b{ font-size:0.9rem; }
  .p-cuenta-cab span:not(.p-rol){ font-size:0.78rem; color:var(--muted); word-break:break-all; }
  .p-cuenta-cab .p-rol{ align-self:flex-start; margin-top:0.25rem; }
  .p-cuenta-pop a, .p-cuenta-salir{
    display:block; width:100%; text-align:left;
    padding:0.5rem 0.7rem; border-radius:8px;
    font:inherit; font-size:0.88rem; color:var(--body);
    text-decoration:none; border:0; background:transparent;
  }
  .p-cuenta-pop a:hover, .p-cuenta-salir:hover{ background:var(--wash); color:var(--ink); }
  /* Salir se separa del resto: es lo único que termina algo. */
  .p-cuenta-salir{ color:#B3261E; border-top:1px solid var(--rule); border-radius:0 0 8px 8px; margin-top:0.3rem; }

  /* Sin tope: el panel es listas, tablas y maestro-detalle, y es donde
     más se notaba. La tabla del seguimiento tiene catorce columnas y
     se desplazaba por dentro mientras sobraba pantalla a los lados. */
  .p-wrap{ padding:1.6rem var(--gutter) 4rem; }
  .p-titulo h1{ margin:0 0 0.2rem; font-size:1.5rem; }
  .p-titulo p{ margin:0 0 1.2rem; color:var(--muted); font-size:0.9rem; }
  .p-titulo a{ color:var(--violet); }

  /* Contadores por etapa */
  .p-etapas{ display:flex; flex-wrap:wrap; gap:0.4rem; margin-bottom:1rem; }
  .p-etapa{
    display:inline-flex; align-items:center; gap:0.45rem; text-decoration:none;
    background:var(--white); border:1px solid var(--rule); border-radius:999px;
    padding:0.4rem 0.85rem; font-size:0.85rem; color:var(--body);
  }
  .p-etapa:hover{ border-color:var(--violet); color:var(--violet); }
  .p-etapa.on{ background:var(--violet); border-color:var(--violet); color:#fff; }
  .p-etapa.on .count{ color:#fff; opacity:0.85; }
  .p-etapa .count{ font-size:0.76rem; color:var(--muted); }

  .p-filtros{
    display:flex; flex-wrap:wrap; gap:0.6rem; align-items:center;
    background:var(--white); border:1px solid var(--rule); border-radius:var(--radius);
    padding:0.8rem; margin-bottom:1.1rem;
  }
  /* `max-width` además del `flex-basis`: con cinco controles la barra
     envuelve, y sin tope el que cae solo a la segunda línea se estira
     de lado a lado y parece otra cosa. Con cuatro o menos no cambia
     nada, así que las pantallas que ya estaban siguen igual. */
  .p-filtros .field{ flex:1 1 13rem; min-width:0; max-width:22rem; }
  /* bd/86. Empleos llegó a seis controles, y dos de ellos —proceso y
     aviso— llevan texto largo: el nombre de un proceso y el título de
     un puesto. Con `13rem` de base, seis caben en tres líneas de dos y
     el nombre se corta a la mitad. Esta barra pide menos base y deja
     crecer más, así que caen de dos en dos con sitio para leerse. El
     tope sigue estando por el mismo motivo que arriba. */
  .p-avisos-filtros .field{ flex:1 1 11rem; max-width:26rem; }
  /* Un `select` no recorta el texto de su opción: la ensancha. Sin esto,
     un proceso con nombre largo estira su control y descuadra la fila
     entera. */
  .p-avisos-filtros select{ text-overflow:ellipsis; }
  .p-filtros input, .p-filtros select{
    width:100%; font:inherit; font-size:0.9rem; padding:0.5rem 0.7rem;
    border:1px solid var(--borde-campo); border-radius:9px; background:var(--white); color:var(--ink);
  }

  /* Tabla */
  .p-tabla-envuelta{ overflow-x:auto; background:var(--white); border:1px solid var(--rule); border-radius:var(--radius); }
  .p-tabla{ width:100%; border-collapse:collapse; font-size:0.9rem; min-width:46rem; }
  .p-tabla th{
    text-align:left; padding:0.7rem 0.9rem; font-size:0.74rem; letter-spacing:0.06em;
    text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--rule);
    font-variation-settings:"wght" 700;
  }
  .p-tabla td{ padding:0.8rem 0.9rem; border-bottom:1px solid var(--rule); vertical-align:top; }
  .p-tabla tr:last-child td{ border-bottom:0; }
  .p-tabla tr:hover{ background:var(--wash); }
  .p-tabla tr.sin-ver{ background:rgba(0,84,255,0.03); }
  .p-nombre{ color:var(--ink); text-decoration:none; font-variation-settings:"wght" 700; }
  .p-nombre:hover{ color:var(--violet); }
  .p-sub{ display:block; font-size:0.78rem; color:var(--muted); margin-top:0.15rem; }

  /* «Ficha incompleta» en la bandeja. Ámbar y con la palabra, igual que
     los huecos de «Mis datos»: es el mismo hecho contado a la otra parte,
     y usar dos códigos de color para lo mismo es pedirle a la gente que
     aprenda dos. Solo se pinta cuando FALTA algo — una medalla en casi
     todas las filas no distingue nada. */
  .p-ficha{
    display:inline-block; margin-top:0.3rem; padding:0.05rem 0.45rem;
    border-radius:999px; background:var(--ambar-soft); color:var(--ambar);
    font-size:0.7rem; letter-spacing:0.02em;
    font-variation-settings:"wght" 700;
  }
  @media (prefers-contrast: more){
    .p-ficha{ background:var(--white); border:1px solid var(--ambar); }
  }
  .p-acciones{ text-align:right; white-space:nowrap; }
  .p-punto{
    display:inline-block; width:8px; height:8px; border-radius:50%;
    background:var(--violet); margin-right:0.5rem; vertical-align:middle;
  }
  .p-pastilla{
    display:inline-block; background:var(--violet-soft); color:var(--violet);
    border-radius:999px; padding:0.18rem 0.6rem; font-size:0.78rem;
    font-variation-settings:"wght" 700;
  }
  .p-pastilla.terminal{ background:#F1EFF5; color:var(--muted); }

  /* Ficha */
  .p-ficha-cols{ display:grid; grid-template-columns:minmax(0,1fr) 20rem; gap:1.4rem; align-items:start; }
  .p-ficha-cab{
    display:flex; justify-content:space-between; gap:1rem; align-items:flex-start;
    background:var(--white); border:1px solid var(--rule); border-radius:var(--radius);
    padding:1.3rem; margin-bottom:1rem;
  }
  .p-ficha-cab h1{ margin:0 0 0.25rem; font-size:1.4rem; }
  .p-contacto{ margin:0.5rem 0 0; font-size:0.9rem; }
  .p-contacto a{ color:var(--violet); }
  .p-ext{ font-size:0.72rem; opacity:0.8; margin-left:0.35rem; }

  .p-datos{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(9rem, 1fr)); gap:0.9rem;
    background:var(--white); border:1px solid var(--rule); border-radius:var(--radius);
    padding:1.1rem 1.3rem; margin-bottom:1rem;
  }
  .p-datos span{ display:block; font-size:0.74rem; text-transform:uppercase;
                 letter-spacing:0.05em; color:var(--muted); margin-bottom:0.2rem; }
  .p-datos b{ font-size:0.92rem; }

  .p-bloque, .p-caja{
    background:var(--white); border:1px solid var(--rule); border-radius:var(--radius);
    padding:1.2rem 1.3rem; margin-bottom:1rem;
  }
  .p-bloque h2, .p-caja h2{
    margin:0 0 0.9rem; font-size:0.78rem; letter-spacing:0.07em; text-transform:uppercase;
    color:var(--muted); font-variation-settings:"wght" 700;
  }
  .p-caja-tenue{ background:var(--wash); }
  .p-nada{ color:var(--muted); font-size:0.88rem; margin:0; }
  .p-mensaje{ margin:0; line-height:1.65; color:var(--body); }

  .p-nota-form textarea{
    width:100%; font:inherit; font-size:0.9rem; padding:0.6rem 0.75rem; resize:vertical;
    border:1px solid var(--rule); border-radius:10px; background:var(--white); color:var(--ink);
  }
  .p-nota-pie{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:0.6rem; }

  .p-notas{ list-style:none; margin:1.2rem 0 0; padding:0; }
  .p-notas li{ border-top:1px solid var(--rule); padding:0.9rem 0; }
  .p-nota-cab{ display:flex; align-items:center; gap:0.5rem; font-size:0.78rem; color:var(--muted); margin-bottom:0.3rem; }
  .p-privada{ background:#FFF3CD; color:#7A5B00; border-radius:999px; padding:0.05rem 0.45rem; font-size:0.7rem; }
  .p-notas p{ margin:0; font-size:0.92rem; color:var(--body); line-height:1.6; }

  .p-historial{ list-style:none; margin:0; padding:0; }
  .p-historial li{ display:flex; gap:1rem; padding:0.6rem 0; border-top:1px solid var(--rule); font-size:0.88rem; }
  .p-historial li:first-child{ border-top:0; }
  .p-historial time{ flex:0 0 7rem; color:var(--muted); font-size:0.8rem; }
  .p-historial b{ display:block; }

  .p-consent-ok{ margin:0; color:#0B6B3A; font-variation-settings:"wght" 700; font-size:0.9rem; }
  .p-consent-mal{ margin:0; color:#B3261E; font-variation-settings:"wght" 700; font-size:0.9rem; }

  /* ---------- avisos del panel ---------- */

  /* `.p-tabla th` estaba escrito para la cabecera: mayúsculas, gris,
     espaciado. Una celda de nombre también es un `th` —de fila, que es
     lo correcto para un lector de pantalla— y salía gritando en
     versalitas. Se distingue por el scope, no por el elemento. */
  .p-tabla th[scope="row"]{
    text-transform:none; letter-spacing:normal; font-size:0.9rem;
    color:var(--ink); font-variation-settings:"wght" 600;
    padding:0.8rem 0.9rem; vertical-align:top;
  }
  .p-tabla th[scope="row"] a{ color:var(--ink); text-decoration:none; }
  .p-tabla th[scope="row"] a:hover{ color:var(--violet); text-decoration:underline; }

  /* `.p-titulo a` es violeta, y un botón sólido también. El texto del
     botón «Nuevo aviso» salía violeta sobre violeta: el botón existía,
     se podía pulsar, y no se veía nada dentro. */
  .p-titulo .btn-solid, .p-titulo .btn-solid:hover{ color:var(--white); text-decoration:none; }
  .p-titulo-fila .btn{ text-decoration:none; }
  /* Un enlace con aspecto de botón no lleva subrayado: el recuadro ya
     dice que se puede pulsar. */
  a.btn{ text-decoration:none; display:inline-block; }

  /* `.p-sub` vive dentro de un `th` de fila, que va en semibold. Sin
     esto hereda el peso y el subtítulo compite con el título. */
  .p-tabla th[scope="row"] .p-sub{ font-variation-settings:"wght" 400; }


  /* `.p-estrecho` ERA un tope de 52rem para la página entera, y se
     quitó de las cinco pantallas que lo usaban (doc 79).

     Estaba puesto por una razón buena —una línea de texto más ancha que
     eso no se lee, se recorre— pero aplicado en el sitio equivocado: el
     tope iba en la PÁGINA, así que en un monitor de 2000px dejaba el
     60 % en gris mientras los campos se apretaban a la izquierda. La
     regla del ancho de lectura es del texto, no del documento.
     Se deja el nombre definido y sin efecto a propósito: si alguien lo
     escribe por costumbre en una pantalla nueva, no pasa nada. */
  .p-estrecho{ }

  /* Y para que quitar el tope no deje tres campos estirados a lo ancho
     de la pantalla —que no es «usar el espacio», es un campo de texto de
     1700px—, la tarjeta del formulario reparte sus campos en columnas
     que se acomodan solas. Con sitio para tres, tres; en un portátil,
     dos; en el teléfono, una. Sin media queries: `auto-fit` con un
     mínimo hace eso solo. */
  .p-form{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(19rem, 1fr));
    gap:0 1.4rem; align-items:start;
  }
  /* Lo que no es un campo cruza entero: títulos, textos, avisos y el
     pie con los botones. */
  .p-form > h2, .p-form > p, .p-form > .p-form-pie,
  .p-form > .aviso, .p-form > fieldset, .p-form > hr,
  /* La cabecera de identidad lleva su propia línea divisoria debajo: en
     una sola columna, la línea se cortaba a un tercio de la tarjeta y
     parecía un subrayado a medio pintar. */
  .p-form > .p-cuenta-cabecera{ grid-column:1 / -1; }
  /* Un área de texto en una columna de 19rem no sirve para escribir un
     párrafo. `:has()` donde lo haya; donde no, se queda en su columna y
     tampoco pasa nada. */
  .p-form > .campo:has(textarea){ grid-column:1 / -1; }

  .p-migas{ margin:0 0 0.8rem; font-size:0.85rem; }
  .p-migas a{ color:var(--muted); }
  .p-migas a:hover{ color:var(--violet); }

  .p-titulo-fila{
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:1rem; flex-wrap:wrap;
  }
  .p-nota{ margin:0 0 1.2rem; color:var(--muted); font-size:0.9rem; }
  .p-nota a{ color:var(--violet); }

  /* Los chips de estado del listado. Filtran; no son botones. */
  .p-chip{
    display:inline-flex; align-items:center; gap:0.4rem;
    padding:0.4rem 0.75rem; margin:0 0.3rem 1.2rem 0;
    background:var(--white); border:1px solid var(--rule); border-radius:999px;
    font-size:0.85rem; color:var(--body); text-decoration:none;
  }
  .p-chip:hover{ border-color:var(--violet); color:var(--violet); }
  .p-chip-activo{
    background:var(--violet); border-color:var(--violet); color:var(--white);
    font-variation-settings:"wght" 600;
  }
  .p-chip-activo:hover{ color:var(--white); }
  .p-chip-n{ font-size:0.76rem; opacity:0.75; }

  /* El estado del aviso, como insignia. El color dice lo mismo que la
     palabra, nunca en su lugar: `borrador` y `pausado` se distinguirían
     mal solo por el tono. */
  .p-estado{
    display:inline-block; padding:0.18rem 0.55rem; border-radius:999px;
    font-size:0.76rem; font-variation-settings:"wght" 600; white-space:nowrap;
    background:var(--wash); color:var(--body); border:1px solid var(--rule);
  }
  .p-estado-publicado{ background:#E3F6EC; color:#0B6B3A; border-color:#BFE6CF; }
  .p-estado-pausado  { background:#FFF4E0; color:#8A5A00; border-color:#F2DFB8; }
  .p-estado-cerrado,
  .p-estado-cancelado{ background:var(--wash); color:var(--muted); }
  /* bd/75. Un aviso que dice «publicado» y la web no enseña. Ámbar y no
     rojo: no está roto ni hay nada que deshacer, está vencido, y
     cambiar una fecha lo devuelve. El rojo es solo para lo que no se
     deshace. */
  .p-estado-expirado{ background:#FFF4E0; color:#8A5A00; border-color:#F2DFB8; }
  /* El que vence HOY va al lado del verde, no en su lugar: todavía se
     ve, y decir «expirado» hoy sería mentir al revés. */
  .p-estado-hoy{
    background:transparent; color:#8A5A00; border-color:#F2DFB8;
    font-variation-settings:"wght" 500;
  }

  .p-codigo{
    display:inline-block; margin-left:0.4rem; padding:0.1rem 0.4rem;
    background:var(--wash); border-radius:5px;
    font-size:0.74rem; color:var(--muted);
  }
  .p-num{ text-align:right; white-space:nowrap; }
  .p-nuevas{
    display:block; font-size:0.72rem; color:var(--violet);
    font-variation-settings:"wght" 600;
  }

  /* ═══════════════════════════════════════════════════════════════
     EL FORMULARIO DEL AVISO, EN DOS COLUMNAS  (doc 79)
     ═══════════════════════════════════════════════════════════════

     Izquierda el puesto, derecha el proceso. La frontera es para quién
     es cada dato: lo de la izquierda sale fuera, lo de la derecha se
     queda dentro de la empresa.

     `align-items:start` es lo que hace que esto no se vea raro: las dos
     columnas tienen alturas muy distintas —la izquierda lleva tres
     bloques largos— y sin esto los grupos de la derecha se estirarían
     para rellenar, dejando aire dentro de las tarjetas en vez de debajo.

     `minmax(0, …)` en las dos: sin el mínimo en cero, un `<select>` con
     el nombre de un proceso largo ensancha su columna y descuadra la
     rejilla entera, porque la anchura mínima por defecto de un elemento
     de rejilla es su contenido. */
  /* MISMO REPARTO QUE `/panel/avisos`, que es la pantalla de al lado:
     dos columnas, `gap:1.4rem`, `align-items:start` y `minmax(0,…)` en
     las dos. Allí la lista manda sobre la ficha (1 / 1.15); aquí manda
     el puesto sobre el proceso (1.35 / 1), porque es donde están las
     descripciones largas. Lo que se iguala es la mecánica y el ritmo,
     no la proporción: son contenidos distintos. */
  .av-form{
    display:grid; grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr);
    gap:1.4rem; align-items:start; margin-top:1rem;
  }
  .av-form-col{ display:grid; gap:1.4rem; align-content:start; min-width:0; }
  /* La rejilla del lector es la misma para que caiga justo sobre la
     columna del puesto, pero sin el margen de arriba: va pegado al
     título de la pantalla. */
  .av-form-lector{ margin-top:0; margin-bottom:1.4rem; }

  /* Cada grupo es una tarjeta. Lo que lo resalta es el material —fondo
     blanco sobre el gris de la página— y no una línea ni un color: así
     se distingue de las pastillas de estado y de los avisos, que sí usan
     color para decir algo. Un grupo no dice nada; solo agrupa. */
  .av-grupo{
    background:var(--white); border:1px solid var(--rule);
    border-radius:var(--radius); padding:1.1rem 1.2rem 1.3rem;
  }
  .av-grupo-t{
    margin:0; font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase;
    color:var(--muted); font-variation-settings:"wght" 700;
  }
  /* El primer campo del grupo no necesita el margen de arriba que lleva
     por estar en una lista: el título del grupo ya lo separa. */
  .av-grupo > .campo:first-of-type{ margin-top:0.7rem; }
  .av-grupo .p-seccion-nota{ margin-top:0.5rem; }
  /* Dentro de una tarjeta estrecha, dos campos por fila no caben: el
     sueldo mínimo y el máximo quedarían en seis caracteres. */
  .av-form-col:last-child .fila{ grid-template-columns:1fr; }

  /* El mismo corte que `/panel/avisos`: 1100px. Dos pantallas hermanas
     que se apilan a anchos distintos se notan como un fallo.

     Y no es solo que no quepa: con dos columnas en un móvil habría que
     bajar la primera entera para descubrir que hay una segunda, y las
     etapas —donde más se equivoca la gente— quedarían al final. */
  @media (max-width:1100px){
    .av-form{ grid-template-columns:1fr; gap:1.1rem; }
  }
  @media (prefers-contrast: more){
    .av-grupo{ border-width:2px; border-color:var(--rule-fuerte); }
    .av-grupo-t{ color:var(--ink); }
  }

  .p-seccion{
    margin:2rem 0 0.2rem; padding-top:1.4rem;
    border-top:1px solid var(--rule);
    font-size:1rem; font-variation-settings:"wght" 600;
  }
  .p-seccion:first-of-type{ border-top:0; padding-top:0; margin-top:1rem; }
  .p-seccion-nota{ margin:0 0 0.6rem; color:var(--muted); font-size:0.86rem; }

  .p-check{
    display:flex; align-items:center; gap:0.5rem;
    font-size:0.9rem; cursor:pointer;
  }
  .p-check input{ width:auto; }

  /* El lector del perfil del puesto, encima del formulario del aviso.
     Va en una caja propia y no dentro del formulario porque es otro
     formulario: lo que se envía aquí es un archivo, y lo que vuelve es
     esta misma página con los campos puestos. El borde punteado dice
     «esto es opcional» sin tener que escribirlo. */
  .p-lector{
    margin:0 0 1.8rem; padding:1.2rem 1.4rem;
    background:var(--white);
    border:1px dashed var(--rule); border-radius:var(--radius);
  }
  .p-lector .p-seccion{
    margin:0 0 0.3rem; padding-top:0; border-top:0; font-size:0.95rem;
  }
  .p-lector .ayuda{ margin:0 0 0.8rem; }
  .p-lector-fila{
    display:flex; flex-wrap:wrap; align-items:center; gap:0.8rem;
  }
  .p-lector-fila input[type=file]{ width:auto; max-width:100%; font-size:0.85rem; }
  .p-lector [data-lector-espera]{ margin:0.8rem 0 0; color:var(--violet); }
  /* Ya se leyó un archivo: la caja sigue ahí por si era el equivocado,
     pero deja de competir con el formulario, que es donde hay que
     mirar ahora. */
  .p-lector-otra{
    margin-bottom:1.2rem; padding:0.9rem 1.4rem; opacity:0.75;
    transition:opacity 160ms ease-out;
  }
  .p-lector-otra:hover, .p-lector-otra:focus-within{ opacity:1; }
  @media (prefers-reduced-motion: reduce){ .p-lector-otra{ transition:none; } }

    /* 15rem y no 13: desde el bd/57 la opción más larga es «Requerido:
     intermedio», y con 13rem el navegador la cortaba a «Requerid…», que
     es justo la palabra que hay que leer entera. */
  .p-idiomas{ display:grid; grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr)); gap:0.6rem; }
  .p-idioma{ display:grid; gap:0.25rem; font-size:0.85rem; }

  /* Las acciones de estado, separadas del formulario. Publicar no es
     «un campo más»: es el momento en que el aviso sale a la calle. */
  .p-estado-acciones{
    margin-top:2.5rem; padding:1.4rem;
    background:var(--white); border:1px solid var(--rule); border-radius:var(--radius);
  }
  .p-estado-acciones form{ margin-bottom:1rem; }
  .p-estado-acciones form:last-child{ margin-bottom:0; }
  .p-estado-acciones .ayuda{ display:inline-block; margin-left:0.6rem; }
  .p-cerrar{ border-top:1px solid var(--rule); padding-top:1.2rem; margin-top:1.4rem; }
  .p-cerrar .ayuda{ display:block; margin-left:0; }

  .btn-peligro{ color:#B3261E; border-color:#F3C9C5; }
  .btn-peligro:hover{ background:#FDECEA; border-color:#B3261E; }

  fieldset{ border:0; margin:0; padding:0; min-width:0; }
  fieldset[disabled]{ opacity:0.65; }

  /* El selector de ubigeo en cascada */
  .p-cascada{ display:grid; grid-template-columns:repeat(3, 1fr); gap:0.6rem; }
  /* `.campo label` es más específico que una clase suelta y ganaba: las
     tres etiquetas de la cascada salían más grandes que «Lugar del
     puesto», que es la que las agrupa. La jerarquía al revés. */
  .campo .p-cascada-eti{
    display:block; margin-bottom:0.25rem;
    font-size:0.76rem; color:var(--muted); font-variation-settings:"wght" 500;
  }
  .p-cascada select[disabled]{ background:var(--wash); color:var(--muted); }
  .p-cascada button{ margin-top:0.4rem; }
  @media (max-width: 640px){ .p-cascada{ grid-template-columns:1fr; } }

  /* El aviso de campos congelados. Ámbar y no rojo: no es un error, es
     una regla del producto, y el tono lo tiene que decir. */
  .aviso-congelado{
    background:#FFF4E0; color:#5C3D00; border:1px solid #F2DFB8;
  }
  .aviso-congelado strong{ color:#3D2800; }

  /* Un campo deshabilitado dentro de un fieldset activo: se distingue de
     los demás sin gritar. */
  .campo input[disabled], .campo select[disabled], .campo textarea[disabled]{
    background:var(--wash); color:var(--muted); cursor:not-allowed;
  }

  /* ---------- iconos de mantenimiento ---------- */

  .p-acciones-cab{ width:1%; }
  .p-iconos{ display:flex; gap:0.15rem; justify-content:flex-end; }
  .p-icono-form{ display:contents; }

  /* Un botón y un enlace tienen que verse idénticos aquí: quien mira la
     fila no debería notar cuál navega y cuál envía un formulario. */
  .p-icono{
    display:inline-grid; place-items:center;
    width:30px; height:30px; padding:0;
    background:transparent; border:1px solid transparent; border-radius:8px;
    color:var(--muted); cursor:pointer; text-decoration:none;
    transition:background 120ms ease, color 120ms ease, border-color 120ms ease;
  }
  .p-icono:hover{ background:var(--violet-soft); color:var(--violet); border-color:#CCDCFF; }
  .p-icono:focus-visible{ outline:2px solid var(--violet); outline-offset:1px; }
  .p-icono-peligro:hover{ background:#FDECEA; color:#B3261E; border-color:#F3C9C5; }

  /* El de borrar, aparte del resto: es el único que no se deshace. */
  .btn-borrar{ color:#B3261E; border-color:#F3C9C5; background:transparent; }
  .btn-borrar:hover{ background:#B3261E; color:var(--white); border-color:#B3261E; }

  .p-confirmar{
    background:var(--white); border:1px solid var(--rule); border-radius:var(--radius);
    padding:1.6rem; max-width:40rem;
  }
  .p-confirmar p{ margin:0 0 0.9rem; }
  .p-confirmar .ayuda{ margin-bottom:1.4rem; }

  /* Entrar */
  body.panel-desnudo{ display:flex; align-items:center; justify-content:center; min-height:100vh; }
  .entrar{ width:100%; padding:2rem 1rem; }
  .entrar-caja{
    max-width:24rem; margin:0 auto; background:var(--white);
    border:1px solid var(--rule); border-radius:var(--radius); padding:2rem;
  }
  .entrar-caja h1{ margin:0 0 0.3rem; font-size:1.25rem; text-align:center; }
  .entrar-nota{ margin:0 0 1.4rem; text-align:center; color:var(--muted); font-size:0.86rem; }
  .entrar-pie{ margin:1.4rem 0 0; text-align:center; font-size:0.82rem; color:var(--muted); }
  .entrar-pie a{ color:var(--violet); }

  .aviso-bien{ background:#E3F6EC; color:#0B6B3A; border:1px solid #BFE6CF; }

  /* Ámbar y no rojo: «esto se guardó y además hay algo que saber». Una
     habilidad fuera del catálogo no es un error del reclutador, así que
     pintarla de rojo le haría buscar qué hizo mal. */
  .aviso-ojo{ background:#FFF6E5; color:#7A4C00; border:1px solid #F2DCB3; }

  /* La tarjeta de «¿postulaste tú sin entrar?» (bd/73). Los dos botones
     van juntos y del mismo tamaño: ninguna de las dos respuestas es la
     normal, y hacer una más grande que la otra empujaría a contestar
     sin leer. */
  .mis-intento{ display:block; margin-bottom:1rem; }
  .mis-intento p{ margin:0 0 0.7rem; }
  .mis-intento-botones{ display:flex; flex-wrap:wrap; gap:0.6rem; margin:0 0 0.6rem; }
  .mis-intento .ayuda{ margin:0; color:inherit; opacity:0.8; }

  /* ═══════════════════════════════════════════════════════════════
     TABLERO
     Todo lo que hay aquí se pinta con lo que devuelve `rpc_tablero`.
     Los gráficos son SVG del servidor: sin empaquetador y con la CSP
     prohibiendo scripts en línea, una librería de gráficos sería un
     paquete entero para dibujar treinta rectángulos.
     ═══════════════════════════════════════════════════════════════ */

  .p-periodo{ display:flex; gap:0.25rem; flex:none; }
  .p-periodo-op{
    padding:0.35rem 0.7rem; border-radius:999px; font-size:0.82rem;
    color:var(--muted); text-decoration:none; border:1px solid transparent;
  }
  .p-periodo-op:hover{ color:var(--ink); border-color:var(--rule); }
  .p-periodo-op.on{
    background:var(--white); border-color:var(--rule); color:var(--ink);
    font-variation-settings:"wght" 600;
  }

  /* `auto-fit` y no un número de columnas: las tarjetas son cuatro hoy
     y pueden ser seis mañana sin tocar esto. */
  .t-tarjetas{
    display:grid; gap:0.9rem; margin:0 0 1.2rem;
    grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  }
  .t-tarjeta{
    display:flex; flex-direction:column; gap:0.15rem;
    background:var(--white); border:1px solid var(--rule); border-radius:var(--radius);
    padding:1rem 1.1rem 0.95rem; text-decoration:none; color:inherit;
  }
  a.t-tarjeta:hover{ border-color:var(--violet); }
  .t-rotulo{ font-size:0.78rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.04em; }
  .t-cifra{ font-size:2rem; line-height:1.1; font-variation-settings:"wght" 700; }
  .t-pie{ font-size:0.8rem; color:var(--muted); }
  .t-urgente .t-cifra{ color:var(--violet); }
  .t-alerta{ color:var(--rosa); font-variation-settings:"wght" 600; }
  .t-delta{ font-variation-settings:"wght" 700; }
  .t-delta.sube{ color:var(--verde); }
  .t-delta.baja{ color:var(--rosa); }

  .t-panel{
    background:var(--white); border:1px solid var(--rule); border-radius:var(--radius);
    padding:1.1rem 1.2rem 1.2rem; margin:0 0 1.2rem;
  }
  .t-h2{ margin:0 0 0.9rem; font-size:0.95rem; font-variation-settings:"wght" 600; }
  .t-nada{ margin:0; color:var(--muted); font-size:0.88rem; }
  .t-sub{ color:var(--muted); font-size:0.8rem; }

  /* `preserveAspectRatio="none"` estira el dibujo a lo ancho del
     contenedor; por eso las barras no llevan borde ni texto dentro,
     que se deformarían. */
  .t-grafico{ display:block; width:100%; height:140px; }
  .t-barra{ fill:var(--violet); opacity:0.85; }
  .t-eje{
    display:flex; justify-content:space-between; gap:0.5rem;
    margin-top:0.4rem; font-size:0.76rem; color:var(--muted);
  }

  .t-cols{ display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); }
  .t-cols > .t-panel{ margin:0; }

  /* El embudo, dentro de una zona que se desplaza.

     `14rem` sale de una medición, no de un gusto: las dos donas de al
     lado necesitan 144px de contenido y la lista de dieciséis etapas
     pedía 601, así que los tres paneles —que se estiran al más alto—
     se iban a 678px y las donas quedaban flotando en medio de un palmo
     de blanco. Con este tope la fila baja a unos 300px y se ven ocho
     etapas; el resto está a un desplazamiento.

     `padding-right` para que la barra de desplazamiento no se coma el
     número de la derecha, y `scrollbar-gutter` para que el hueco esté
     reservado también cuando no hace falta barra: si no, la lista se
     mueve un pelo al pasar de ocho etapas a nueve. */
  .t-embudo-scroll{
    max-height:14rem; overflow-y:auto; padding-right:0.3rem;
    scrollbar-gutter:stable;
  }
  .t-embudo-scroll:focus-visible{ outline:2px solid var(--violet); outline-offset:2px; border-radius:6px; }
  .t-embudo{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.55rem; }
  .t-embudo li{ display:grid; grid-template-columns:9rem 1fr 2.5rem; align-items:center; gap:0.7rem; }
  .t-embudo-nombre{ font-size:0.86rem; color:var(--body); }
  .t-embudo-pista{ background:var(--wash); border-radius:999px; height:10px; overflow:hidden; }
  .t-embudo-relleno{ display:block; height:100%; background:var(--violet); border-radius:999px; }
  .t-embudo-relleno.exito{ background:var(--aqua); }
  .t-embudo-relleno.fin{ background:#C9C5DE; }
  .t-embudo-n{ text-align:right; font-size:0.86rem; font-variation-settings:"wght" 600; }

  .t-rank{ list-style:none; margin:0; padding:0; counter-reset:r; }
  .t-rank li{
    counter-increment:r;
    display:flex; align-items:baseline; gap:0.6rem;
    padding:0.45rem 0; border-bottom:1px solid var(--rule);
  }
  .t-rank li:last-child{ border-bottom:0; }
  .t-rank li::before{
    content:counter(r); color:var(--muted); font-size:0.78rem; width:1rem; flex:none;
  }
  .t-rank a{ color:var(--ink); text-decoration:none; flex:1; }
  .t-rank a:hover{ color:var(--violet); }
  .t-rank-n{ font-variation-settings:"wght" 700; font-size:0.9rem; }

  /* Los publicados sin ninguna postulación eran un apéndice dentro del
     ranking, detrás de una línea de puntos. Son una pregunta distinta
     —«¿qué no está funcionando?»— y ahora tienen su propio panel al
     lado, que es donde se mira. */
  .t-cero{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.45rem; }
  .t-cero li{ display:flex; gap:0.5rem; align-items:baseline; justify-content:space-between; font-size:0.88rem; }
  .t-cero a{ color:var(--ink); }

  .t-activ{ list-style:none; margin:0; padding:0; }
  .t-activ li{
    display:flex; align-items:baseline; gap:0.7rem;
    padding:0.5rem 0; border-bottom:1px solid var(--rule);
  }
  .t-activ li:last-child{ border-bottom:0; }
  .t-activ-punto{
    width:7px; height:7px; border-radius:50%; background:var(--aqua); flex:none;
    position:relative; top:-2px;
  }
  .t-activ-texto{ flex:1; min-width:0; display:flex; flex-direction:column; }
  .t-activ-texto a{ color:var(--ink); text-decoration:none; font-variation-settings:"wght" 600; font-size:0.9rem; }
  .t-activ-texto a:hover{ color:var(--violet); }
  .t-activ-cuando{ font-size:0.78rem; color:var(--muted); flex:none; }

  .t-h2-fila{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
  .t-ver-todo{ font-size:0.82rem; color:var(--violet); text-decoration:none; }
  .t-ver-todo:hover{ text-decoration:underline; }

  /* Separadores de día en el historial completo. */
  .t-activ-dia{
    display:block; padding:0.9rem 0 0.3rem; border:0;
    font-size:0.74rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted);
  }
  .t-activ li.t-activ-dia:first-child{ padding-top:0; }

  /* ═══════════════════════════════════════════════════════════════
     PAGINADOR
     Uno para todas las listas del panel. La actividad no lo usa: va
     por cursor, y su botón es `.p-pag-cursor`.
     ═══════════════════════════════════════════════════════════════ */
  .p-pag{
    display:flex; align-items:center; flex-wrap:wrap; gap:0.6rem 1rem;
    margin-top:1rem; padding-top:0.9rem; border-top:1px solid var(--rule);
  }
  .p-pag-cuenta{ margin:0; font-size:0.84rem; color:var(--muted); }
  .p-pag-cuenta b{ color:var(--ink); font-variation-settings:"wght" 600; }

  .p-pag-nums{ display:flex; align-items:center; gap:0.2rem; list-style:none; margin:0 auto; padding:0; }
  .p-pag-n{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:2rem; height:2rem; padding:0 0.45rem;
    border:1px solid transparent; border-radius:8px;
    font-size:0.85rem; color:var(--body); text-decoration:none;
  }
  .p-pag-n:hover{ background:var(--white); border-color:var(--rule); color:var(--ink); }
  .p-pag-n.on{
    background:var(--violet); border-color:var(--violet); color:#fff;
    font-variation-settings:"wght" 600;
  }
  /* Los extremos se quedan en su sitio en gris en vez de desaparecer:
     si se ocultaran, los números saltarían de posición al pasar de la
     página 1 a la 2 y el cursor del ratón dejaría de estar donde
     estaba. */
  .p-pag-n.off{ color:var(--rule); cursor:default; }
  .p-pag-mov{ font-size:1.1rem; line-height:1; }
  .p-pag-hueco{ padding:0 0.2rem; color:var(--muted); }

  .p-pag-tam{ margin:0; font-size:0.82rem; color:var(--muted); }
  .p-pag-tam-op{
    display:inline-block; padding:0.15rem 0.45rem; margin-left:0.15rem;
    border-radius:6px; color:var(--body); text-decoration:none;
  }
  .p-pag-tam-op:hover{ background:var(--white); }
  .p-pag-tam-op.on{ background:var(--violet-soft); color:var(--violet); font-variation-settings:"wght" 700; }

  .p-pag-cursor{ justify-content:space-between; }

  /* La ficha no lleva paginador: lleva «ver todo». Ver el porqué en
     bd/33_ficha_historial.sql. */
  .p-ver-todo{ margin:0.9rem 0 0; font-size:0.86rem; }
  .p-ver-todo a{ color:var(--violet); }
  /* `.p-bloque h2` va en versalitas; el contador no debe heredarlas ni
     caer a la línea de abajo: es una aclaración, no un segundo título. */
  .p-bloque h2 .p-sub{
    display:inline; margin-left:0.5rem;
    font-size:0.76rem; text-transform:none; letter-spacing:0;
    font-variation-settings:"wght" 400; color:var(--muted);
  }

  /* ---------- Resultados de búsqueda ---------- */
  .b-personas{ list-style:none; margin:0; padding:0; }
  .b-personas > li{ padding:0.8rem 0; border-bottom:1px solid var(--rule); }
  .b-personas > li:last-child{ border-bottom:0; }
  .b-persona-cab{ display:flex; align-items:center; gap:0.6rem; }
  .b-persona-cab b{ display:block; font-size:0.95rem; }
  .b-persona-cab .t-sub{ display:block; }
  .b-postulaciones{ list-style:none; margin:0.5rem 0 0 2.3rem; padding:0; display:flex; flex-direction:column; gap:0.35rem; }
  .b-postulaciones li{ display:flex; align-items:center; flex-wrap:wrap; gap:0.5rem; font-size:0.88rem; }
  .b-postulaciones a{ color:var(--ink); text-decoration:none; }
  .b-postulaciones a:hover{ color:var(--violet); }
  .b-mas{ margin:0.9rem 0 0; font-size:0.86rem; }
  .b-mas a{ color:var(--violet); }

  /* ---------- Equipo ---------- */
  .eq-invitar{ display:grid; gap:0 1rem; grid-template-columns:repeat(auto-fit, minmax(14rem, 1fr)); }
  .eq-invitar .p-form-pie{ grid-column:1 / -1; margin-top:0.8rem; }

  /* El enlace que solo se ve una vez. Se destaca porque si se pasa por
     alto hay que revocar la invitación y crear otra. */
  .eq-enlace{ border-color:var(--violet); }
  .eq-enlace p{ margin:0 0 0.4rem; font-size:0.9rem; }
  .eq-enlace-caja{
    width:100%; font:inherit; font-size:0.85rem; font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
    padding:0.6rem 0.75rem; margin-top:0.6rem;
    border:1px solid var(--rule); border-radius:9px; background:var(--wash); color:var(--ink);
  }

  .eq-invitaciones{ list-style:none; margin:0; padding:0; }
  .eq-invitaciones li{
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding:0.6rem 0; border-bottom:1px solid var(--rule);
  }
  .eq-invitaciones li:last-child{ border-bottom:0; }
  .eq-vencida{ color:#B3261E; }

  .eq-persona{ display:flex; align-items:center; gap:0.6rem; }
  .eq-persona .p-sub{ display:block; font-variation-settings:"wght" 400; }
  .eq-acciones{ display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; }
  .eq-acciones select{
    font:inherit; font-size:0.84rem; padding:0.3rem 0.5rem;
    border:1px solid var(--borde-campo); border-radius:8px; background:var(--white); color:var(--ink);
  }
  /* Quien no entra sigue en la lista, en gris: su rastro en el historial
     tiene que poder seguir leyéndose. */
  .eq-inactivo{ opacity:0.55; }
  .eq-sin-perfil{
    background:var(--wash); color:var(--muted); border:1px solid var(--rule);
    border-radius:999px; padding:0.05rem 0.45rem; font-size:0.7rem;
    font-variation-settings:"wght" 500;
  }
  .eq-nota{ font-size:0.85rem; color:var(--muted); margin:1rem 0 0; }
  .eq-nota a{ color:var(--violet); }

  .btn-ancho{ width:100%; justify-content:center; text-align:center; }

  /* ---------- Mi cuenta ---------- */
  .p-cuenta-cabecera{
    display:flex; align-items:center; gap:0.9rem;
    padding-bottom:1.1rem; margin-bottom:1.1rem; border-bottom:1px solid var(--rule);
  }
  .p-cuenta-cabecera b{ display:block; }
  .p-form{ background:var(--white); border:1px solid var(--rule); border-radius:var(--radius); padding:1.4rem; }
  .p-form-pie{ display:flex; align-items:center; gap:0.7rem; margin-top:1.4rem; }

  @media (max-width: 960px){
    .p-ficha-cols{ grid-template-columns:1fr; }
  }

  /* La barra lateral se convierte en una tira horizontal arriba. Sin
     botón de menú y sin JavaScript: el menú entero sigue visible, que
     con cuatro secciones cabe de sobra. Y por eso el botón de plegar
     desaparece: aquí no hay nada que plegar. */
  @media (max-width: 860px){
    /* `minmax(0, 1fr)` y no `1fr`: un hijo de rejilla no baja de su
       tamaño mínimo de contenido salvo que se le permita, y la tira de
       secciones —que se desplaza sola— estiraba la columna hasta 500px
       en una pantalla de 390. */
    .p-app,
    body.barra-mini .p-app{ grid-template-columns:minmax(0, 1fr); }
    .p-lado,
    body.barra-mini .p-lado{
      position:static; height:auto; overflow:visible; min-width:0;
      border-right:0; border-bottom:1px solid var(--rule);
      flex-direction:row; flex-wrap:wrap; align-items:center;
      gap:0.6rem 1rem; padding:0.7rem var(--gutter);
    }
    .p-lado-marca, body.barra-mini .p-lado-marca{ padding:0; }
    .p-menu, body.barra-mini .p-menu{
      flex-direction:row; order:3; flex:1 1 100%; min-width:0;
      gap:0.2rem; overflow-x:auto;
    }
    .p-menu-item, body.barra-mini .p-menu-item{
      padding:0.45rem 0.7rem; white-space:nowrap; justify-content:flex-start;
    }
    /* En la tira horizontal el avatar de la barra sobra: el de la barra
       superior está a dos centímetros. */
    .p-lado-yo{ display:none; }
    body.barra-mini .solo-amplia{ display:revert; }
    body.barra-mini .solo-mini{ display:none; }
    .p-plegar{ display:none; }
    .p-top{ padding-left:var(--gutter); padding-right:var(--gutter); }
  }
  @media (max-width: 700px){
    .p-ficha-cab{ flex-direction:column; }
    .p-titulo-fila{ flex-direction:column; gap:0.6rem; }
    .t-embudo li{ grid-template-columns:7rem 1fr 2.2rem; }
    .p-cuenta-nombre{ display:none; }
    .p-empresa-fija{ display:none; }
    .p-buscar input{ font-size:1rem; }   /* iOS no hace zoom si es 16px */
    .p-pag{ justify-content:center; }
    .p-pag-nums{ order:-1; width:100%; justify-content:center; }
    .b-postulaciones{ margin-left:0; }
  }

  /* ---------- La empresa ---------- */
  .p-sub-titulo{
    margin:1.8rem 0 0; padding-top:1.2rem; border-top:1px solid var(--rule);
    font-size:0.8rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted);
  }
  .emp-logo{
    display:block; margin-top:0.6rem; width:56px; height:56px;
    object-fit:contain; border:1px solid var(--rule); border-radius:10px;
    background:var(--white); padding:4px;
  }
  .emp-colores{ display:flex; gap:1rem; flex-wrap:wrap; }
  .emp-ayuda-colores{ margin-top:0.4rem; }

  /* Lo que no se edita: se enseña igual, en una lista de definición y
     sin campos. Esconderlo haría creer que Sofia no lo tiene. */
  .emp-fijos{ margin-top:1.4rem; }
  .emp-datos{ display:grid; gap:0.9rem 1.5rem; grid-template-columns:repeat(auto-fit, minmax(12rem, 1fr)); margin:1rem 0 0; }
  .emp-datos dt{ font-size:0.76rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted); }
  .emp-datos dd{ margin:0.15rem 0 0; font-size:0.95rem; }

  /* Un campo deshabilitado tiene que PARECER deshabilitado: si no, quien
     no administra cree que puede escribir y descubre que no al pulsar. */
  .campo input[disabled], .campo textarea[disabled]{
    background:var(--wash); color:var(--muted); cursor:not-allowed;
  }

  /* ==================================================================
     EL ACCESO DEL CANDIDATO
     ==================================================================
     Reutiliza `.resultado`, que ya centra y acota el ancho. Las clases
     llevan prefijo `mis-` a propósito: el panel tiene su propio juego
     con prefijo `p-`, y la vez que dos pantallas compartieron el nombre
     de una clase —`.p-lado`— la ficha heredó el menú lateral entero y no
     lo vio ninguna prueba, solo una captura. */

  .resultado-form{ text-align:left; }
  .resultado-form h1{ text-align:center; }
  .resultado-form > p{ text-align:center; }

  .form-acceso{ max-width:26rem; margin:1.6rem auto 0; }
  .form-acceso .campo{ margin-bottom:1.1rem; }
  .form-acceso label{
    display:block; margin-bottom:0.35rem;
    font-weight:600; font-size:0.92rem; color:var(--ink);
  }
  .form-acceso input{
    width:100%; padding:0.7rem 0.85rem;
    border:1px solid var(--borde-campo); border-radius:10px;
    font:inherit; color:var(--ink); background:var(--white);
  }
  .form-acceso input:focus-visible{
    outline:2px solid var(--violet); outline-offset:1px; border-color:var(--violet);
  }
  .form-acceso .btn{ width:100%; }
  /* El pie iba pegado al botón: `.resultado p` solo pone margen abajo. */
  .resultado-form .resultado-nota{ margin-top:1.3rem; text-align:center; }

  .campo-ayuda{
    margin:0.4rem 0 0; font-size:0.82rem; color:var(--muted); line-height:1.5;
  }

  /* El código se teclea de un tirón mirando el correo en otra ventana:
     ancho, espaciado y tabular para no perder la cuenta de los dígitos. */
  .campo-codigo{
    font-size:1.5rem; letter-spacing:0.35em; text-align:center;
    font-variant-numeric:tabular-nums;
  }

  .aviso{
    margin:0 0 1rem; padding:0.7rem 0.9rem;
    border-radius:10px; font-size:0.9rem; line-height:1.5;
  }
  .aviso-mal{ background:#FDECEC; color:#8C1D1D; border:1px solid #F5C9C9; }

  /* ---- Mis postulaciones ----
     `.mis-cabecera` y `.mis-quien` ya no existen: la pantalla empieza
     por la tarjeta de identidad (`.mis-perfil`, más abajo) en vez de por
     un título con el correo debajo. */

  .btn-linea{
    background:transparent; color:var(--body);
    border:1px solid var(--rule); border-radius:10px;
    padding:0.5rem 0.9rem; font:inherit; cursor:pointer;
  }
  .btn-linea:hover{ border-color:var(--violet); color:var(--violet); }

  .mis-lista{ list-style:none; margin:0; padding:0; display:grid; gap:0.9rem; }

  .mis-item{
    border:1px solid var(--rule); border-radius:var(--radius);
    padding:1.1rem 1.2rem; background:var(--white);
    /* Sin esto, un título largo ensancha la rejilla y el móvil se va de
       lado: los hijos de un grid no bajan de su min-content solos. */
    min-width:0;
  }
  .mis-item h3{ margin:0 0 0.15rem; font-size:1.05rem; color:var(--ink); }
  .mis-empresa{ margin:0; font-size:0.86rem; color:var(--muted); }

  .mis-estado{
    margin:0.8rem 0 0.5rem; padding:0.6rem 0.8rem;
    background:var(--violet-soft); color:var(--ink);
    border-radius:10px; font-size:0.93rem; line-height:1.55;
  }
  /* Una postulación cerrada se apaga, no se pinta de rojo: ya es una
     mala noticia, no hace falta gritarla. */
  .mis-item-cerrada .mis-estado{ background:var(--wash); color:var(--body); }
  .mis-item-cerrada h3{ color:var(--body); }
  /* Quedar seleccionado es la única buena noticia del circuito, y el
     aqua de la marca es el color que la plataforma usa para eso. */
  .mis-item-exito .mis-estado{ background:var(--aqua-soft); color:#04322F; }

  .mis-fechas{ margin:0; font-size:0.82rem; color:var(--muted); }

  /* Un botón que vive dentro de una frase. Es un POST porque cambia
     algo, pero visualmente tiene que leerse como lo que es: la
     continuación de «…o pídelo otra vez». */
  .form-reiniciar{ margin:0; }
  .btn-enlace{
    background:none; border:0; padding:0; font:inherit;
    color:var(--violet); text-decoration:underline; cursor:pointer;
  }
  .btn-enlace:hover{ text-decoration:none; }

  .resultado-acciones{
    display:flex; gap:0.7rem; justify-content:center;
    flex-wrap:wrap; margin-bottom:0.5rem;
  }
  .resultado-acciones .btn{ text-decoration:none; }
  /* `.btn-linea` nació como <button> en «mis postulaciones»; aquí es un
     <a>, así que necesita el alto de línea que un botón trae de serie. */
  a.btn-linea{ display:inline-block; line-height:1.5; }

  /* ==================================================================
     EL MENÚ DE ARRIBA
     ==================================================================
     Durante un tiempo «Seguir mi postulación» fue un `<a class="nav-acceso">`
     suelto dentro de `.nav`: como no era `.fake-link` no heredaba ni el
     tamaño, ni el color, ni el padding con el que `.nav .fake-link`
     alinea sus bases, así que se veía más grande y más alto que
     «Oportunidades», al lado. La clase ya no existe: el menú usa los
     mismos componentes que el prototipo —`.fake-link` para navegar,
     `.btn` para actuar— y alinea solo.

     El `.burger` que el responsive enseñaba desde hace meses no estaba
     en el HTML: eran tres rayas de CSS sin dueño. Ahora es el
     `<summary>` de un `<details>`, que abre y cierra sin una línea de
     JavaScript —obligatorio con `script-src 'self'`— y que el navegador
     ya anuncia como plegable. */

  .menu-movil{ position:relative; display:none; }

  .burger{ display:block; cursor:pointer; list-style:none; }
  .burger::-webkit-details-marker{ display:none; }  /* el triángulo de serie */
  .burger span{ transition:transform 150ms ease-out, opacity 150ms ease-out; }

  /* Abierto, las tres rayas se cruzan. Solo `transform` y `opacity`:
     animar `width` o `top` obliga al navegador a recalcular la página
     entera en cada cuadro. */
  .menu-movil[open] .burger span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .menu-movil[open] .burger span:nth-child(2){ opacity:0; }
  .menu-movil[open] .burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

  .menu-movil-panel{
    position:absolute; right:0; top:calc(100% + 0.7rem); z-index:30;
    min-width:14rem; display:grid; gap:0.15rem; padding:0.6rem;
    background:var(--white); border:1px solid var(--rule);
    border-radius:var(--radius); box-shadow:0 14px 34px rgba(20,18,31,0.14);
  }
  .menu-movil-panel a{
    padding:0.6rem; border-radius:10px;
    color:var(--body); text-decoration:none; font-size:0.95rem;
  }
  .menu-movil-panel a:hover{ background:var(--wash); color:var(--violet); }
  .menu-movil-panel a[aria-current]{ color:var(--violet); background:var(--violet-soft); }
  .menu-movil-panel .btn{ margin-top:0.4rem; text-align:center; }

  @media (max-width:1080px){
    .menu-movil{ display:block; }
  }
  @media (max-width:680px){
    /* A esta anchura `.head-actions .btn-ghost` se esconde, y «Publicar
       aviso» vive dentro del panel: hay que devolvérselo, o el menú se
       abre con un botón invisible dentro. */
    .menu-movil-panel .btn-ghost{ display:block; }
  }
  @media (max-width:420px){
    .head-in{ gap:0.6rem; }
    .brand-logo{ height:30px; }
    .head-actions{ gap:0.4rem; }
    .head-actions .btn-sm{ padding:0.42rem 0.7rem; font-size:0.78rem; }
  }

  /* ==================================================================
     MIS POSTULACIONES · quién es
     ================================================================== */

  .mis-perfil{
    display:flex; align-items:flex-start; gap:1rem; flex-wrap:wrap;
    padding:1.2rem 1.3rem; margin-bottom:1.8rem;
    background:var(--white); border:1px solid var(--rule);
    border-radius:var(--radius);
  }
  .mis-avatar{
    flex:none; width:52px; height:52px; border-radius:50%;
    background:linear-gradient(135deg, var(--violet), var(--aqua));
    color:var(--white); display:grid; place-items:center;
    font-size:1.05rem; font-variation-settings:"wdth" 100,"wght" 700;
  }
  .mis-perfil-datos{ flex:1 1 16rem; min-width:0; }
  .mis-perfil-datos h1{
    margin:0 0 0.15rem; font-size:clamp(1.25rem, 3vw, 1.6rem);
    letter-spacing:-0.02em; line-height:1.2;
  }
  .mis-titular{ margin:0; color:var(--body); font-size:0.92rem; line-height:1.5; }

  .mis-contacto{ display:flex; flex-wrap:wrap; gap:0.6rem 1.8rem; margin:0.85rem 0 0; }
  .mis-contacto div{ min-width:0; }
  .mis-contacto dt{
    font-size:0.7rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted);
  }
  /* Un correo largo no puede ensanchar la tarjeta en un móvil. */
  .mis-contacto dd{ margin:0.12rem 0 0; font-size:0.9rem; color:var(--ink); overflow-wrap:anywhere; }

  .mis-perfil-acciones{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-left:auto; }
  .mis-perfil-acciones form{ margin:0; }

  .mis-barra{
    display:flex; align-items:baseline; justify-content:space-between;
    gap:0.6rem 1rem; flex-wrap:wrap; margin-bottom:0.9rem;
  }
  .mis-barra h2{ margin:0; font-size:1.15rem; }
  .mis-resumen{ margin:0; font-size:0.86rem; color:var(--muted); }

  /* ==================================================================
     MIS POSTULACIONES · la barra de avance
     ==================================================================
     Cuatro nodos en una rejilla de columnas iguales. La línea que une
     dos nodos es el `::before` del de la derecha, que empieza medio
     ancho de columna a su izquierda: así cae exactamente entre los dos
     centros sin que haya que saber cuántas fases hay.

     Ningún estado se distingue SOLO por el color: cada nodo lleva su
     nombre debajo y, para el lector de pantalla, la palabra
     «completada», «en curso» o «pendiente». */

  .mis-pasos{
    list-style:none; margin:1.1rem 0 1rem; padding:0;
    display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  }
  .paso{ position:relative; min-width:0; padding-top:1.5rem; text-align:center; }

  .paso::before{
    content:""; position:absolute; top:6px; left:-50%; width:100%; height:2px;
    background:var(--rule);
  }
  .paso:first-child::before{ display:none; }

  .paso-punto{
    position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:14px; height:14px; border-radius:50%;
    background:var(--white); border:2px solid var(--rule);
  }
  .paso-nombre{
    display:block; font-size:0.7rem; line-height:1.3;
    text-transform:uppercase; letter-spacing:0.04em; color:var(--muted);
  }

  .paso-hecho .paso-punto{ background:var(--violet); border-color:var(--violet); }
  .paso-hecho::before, .paso-actual::before{ background:var(--violet); }

  /* El nodo donde está ahora: hueco y con halo, para que se lea como
     «aquí», no como «hecho». */
  .paso-actual .paso-punto{
    border-color:var(--violet); box-shadow:0 0 0 4px var(--violet-soft);
  }
  .paso-actual .paso-nombre{
    color:var(--violet); font-variation-settings:"wdth" 100,"wght" 600;
  }

  .paso-logro .paso-punto{ background:var(--aqua); border-color:var(--aqua); }
  .paso-logro .paso-nombre{ color:#04322F; font-variation-settings:"wdth" 100,"wght" 600; }
  .mis-pasos-exito .paso-hecho .paso-punto{ background:var(--aqua); border-color:var(--aqua); }
  .mis-pasos-exito .paso-hecho::before, .mis-pasos-exito .paso-logro::before{ background:var(--aqua); }

  /* Una postulación cerrada se apaga, no se pinta de rojo: ya es una
     mala noticia y no hace falta gritarla. Los nodos recorridos siguen
     ahí —el proceso pasó de verdad— pero en gris. */
  .mis-pasos-cerrada .paso-hecho .paso-punto,
  .paso-cerrado .paso-punto{ background:var(--muted); border-color:var(--muted); }
  .mis-pasos-cerrada .paso-hecho::before,
  .mis-pasos-cerrada .paso-cerrado::before{ background:var(--rule-fuerte); }
  .paso-cerrado .paso-nombre{ color:var(--body); font-variation-settings:"wdth" 100,"wght" 600; }

  @media (prefers-contrast: more){
    .paso-punto{ border-width:3px; }
    .paso-nombre{ color:var(--ink); }
  }
  @media (prefers-reduced-motion: reduce){
    .burger span{ transition:none; }
  }

  /* ==================================================================
     MIS POSTULACIONES · el pie de cada tarjeta
     ================================================================== */

  .mis-item-pie{
    display:flex; align-items:center; justify-content:space-between;
    gap:0.6rem 1rem; flex-wrap:wrap; margin-top:0.9rem;
  }
  .mis-item-pie .btn{ text-decoration:none; }
  .mis-sin-aviso{ font-size:0.8rem; color:var(--muted); }

  @media (max-width: 560px){
    .mis-perfil-acciones{ margin-left:0; width:100%; }
    .mis-item-pie{ align-items:stretch; }
    .mis-item-pie .btn{ text-align:center; }
    /* Cuatro rótulos no caben en un móvil estrecho sin partirse en
       sílabas. El nodo se mantiene —la forma es lo que se lee de un
       vistazo— y el nombre queda solo donde estás, que es el único que
       hace falta leer. */
    .paso-nombre{ font-size:0.62rem; letter-spacing:0.02em; }
  }

  /* ==================================================================
     /EMPRESAS · LA PUERTA DE LOS CLIENTES
     ==================================================================
     La única pantalla pública a todo el ancho. `.wrap` y `.wrap-ficha`
     acotan el contenido a una caja centrada, que es lo correcto para
     leer un aviso; aquí hacen falta bandas de color de borde a borde,
     así que el ancho lo pone cada sección por dentro con `.emp-in`.

     Prefijo `emp-` como el panel usa `p-` y el candidato usa `mis-`:
     la vez que dos pantallas compartieron el nombre de una clase, la
     ficha heredó el menú lateral entero y no lo vio ninguna prueba. */

  .wrap-plano{ display:block; }

  .emp-in{ padding:0 var(--gutter); }
  .emp-in-angosto{ max-width:720px; }

  .emp-seccion{ padding:clamp(2.6rem, 6vw, 4.5rem) 0; }
  .emp-seccion-wash{ background:var(--wash); border-block:1px solid var(--rule); }
  .emp-seccion h2{
    margin:0 0 0.5rem; font-size:clamp(1.4rem, 3.2vw, 2rem);
    letter-spacing:-0.02em; line-height:1.2; text-wrap:balance;
  }
  .emp-sub{ margin:0 0 1.8rem; color:var(--body); max-width:52ch; line-height:1.6; }

  /* ---- 1 · lo primero que se ve ---- */

  .emp-hero{ background:var(--wash); border-bottom:1px solid var(--rule); }
  .emp-hero-in{
    padding:clamp(2.4rem, 6vw, 4.5rem) var(--gutter);
    display:grid; gap:clamp(1.8rem, 4vw, 3.5rem);
    grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr);
    align-items:center;
  }
  .emp-hero-texto{ min-width:0; }

  .emp-ojo{
    margin:0 0 0.6rem; font-size:0.76rem; text-transform:uppercase;
    letter-spacing:0.05em; color:var(--violet);
    font-variation-settings:"wdth" 100,"wght" 700;
  }
  /* Titular grande: tracking apretado e interlineado corto. Cuanto más
     grande el texto, más junto. */
  .emp-hero h1{
    margin:0 0 0.9rem; font-size:clamp(1.8rem, 5vw, 3rem);
    letter-spacing:-0.03em; line-height:1.08;
    /* Reparte las líneas en vez de dejar «CV» solo en la tercera. Donde
       no está soportado, el navegador lo ignora y parte como siempre:
       no hay nada que arreglar después. */
    text-wrap:balance;
  }
  .emp-bajada{ margin:0 0 1.6rem; font-size:1.05rem; line-height:1.6; color:var(--body); max-width:48ch; }

  .emp-hero-botones{ display:flex; flex-wrap:wrap; gap:0.7rem; }
  .emp-hero-botones .btn{ text-decoration:none; padding:0.75rem 1.4rem; }
  .emp-hero-pie{ margin:1rem 0 0; font-size:0.84rem; color:var(--muted); }

  .emp-cifras{
    list-style:none; margin:0; padding:0;
    display:grid; gap:0.7rem;
  }
  .emp-cifras li{
    background:var(--white); border:1px solid var(--rule); border-radius:var(--radius);
    padding:1rem 1.2rem; display:flex; align-items:baseline; gap:0.8rem;
  }
  .emp-cifra{
    font-size:1.9rem; line-height:1.1; letter-spacing:-0.02em; color:var(--violet);
    font-variation-settings:"wdth" 100,"wght" 700; flex:none;
  }
  .emp-cifra-pie{ font-size:0.88rem; color:var(--body); line-height:1.4; }

  /* ---- 2 · qué hace ---- */

  .emp-rejilla{
    list-style:none; margin:0; padding:0;
    display:grid; gap:1rem;
    grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr));
  }
  .emp-tarjeta{
    background:var(--white); border:1px solid var(--rule);
    border-radius:var(--radius); padding:1.3rem 1.4rem; min-width:0;
  }
  .emp-tarjeta h3{ margin:0 0 0.45rem; font-size:1.02rem; color:var(--ink); }
  .emp-tarjeta p{ margin:0; font-size:0.93rem; line-height:1.6; color:var(--body); }

  /* ---- 3 · cómo se empieza ---- */

  .emp-pasos{
    list-style:none; margin:0; padding:0; counter-reset:paso;
    display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr));
  }
  .emp-pasos li{ min-width:0; }
  .emp-paso-n{
    display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
    background:var(--violet); color:var(--white); font-size:0.95rem;
    font-variation-settings:"wdth" 100,"wght" 700; margin-bottom:0.7rem;
  }
  .emp-pasos h3{ margin:0 0 0.35rem; font-size:1rem; color:var(--ink); }
  .emp-pasos p{ margin:0; font-size:0.93rem; line-height:1.6; color:var(--body); }

  /* ---- 4 · los planes ---- */

  .emp-planes{
    list-style:none; margin:0; padding:0;
    display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit, minmax(16rem, 1fr));
    /* `stretch` y no `start`: con las tarjetas a distinta altura, el
       `margin-top:auto` del botón no sirve de nada y los tres «Empezar
       con…» quedan escalonados. */
    align-items:stretch;
  }
  .emp-plan{
    position:relative; min-width:0;
    display:flex; flex-direction:column;
    background:var(--white); border:1px solid var(--rule);
    border-radius:var(--radius); padding:1.5rem 1.4rem 1.4rem;
  }
  /* El destacado se distingue por el borde y la cinta, no por un tamaño
     distinto: una tarjeta más alta que las otras desalinea la fila
     entera en cuanto un plan tiene una ventaja más. */
  .emp-plan-destacado{ border:2px solid var(--violet); }
  .emp-plan-cinta{
    position:absolute; top:-0.7rem; left:1.4rem; margin:0;
    background:var(--violet); color:var(--white);
    font-size:0.7rem; text-transform:uppercase; letter-spacing:0.05em;
    font-variation-settings:"wdth" 100,"wght" 700;
    padding:0.25rem 0.6rem; border-radius:999px;
  }
  .emp-plan h3{ margin:0 0 0.5rem; font-size:1.05rem; color:var(--ink); }
  .emp-plan-precio{ margin:0 0 0.4rem; display:flex; align-items:baseline; gap:0.3rem; }
  .emp-plan-cifra{
    font-size:2.1rem; line-height:1.05; letter-spacing:-0.03em; color:var(--ink);
    font-variation-settings:"wdth" 100,"wght" 700;
  }
  .emp-plan-periodo{ font-size:0.88rem; color:var(--muted); }
  .emp-plan-resumen{ margin:0 0 0.9rem; font-size:0.9rem; color:var(--body); line-height:1.5; }
  .emp-plan-tope{
    margin:0 0 1rem; padding:0.5rem 0.7rem; border-radius:9px;
    background:var(--violet-soft); color:var(--ink);
    font-size:0.86rem; font-variation-settings:"wdth" 100,"wght" 600;
  }

  .emp-plan-lista{ list-style:none; margin:0 0 1.4rem; padding:0; display:grid; gap:0.5rem; }
  .emp-plan-lista li{
    position:relative; padding-left:1.4rem; font-size:0.9rem; line-height:1.5; color:var(--body);
  }
  /* El palomeo es CSS y no un SVG por ventaja: son veinte marcas
     iguales en la misma pantalla, y cada una sería un `<svg>` repetido
     en el HTML. Decorativo, así que no dice nada al lector de pantalla. */
  .emp-plan-lista li::before{
    content:""; position:absolute; left:0.25rem; top:0.38rem;
    width:0.36rem; height:0.66rem; border:solid var(--aqua);
    border-width:0 2px 2px 0; transform:rotate(45deg);
  }
  /* `margin-top:auto` pega el botón al fondo: las tres tarjetas acaban
     con el botón a la misma altura aunque tengan distinto número de
     ventajas. */
  .emp-plan .btn{ margin-top:auto; text-decoration:none; }

  /* ---- 5 · el formulario ---- */

  .emp-form{
    background:var(--white); border:1px solid var(--rule);
    border-radius:var(--radius); padding:clamp(1.25rem, 4vw, 2rem);
  }
  .emp-form fieldset{ border:0; padding:0; margin:0 0 1.6rem; }
  .emp-form fieldset:last-of-type{ margin-bottom:0; }
  .emp-form legend{
    padding:0; font-size:0.76rem; text-transform:uppercase; letter-spacing:0.05em;
    color:var(--muted); font-variation-settings:"wdth" 100,"wght" 700;
  }
  .campo-opcional{ color:var(--muted); font-variation-settings:"wdth" 100,"wght" 400; }

  /* ---- 6 · preguntas frecuentes ---- */

  .emp-faq{ display:grid; gap:0.5rem; }
  .emp-faq details{
    background:var(--white); border:1px solid var(--rule);
    border-radius:var(--radius); padding:0.2rem 1.1rem;
  }
  .emp-faq summary{
    cursor:pointer; padding:0.9rem 0; font-size:0.98rem; color:var(--ink);
    font-variation-settings:"wdth" 100,"wght" 600;
  }
  .emp-faq summary:hover{ color:var(--violet); }
  .emp-faq p{ margin:0 0 1rem; font-size:0.93rem; line-height:1.65; color:var(--body); }

  @media (prefers-contrast: more){
    .emp-tarjeta, .emp-plan, .emp-faq details, .emp-cifras li{ border-color:var(--muted); }
    .emp-plan-resumen, .emp-tarjeta p, .emp-pasos p, .emp-faq p{ color:var(--ink); }
  }

  @media (max-width: 900px){
    /* Una columna: la rejilla del hero a dos columnas deja el titular
       en una tira de ocho caracteres antes de llegar al móvil. */
    .emp-hero-in{ grid-template-columns:1fr; }
    .emp-cifras{ grid-template-columns:repeat(auto-fit, minmax(13rem, 1fr)); }
  }
  @media (max-width: 560px){
    .emp-hero-botones .btn{ width:100%; text-align:center; }
    .emp-plan-destacado{ margin-top:0.7rem; }  /* sitio para la cinta */
  }

/* =====================================================================
   «Mis datos» · el candidato corrige su propia ficha
   =====================================================================
   Seis secciones en `<details>`, que se abren solos: es HTML, no un
   componente, y por eso esta pantalla no tiene una línea de JavaScript.

   Va en `app.css` y no en su propia hoja porque reutiliza todos los
   tokens y el ritmo del sitio público. Una hoja aparte habría acabado
   redefiniéndolos.
   ===================================================================== */
  .md{ max-width:52rem; margin:0 auto; padding:clamp(1.5rem,4vw,2.5rem) var(--gutter) 4rem; }
  .md__cabecera h1{ margin:0 0 .4rem; font-size:clamp(1.6rem,4vw,2.2rem);
    letter-spacing:-.02em; line-height:1.15; }
  .md__intro{ margin:0 0 .75rem; color:var(--body); max-width:42rem; }
  .md__volver{ color:var(--violet); font-size:.9rem; }

  .md__aviso{ margin:0 0 1.25rem; padding:.7rem 1rem; border-radius:var(--radius);
    border:1px solid var(--rule); font-size:.92rem; }
  .md__aviso--bien{ background:var(--aqua-soft); border-color:var(--aqua); color:#04322F; }
  .md__aviso--mal{ background:var(--wash); border-color:var(--rule-fuerte); color:var(--ink); }
  .md__aviso--aviso{ background:var(--violet-soft); border-color:var(--violet); color:var(--ink); }

  .md__fijo{ margin:0 0 1.5rem; padding:1rem 1.25rem; border:1px solid var(--rule);
    border-radius:var(--radius); background:var(--wash); }
  .md__fijo h2{ margin:0 0 .75rem; font-size:1rem; letter-spacing:-.01em; }
  .md__fijo dl{ display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
    gap:.6rem 1.5rem; margin:0; }
  .md__fijo dt{ font-size:.72rem; letter-spacing:.04em; text-transform:uppercase;
    color:var(--muted); }
  .md__fijo dd{ margin:.1rem 0 0; }
  .md__nota{ margin:.85rem 0 0; font-size:.82rem; color:var(--muted); line-height:1.5; }

  .md__seccion{ margin:0 0 .75rem; border:1px solid var(--rule);
    border-radius:var(--radius); background:var(--white); overflow:hidden; }
  .md__seccion > summary{ display:flex; align-items:center; justify-content:space-between;
    gap:1rem; padding:.9rem 1.25rem; cursor:pointer; list-style:none;
    font-variation-settings:"wght" 600; }
  .md__seccion > summary::-webkit-details-marker{ display:none; }
  /* El triángulo se dibuja aquí para que gire: el del navegador no se
     puede animar, y girarlo es la única señal de «esto se abre». */
  .md__seccion > summary::after{ content:""; width:8px; height:8px; flex:none;
    border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
    transform:rotate(45deg) translateY(-2px); transition:transform 160ms ease-out; }
  .md__seccion[open] > summary::after{ transform:rotate(225deg) translateY(-2px); }
  .md__seccion > summary:hover{ background:var(--wash); }
  .md__seccion > summary:focus-visible{ outline:2px solid var(--violet); outline-offset:-2px; }
  .md__seccion > *:not(summary){ padding:0 1.25rem; }
  .md__seccion > form{ padding:.5rem 1.25rem 1.25rem; }

  .md__pend{ flex:none; padding:.15rem .55rem; border-radius:999px;
    background:var(--violet-soft); color:var(--violet); font-size:.75rem;
    font-variation-settings:"wght" 600; }

  .md label{ display:block; margin:.85rem 0 .25rem; font-size:.85rem;
    color:var(--body); font-variation-settings:"wght" 600; }
  .md input[type=text], .md input[type=date], .md input[type=number],
  .md select, .md textarea{
    width:100%; padding:.55rem .7rem; border:1px solid var(--borde-campo);
    border-radius:10px; font:inherit; font-size:.92rem; background:var(--white);
    color:var(--ink); }
  .md input:focus-visible, .md select:focus-visible, .md textarea:focus-visible{
    outline:2px solid var(--violet); outline-offset:-1px; border-color:var(--violet); }
  .md textarea{ resize:vertical; }

  .md__fila{ display:grid; grid-template-columns:1fr 1fr; gap:0 1rem; }
  @media (max-width:34rem){ .md__fila{ grid-template-columns:1fr; } }

  .md__ayuda{ margin:.3rem 0 0; font-size:.8rem; color:var(--muted); line-height:1.5; }
  .md__oculto{ position:absolute; width:1px; height:1px; overflow:hidden;
    clip-path:inset(50%); white-space:nowrap; }

  .md__check{ display:flex; align-items:center; gap:.5rem; margin:.7rem 0 0;
    font-variation-settings:"wght" 400; }
  .md__check input{ width:auto; }

  .md__grupo{ margin:1rem 0 0; padding:.75rem 1rem; border:1px solid var(--rule);
    border-radius:10px; }
  .md__grupo legend{ padding:0 .4rem; font-size:.8rem; color:var(--muted);
    letter-spacing:.03em; text-transform:uppercase; }

  .md__guardar{ margin-top:1rem; padding:.55rem 1.4rem; border:0; border-radius:999px;
    background:var(--violet); color:var(--white); font:inherit; cursor:pointer;
    transition:transform 140ms ease-out; }
  .md__guardar:hover{ transform:translateY(-1px); }
  .md__guardar:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }

  .md__ficha{ margin:0 0 1rem; padding:1rem 1.15rem; border:1px solid var(--rule);
    border-radius:12px; background:var(--white); }
  .md__ficha--nueva{ background:var(--wash); border-style:dashed; }
  .md__ficha h3{ margin:0; font-size:.95rem; letter-spacing:-.01em; }
  .md__ficha form{ padding:0; }

  .md__origen{ margin:0 0 .5rem; padding:.4rem .7rem; border-radius:8px;
    background:var(--violet-soft); color:var(--violet); font-size:.8rem; }

  /* Eliminar es lo único irreversible de esta pantalla, y va en tono
     neutro con el texto que dice qué se elimina: el rojo se reserva y
     el color nunca es lo único que informa. */
  .md__borrar{ margin-top:.75rem; padding:0; }
  .md__borrar button{ border:1px solid var(--rule-fuerte); border-radius:999px;
    padding:.35rem 1rem; background:transparent; color:var(--body);
    font:inherit; font-size:.85rem; cursor:pointer; }
  .md__borrar button:hover{ border-color:var(--ink); color:var(--ink); }
  .md__borrar button:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }

  .md__lista{ margin:.5rem 0 1rem; padding:0; list-style:none; }
  .md__lista li{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
    padding:.5rem 0; border-bottom:1px solid var(--rule); }
  .md__linea{ display:flex; align-items:center; gap:.5rem; flex:1; flex-wrap:wrap;
    padding:0 !important; }
  .md__linea select, .md__linea input[type=number]{ width:auto; min-width:7rem; }
  .md__linea button{ border:1px solid var(--rule); border-radius:999px;
    padding:.35rem .9rem; background:var(--white); font:inherit; font-size:.85rem;
    cursor:pointer; }
  .md__nombre{ flex:1; min-width:8rem; font-variation-settings:"wght" 600; }
  .md__borrar--linea{ margin:0; }
  .md__vacio{ margin:.5rem 0 1rem; color:var(--muted); }

  /* ---------- lo que falta por llenar ---------- */
  /* Borde ámbar más la palabra «Falta». Las dos cosas, siempre: el borde
     se ve de un vistazo y la palabra la lee quien no distingue ese ámbar
     del gris de al lado. Un campo marcado solo por color es un campo sin
     marcar para bastante gente. */
  /* Los selectores van campo a campo y no `.md .md__falta` a secas: la
     regla de arriba es `.md input[type=text]`, que pesa más que una clase
     suelta y se quedaba con el borde gris. Se vio en una captura; ninguna
     aserción de HTML lo habría cazado. */
  .md input.md__falta, .md select.md__falta, .md textarea.md__falta,
  .md div.md__falta{ border-color:var(--ambar); background:var(--ambar-soft); }
  .md input.md__falta:focus-visible, .md select.md__falta:focus-visible,
  .md textarea.md__falta:focus-visible{ border-color:var(--violet); background:var(--white); }
  .md__marca{ display:inline-block; margin-left:.35rem; padding:.05rem .45rem;
    border-radius:999px; background:var(--ambar-soft); color:var(--ambar);
    font-size:.7rem; letter-spacing:.02em; text-transform:uppercase;
    font-variation-settings:"wght" 700; vertical-align:middle; }

  /* ---------- la cascada de ubigeo ---------- */
  .md__ubigeo{ margin:.85rem 0 0; padding:.75rem .85rem; border:1px solid var(--rule);
    border-radius:10px; background:var(--wash); }
  .md__eti{ display:block; font-size:.85rem; color:var(--body);
    font-variation-settings:"wght" 600; }
  .md__cascada{ display:grid; grid-template-columns:repeat(3, 1fr); gap:0 .75rem; }
  @media (max-width:40rem){ .md__cascada{ grid-template-columns:1fr; } }
  .md__cascada label{ margin:.55rem 0 .2rem; font-size:.78rem; color:var(--muted);
    font-variation-settings:"wght" 500; }
  .md__cascada select:disabled{ background:var(--wash); color:var(--muted);
    cursor:not-allowed; }
  /* Solo existen sin JavaScript: `ubigeo.js` borra el <noscript> entero. */
  .md__recargar{ margin-top:.4rem; padding:.3rem .8rem; border:1px solid var(--rule-fuerte);
    border-radius:999px; background:var(--white); color:var(--body); font:inherit;
    font-size:.8rem; cursor:pointer; }

  @media (prefers-reduced-motion: reduce){
    .md__seccion > summary::after, .md__guardar{ transition-duration:.01ms; }
    .md__guardar:hover{ transform:none; }
  }
  @media (prefers-contrast: more){
    .md__seccion, .md__ficha, .md input, .md select, .md textarea{ border-color:var(--ink); }
    .md__ayuda, .md__nota{ color:var(--body); }
    /* Con más contraste el fondo ámbar estorba; el borde grueso no. */
    .md input.md__falta, .md select.md__falta, .md textarea.md__falta,
    .md div.md__falta{ background:var(--white); border-width:2px; border-color:var(--ambar); }
    .md__marca{ background:var(--white); border:1px solid var(--ambar); }
  }

  .p-match{ display:block; margin-top:0.2rem; font-size:0.75rem; }

  /* El aviso de «hay N sin mapa vectorial». Va en tono neutro y no de
     alarma: no está roto, solo falta hacerlo, y el barrido lo haría solo
     igualmente. */
  .p-mapas{
    display:flex; align-items:center; justify-content:space-between;
    gap:1rem; flex-wrap:wrap;
    margin:1rem 0 0; padding:0.85rem 1.1rem;
    border:1px solid var(--rule); border-radius:10px; background:var(--wash);
  }
  .p-mapas p{ margin:0; font-size:0.88rem; color:var(--body); line-height:1.5; }
  .p-mapas form{ margin:0; flex:none; }

/* bd/75. Los publicados que la web no enseña. Reusa la caja de arriba y
   solo le cambia el borde a ámbar: es el mismo tipo de recado —algo que
   creías hecho y no lo está— y darle una caja propia multiplicaría los
   materiales para decir lo mismo. Sin botón dentro, así que no necesita
   el `space-between`: el texto ocupa la fila entera. */
  .av-vencidos{
    justify-content:flex-start;
    border-color:#F2DFB8; background:#FFFBF2;
  }
/* La misma noticia en el detalle del aviso abierto. Reusa `.aviso`, que
   ya tiene la caja y el espaciado; solo le pone el tono ámbar. */
  .av-d-vencido{ border-color:#F2DFB8; background:#FFFBF2; color:var(--body); }

@media (prefers-contrast: more){
  .av-vencidos{ border-width:2px; }
  .p-estado-expirado, .p-estado-hoy{ border-width:2px; }
}

/* ---------- el match de un aviso ---------- */
/* El número va discreto y las frases grandes, a propósito. Un puesto en
   una lista sin el porqué es una decisión que nadie puede revisar; aquí
   lo que manda visualmente es el motivo. Si alguien «simplifica» esto
   quitando las frases, lo que queda es un ranking opaco. */
  .m-lista{ list-style:none; margin:1.2rem 0 0; padding:0; counter-reset:none; }
  .m-fila{
    display:grid;
    grid-template-columns:2.5rem 1fr auto;
    grid-template-areas:"puesto quien marca" ". senales senales" ". discrepa discrepa";
    gap:0.2rem 0.9rem; align-items:start;
    padding:1rem 1.15rem; margin:0 0 0.6rem;
    border:1px solid var(--rule); border-radius:12px; background:var(--white);
  }
  .m-puesto{
    grid-area:puesto; font-size:1.05rem; color:var(--muted);
    font-variation-settings:"wght" 700; text-align:right; line-height:1.4;
  }
  .m-quien{ grid-area:quien; min-width:0; }
  .m-marca{ grid-area:marca; text-align:right; }
  .m-puntos{
    display:inline-block; padding:0.1rem 0.6rem; border-radius:999px;
    font-size:0.95rem; font-variation-settings:"wght" 700;
  }
  /* Tres tramos, y SIEMPRE con «de encaje» escrito al lado: el color por
     sí solo no dice nada a quien no lo distingue. */
  .m-alto { background:var(--aqua-soft);   color:var(--aqua-fuerte); }
  .m-medio{ background:var(--violet-soft); color:var(--violet); }
  .m-bajo { background:var(--ambar-soft);  color:var(--ambar); }
  .m-nada { background:var(--wash);        color:var(--muted); }
  .m-puntos-eti{ display:block; margin-top:0.15rem; font-size:0.7rem; color:var(--muted); }

  .m-senales{ grid-area:senales; list-style:none; margin:0.5rem 0 0; padding:0; }
  .m-senales li{
    font-size:0.86rem; color:var(--body); line-height:1.5; padding:0.1rem 0;
  }
  .m-senales li::before{ content:"· "; color:var(--muted); }
  /* Lo que el aviso NO pide se enseña igual, en gris. Esconderlo dejaría
     al reclutador sin saber que ese aviso no pide experiencia, que es
     información sobre el aviso y no sobre la persona. */
  .m-no-pide{ color:var(--muted) !important; font-style:italic; }

  .m-discrepa{
    grid-area:discrepa; margin:0.5rem 0 0; padding:0.45rem 0.7rem;
    border-radius:8px; background:var(--violet-soft); color:var(--ink);
    font-size:0.84rem;
  }
  .m-nota{
    margin:1.4rem 0 0; padding:0.9rem 1.1rem; border-radius:10px;
    background:var(--wash); color:var(--body); font-size:0.84rem; line-height:1.6;
  }
  .aviso-neutro{ background:var(--wash); color:var(--body); border:1px solid var(--rule); }

  @media (max-width:40rem){
    .m-fila{
      grid-template-columns:2.2rem 1fr;
      grid-template-areas:"puesto quien" ". marca" ". senales" ". discrepa";
    }
    .m-marca{ text-align:left; margin-top:0.4rem; }
    .m-puntos-eti{ display:inline; margin-left:0.35rem; }
  }
  @media (prefers-contrast: more){
    .m-fila{ border-color:var(--ink); }
    .m-puntos{ border:1px solid currentColor; }
  }

/* ---------- el menú de cuenta del candidato ---------- */
/* `<details>` como el menú móvil: se abre solo, se maneja con el teclado
   y no cuesta una línea de JavaScript. Un menú de cuenta montado con JS
   es un menú que no existe cuando el JS falla, y entonces no hay forma
   de cerrar sesión. */
  .cuenta{ position:relative; }
  .cuenta > summary{ display:flex; align-items:center; gap:.5rem; cursor:pointer;
    list-style:none; padding:.3rem .7rem .3rem .3rem; border:1px solid var(--rule);
    border-radius:999px; background:var(--white); }
  .cuenta > summary::-webkit-details-marker{ display:none; }
  .cuenta > summary::after{ content:""; width:6px; height:6px; flex:none;
    border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
    transform:rotate(45deg) translateY(-2px); transition:transform 160ms ease-out; }
  .cuenta[open] > summary::after{ transform:rotate(225deg) translateY(-1px); }
  .cuenta > summary:hover{ border-color:var(--violet); }
  .cuenta > summary:focus-visible{ outline:2px solid var(--violet); outline-offset:2px; }

  .cuenta-ini{ display:grid; place-items:center; width:28px; height:28px; flex:none;
    border-radius:50%; background:linear-gradient(135deg,var(--violet),var(--aqua));
    color:var(--white); font-size:.85rem; font-variation-settings:"wght" 600; }
  .cuenta-nombre{ max-width:9rem; overflow:hidden; text-overflow:ellipsis;
    white-space:nowrap; font-size:.9rem; }
  @media (max-width:40rem){ .cuenta-nombre{ display:none; } }

  .cuenta-panel{ position:absolute; right:0; top:calc(100% + .5rem); z-index:50;
    min-width:15rem; padding:.85rem 1rem; border:1px solid var(--rule);
    border-radius:var(--radius); background:var(--white);
    box-shadow:0 10px 32px -12px rgba(20,18,31,.3); }
  .cuenta-quien{ margin:0 0 .6rem; padding-bottom:.6rem;
    border-bottom:1px solid var(--rule); font-size:.8rem; line-height:1.4; }
  .cuenta-quien span{ display:block; color:var(--muted); }
  .cuenta-quien strong{ display:block; overflow:hidden; text-overflow:ellipsis; }
  /* Las entradas son de un menú, no del cuerpo de un texto: sin subrayado
     y con toda la fila sensible al ratón. El subrayado se reserva para
     los enlaces que van dentro de una frase, donde sí hace falta. */
  .cuenta-panel nav{ display:flex; flex-direction:column; margin:0 -.5rem; }
  .cuenta-panel nav a{ padding:.45rem .5rem; border-radius:8px; color:var(--ink);
    font-size:.9rem; text-decoration:none; }
  .cuenta-panel nav a:hover{ background:var(--wash); color:var(--violet); }
  .cuenta-panel nav a:focus-visible{ outline:2px solid var(--violet); outline-offset:-2px; }
  .cuenta-panel form{ margin-top:.5rem; padding-top:.6rem; border-top:1px solid var(--rule); }
  .cuenta-panel button{ width:100%; padding:.45rem 0; border:1px solid var(--rule);
    border-radius:999px; background:transparent; color:var(--body); font:inherit;
    font-size:.88rem; cursor:pointer; }
  .cuenta-panel button:hover{ border-color:var(--ink); color:var(--ink); }
  .cuenta-panel button:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }

  /* El aviso de «postulaciones por confirmar» (bd/73), al lado de la
     cuenta. Ámbar y no rojo: no es un error, es algo que espera una
     respuesta. 44 px de objetivo táctil, y el dibujo sale de la misma
     máscara que los botones (`--bi` de `.bi-campana`) sin heredar el
     margen de `.bi::before`. */
  .cuenta-alerta{ position:relative; display:grid; place-items:center; flex:none;
    width:44px; height:44px; border:1px solid var(--ambar); border-radius:50%;
    background:var(--ambar-soft); color:var(--ambar); text-decoration:none; }
  .cuenta-alerta::before{ content:""; width:20px; height:20px; background-color:currentColor;
    -webkit-mask:var(--bi) center / contain no-repeat; mask:var(--bi) center / contain no-repeat; }
  .cuenta-alerta:hover{ background:var(--white); }
  .cuenta-alerta:focus-visible{ outline:2px solid var(--ambar); outline-offset:2px; }
  .cuenta-alerta-n{ position:absolute; top:-4px; right:-4px; min-width:20px; height:20px;
    padding:0 5px; border-radius:999px; background:var(--ambar); color:var(--white);
    font-size:.72rem; line-height:20px; text-align:center; font-variation-settings:"wght" 700; }
  .cuenta-panel nav a.cuenta-panel-alerta{ color:var(--ambar); font-variation-settings:"wght" 600; }
  @media (forced-colors: active){
    .cuenta-alerta::before{ display:none; }
    .cuenta-alerta-n{ position:static; border:1px solid CanvasText; }
  }

  @media (prefers-reduced-motion: reduce){ .cuenta > summary::after{ transition-duration:.01ms; } }
  @media (prefers-contrast: more){ .cuenta-panel, .cuenta > summary{ border-color:var(--ink); } }

  /* ═══════════════════════════════════════════════════════════════
     QUÉ DICE SOFIA, EN LA FICHA

     El puntaje vivía en `/panel/avisos/{id}/match` y la decisión se toma
     en la ficha: el dato estaba en un sitio y la decisión en otro. Esto
     los junta.

     Mismo criterio de color que la lista del match, y por el mismo
     motivo: el verde se reserva a quien cubre TODAS las habilidades
     requeridas, y el color nunca va solo — siempre hay una frase al
     lado, porque un color no dice nada a quien no lo distingue.
     ═══════════════════════════════════════════════════════════════ */
  .f-ia-puntaje{
    display:flex; align-items:baseline; gap:0.5rem;
    padding:0.5rem 0.8rem; border-radius:var(--radius); margin:0.2rem 0 0.7rem;
  }
  .f-ia-puntaje b{ font-size:1.35rem; font-variation-settings:"wght" 700; }
  .f-ia-puntaje span{ font-size:0.82rem; }
  .f-ia-alto { background:var(--aqua-soft);   color:var(--aqua-fuerte); }
  .f-ia-medio{ background:var(--violet-soft); color:var(--violet); }
  .f-ia-bajo { background:var(--ambar-soft);  color:var(--ambar); }
  .f-ia-nulo { background:var(--wash);        color:var(--muted); }

  .f-ia-senales{ list-style:none; margin:0 0 0.9rem; padding:0; }
  .f-ia-senales li{
    font-size:0.88rem; color:var(--body); line-height:1.55; padding:0.12rem 0;
  }

  .f-lectura{
    border-top:1px solid var(--rule); padding-top:0.8rem; margin-top:0.2rem;
  }
  .f-lectura-cab{ display:flex; align-items:center; gap:0.6rem; margin:0 0 0.5rem; }
  .p-pastilla-encaja   { background:var(--aqua-soft);   color:var(--aqua-fuerte); }
  .p-pastilla-no_encaja{ background:var(--ambar-soft);  color:var(--ambar); }
  /* «Leído con requisitos anteriores»: lo calculado lleva dentro con qué
     se calculó, o miente. Se dice en pequeño y sin alarma — la lectura
     sigue siendo útil, solo que habla de una versión anterior del aviso. */
  .f-lectura-vieja{ font-size:0.75rem; color:var(--muted); }
  .f-lectura-resumen{ font-size:0.92rem; line-height:1.6; margin:0 0 0.7rem; }
  .f-lectura-h3{
    font-size:0.78rem; text-transform:uppercase; letter-spacing:0.04em;
    color:var(--muted); margin:0.7rem 0 0.3rem; font-variation-settings:"wght" 600;
  }
  .f-lectura-lista{ list-style:none; margin:0; padding:0; }
  .f-lectura-lista li{
    font-size:0.88rem; line-height:1.55; padding:0.25rem 0;
    border-bottom:1px solid var(--wash);
  }
  .f-lectura-lista li:last-child{ border-bottom:0; }
  /* La cita literal, que es lo que hace confiable todo lo demás: si no se
     puede citar, no se guarda. Se enseña distinta del texto del modelo
     para que se vea cuál es cuál. */
  .f-lectura-lista q{
    display:block; margin-top:0.2rem; padding-left:0.7rem;
    border-left:2px solid var(--violet-soft);
    color:var(--muted); font-style:normal; font-size:0.84rem;
  }
  .f-lectura-lista q::before, .f-lectura-lista q::after{ content:'"'; }
  .f-lectura-lista em{ color:var(--muted); font-size:0.82rem; }

  /* El botón arriba y su explicación debajo: en línea, el texto empujaba
     al botón contra el borde y las dos cosas se leían como una sola. */
  .f-ia-pedir{ margin-top:0.9rem; padding-top:0.8rem; border-top:1px solid var(--rule); }
  .f-ia-pedir .ayuda{ margin:0.4rem 0 0; }

  /* ═══════════════════════════════════════════════════════════════
     LO QUE NECESITA ATENCIÓN

     Ámbar y no rojo: nada de esto está roto, está esperando. Un tablero
     que enseña rojo cada mañana deja de leerse a la semana.

     Y cada línea es un enlace entero, no un número con un enlace al
     lado: el objetivo de pulsar tiene que ser grande, sobre todo en un
     móvil.
     ═══════════════════════════════════════════════════════════════ */
  .t-atencion{ border-left:3px solid var(--ambar); }
  .t-aten-lista{ list-style:none; margin:0; padding:0; }
  .t-aten-lista li + li{ border-top:1px solid var(--wash); }
  .t-aten-lista a{
    display:flex; align-items:baseline; gap:0.6rem;
    padding:0.55rem 0.2rem; text-decoration:none; color:var(--body);
    border-radius:6px;
  }
  .t-aten-lista a:hover{ background:var(--wash); }
  .t-aten-lista b{
    font-size:1.2rem; font-variation-settings:"wght" 700; color:var(--ambar);
    min-width:2.2rem; text-align:right;
  }
  .t-aten-lista span{ font-size:0.9rem; line-height:1.45; }

  /* ═══════════════════════════════════════════════════════════════
     ENTREVISTAS Y PRUEBAS

     `<details>` para agendar y para puntuar: la ficha ya es larga y esto
     casi siempre está cerrado. Es plegable nativo, sin una línea de
     JavaScript, que es lo único que admite `script-src 'self'`.
     ═══════════════════════════════════════════════════════════════ */
  .f-ev{
    border:1px solid var(--rule); border-radius:var(--radius);
    padding:0.8rem 0.9rem; margin:0 0 0.7rem;
  }
  .f-ev-cab{ display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; margin-bottom:0.3rem; }
  .f-ev-cab b{ font-size:0.98rem; }
  /* El número va discreto y a la derecha: es una ayuda, no el veredicto.
     El veredicto es la pastilla del resultado, que la escribe alguien. */
  .f-ev-num{ margin-left:auto; font-size:0.85rem; color:var(--muted); }
  .f-ev-num small{ font-size:0.75rem; }
  .f-ev-datos{ font-size:0.85rem; color:var(--muted); margin:0 0 0.4rem; line-height:1.5; }
  .f-ev-coment{
    font-size:0.88rem; line-height:1.55; margin:0.4rem 0;
    padding-left:0.7rem; border-left:2px solid var(--wash);
  }
  .p-pastilla-programada{ background:var(--violet-soft); color:var(--violet); }
  .p-pastilla-realizada { background:var(--wash);        color:var(--muted); }
  .p-pastilla-cancelada,
  .p-pastilla-no_asistio{ background:var(--wash);        color:var(--muted); }
  .p-pastilla-aprobado  { background:var(--aqua-soft);   color:var(--aqua-fuerte); }
  .p-pastilla-observado { background:var(--ambar-soft);  color:var(--ambar); }
  .p-pastilla-no_aprobado{ background:var(--rosa-soft);  color:var(--rosa); }

  .f-ev-score, .f-ev-cerrar, .f-ev-nueva{ margin-top:0.5rem; }
  .f-ev-score > summary, .f-ev-cerrar > summary, .f-ev-nueva > summary{
    cursor:pointer; font-size:0.86rem; color:var(--violet);
    font-variation-settings:"wght" 600; padding:0.2rem 0;
  }
  .f-ev-crit{
    display:grid; grid-template-columns:1fr 6rem; gap:0.6rem;
    align-items:center; padding:0.3rem 0; border-bottom:1px solid var(--wash);
  }
  .f-ev-crit:last-of-type{ border-bottom:0; }
  .f-ev-crit label{ font-size:0.88rem; margin:0; }
  .f-ev-crit small{ color:var(--muted); font-size:0.75rem; }
  .f-ev-equipo{ display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:0.3rem; }
  .f-ev-nueva{
    border-top:1px solid var(--rule); padding-top:0.7rem; margin-top:0.9rem;
  }

  /* ==================================================================
     SOLICITUDES DE EMPRESA · el embudo comercial del operador

     Cada solicitud es un `<details>`: con veinte en la lista, abrir las
     veinte a la vez sería una pantalla de tres metros. Las nuevas
     nacen abiertas, que son las que piden algo.

     Prefijo `sol-` porque `p-` ya lo usan el resto de pantallas del
     panel y dos clases parecidas del mismo prefijo ya se pisaron dos
     veces (`.p-lado` y `.p-ficha`, en el diario).
     ================================================================== */

  .p-pastilla.on{ background:var(--violet); color:var(--white); }
  .p-pastilla-nueva     { background:var(--ambar-soft);  color:var(--ambar); }
  .p-pastilla-contactada{ background:var(--violet-soft); color:var(--violet); }
  .p-pastilla-cliente   { background:var(--aqua-soft);   color:var(--aqua-fuerte); }
  .p-pastilla-descartada{ background:var(--wash);        color:var(--muted); }

  /* Los filtros son enlaces, no campos: `.p-filtros` está escrito para
     un formulario, así que esta lista lleva la suya. */
  nav.p-filtros{
    display:flex; flex-wrap:wrap; gap:0.4rem; margin:0 0 1rem;
    background:none; border:0; padding:0;
  }
  nav.p-filtros a{ text-decoration:none; }

  details.sol{ margin-bottom:0.7rem; padding:0; }
  .sol-cab{
    display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap;
    padding:0.9rem 1.1rem; cursor:pointer; list-style:none;
  }
  .sol-cab::-webkit-details-marker{ display:none; }
  .sol-cab::before{
    content:""; flex:none; width:7px; height:7px; border-right:2px solid var(--muted);
    border-bottom:2px solid var(--muted); transform:rotate(-45deg);
    transition:transform .15s;
  }
  details.sol[open] .sol-cab::before{ transform:rotate(45deg) translateY(-2px); }
  .sol-cab:focus-visible{ outline:2px solid var(--violet); outline-offset:-2px; }
  .sol-nombre{ font-variation-settings:"wght" 700; min-width:0; overflow-wrap:anywhere; }
  .sol-plan{ font-size:0.8rem; color:var(--muted); }
  .sol-dias{ margin-left:auto; font-size:0.78rem; color:var(--muted); white-space:nowrap; }
  .sol-dias-tarde{ color:var(--ambar); font-variation-settings:"wght" 700; }

  .sol-cuerpo{ padding:0 1.1rem 1.1rem; border-top:1px solid var(--rule); }
  .sol-cuerpo .p-datos{ margin-top:0.9rem; }
  .sol-h3{ margin:0 0 0.2rem; font-size:0.95rem; }

  .sol-convertir, .sol-atender{
    margin-top:1rem; padding-top:0.9rem; border-top:1px solid var(--rule);
  }
  .sol-convertir .fila{ display:flex; gap:0.9rem; flex-wrap:wrap; }
  .sol-convertir .fila .campo{ flex:1 1 14rem; min-width:0; }
  .sol-convertir .fila .campo-corto{ flex:0 1 10rem; }
  .sol-acciones{ display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap; }
  .sol-plan-form{
    display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap;
    margin-top:0.9rem; padding-top:0.9rem; border-top:1px solid var(--rule);
  }
  .sol-plan-form label{ font-size:0.85rem; color:var(--body); }

  @media (max-width:640px){
    .sol-dias{ margin-left:0; width:100%; }
  }

  /* ---- el tope del plan, en el listado de avisos ---- */
  .av-plan{
    display:flex; gap:0.5rem; align-items:baseline; flex-wrap:wrap;
    font-size:0.85rem; color:var(--muted); margin:0 0 1rem;
  }
  .av-plan b{ color:var(--ink); }
  .av-plan-poco{ color:var(--ambar); }

  /* Reenviar y revocar, uno al lado del otro. Sin esto el segundo
     formulario cae debajo y la fila de la invitación mide el doble. */
  .eq-inv-acciones{ display:flex; gap:0.4rem; flex-wrap:wrap; }

  /* ==================================================================
     LA REJILLA DE DOS COLUMNAS  ·  lista + ficha
     ==================================================================
     Lista a la izquierda, ficha de lectura a la derecha. Lo elegido
     viaja en la URL, así que esto es maquetación y nada más: no hay un
     solo byte de JavaScript detrás.

     LA USAN DOS PANTALLAS: `/panel/avisos` (bd/64) y la bandeja de
     postulaciones (bd/66). Nació con prefijo `av-` y se generalizó al
     llegar la segunda — duplicarla bajo otro prefijo habría dejado dos
     rejillas que se separan en cuanto alguien arregle una.

     Lo que SÍ es de cada pantalla son los contenidos: `av-d-*` es la
     ficha de un aviso, `po-d-*` la de una postulación. Lo compartido es
     el armazón: la rejilla, la tarjeta y el panel de la derecha.

     Cuidado con los nombres cortos en `p-`: `.p-lado` y `.p-ficha` ya
     se pisaron con otras pantallas, las dos veces están en el diario.
     ================================================================== */

  .p-dos{
    display:grid;
    /* La lista manda sobre la ficha: es donde se busca. `minmax(0,…)`
       en las dos para que un título largo no estire la rejilla. */
    grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    gap:1.4rem;
    align-items:start;
  }

  /* ---- las tarjetas ---- */

  .p-tarjetas{ list-style:none; margin:0; padding:0; }
  .p-tarjetas > li + li{ margin-top:0.5rem; }

  .p-tarjeta{
    display:grid; gap:0.35rem;
    padding:0.85rem 1rem;
    background:var(--white);
    border:1px solid var(--rule); border-radius:var(--radius);
    text-decoration:none; color:var(--body);
    /* Solo `transform` y `opacity` se animan; `border-color` no mueve
       nada de la maquetación, así que entra sin coste. */
    transition:border-color .15s ease-out, transform .15s ease-out;
  }
  .p-tarjeta:hover{ border-color:var(--violet); transform:translateY(-1px); }
  .p-tarjeta:focus-visible{ outline:2px solid var(--violet); outline-offset:2px; }

  /* El abierto. La barra violeta a la izquierda es lo que se ve de un
     golpe; el fondo y el borde solos no distinguen lo suficiente
     cuando hay veinte tarjetas iguales. Y no es solo color: la tarjeta
     abierta lleva `aria-current`. */
  .p-tarjeta-on{
    border-color:var(--violet);
    background:var(--violet-soft);
    box-shadow:inset 3px 0 0 var(--violet);
  }

  .p-t-cab{ display:flex; gap:0.6rem; align-items:flex-start; justify-content:space-between; }
  .p-t-titulo{
    color:var(--ink); font-variation-settings:"wght" 600;
    /* Más grande = más apretado. */
    font-size:0.98rem; line-height:1.25; letter-spacing:-0.01em;
    min-width:0; overflow-wrap:anywhere;
  }
  .p-t-sub{ font-size:0.8rem; color:var(--muted); }
  .p-t-sub .p-codigo{ margin-left:0; margin-right:0.35rem; }

  .p-t-pie{
    display:flex; gap:0.7rem; align-items:baseline; flex-wrap:wrap;
    font-size:0.8rem; color:var(--muted);
  }
  .p-t-dato b{ color:var(--ink); font-variation-settings:"wght" 700; }
  /* `p-nuevas` es `display:block` en la tabla; aquí va en la misma fila. */
  .p-t-pie .p-nuevas{ display:inline; }
  .p-t-fecha{ margin-left:auto; white-space:nowrap; }

  /* ---- la ficha de lectura ---- */

  .p-dos-det{
    background:var(--white);
    border:1px solid var(--rule); border-radius:var(--radius);
    padding:1.2rem 1.3rem;
    /* Se queda a la vista mientras se recorre la lista. El `max-height`
       con `overflow` propio evita que una ficha larga obligue a
       desplazar la página entera para volver a la lista. */
    position:sticky; top:1rem;
    max-height:calc(100vh - 2rem); overflow-y:auto;
  }

  /* La cabecera se queda arriba mientras la ficha se desplaza por
     dentro: las acciones son lo que se viene a pulsar y estaban al pie,
     a dos pantallas de distancia en un aviso con texto largo.

     Fondo semitransparente con desenfoque, como todo lo que flota sobre
     contenido en este panel, y color sólido de reserva donde no haya
     `backdrop-filter` o donde la persona haya pedido menos
     transparencia. */
  .p-dos-cab{
    position:sticky; top:0; z-index:1;
    margin:-1.2rem -1.3rem 1rem; padding:1.2rem 1.3rem 0.8rem;
    background:var(--white);
    border-bottom:1px solid var(--rule);
  }
  @supports (backdrop-filter: blur(10px)){
    .p-dos-cab{ background:rgba(255,255,255,0.93); backdrop-filter:blur(12px); }
  }
  @media (prefers-reduced-transparency: reduce){
    .p-dos-cab{ background:var(--white); backdrop-filter:none; }
  }

  /* El estado a la izquierda y las acciones a la derecha, en la misma
     línea: así la fila de arriba dice en qué estado está y qué se puede
     hacer con él, que son la misma pregunta. */
  /* Solo en el teléfono: en pantallas anchas la lista está al lado y un
     «volver» a algo que no te has ido es ruido. */
  /* «← Volver a la lista». Se llamaba `av-d-volver` y era de la ficha de
     un aviso; desde el bd/67 lo usan las tres previas, así que vive en
     el armazón compartido. Lo necesita cualquier pantalla que esconda
     la lista en el móvil: sin él se entra en la previa y no hay salida. */
  .p-dos-volver{ display:none; margin:0 0 0.6rem; font-size:0.84rem; }
  .p-dos-volver a{ color:var(--violet); text-decoration:none; }
  .p-dos-volver a:hover{ text-decoration:underline; }

  .p-dos-cab-fila{
    display:flex; gap:0.5rem; align-items:center; justify-content:space-between;
    flex-wrap:wrap; margin-bottom:0.5rem;
  }
  .p-dos-titulo{
    margin:0.4rem 0 0; font-size:1.25rem; line-height:1.2;
    letter-spacing:-0.015em; color:var(--ink);
    overflow-wrap:anywhere;
  }
  .av-d-codigo{ margin:0.3rem 0 0; }
  .av-d-codigo .p-codigo{ margin-left:0; }

  /* bd/87 · EL PUESTO Y SUS BANDERAS, EN LA MISMA LÍNEA.
     El título manda: `flex:1` con un mínimo, así que cuando no hay sitio
     las banderas bajan enteras a su propio renglón en vez de estrujar el
     puesto a dos caracteres por línea. `align-items:baseline` para que
     las pastillas se apoyen en la línea del título y no floten. */
  .av-d-cabecera{
    display:flex; flex-wrap:wrap; gap:0.5rem 0.8rem; align-items:baseline;
  }
  .av-d-cabecera .p-dos-titulo{ flex:1 1 10rem; min-width:0; }
  /* El cliente, en el renglón del código: es un valor, no una bandera. */
  .av-d-codigo{ display:flex; flex-wrap:wrap; align-items:center; gap:0.4rem; }
  /* Las tres banderas en UNA LÍNEA, a la derecha del puesto: el nombre
     del cliente y tres casillas que están siempre, marcadas o no.

     La casilla no es un carácter de una fuente: es un cuadro dibujado
     con `::before` y el ✓ dentro, transparente cuando está apagada. Así
     ocupa exactamente lo mismo en los dos estados y la línea no se
     mueve al marcar una — con un ✓ que aparece y desaparece, las tres
     etiquetas bailan. */
  .av-d-banderas{
    display:flex; flex-wrap:wrap; align-items:center;
    gap:0.3rem 0.9rem; margin:0;
    font-size:0.82rem; color:var(--body);
    /* Que NO se estire: en la cabecera manda el título, y este bloque
       solo ocupa lo que miden sus tres casillas. Sin esto, con
       `flex-wrap` en el padre, se llevaba el hueco sobrante y bajaba de
       línea antes de hacer falta. */
    flex:0 0 auto;
  }
  .av-chk{ display:inline-flex; align-items:center; gap:0.38rem; white-space:nowrap; }
  .av-chk::before{
    content:"✓";
    display:inline-flex; align-items:center; justify-content:center;
    width:1.05em; height:1.05em; flex:none;
    border:1px solid var(--rule-fuerte); border-radius:5px;
    background:var(--white); color:transparent;
    font-size:0.86em; line-height:1;
  }
  .av-chk.on{ color:var(--ink); font-variation-settings:"wght" 600; }
  .av-chk.on::before{
    background:var(--violet); border-color:var(--violet); color:var(--white);
  }
  @media (prefers-contrast: more){
    .av-chk::before{ border-width:2px; }
  }
  /* Una sola forma para las cuatro: lo que las distingue es el color, no
     el tamaño ni el borde. Cuatro formas distintas en la misma línea se
     leen como cuatro cosas de distinta importancia, y no lo son. */
  .av-f{
    display:inline-block; padding:0.1rem 0.45rem;
    border-radius:999px; font-size:0.72rem; line-height:1.5;
    font-variation-settings:"wght" 620; white-space:nowrap;
    max-width:14rem; overflow:hidden; text-overflow:ellipsis;
  }
  .av-f-dest{ background:var(--ambar-soft); color:var(--ambar); }
  .av-f-cli{ background:var(--aqua-soft); color:var(--aqua-fuerte); }
  /* El «cliente oculto» va en gris a propósito: no es una advertencia,
     es una propiedad del aviso. En ámbar competiría con «Destacado», que
     está al lado y sí llama. */
  .av-f-confid{ background:var(--wash); color:var(--muted); border:1px solid var(--rule); }
  .av-f-disc{ background:var(--violet-soft); color:var(--violet); }


  /* Las cifras. Interlineado apretado porque el número es grande. */
  /* Sin líneas propias: arriba ya cierra la cabecera pegada y abajo
     abre el primer bloque. Con las suyas salían dos rayas con un hueco
     en medio y una banda vacía que parecía un trozo sin cargar. */
  /* bd/87. El `0.2rem` de arriba dejaba los dos números pegados a la
     línea anterior: con un número de 1.6rem encima de una raya, dos
     décimas no son un hueco, son un error de alineación. Sube a
     `1.1rem`, que es lo que hace falta para que se lean como un bloque
     propio y no como la última línea del de arriba. Abajo no cambia:
     ahí ya abría el siguiente bloque. */
  .av-d-cifras{
    display:flex; gap:1.6rem; flex-wrap:wrap;
    padding:1.1rem 0 0.9rem;
  }
  .av-d-cifra{ display:grid; }
  .av-d-n{
    font-size:1.6rem; line-height:1.1; letter-spacing:-0.02em;
    color:var(--ink); font-variation-settings:"wght" 700;
  }
  .av-d-que{ font-size:0.78rem; color:var(--muted); letter-spacing:0.02em; }
  .av-d-cifra-ojo .av-d-n{ color:var(--violet); }

/* doc 70. La cifra que lleva a su gente. Es un enlace, así que tiene
   que verse que lo es sin gritar: subrayado solo al pasar por encima,
   el objetivo de pulsar grande —toda la caja, número y palabra— y su
   propio `:focus-visible`, que sin él un enlace sin borde no se sabe
   dónde está con el teclado. */
  a.av-d-cifra-ir{
    text-decoration:none; color:inherit;
    margin:-0.3rem -0.5rem; padding:0.3rem 0.5rem; border-radius:8px;
    transition:background-color 140ms ease-out;
  }
  a.av-d-cifra-ir:hover{ background:var(--wash); }
  a.av-d-cifra-ir:hover .av-d-que{ color:var(--violet); text-decoration:underline; }
  a.av-d-cifra-ir:focus-visible{ outline:2px solid var(--violet); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  a.av-d-cifra-ir{ transition-duration:0.01ms; }
}

  .av-d-ir{ display:flex; gap:1rem; flex-wrap:wrap; margin:0.8rem 0 0; font-size:0.86rem; }
  .av-d-ir a{ color:var(--violet); }

  .av-d-bloque{ margin-top:1.4rem; padding-top:1.1rem; border-top:1px solid var(--rule); }
  .av-d-bloque h3{
    margin:0 0 0.6rem; font-size:0.76rem; color:var(--muted);
    text-transform:uppercase; letter-spacing:0.05em;
    font-variation-settings:"wght" 600;
  }

  /* El reparto por etapa. La barra es decorativa —lleva `aria-hidden`—
     y el número va primero, porque es el dato. */
  .av-d-etapas{ list-style:none; margin:0; padding:0; display:grid; gap:0.45rem; }
  .av-d-etapas li{
    /* El nombre ocupa lo que necesita y la barra se queda con el resto:
       al revés, el nombre estiraba hasta el final y la barra quedaba
       descolgada en la esquina, lejos del número que explica. */
    display:grid; grid-template-columns:2.2rem auto minmax(3rem,1fr);
    gap:0.5rem; align-items:center; font-size:0.86rem;
  }
  .av-d-et-n{ text-align:right; color:var(--ink); font-variation-settings:"wght" 700; }
  .av-d-et-nombre{ color:var(--body); overflow-wrap:anywhere; }
  .av-d-barra{ height:6px; background:var(--wash); border-radius:999px; overflow:hidden; }
  .av-d-barra > span{ display:block; height:100%; background:var(--violet); border-radius:999px; }

  .av-d-dl{
    display:grid; grid-template-columns:auto minmax(0,1fr);
    gap:0.3rem 0.9rem; margin:0; font-size:0.86rem;
  }
  .av-d-dl dt{ color:var(--muted); }
  .av-d-dl dd{ margin:0; color:var(--body); overflow-wrap:anywhere; }

  .av-d-pista{ margin:0.6rem 0 0; font-size:0.78rem; color:var(--muted); }

  .av-d-pastillas{ list-style:none; display:flex; flex-wrap:wrap; gap:0.35rem; margin:0 0 0.2rem; padding:0; }
  .av-d-pastilla{
    padding:0.2rem 0.55rem; border-radius:999px;
    background:var(--wash); border:1px solid var(--rule);
    font-size:0.78rem; color:var(--body);
  }
  .av-d-pastilla-si{
    background:var(--violet-soft); border-color:#BFD3FF; color:var(--violet);
    font-variation-settings:"wght" 600;
  }
  .av-d-pastilla-nota{ opacity:0.7; }

/* El texto del aviso, que desde el doc 69 va PRIMERO. Un poco de aire
   debajo para separarlo de los bloques de datos que ahora vienen
   después. */
  .av-d-texto{ margin-top:0.7rem; }
  .av-d-texto[open] + .av-d-texto{ margin-top:0.5rem; }
  .av-d-texto:last-of-type{ margin-bottom:0.9rem; }
/* Y las fechas, al final y algo más discretas: son el contexto, no la
   respuesta. */
  .av-d-fechas h3{ color:var(--muted); }
  .av-d-texto summary{
    cursor:pointer; font-size:0.86rem; color:var(--violet);
    font-variation-settings:"wght" 600;
  }
  .av-d-texto summary:focus-visible{ outline:2px solid var(--violet); outline-offset:2px; }
  .av-d-texto p{ margin:0.5rem 0 0; font-size:0.86rem; color:var(--body); overflow-wrap:anywhere; }


  .p-dos-vacio{ color:var(--muted); font-size:0.88rem; }
  .p-dos-vacio strong{ color:var(--ink); }

  /* ---- una sola columna ---- */

  @media (max-width:1100px){
    .p-dos{ grid-template-columns:1fr; }
    .p-dos-det{ position:static; max-height:none; }
    /* La ficha que NADIE pidió no se enseña cuando las columnas se
       apilan: abrir la pantalla y encontrarse una ficha entera por
       delante de la lista es empezar por el final. Si la persona pulsa
       una tarjeta, el enlace lleva `?aviso=` y entonces sí sale. */
    .p-dos-det-auto{ display:none; }
  }

  /* ---- el teléfono: o la lista, o la ficha ----
     Apilarlas no sirve: con la ficha debajo, tocar una tarjeta te deja
     mirando las demás y hay que bajar veinte para ver lo que acabas de
     pulsar. Así que al abrir un aviso se enseña LA FICHA Y NO LA LISTA,
     como cualquier maestro-detalle de móvil, y se vuelve con un enlace
     que quita `aviso` de la URL.

     Solo por debajo de 700px. En una tableta de 1000px las columnas ya
     están apiladas pero la lista sigue cabiendo entera, y esconderla
     sería quitar algo que se ve bien. */
  @media (max-width:700px){
    /* La lista, sus filtros y el botón de generar mapas son todos del
       listado: con la ficha abierta no pintan nada, y dejarlos encima
       obliga a pasar media pantalla antes de leer lo que se pulsó. */
    .p-con-ficha .p-dos-lista,
    .p-con-ficha .p-filtros,
    .p-con-ficha .p-mapas{ display:none; }
    .p-dos-volver{ display:block; }
  }

  @media (prefers-reduced-motion: reduce){
    .p-tarjeta{ transition-duration:0.01ms; }
    .p-tarjeta:hover{ transform:none; }
  }

  @media (prefers-contrast: more){
    .p-tarjeta, .p-dos-det{ border-color:var(--body); }
    .p-tarjeta-on{ box-shadow:inset 4px 0 0 var(--violet); }
    .av-d-barra{ border:1px solid var(--body); }
    .av-d-que, .av-d-dl dt, .av-d-pista{ color:var(--body); }
  }

  /* ==================================================================
     LA BARRA DE ACCIONES DE LA FICHA
     ==================================================================
     Icono + palabra, pequeño. La fila de iconos sueltos (`p-iconos`)
     sigue existiendo para listas apretadas; esto es para una cabecera,
     donde cabe decir qué hace cada botón en vez de esconderlo en un
     `title` que solo aparece al pasar el ratón —y que en una pantalla
     táctil no aparece nunca—.

     EL COLOR ES EL DEL ESTADO QUE PRODUCE LA ACCIÓN, no un adorno:
     «Publicar» lleva el verde de la pastilla `publicado`, «Pausar» el
     ámbar de `pausado`, «Cerrar» el gris de `cerrado`. Los tonos salen
     de `.p-estado-*`, que ya estaban.

     Y el rojo se queda para lo único que no se deshace. Si publicar y
     pausar fueran llamativos, el rojo de «Eliminar» dejaría de decir
     «cuidado» para decir «otro botón más».
     ================================================================== */

  .p-accs{ display:flex; gap:0.3rem; flex-wrap:wrap; align-items:center; }

  .p-acc{
    display:inline-flex; align-items:center; gap:0.3rem;
    padding:0.28rem 0.55rem;
    font-size:0.76rem; letter-spacing:0.01em;
    font-variation-settings:"wght" 600;
    background:var(--white); color:var(--body);
    border:1px solid var(--rule); border-radius:8px;
    text-decoration:none; cursor:pointer; white-space:nowrap;
    transition:background 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out;
  }
  .p-acc svg{ flex:none; }
  .p-acc:focus-visible{ outline:2px solid var(--violet); outline-offset:2px; }

  /* Editar: la principal, en el violeta de la marca. */
  .p-acc-principal{ color:var(--violet); border-color:#CCDCFF; background:var(--violet-soft); }
  .p-acc-principal:hover{ background:var(--violet); color:var(--white); border-color:var(--violet); }

  /* Los tres que cambian de estado, con el color de su destino. */
  .p-acc-publicar{ color:#0B6B3A; border-color:#BFE6CF; }
  .p-acc-publicar:hover{ background:#E3F6EC; }
  .p-acc-pausar{ color:#8A5A00; border-color:#F2DFB8; }
  .p-acc-pausar:hover{ background:#FFF4E0; }
  .p-acc-cerrar{ color:var(--muted); }
  .p-acc-cerrar:hover{ background:var(--wash); color:var(--body); }

  /* Duplicar no cambia este aviso: crea otro. Neutro. */
  .p-acc-neutro{ color:var(--body); }
  .p-acc-neutro:hover{ background:var(--wash); }

  /* Lo único que no se deshace. */
  .p-acc-peligro{ color:#B3261E; border-color:#F3C9C5; }
  .p-acc-peligro:hover{ background:#FDECEA; }

  @media (prefers-reduced-motion: reduce){
    .p-acc{ transition-duration:0.01ms; }
  }
  @media (prefers-contrast: more){
    /* El color solo no distingue nada aquí: la palabra ya está al lado,
       y los bordes se marcan para que los botones no se fundan. */
    .p-acc{ border-color:var(--body); }
    .p-acc-peligro{ border-color:#B3261E; }
  }

  /* En pantallas estrechas la barra no cabe junto a la pastilla de
     estado: pasa a su propia línea, a la izquierda, en vez de partirse
     en dos botones arriba y tres abajo. */
  @media (max-width:560px){
    .p-dos-cab-fila{ justify-content:flex-start; }
    .p-dos-cab-fila .p-accs{ width:100%; }
  }

  /* ---- la etiqueta de proceso (bd/65) ----
     Un rótulo discreto: agrupa, no es el título. En la tarjeta va como
     texto —la tarjeta entera ya es un enlace— y en la ficha como enlace
     que filtra por ese proceso. Los dos se ven igual salvo el subrayado
     al pasar por encima, porque son la misma cosa. */

  .av-t-proceso, .av-d-proceso{
    display:inline-block; padding:0.1rem 0.45rem;
    /* `justify-self` porque la tarjeta es una rejilla: sin esto el
       rótulo se estira de lado a lado y parece una banda, no una
       etiqueta. */
    justify-self:start;
    background:var(--aqua-soft); color:var(--aqua-fuerte);
    border-radius:5px; font-size:0.74rem;
    max-width:100%; overflow-wrap:anywhere;
  }
  .av-d-proceso{ text-decoration:none; }
  .av-d-proceso:hover{ text-decoration:underline; }
  .av-d-proceso:focus-visible{ outline:2px solid var(--violet); outline-offset:2px; }

  /* bd/83 · DE QUIÉN ES EL AVISO.

     En la tarjeta, un renglón discreto: es contexto para repartir, no
     el dato principal —el dato principal es el puesto y en qué va—. Lo
     tuyo se marca con un punto a la izquierda y no con color de fondo:
     en una lista de veinte tarjetas, veinte fondos de color compiten
     con el estado, que sí es información de primer orden. El punto se
     encuentra de un barrido vertical y no grita. */
  .av-t-resp{
    justify-self:start;
    font-size:0.74rem; color:var(--muted);
    max-width:100%; overflow-wrap:anywhere;
  }
  .av-t-resp.av-t-mio{ color:var(--violet); font-weight:600; }
  .av-t-resp.av-t-mio::before{
    content:"";
    display:inline-block; width:0.4rem; height:0.4rem;
    margin-right:0.3rem; vertical-align:0.08rem;
    background:var(--violet); border-radius:50%;
  }

  /* En la ficha, con sus dos enlaces. */
  .av-d-resp{
    margin:0.2rem 0 0; font-size:0.8rem; color:var(--muted);
    display:flex; flex-wrap:wrap; gap:0.25rem 0.4rem; align-items:baseline;
  }
  .av-d-resp a{ color:var(--violet); text-decoration:none; }
  .av-d-resp a:hover{ text-decoration:underline; }
  .av-d-resp a:focus-visible{ outline:2px solid var(--violet); outline-offset:2px; }

  /* Sin responsable es un hueco que hay que llenar, no un error: ámbar,
     no rojo. Rojo diría que algo está roto, y lo que pasa es que falta
     decidir algo. */
  .av-d-sinresp{
    padding:0.1rem 0.45rem; border-radius:5px;
    background:var(--ambar-soft); color:var(--ambar);
    font-weight:600;
  }

  /* Por qué no están los botones de editar. Tiene que leerse como una
     explicación y no como una negativa, así que va en gris y en la
     misma línea, no como un aviso aparte. */
  .av-d-nopuede{ color:var(--muted); font-style:italic; }

  /* El aviso de que hay un filtro por proceso puesto. Va fuera de la
     barra porque ese filtro no tiene control propio: se llega pulsando
     la etiqueta en la ficha, y si no se dijera, la lista parecería
     incompleta sin motivo. */
  .p-filtro-puesto{
    display:flex; gap:0.6rem; align-items:baseline; flex-wrap:wrap;
    margin:0 0 1rem; font-size:0.86rem; color:var(--muted);
  }
  .p-filtro-puesto b{ color:var(--ink); }
  .p-filtro-puesto a{ color:var(--violet); }

  @media (prefers-contrast: more){
    .av-t-proceso, .av-d-proceso{ border:1px solid var(--aqua-fuerte); }
  }

  /* ==================================================================
     LA VISTA PREVIA DE LA BANDEJA  (bd/66)
     ==================================================================
     El armazón —la rejilla, la tarjeta, la cabecera pegada— es el
     compartido de arriba. Esto es solo el contenido, con prefijo `po-`
     igual que `av-d-` es el de la ficha de un aviso.
     ================================================================== */

  .po-d-cifras{
    display:flex; gap:1.6rem; flex-wrap:wrap;
    padding:0.2rem 0 0.9rem;
  }
  .po-d-cifra{ display:grid; }
  .po-d-n{
    font-size:1.5rem; line-height:1.1; letter-spacing:-0.02em;
    color:var(--ink); font-variation-settings:"wght" 700;
  }
  .po-d-que{ font-size:0.78rem; color:var(--muted); letter-spacing:0.02em; }

  /* Lo que hace perder el tiempo si se descubre tarde: ficha a medias o
     sin consentimiento. Ámbar, que en este panel significa «esto falta»
     — ni violeta, que es el acento de todo, ni rojo, que diría que
     alguien se equivocó. */
  .po-d-ojo{
    margin:0 0 0.2rem; padding:0.7rem 0.85rem;
    background:var(--ambar-soft); border-radius:10px;
    font-size:0.82rem; color:var(--body);
  }
  .po-d-ojo p{ margin:0; }
  .po-d-ojo p + p{ margin-top:0.45rem; }
  .po-d-ojo strong{ color:var(--ambar); }

  .po-d-bloque{ margin-top:1.3rem; padding-top:1rem; border-top:1px solid var(--rule); }
  .po-d-bloque h3{
    margin:0 0 0.6rem; font-size:0.76rem; color:var(--muted);
    text-transform:uppercase; letter-spacing:0.05em;
    font-variation-settings:"wght" 600;
  }

  .po-d-dl{
    display:grid; grid-template-columns:auto minmax(0,1fr);
    gap:0.3rem 0.9rem; margin:0; font-size:0.86rem;
  }
  .po-d-dl dt{ color:var(--muted); }
  .po-d-dl dd{ margin:0; color:var(--body); overflow-wrap:anywhere; }

  .po-d-texto{ margin:0; font-size:0.86rem; color:var(--body); overflow-wrap:anywhere; }
  .po-d-pista{ margin:0.5rem 0 0; font-size:0.78rem; color:var(--muted); }
  .po-d-pista a{ color:var(--violet); }
  /* La línea que dice qué NO está en la previa. Separada del resto: es
     una nota sobre la pantalla, no un dato de la persona. */
  .po-d-cierre{
    margin-top:1.3rem; padding-top:0.9rem; border-top:1px solid var(--rule);
  }

  /* El punto de «sin revisar», ahora dentro del título de la tarjeta. */
  .p-t-titulo .p-punto{ margin-right:0.35rem; vertical-align:middle; }

  /* La pastilla de ficha incompleta, como elemento propio de la rejilla
     de la tarjeta: sin esto se estira de lado a lado. */
  .p-tarjeta .p-ficha{ justify-self:start; margin:0; }

  @media (prefers-contrast: more){
    .po-d-ojo{ border:1px solid var(--ambar); }
    .po-d-que, .po-d-dl dt, .po-d-pista{ color:var(--body); }
  }

  /* ==================================================================
     LA BANDEJA AGRUPADA POR PERSONA  ·  bd/67
     ==================================================================
     La tarjeta y la rejilla son las compartidas. Esto es lo que añade
     agrupar: una línea más en la tarjeta y, en la previa, la lista de
     postulaciones de la persona.
     ================================================================== */

  /* «Última: Aviso · Etapa». En qué anda esa persona ahora mismo, que
     es lo que la tarjeta agrupada perdería al no tener una sola etapa
     que enseñar. Una línea, recortada: el título de un aviso puede ser
     largo y aquí no es el dato principal. */
  .p-t-ultima{
    font-size:0.8rem; color:var(--muted);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }

  /* «3 sin revisar» en la cabecera de la previa. Ámbar porque en este
     panel significa «esto te falta por hacer». */
  .p-pastilla.nueva{ background:var(--ambar-soft); color:var(--ambar); }

  /* ---- las postulaciones de la persona ---- */

  .po-p{ list-style:none; margin:0; padding:0; display:grid; gap:0.7rem; }
  .po-p-item{
    padding:0.75rem 0.85rem;
    background:var(--wash); border-radius:10px;
    border-left:3px solid transparent;
  }
  /* La que nadie ha abierto todavía, marcada en el borde y no con un
     fondo distinto: con cinco bloques seguidos, cinco fondos serían
     cinco cosas pidiendo atención. */
  .po-p-nueva{ border-left-color:var(--ambar); }

  .po-p-cab{
    display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap;
    margin-bottom:0.4rem;
  }
  /* El botón de la ficha, siempre al final de su fila: es la acción del
     bloque y conviene que esté siempre en el mismo sitio. */
  .po-p-cab .btn{ margin-left:auto; }
  .po-p-marca{
    font-size:0.72rem; color:var(--ambar); letter-spacing:0.03em;
    text-transform:uppercase; font-variation-settings:"wght" 600;
  }

  .po-p-aviso{
    margin:0; font-size:0.9rem; color:var(--ink);
    font-variation-settings:"wght" 600; overflow-wrap:anywhere;
  }
  .po-p-cod{
    margin-left:0.4rem; font-size:0.72rem; color:var(--muted);
    font-variation-settings:"wght" 400;
  }

  /* Los datos del proceso en una fila que envuelve, separados por un
     punto que pone el CSS: una lista con viñetas para cuatro datos
     cortos ocuparía cuatro líneas. */
  .po-p-datos{
    display:flex; flex-wrap:wrap; gap:0 0.5rem;
    margin:0.3rem 0 0; font-size:0.8rem; color:var(--muted);
  }
  .po-p-datos span + span::before{ content:"·"; margin-right:0.5rem; }

  .po-p-motivo{
    margin:0.35rem 0 0; font-size:0.8rem; color:var(--body);
    font-variation-settings:"wght" 600;
  }
  .po-p-porque{ margin:0.35rem 0 0; font-size:0.8rem; color:var(--body); }

  /* En el teléfono el botón se va SIEMPRE a su propia línea. Con
     `margin-left:auto` y poco ancho caía unas veces al lado de la
     pastilla y otras debajo, según lo largo que fuera el nombre de la
     etapa: cinco bloques iguales con el botón en cinco sitios
     distintos. */
  @media (max-width: 560px){
    .po-p-cab .btn{ margin-left:0; flex:0 0 100%; text-align:center; }
  }

  @media (prefers-contrast: more){
    .po-p-item{ border:1px solid var(--rule); border-left-width:3px; }
    .po-p-datos, .po-p-cod, .p-t-ultima{ color:var(--body); }
  }

  /* ==================================================================
     EL SEGUIMIENTO  ·  bd/68
     ==================================================================
     Una tabla y no tarjetas, porque aquí lo que se hace es COMPARAR:
     cuál va más adelantado, cuál lleva más sin moverse, dónde se
     acumula la gente. Comparar es leer una columna hacia abajo.
     ================================================================== */

  /* Ocho etapas más el total, lo que falta por revisar y los días no
     caben en un portátil, y encoger la tipografía hasta que quepan
     dejaría una tabla ilegible. Se desplaza, con la primera columna
     fija: sin ella, al ir a la derecha se pierden los nombres y las
     cifras dejan de ser de nadie. */
  .sg-scroll{
    overflow-x:auto;
    /* bd/88. `hidden` en vertical y NO `visible`: la banda de resalte de
       columna mide tres pantallas de alto a propósito, y sin recorte
       asomaría por arriba y por abajo de la tabla. La tabla no se
       desplaza en vertical —lo hace la página— así que no se pierde
       nada al recortarla. */
    overflow-y:hidden;
    /* `relative` NO es decoración. Dentro de la tabla hay rótulos
       `.oculto`, que son `position:absolute`; sin un ancestro
       posicionado su bloque contenedor es la página, así que no los
       recorta este `overflow` y se quedan a 1 578 px — con la página
       entera desplazándose a lo ancho por un texto que nadie ve. */
    position:relative;
    background:var(--white);
    border:1px solid var(--rule); border-radius:var(--radius);
    /* LA SOMBRA DEL BORDE DICE QUE HAY MÁS. Sin JavaScript: dos fondos
       anclados al contenido (`local`) tapan dos sombras ancladas al
       marco (`scroll`), así que la sombra solo se ve por el lado que
       queda cortado y desaparece al llegar al final. Con la tabla
       entera a la vista no aparece ninguna. */
    background-image:
      linear-gradient(to right,  var(--white), var(--white)),
      linear-gradient(to left,   var(--white), var(--white)),
      linear-gradient(to right,  rgba(20,18,31,0.14), rgba(20,18,31,0)),
      linear-gradient(to left,   rgba(20,18,31,0.14), rgba(20,18,31,0));
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-size: 2rem 100%, 2rem 100%, 0.9rem 100%, 0.9rem 100%;
    background-attachment: local, local, scroll, scroll;
  }
  /* Enfocable, así que lleva foco visible: con el teclado es la única
     forma de desplazarla. */
  .sg-scroll:focus-visible{ outline:2px solid var(--violet); outline-offset:2px; }

  .sg-tabla{ width:100%; border-collapse:collapse; font-size:0.84rem; }
  .sg-tabla th, .sg-tabla td{
    padding:0.55rem 0.5rem; text-align:left; vertical-align:middle;
    border-bottom:1px solid var(--rule); white-space:nowrap;
  }
  /* Sin `sticky`: el contenedor de arriba tiene `overflow-x`, lo que
     lo convierte en el marco de referencia del `sticky`, y como no se
     desplaza en vertical la cabecera no se quedaría pegada a nada.
     Mejor no prometerlo. */
  /* SIN VERSALITAS, y es una decisión de ancho. «ENTREVISTA
     TELEFÓNICA» en mayúsculas ocupa casi dos centímetros más que en
     minúsculas, y con ocho columnas eso es la diferencia entre caber
     en un portátil y no caber. El resto del panel usa versalitas en
     los rótulos; aquí el ancho manda. */
  .sg-tabla thead th{
    background:var(--wash); color:var(--muted);
    font-size:0.72rem; font-variation-settings:"wght" 600;
    vertical-align:bottom; white-space:normal; line-height:1.2;
  }
  .sg-num{ text-align:right; }
  .sg-tabla thead .sg-num{ text-align:right; }
  /* Las etapas, estrechas: son ocho y cada una lleva un número de una
     o dos cifras. El nombre envuelve en la cabecera. */
  /* Las etapas, estrechas: son ocho y cada una lleva un número de una
     o dos cifras. `max-width` además del `width` para que un nombre de
     etapa largo no estire la columna. */
  /* `width` como pista, SIN `max-width`: con un máximo, el nombre de
     la etapa no cabía y se salía por encima del de al lado —texto
     pisando texto, que es peor que una tabla un poco más ancha—. La
     columna acaba midiendo lo que mida su palabra más larga. */
  .sg-etapa{ width:3.2rem; }
  /* Las terminales —contratado y rechazado— detrás de una línea: lo de
     la izquierda está en marcha y lo de la derecha ya terminó. */
  .sg-etapa-fin{ background:var(--wash); }
  .sg-tabla thead .sg-etapa-fin{ background:#F1EFF5; }

  /* La primera columna, fija. `left:0` con fondo propio: sin fondo, al
     desplazar se ve el texto de debajo pasando por detrás. */
  /* `.sg-tabla` delante NO sobra: `.sg-tabla th` tiene más
     especificidad que `.sg-col-aviso` a secas, así que el
     `white-space:nowrap` de arriba ganaba y el título no envolvía —en
     el escritorio sobraba sitio y no se notaba; en el teléfono se
     montaba encima de la columna de al lado. */
  /* LA PRIMERA COLUMNA TIENE ANCHO FIJO, y no es cosmético: la segunda
     se pega a `left:<ancho de la primera>`, y `sticky` necesita un
     número. Con `min/max-width` el motor elige el ancho según el título
     más largo, así que el `left` de la segunda no se puede escribir.
     Por eso va en una variable: se dice una vez y las dos la usan. */
  .sg-tabla{ --sg-c1:15rem; }
  .sg-tabla .sg-col-aviso{
    position:sticky; left:0; z-index:1;
    background:var(--white);
    white-space:normal;
    width:var(--sg-c1); min-width:var(--sg-c1); max-width:var(--sg-c1);
  }
  .sg-tabla thead .sg-col-aviso{ z-index:3; background:var(--wash); }

  /* bd/88 · EL ESTADO, TAMBIÉN FIJO.
     Al desplazarse a la derecha se perdía de vista en qué estado está
     la fila que se está leyendo, y «3 en entrevista técnica» significa
     una cosa en un aviso publicado y otra en uno cerrado. La raya de la
     derecha marca dónde acaba lo que no se mueve. */
  .sg-tabla .sg-col-estado{
    position:sticky; left:var(--sg-c1); z-index:1;
    background:var(--white);
    box-shadow:1px 0 0 var(--rule);
  }
  .sg-tabla thead .sg-col-estado{ z-index:3; background:var(--wash); }

  @media (max-width:40rem){
    /* En un teléfono, dos columnas fijas de 15rem se comen la pantalla
       y no queda sitio para lo que se viene a ver. La primera encoge. */
    .sg-tabla{ --sg-c1:9.5rem; }
  }
  /* `block` y no `inline`: en una tabla de ancho automático el
     `max-width` de una celda es una sugerencia que el motor ignora, y
     un título largo se salía por encima de la columna de al lado. Un
     bloque ocupa la celda y envuelve dentro de ella. */
  .sg-col-aviso a{
    display:block; overflow-wrap:anywhere;
    color:var(--ink); text-decoration:none; font-variation-settings:"wght" 600;
  }
  .sg-col-aviso a:hover{ text-decoration:underline; }
  .sg-sub{ display:block; font-size:0.74rem; color:var(--muted); font-variation-settings:"wght" 400; }

  .sg-n{ color:var(--ink); font-variation-settings:"wght" 600; }
  /* El cero en gris. Con ocho columnas, casi todas son cero: que el
     que NO lo es salte a la vista es la mitad del trabajo de esta
     pantalla. */
  .sg-cero{ color:var(--rule-fuerte); }
  .sg-ok{ color:var(--aqua-fuerte); font-variation-settings:"wght" 700; }

  /* bd/88 · LA CIFRA ES UN ENLACE A SU GENTE.
     Sin subrayado y con el color del texto: en una tabla de veinte
     números por fila, veinte enlaces azules subrayados son una tabla
     ilegible. Lo que dice que se puede pulsar es el cursor y el resalte
     al pasar por encima. */
  .sg-ir{ text-decoration:none; color:inherit; display:inline-block; }
  .sg-ir:hover .sg-n, .sg-ir:focus-visible .sg-n{ text-decoration:underline; }
  .sg-ir:focus-visible{ outline:2px solid var(--violet); outline-offset:2px; border-radius:4px; }

  /* bd/88 · RESALTE DE FILA Y COLUMNA.
     Con diecisiete columnas de cifras, el error de leer el número de la
     fila de al lado o de la columna de al lado está a un renglón de
     distancia. Al pasar por una celda se marcan las dos.

     LA COLUMNA, SIN JAVASCRIPT: no hay selector de columna en CSS, así
     que la celda dibuja una banda altísima con `::before` y el
     contenedor la recorta. `top:-100vh; height:300vh` y no un número
     cerrado de píxeles: una tabla de cien filas es más alta que
     cualquier constante que se escriba aquí.

     Va en `::before` y detrás del contenido (`z-index:-1`), así que no
     tapa la cifra ni se come el clic. */
  .sg-tabla tbody td{ position:relative; }
  .sg-tabla tbody tr:hover td,
  .sg-tabla tbody tr:hover th{ background:var(--wash); }
  .sg-tabla tbody td:hover::before{
    content:''; position:absolute; z-index:-1;
    left:0; width:100%; top:-100vh; height:300vh;
    background:var(--wash); pointer-events:none;
  }
  /* El cruce, un punto más marcado: es la celda donde está el cursor y
     tiene que distinguirse de su fila y de su columna.
     `tr:hover td:hover` y no `td:hover` a secas: con la misma
     especificidad que la regla de la fila (que lleva un elemento más)
     perdía, y la celda del cursor salía del color de su fila. Se midió
     con el navegador: el fondo calculado era el de la fila. */
  .sg-tabla tbody tr:hover td:hover{ background:var(--violet-soft); }

  @media (prefers-reduced-motion: reduce){
    .sg-tabla tbody td, .sg-tabla tbody td::before{ transition:none; }
  }
  @media (prefers-contrast: more){
    .sg-tabla tbody td:hover{ outline:2px solid var(--violet); outline-offset:-2px; }
  }

  /* La cabecera de un proceso. Es una fila de la tabla y no un título
     fuera de ella: fuera, sus cifras no quedarían bajo las columnas
     que las nombran. */
  .sg-grupo th, .sg-grupo td{
    background:var(--violet-soft);
    border-bottom:1px solid var(--rule);
    font-variation-settings:"wght" 600; color:var(--ink);
  }
  .sg-grupo .sg-col-aviso{ background:var(--violet-soft); }
  .sg-grupo-n, .sg-grupo-act{
    font-size:0.74rem; color:var(--violet); font-variation-settings:"wght" 500;
  }
  .sg-grupo-n{ display:block; }
  .sg-grupo-act{ display:inline-block; width:100%; text-align:left; }

  .sg-tabla tfoot th, .sg-tabla tfoot td{
    background:var(--wash); border-top:2px solid var(--rule-fuerte); border-bottom:none;
    font-variation-settings:"wght" 700; color:var(--ink);
  }
  .sg-tabla tfoot .sg-col-aviso{ background:var(--wash); }
  .sg-tabla tfoot .sg-sub{ font-variation-settings:"wght" 400; }

  .sg-hist{ color:var(--violet); font-size:0.78rem; }

  @media (prefers-contrast: more){
    .sg-cero{ color:var(--muted); }
    .sg-tabla th, .sg-tabla td{ border-bottom-color:var(--rule-fuerte); }
  }

  /* En el teléfono la columna fija no puede ocupar media pantalla: con
     `min-width:12rem` sobre 390px quedaba sitio para una columna y
     media y había que desplazar para ver cualquier cifra. Se estrecha
     y el título envuelve; sigue fija, porque sin ella las cifras no
     serían de nadie. */
  @media (max-width: 700px){
    .sg-tabla .sg-col-aviso{ min-width:8.5rem; max-width:10rem; }
    .sg-tabla{ font-size:0.8rem; }
    .sg-tabla th, .sg-tabla td{ padding:0.5rem 0.4rem; }
  }

  /* ==================================================================
     EL TABLERO, CON COLOR
     ==================================================================
     La pantalla de inicio era ocho recuadros blancos con números
     negros: ninguno llamaba la atención y por eso ninguno se miraba.
     El color aquí AGRUPA —ámbar lo que pide trabajo, aqua lo que salió
     bien, rosa lo cerrado sin éxito, violeta el volumen— para poder
     barrer la fila con la vista. Nunca es el dato: cada tarjeta lleva
     su rótulo escrito al lado, que es la regla de accesibilidad de
     este proyecto.
     ================================================================== */

  .t-cab{ display:flex; align-items:center; gap:0.45rem; }
  .t-ico{
    width:1.5rem; height:1.5rem; flex:0 0 auto;
    padding:0.25rem; border-radius:8px;
    background:var(--white); fill:currentColor;
  }
  .t-tarjeta .t-rotulo{ letter-spacing:0.03em; }

  /* El fondo teñido y sin borde: con ocho tarjetas, ocho recuadros
     dibujados compiten entre sí y con los paneles de abajo. */
  .t-ambar, .t-violeta, .t-aqua, .t-rosa, .t-neutra{ border-color:transparent; }
  .t-ambar  { background:var(--ambar-soft);  color:var(--ambar); }
  .t-violeta{ background:var(--violet-soft); color:var(--violet); }
  .t-aqua   { background:var(--aqua-soft);   color:var(--aqua-fuerte); }
  .t-rosa   { background:var(--rosa-soft);   color:var(--rosa); }
  /* La neutra lleva borde: `--wash` sobre el fondo de la página es
     casi el mismo gris, y sin el borde la tarjeta no existía. */
  .t-neutra { background:var(--wash); color:var(--body); border-color:var(--rule); }
  /* La cifra y el pie NO heredan el acento: el número en color sobre
     fondo del mismo color pierde contraste, y el pie es texto
     secundario que tiene que seguir leyéndose. */
  .t-tarjeta .t-cifra{ color:var(--ink); margin-top:0.35rem; }
  .t-ambar .t-pie, .t-violeta .t-pie, .t-aqua .t-pie,
  .t-rosa .t-pie, .t-neutra .t-pie{ color:var(--body); }
  a.t-ambar:hover, a.t-violeta:hover, a.t-aqua:hover, a.t-rosa:hover{
    border-color:currentColor;
  }

  /* Tres paneles a lo ancho. `auto-fit` con 19rem: en un portátil caben
     los tres y en una tableta bajan a dos sin media query. */
  .t-cols-3{
    display:grid; gap:1.2rem; margin:0 0 1.2rem;
    grid-template-columns:repeat(auto-fit, minmax(19rem, 1fr));
  }
  /* Los tres paneles se estiran al más alto. Para que la dona y el aro
     no queden pegados arriba con un palmo de blanco debajo, su
     contenido se centra en el hueco que les toca. */
  .t-cols-3 > .t-panel{ margin:0; display:flex; flex-direction:column; }
  .t-dona-fila, .t-aro-fila{ flex:1; }
  /* La zona que se desplaza también ocupa lo que le toca del panel:
     sin esto se queda en su `max-height` y vuelve a aparecer el hueco
     debajo, solo que más pequeño. */
  .t-embudo-scroll{ flex:1; }

  /* ---- la dona y el aro ----
     Un `<circle>` por tramo con `stroke-dasharray`: el arco es el trozo
     pintado y el hueco es el resto de la vuelta. Sin `path`, sin
     trigonometría en la plantilla y sin una librería. */
  .t-dona, .t-aro{ width:9rem; height:9rem; flex:0 0 auto; transform:rotate(-90deg); }
  .t-arco-fondo{ fill:none; stroke:var(--wash); stroke-width:14; }
  .t-arco{ fill:none; stroke-width:14; stroke-linecap:butt; }
  .t-arco-proceso{ stroke:var(--violet); }
  .t-arco-exito{ stroke:var(--aqua); }
  .t-arco-fin{ stroke:var(--rule-fuerte); }
  /* El texto se contrarrota: el `rotate(-90deg)` del dibujo lo pondría
     de lado. */
  .t-dona-n, .t-dona-q{
    text-anchor:middle; transform:rotate(90deg); transform-origin:70px 70px;
    fill:var(--ink);
  }
  .t-dona-n{ font-size:1.6rem; font-variation-settings:"wght" 700; }
  .t-dona-q{ font-size:0.8rem; fill:var(--muted); }

  .t-dona-fila, .t-aro-fila{ display:flex; gap:1.2rem; align-items:center; flex-wrap:wrap; }
  .t-leyenda{ list-style:none; margin:0; padding:0; display:grid; gap:0.5rem; min-width:0; }
  .t-leyenda li{ display:flex; align-items:center; gap:0.5rem; font-size:0.88rem; color:var(--body); }
  .t-leyenda b{ margin-left:auto; color:var(--ink); }
  .t-leyenda span{ width:0.7rem; height:0.7rem; border-radius:3px; flex:0 0 auto; }
  .t-punto-proceso{ background:var(--violet); }
  .t-punto-exito{ background:var(--aqua); }
  .t-punto-fin{ background:var(--rule-fuerte); }

  .t-aro-pie{ display:grid; gap:0.4rem; font-size:0.88rem; color:var(--body); }
  .t-aro-pie b{ color:var(--ink); font-size:1.1rem; font-variation-settings:"wght" 700; display:block; }

  /* ---- las barras por día ---- */
  .t-barra{ fill:url(#t-grad); opacity:1; }
  /* Sábado y domingo en gris. Un valle el fin de semana es normal; sin
     marcarlo parece una caída del flujo. */
  .t-barra.finde{ fill:var(--rule-fuerte); }
  .t-media{ stroke:var(--ambar); stroke-width:1.5; stroke-dasharray:4 4; }
  .t-eje-media{ color:var(--ambar); }

  /* ---- el ranking ----
     La barra detrás del nombre compara sin pedir otra columna: con
     cinco números de dos cifras, cuál es el doble de cuál no se ve. */
  .t-rank li{ position:relative; }
  .t-rank-pista{
    flex:0 0 5rem; height:6px; border-radius:999px;
    background:var(--wash); overflow:hidden;
  }
  .t-rank-pista > span{ display:block; height:100%; background:var(--violet); border-radius:999px; }

  @media (prefers-contrast: more){
    .t-ambar, .t-violeta, .t-aqua, .t-rosa, .t-neutra{ border-color:currentColor; }
    .t-arco-fin{ stroke:var(--muted); }
    .t-leyenda li, .t-aro-pie{ color:var(--ink); }
  }

  /* En el teléfono, DOS por fila y no una. Con ocho tarjetas apiladas
     hay que recorrer pantalla y media antes de llegar a «lo que
     necesita atención», que es lo único que pide una acción. */
  @media (max-width: 700px){
    .t-tarjetas{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:0.6rem; }
    .t-tarjeta{ padding:0.75rem 0.8rem; }
    .t-tarjeta .t-cifra{ font-size:1.6rem; }
    .t-rotulo{ font-size:0.7rem; }
    .t-dona, .t-aro{ width:7.5rem; height:7.5rem; }
  }

  /* ==================================================================
     LA CAMPANA  ·  bd/69
     ==================================================================
     Mismo mecanismo que el menú de la cuenta: un `<details>` que se
     abre y se cierra sin una línea de JavaScript, que es lo único que
     la CSP de este proyecto permite. Con el teclado funciona solo.
     ================================================================== */

  .p-avisos{ position:relative; }
  .p-avisos > summary{
    display:flex; align-items:center; justify-content:center;
    position:relative; width:2.1rem; height:2.1rem;
    border-radius:999px; cursor:pointer; list-style:none; user-select:none;
    color:var(--muted);
  }
  .p-avisos > summary::-webkit-details-marker{ display:none; }
  .p-avisos > summary:hover{ background:var(--wash); color:var(--ink); }
  .p-avisos > summary svg{ width:1.15rem; height:1.15rem; }
  .p-avisos[open] > summary{ background:var(--wash); color:var(--ink); }
  /* Con algo pendiente la campana deja de ser gris: el color del icono
     es la primera señal, antes de leer el número. */
  .p-avisos.con-avisos > summary{ color:var(--ink); }

  /* LA BURBUJA. Roja porque es lo que se espera de una campana —no
     dice «roto», dice «hay esto sin hacer»—, y el contenido de dentro
     sigue en ámbar, que es como este panel marca lo que espera.

     No es el único aviso: al lado va un rótulo `.oculto` que dice
     cuántas cosas hay, porque un punto de color no se lo lee un lector
     de pantalla. */
  .p-burbuja{
    position:absolute; top:-1px; right:-2px;
    min-width:1.05rem; height:1.05rem; padding:0 0.25rem;
    border-radius:999px; border:2px solid var(--white);
    background:var(--rosa); color:var(--white);
    font-size:0.64rem; line-height:1.05rem; text-align:center;
    font-variation-settings:"wght" 700;
  }

  .p-avisos-pop{
    position:absolute; right:0; top:calc(100% + 0.5rem); z-index:30;
    width:min(22rem, calc(100vw - 2rem)); padding:0.4rem;
    background:var(--white); border:1px solid var(--rule); border-radius:12px;
    box-shadow:0 12px 32px rgba(20,18,31,0.12);
  }
  .p-avisos-cab{
    display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
    padding:0.6rem 0.7rem; border-bottom:1px solid var(--rule); margin-bottom:0.3rem;
  }
  .p-avisos-cab b{ font-size:0.9rem; }
  .p-avisos-refresco{ font-size:0.78rem; color:var(--violet); }
  .p-avisos-nada{ margin:0; padding:0.6rem 0.7rem 0.9rem; font-size:0.86rem; color:var(--muted); }

  /* Cada línea es un enlace ENTERO, no un número con un enlace al
     lado: el objetivo de pulsar tiene que ser grande. */
  .p-avisos-lista{ list-style:none; margin:0; padding:0; }
  .p-avisos-lista li + li{ border-top:1px solid var(--wash); }
  .p-avisos-lista a{
    display:flex; align-items:baseline; gap:0.6rem;
    padding:0.55rem 0.7rem; border-radius:8px;
    text-decoration:none; color:var(--body);
  }
  .p-avisos-lista a:hover{ background:var(--wash); }
  .p-avisos-lista b{
    font-size:1.1rem; font-variation-settings:"wght" 700; color:var(--ambar);
    min-width:1.9rem; text-align:right;
  }
  .p-avisos-lista span{ font-size:0.86rem; line-height:1.4; }

  /* bd/76. El subtítulo del segundo grupo. Es un rótulo, no un título
     de sección: va pequeño, en versalitas y con el tracking abierto que
     pide el texto en mayúsculas, para que separe sin competir con las
     líneas que encabeza. */
  .p-avisos-grupo{
    margin:0.5rem 0 0.15rem; padding:0.45rem 0.7rem 0.2rem;
    border-top:1px solid var(--rule);
    font-size:0.72rem; letter-spacing:0.05em; text-transform:uppercase;
    font-variation-settings:"wght" 600; color:var(--muted);
  }
  /* Lo de los avisos no es trabajo atrasado con gente dentro: es el
     estado de una pantalla. El número va en el gris del texto y no en
     el ámbar de «esto lleva días esperando». */
  .p-avisos-lista-av b{ color:var(--body); }

  @media (prefers-contrast: more){
    .p-burbuja{ border-color:var(--ink); }
    .p-avisos-lista a{ color:var(--ink); }
  }

  /* En el teléfono el desplegable se ancla a la VENTANA y no a la
     campana. Anclado a la campana se salía por la derecha: la campana
     no está en el borde —el menú de la cuenta va después— y el
     desplegable mide más que lo que le queda de pantalla. */
  @media (max-width: 700px){
    .p-avisos-pop{
      position:fixed; top:3.6rem; left:1rem; right:1rem; width:auto;
    }
  }

/* ---------- plan y uso (doc 69) ----------
   El plan vivía en una tira encima de los filtros de Empleos y se veía
   en cada visita. Aquí tiene sitio para decirse entero: cuánto queda,
   qué gasta cupo y qué daría otro plan. */
  .pl-caja{
    margin:0 0 1.4rem; padding:1.1rem 1.2rem;
    border:1px solid var(--rule); border-radius:12px; background:var(--white);
  }
  .pl-cab{
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:1.2rem; flex-wrap:wrap;
  }
  .pl-rotulo{
    margin:0; font-size:0.72rem; letter-spacing:0.05em; text-transform:uppercase;
    color:var(--muted); font-variation-settings:"wght" 600;
  }
  .pl-nombre{
    margin:0.15rem 0 0; font-size:1.5rem; line-height:1.15;
    letter-spacing:-0.01em; font-variation-settings:"wght" 700; color:var(--ink);
  }
  .pl-grande{ display:flex; align-items:baseline; gap:0.6rem; }
  /* Interlineado inverso: cuanto más grande el número, más apretado. */
  .pl-n{
    font-size:2.6rem; line-height:1.1; letter-spacing:-0.02em;
    font-variation-settings:"wght" 700; color:var(--violet);
  }
  .pl-n-cero{ color:var(--ambar); }
  .pl-que{ font-size:0.8rem; line-height:1.35; color:var(--muted); }

  .pl-barra{
    margin-top:1rem; height:8px; border-radius:999px;
    background:var(--wash); overflow:hidden;
  }
  .pl-barra span{
    display:block; height:100%; border-radius:999px; background:var(--violet);
    transition:transform 160ms ease-out;
  }
  .pl-barra .pl-barra-llena{ background:var(--ambar); }
  .pl-pie{ margin:0.45rem 0 0; font-size:0.84rem; color:var(--muted); }
  .pl-pie b{ color:var(--body); }

  .pl-seccion{ margin:0 0 1.6rem; }
  .pl-seccion h2{
    margin:0 0 0.5rem; font-size:1.05rem; letter-spacing:-0.01em;
    font-variation-settings:"wght" 700; color:var(--ink);
  }

  /* Qué gasta cupo y qué no. El signo lleva su palabra al lado —«no
     cuenta» está escrito— porque el color y el símbolo no pueden ser
     los únicos que lo digan. */
  .pl-reglas{ list-style:none; margin:0; padding:0; }
  .pl-reglas li{
    position:relative; padding:0.4rem 0 0.4rem 1.6rem;
    font-size:0.9rem; line-height:1.5; color:var(--body);
  }
  .pl-reglas li + li{ border-top:1px solid var(--wash); }
  .pl-reglas li::before{
    position:absolute; left:0; top:0.4rem;
    font-variation-settings:"wght" 700;
  }
  .pl-si::before{ content:"+"; color:var(--violet); }
  .pl-no::before{ content:"−"; color:var(--muted); }

  .pl-planes{
    display:grid; gap:0.9rem;
    grid-template-columns:repeat(auto-fit, minmax(14rem, 1fr));
  }
  .pl-plan{
    padding:0.95rem 1rem; border:1px solid var(--rule);
    border-radius:12px; background:var(--white);
  }
  .pl-plan-mio{ border-color:var(--violet); }
  .pl-plan h3{
    margin:0; font-size:1rem; letter-spacing:-0.01em;
    font-variation-settings:"wght" 700; color:var(--ink);
  }
  .pl-tuyo{
    display:inline-block; margin-left:0.4rem; padding:0.1rem 0.45rem;
    border-radius:999px; background:var(--violet); color:var(--white);
    font-size:0.68rem; letter-spacing:0.04em; text-transform:uppercase;
    font-variation-settings:"wght" 600; vertical-align:middle;
  }
  .pl-precio{
    margin:0.4rem 0 0; font-size:1.2rem; line-height:1.2;
    font-variation-settings:"wght" 700; color:var(--ink);
  }
  .pl-precio span{ font-size:0.78rem; color:var(--muted); font-variation-settings:"wght" 400; }
  .pl-avisos{ margin:0.25rem 0 0; font-size:0.86rem; color:var(--body); }
  .pl-resumen{ margin:0.45rem 0 0; font-size:0.84rem; color:var(--muted); line-height:1.5; }
  .pl-ventajas{ margin:0.5rem 0 0; padding-left:1.1rem; font-size:0.83rem; color:var(--muted); }
  .pl-ventajas li{ margin-bottom:0.2rem; line-height:1.45; }

  .pl-volver{ margin:0; font-size:0.88rem; }

@media (prefers-reduced-motion: reduce){
  .pl-barra span{ transition-duration:0.01ms; }
}
@media (prefers-contrast: more){
  .pl-caja, .pl-plan{ border-width:2px; }
  .pl-pie, .pl-que, .pl-resumen, .pl-ventajas{ color:var(--body); }
}

/* doc 70. «Solo las de este aviso · está en otros 9 procesos: verlos
   todos». Va ENCIMA de la lista y no debajo: es lo que explica qué se
   está mirando, y debajo llegaría cuando ya se dio por completa. */
  .po-p-mas{
    margin:0 0 0.7rem; padding:0.5rem 0.65rem;
    border:1px solid var(--rule); border-radius:8px; background:var(--wash);
    font-size:0.84rem; line-height:1.5; color:var(--muted);
  }
  .po-p-mas b{ color:var(--body); }
  .po-p-mas a{ color:var(--violet); }

@media (prefers-contrast: more){
  .po-p-mas{ border-width:2px; color:var(--body); }
}

/* ==========================================================
   bd/78 · CANDIDATOS EN TRES COLUMNAS
   ==========================================================
   Los filtros a la izquierda, y a la derecha el `p-dos` de siempre
   —lista y persona abierta— sin tocarlo. La rejilla es de dos y no de
   tres a propósito: `p-dos` ya resuelve el teléfono (abrir una persona
   esconde la lista) y rehacer eso para ganar una línea de CSS habría
   sido cambiar algo que funciona por algo que hay que volver a probar.
*/
  .p-tres{
    display:grid;
    /* 13.5rem y no 15.5: con los mandos en su tamaño pequeño la
       columna sobraba de ancho, y cada milímetro que no usa el filtro
       lo gana la lista, que es donde se mira. */
    grid-template-columns:13.5rem minmax(0, 1fr);
    gap:1rem;
    align-items:start;
  }

/* La columna se queda fija al desplazar: filtrar, ver que no sale nada
   y tener que subir a cambiar el filtro es el camino que esta pantalla
   recorre todo el día. `max-height` + `overflow` para que con diez
   mandos la columna no se salga por abajo sin forma de llegar al
   botón. */
  .p-filtros-lado{
    position:sticky; top:1rem;
    /* `- 11rem` y no `- 2rem`: la columna no empieza arriba del todo
       —antes van la barra, el título y el subtítulo— así que con
       `100vh - 2rem` su borde inferior caía FUERA de la ventana y el
       pie pegado abajo quedaba donde no se veía, que es justo lo que
       había que arreglar. Con este alto cabe entera y el botón se ve
       desde el primer momento. */
    max-height:calc(100vh - 11rem); overflow-y:auto;
    background:var(--white); border:1px solid var(--rule);
    border-radius:var(--radius); padding:0.9rem;
    /* El pie pegado abajo se solapa con lo último de la lista de
       mandos si no se le hace sitio. */
    scrollbar-gutter:stable;
  }
  .p-filtros-lado > summary{
    cursor:pointer; font-size:0.86rem; font-variation-settings:"wght" 600;
    color:var(--ink); list-style:none;
  }
  .p-filtros-lado > summary::-webkit-details-marker{ display:none; }
  .p-filtros-lado > summary::before{
    content:"▸"; display:inline-block; margin-right:0.4rem;
    color:var(--muted); transition:transform 140ms ease-out;
  }
  .p-filtros-lado[open] > summary::before{ transform:rotate(90deg); }
  .p-filtros-lado > summary:focus-visible{ outline:2px solid var(--violet); outline-offset:2px; }
  .p-filtros-on{
    display:inline-block; margin-left:0.3rem; padding:0.05rem 0.4rem;
    border-radius:999px; background:var(--violet-soft); color:var(--violet);
    font-size:0.7rem; letter-spacing:0.03em;
  }

/* EN COLUMNA, Y COMPACTOS.
   La primera versión reusó el tamaño de los mandos de un formulario y
   la columna se leía como uno: diez cajas grandes, una debajo de otra,
   y el botón a cuatro pantallazos de scroll. Un filtro no es un
   formulario — nadie lo rellena entero, se tocan uno o dos y se
   vuelve a la lista— así que va en el tamaño del texto secundario y no
   en el del cuerpo.

   Los números: alto de control 1.75rem contra 2.4rem, texto 0.8rem
   contra 0.9, y 0.45rem entre mando y mando contra 0.6. Medido en el
   navegador, la columna entera baja de 1004 px a 841: con los diez
   filtros puestos cabe en una ventana de 1000 px de alto, que antes
   necesitaba desplazar. */
  .p-filtros-col{
    display:block; background:none; border:0; border-radius:0;
    padding:0; margin:0;
  }
  .p-filtros-col .field{ display:block; max-width:none; margin-bottom:0.45rem; }
  .p-filtros-col .field > label{
    display:block; margin-bottom:0.1rem;
    font-size:0.7rem; letter-spacing:0.02em; color:var(--muted);
    font-variation-settings:"wght" 600;
  }
  .p-filtros-col input,
  .p-filtros-col select{
    width:100%; font-size:0.8rem; padding:0.28rem 0.45rem; border-radius:7px;
  }
  /* El selector trae su flecha y necesita sitio para ella; sin esto el
     texto largo de una opción se mete debajo del icono. */
  .p-filtros-col select{ padding-right:1.4rem; }

/* Un rango son dos campos y un guion, en una línea. El `fieldset` da la
   etiqueta del grupo —«Calificación IA»— que los dos campos sueltos no
   tendrían: «desde» y «hasta» sin más no dicen de qué. */
  .p-filtros-col .f-rango{
    border:0; margin:0 0 0.45rem; padding:0;
    display:grid; grid-template-columns:1fr auto 1fr; gap:0.25rem; align-items:center;
  }
  .p-filtros-col .f-rango legend{
    padding:0; margin-bottom:0.1rem;
    font-size:0.7rem; letter-spacing:0.02em; color:var(--muted);
    font-variation-settings:"wght" 600;
  }
  .p-filtros-col .f-rango span{ color:var(--muted); font-size:0.75rem; }

/* EL BOTÓN NO SE VA AL FONDO. La columna se desplaza por dentro y el
   pie se queda pegado abajo: con diez filtros, tener que bajar hasta el
   final para aplicar convierte cada cambio en dos viajes. */
  .p-filtros-pie{
    position:sticky; bottom:0; z-index:1;
    display:flex; align-items:center; gap:0.7rem;
    /* Sin margen inferior negativo: `bottom:0` alinea el borde del
       MARGEN con el final del área que se desplaza, así que un
       `-0.9rem` abajo empujaba la barra esos 0.9rem por debajo y dejaba
       asomar una franja de lo que debía tapar. */
    margin:0 -0.9rem 0; padding:0.55rem 0.9rem;
    border-top:1px solid var(--rule);
    background:var(--white);
  }
  .p-filtros-pie .clear{ font-size:0.78rem; }

/* El vacío ocupa las dos columnas de la derecha, no la pantalla: los
   filtros se quedan al lado para poder deshacer el que dejó la lista
   sin nada. */
  .p-tres-vacio{ margin:0; }

@media (prefers-reduced-motion: reduce){
  .p-filtros-lado > summary::before{ transition-duration:0.01ms; }
}

/* Por debajo de 1100 px no caben tres: los filtros pasan arriba y
   vuelven a ser un desplegable de verdad, que se puede cerrar para
   recuperar la pantalla. */
@media (min-width: 1100px){
  /* En ancho el desplegable no se despliega: se esconde el tirador y el
     contenido se fuerza visible, por si alguien lo cerró en estrecho y
     luego giró la pantalla. */
  .p-filtros-lado > summary{ display:none; }
  .p-filtros-lado > form,
  .p-filtros-lado > p{ display:block; }
}
@media (max-width: 1099px){
  .p-tres{ grid-template-columns:minmax(0, 1fr); }
  .p-filtros-lado{ position:static; max-height:none; }
}

@media (prefers-contrast: more){
  .p-filtros-lado{ border-width:2px; }
  .p-filtros-col .field > label,
  .p-filtros-col .f-rango legend{ color:var(--body); }
}

/* bd/78 · lo operativo de una persona, arriba de sus postulaciones. */
  .po-d-oper{
    margin-top:1rem; padding:0.8rem 0.9rem;
    border:1px solid var(--rule); border-radius:10px; background:var(--wash);
  }
  .po-d-oper-par{ margin:0 0 0.6rem; }
  .po-d-oper-dl{
    display:grid; grid-template-columns:auto 1fr; gap:0.3rem 0.9rem; margin:0;
  }
  .po-d-oper-dl dt{ font-size:0.78rem; color:var(--muted); }
  .po-d-oper-dl dd{ margin:0; font-size:0.86rem; color:var(--body); }
  .po-d-oper-ia{
    display:flex; align-items:baseline; gap:0.5rem;
    margin:0.7rem 0 0; padding-top:0.6rem; border-top:1px solid var(--rule);
    font-size:0.8rem; color:var(--muted); line-height:1.35;
  }
  .po-d-oper-n{
    font-size:1.3rem; line-height:1.1; letter-spacing:-0.01em;
    color:var(--violet); font-variation-settings:"wght" 700;
  }

@media (prefers-contrast: more){
  .po-d-oper{ border-width:2px; }
  .po-d-oper-dl dt, .po-d-oper-ia{ color:var(--body); }
}

/* ==========================================================
   bd/79 · LOS DIECISÉIS ESTADOS
   ==========================================================
   Dos listas de etapas: la del formulario del aviso —casillas, se
   elige qué aplica— y la de la ficha —radios, se elige a dónde se
   mueve—. Se parecen a propósito: son la misma escalera vista desde
   los dos lados, y el reclutador que marcó doce casillas el lunes
   reconoce los mismos doce peldaños el martes.
*/

/* ---- en el formulario del aviso ---- */

  .av-etapas{
    border:1px solid var(--rule); border-radius:var(--radius);
    padding:0.9rem 1rem; margin:0.4rem 0 1.2rem;
    background:var(--wash);
  }
  .av-etapas legend{
    padding:0 0.4rem; font-size:0.85rem;
    font-variation-settings:"wght" 650; color:var(--ink);
  }
  .av-etapas .ayuda{ margin:0 0 0.6rem; }

/* DOS COLUMNAS, no una de dieciséis líneas: apiladas ocupaban media
   pantalla antes de llegar al título del puesto, que es justo lo que
   este cambio movía arriba para que se viera. Por debajo de 34rem
   vuelve a una. */
  .av-etapas-lista{
    list-style:none; margin:0; padding:0;
    display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:0.1rem 1.2rem;
  }
  @media (max-width: 34rem){
    .av-etapas-lista{ grid-template-columns:1fr; }
  }

  .av-etapa label{
    display:flex; align-items:baseline; gap:0.45rem;
    padding:0.22rem 0.3rem; border-radius:7px;
    font-size:0.88rem; cursor:pointer;
  }
  .av-etapa label:hover{ background:var(--white); }
/* Una casilla que no se puede tocar tiene que PARECER que no se puede
   tocar: sin esto se pulsa, no pasa nada, y se pulsa otra vez. */
  .av-etapa label:has(input:disabled){ cursor:default; opacity:0.75; }
  .av-etapa label:has(input:disabled):hover{ background:none; }
  .av-etapa input{ margin:0; flex:none; }

  .av-etapa-n{
    flex:none; min-width:1.2rem; text-align:right;
    color:var(--muted); font-size:0.78rem;
    font-variant-numeric:tabular-nums;
  }
  .av-etapa-nom{ color:var(--ink); }
  .av-etapa-por{
    color:var(--muted); font-size:0.75rem;
  }
/* Las terminales, separadas del embudo por una línea: no son el paso
   17, son la salida. */
  .av-etapa-fin{ border-top:1px dashed var(--rule); margin-top:0.3rem; padding-top:0.3rem; }
  .av-etapa-fin .av-etapa-nom{ color:var(--body); }

/* ---- la escalera de la ficha ---- */

  .f-pasos{
    list-style:none; margin:0 0 0.9rem; padding:0;
    border:1px solid var(--rule); border-radius:10px; overflow:hidden;
  }
  .f-paso + .f-paso{ border-top:1px solid var(--rule); }

  .f-paso label{
    display:flex; align-items:center; gap:0.5rem;
    padding:0.38rem 0.6rem; font-size:0.85rem; cursor:pointer;
  }
  .f-paso label:hover{ background:var(--wash); }
  .f-paso input{ margin:0; flex:none; }

  .f-paso-n{
    flex:none; min-width:1.3rem; height:1.3rem;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:999px; background:var(--wash); color:var(--muted);
    font-size:0.72rem; font-variant-numeric:tabular-nums;
  }
  .f-paso-nom{ flex:1 1 auto; color:var(--body); }

/* DÓNDE ESTÁ, QUE ES LA PREGUNTA. Fondo, texto en negrita y una barra
   violeta en el canto: tres señales y no solo el color, porque con
   solo color no se distingue en una pantalla mala ni con daltonismo. */
  .f-paso-actual{
    background:var(--violet-soft);
    box-shadow:inset 3px 0 0 var(--violet);
  }
  .f-paso-actual label:hover{ background:var(--violet-soft); }
  .f-paso-actual .f-paso-nom{
    color:var(--ink); font-variation-settings:"wght" 650;
  }
  .f-paso-actual .f-paso-n{ background:var(--violet); color:#fff; }
  .f-paso-aqui{
    flex:none; font-size:0.7rem; letter-spacing:0.03em;
    color:var(--violet); font-variation-settings:"wght" 600;
  }

/* Por dónde ya pasó. Gris y no tachado: tachar diría «esto ya no
   sirve» y volver atrás es un movimiento legítimo. */
  .f-paso-pisada .f-paso-nom{ color:var(--muted); }
  .f-paso-pisada .f-paso-n{ background:var(--rule); color:var(--body); }

  .f-paso-res{ flex:none; font-size:0.85rem; line-height:1; }
  .f-res-si{ color:var(--verde); }
  .f-res-no{ color:var(--rosa); }
  .f-res-ya{ color:var(--muted); }

  .f-paso-fin{ border-top:2px solid var(--rule); }
  .f-paso-corte .f-paso-nom{ color:var(--rosa); }

/* ---- el resultado ---- */

  .f-resultado{
    border:0; padding:0; margin:0 0 0.8rem;
    display:flex; flex-wrap:wrap; gap:0.1rem 0.9rem; align-items:baseline;
  }
  .f-resultado legend{
    padding:0; margin-bottom:0.2rem; width:100%;
    font-size:0.78rem; color:var(--muted);
    font-variation-settings:"wght" 600;
  }
  .f-resultado label{
    display:inline-flex; align-items:center; gap:0.3rem;
    font-size:0.85rem; cursor:pointer;
  }
  .f-resultado input{ margin:0; }

/* EL MOTIVO DE CIERRE, SIN JAVASCRIPT.
   Aquí había un `onchange` en línea que la CSP (`script-src 'self'`)
   bloqueaba desde siempre: el campo no aparecía nunca y el reclutador
   se enteraba al enviar y que la base lo rechazara. Con `:has()` es
   CSS, lo entienden todos los navegadores actuales, y donde no —un
   navegador viejo— el campo se ve siempre, que es el fallo correcto:
   un campo de más, no uno que falta. */
  .f-mover .f-motivo{ display:none; }
  .f-mover form:has([data-corta]:checked) .f-motivo{ display:block; }
  @supports not selector(:has(*)){
    .f-mover .f-motivo{ display:block; }
  }

/* ---- el resultado en el historial ---- */

  .p-res{
    display:inline-block; margin-left:0.3rem;
    padding:0.05rem 0.4rem; border-radius:999px;
    font-size:0.7rem; letter-spacing:0.02em;
    font-variation-settings:"wght" 600;
  }
  .p-res-si{ background:#E3F3EA; color:var(--verde); }
  .p-res-no{ background:var(--rosa-soft); color:var(--rosa); }

@media (prefers-contrast: more){
  .f-paso-actual{ box-shadow:inset 4px 0 0 var(--violet); }
  .f-paso-pisada .f-paso-nom{ color:var(--body); }
  .av-etapas{ border-width:2px; }
  .f-pasos{ border-width:2px; }
}

/* ICONOS DE CAMPO · generado por docs/generar-iconos-css.php · no editar a mano */
  /* Cada campo con el icono de su dato (regla del usuario, 26-10-2026).
     `!important` en el fondo y en el relleno izquierdo, y solo ahí: las
     reglas de los campos viejos usan el atajo `background:` (que borra la
     imagen) y selectores con cinco `:not()`, y ganarles por especificidad
     obligaría a repetir cada uno. El icono es decorativo: el nombre del
     campo lo da su <label>. */
  .ico{
    background-repeat:no-repeat !important;
    background-position:0.8rem 50% !important;
    background-size:16px 16px !important;
    padding-left:2.4rem !important;
  }
  textarea.ico{ background-position:0.8rem 0.75rem !important; }
  /* Los filtros apilados del panel son de letra pequeña: icono y hueco menores. */
  .p-filtros-col .ico{
    background-position:0.5rem 50% !important;
    background-size:14px 14px !important;
    padding-left:1.75rem !important;
  }
  @media (forced-colors: active){ .ico{ background-image:none !important; padding-left:0.8rem !important; } }
  /* Los BOTONES con el icono de su acción (regla del usuario, 26-10-2026),
     en todas las pantallas, migradas o no: el botón gana `bi bi-<acción>`
     y el dibujo sale en un ::before recortado con una máscara y pintado
     con `currentColor`, así que es blanco en el botón azul y azul en el de
     contorno sin una versión por color. No cambia el marcado del botón.
     En los de Tailwind (`inline-flex` con `gap-2`) el hueco ya lo da el
     `gap`. En alto contraste la máscara no se respeta y se quita. */
  .bi::before{
    content:""; display:inline-block; flex:none;
    width:1.05em; height:1.05em; margin-inline-end:0.45em; vertical-align:-0.18em;
    background-color:currentColor;
    -webkit-mask:var(--bi) center / contain no-repeat; mask:var(--bi) center / contain no-repeat;
  }
  .bi.inline-flex::before{ margin-inline-end:0; }
  @media (forced-colors: active){ .bi::before{ display:none; } }
  .ico-buscar{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") !important; }
  .bi-buscar{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E"); }
  .ico-ubicacion{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11a7 7 0 10-14 0c0 4.8 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E") !important; }
  .bi-ubicacion{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11a7 7 0 10-14 0c0 4.8 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
  .ico-documento{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='11' r='2'/%3E%3Cpath d='M15 10h3M15 14h3M6 16c.6-1.2 1.7-2 3-2s2.4.8 3 2'/%3E%3C/svg%3E") !important; }
  .bi-documento{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='11' r='2'/%3E%3Cpath d='M15 10h3M15 14h3M6 16c.6-1.2 1.7-2 3-2s2.4.8 3 2'/%3E%3C/svg%3E"); }
  .ico-numero{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h16M4 15h16M10 3L8 21M16 3l-2 18'/%3E%3C/svg%3E") !important; }
  .bi-numero{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h16M4 15h16M10 3L8 21M16 3l-2 18'/%3E%3C/svg%3E"); }
  .ico-persona{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E") !important; }
  .bi-persona{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E"); }
  .ico-correo{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E") !important; }
  .bi-correo{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }
  .ico-pais{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18'/%3E%3C/svg%3E") !important; }
  .bi-pais{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18'/%3E%3C/svg%3E"); }
  .ico-telefono{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 005 5L15 13l5 2v4a2 2 0 01-2 2A16 16 0 013 6a2 2 0 012-2'/%3E%3C/svg%3E") !important; }
  .bi-telefono{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 005 5L15 13l5 2v4a2 2 0 01-2 2A16 16 0 013 6a2 2 0 012-2'/%3E%3C/svg%3E"); }
  .ico-dinero{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M6 12h.01M18 12h.01'/%3E%3C/svg%3E") !important; }
  .bi-dinero{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M6 12h.01M18 12h.01'/%3E%3C/svg%3E"); }
  .ico-mensaje{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z'/%3E%3C/svg%3E") !important; }
  .bi-mensaje{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z'/%3E%3C/svg%3E"); }
  .ico-archivo{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 00-2 2v14a2 2 0 002 2h12a2 2 0 002-2V9z'/%3E%3Cpath d='M14 3v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E") !important; }
  .bi-archivo{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 00-2 2v14a2 2 0 002 2h12a2 2 0 002-2V9z'/%3E%3Cpath d='M14 3v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E"); }
  .ico-maletin{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M8 7V5a2 2 0 012-2h4a2 2 0 012 2v2M3 13h18'/%3E%3C/svg%3E") !important; }
  .bi-maletin{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M8 7V5a2 2 0 012-2h4a2 2 0 012 2v2M3 13h18'/%3E%3C/svg%3E"); }
  .ico-reloj{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") !important; }
  .bi-reloj{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
  .ico-nivel{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8M14 7h7v7'/%3E%3C/svg%3E") !important; }
  .bi-nivel{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8M14 7h7v7'/%3E%3C/svg%3E"); }
  .ico-area{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9 5-9 5-9-5z'/%3E%3Cpath d='M3 13l9 5 9-5'/%3E%3C/svg%3E") !important; }
  .bi-area{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9 5-9 5-9-5z'/%3E%3Cpath d='M3 13l9 5 9-5'/%3E%3C/svg%3E"); }
  .ico-calendario{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E") !important; }
  .bi-calendario{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E"); }
  .ico-empresa{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V5a2 2 0 012-2h8a2 2 0 012 2v16M16 9h2a2 2 0 012 2v10M3 21h18M8 7h4M8 11h4M8 15h4'/%3E%3C/svg%3E") !important; }
  .bi-empresa{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V5a2 2 0 012-2h8a2 2 0 012 2v16M16 9h2a2 2 0 012 2v10M3 21h18M8 7h4M8 11h4M8 15h4'/%3E%3C/svg%3E"); }
  .ico-candado{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 018 0v4'/%3E%3C/svg%3E") !important; }
  .bi-candado{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 018 0v4'/%3E%3C/svg%3E"); }
  .ico-enlace{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 005.7 0l3-3a4 4 0 00-5.7-5.7l-1 1M14 10a4 4 0 00-5.7 0l-3 3a4 4 0 005.7 5.7l1-1'/%3E%3C/svg%3E") !important; }
  .bi-enlace{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 005.7 0l3-3a4 4 0 00-5.7-5.7l-1 1M14 10a4 4 0 00-5.7 0l-3 3a4 4 0 005.7 5.7l1-1'/%3E%3C/svg%3E"); }
  .ico-paleta{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 100 18c1 0 1.5-.8 1.5-1.6 0-.5-.2-.8-.5-1.2-.3-.3-.5-.7-.5-1.2 0-.9.7-1.5 1.5-1.5H16a5 5 0 005-5c0-4-4-7.5-9-7.5z'/%3E%3Ccircle cx='7.5' cy='11' r='1'/%3E%3Ccircle cx='10.5' cy='7' r='1'/%3E%3Ccircle cx='15.5' cy='7.5' r='1'/%3E%3C/svg%3E") !important; }
  .bi-paleta{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 100 18c1 0 1.5-.8 1.5-1.6 0-.5-.2-.8-.5-1.2-.3-.3-.5-.7-.5-1.2 0-.9.7-1.5 1.5-1.5H16a5 5 0 005-5c0-4-4-7.5-9-7.5z'/%3E%3Ccircle cx='7.5' cy='11' r='1'/%3E%3Ccircle cx='10.5' cy='7' r='1'/%3E%3Ccircle cx='15.5' cy='7.5' r='1'/%3E%3C/svg%3E"); }
  .ico-lista{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3.5 6h.01M3.5 12h.01M3.5 18h.01'/%3E%3C/svg%3E") !important; }
  .bi-lista{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3.5 6h.01M3.5 12h.01M3.5 18h.01'/%3E%3C/svg%3E"); }
  .ico-texto{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9a2.8 2.8 0 00-4-4L4 16z'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E") !important; }
  .bi-texto{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9a2.8 2.8 0 00-4-4L4 16z'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E"); }
  .ico-etapa{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4M5 4h11l-2 4 2 4H5'/%3E%3C/svg%3E") !important; }
  .bi-etapa{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4M5 4h11l-2 4 2 4H5'/%3E%3C/svg%3E"); }
  .ico-rol{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.5-3.4 8.3-8 9-4.6-.7-8-4.5-8-9V6z'/%3E%3C/svg%3E") !important; }
  .bi-rol{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.5-3.4 8.3-8 9-4.6-.7-8-4.5-8-9V6z'/%3E%3C/svg%3E"); }
  .ico-idioma{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h9M8.5 3v2M6 5c.8 3.5 3 6 6 7.5M11 5c-.8 3.5-3 6-6 7.5M13 21l4-9 4 9M14.5 18h5'/%3E%3C/svg%3E") !important; }
  .bi-idioma{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h9M8.5 3v2M6 5c.8 3.5 3 6 6 7.5M11 5c-.8 3.5-3 6-6 7.5M13 21l4-9 4 9M14.5 18h5'/%3E%3C/svg%3E"); }
  .ico-estudios{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9l10-5 10 5-10 5z'/%3E%3Cpath d='M6 11v5c2 1.6 4 2 6 2s4-.4 6-2v-5M22 9v6'/%3E%3C/svg%3E") !important; }
  .bi-estudios{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9l10-5 10 5-10 5z'/%3E%3Cpath d='M6 11v5c2 1.6 4 2 6 2s4-.4 6-2v-5M22 9v6'/%3E%3C/svg%3E"); }
  .ico-habilidad{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.4 5.1 5.6.7-4.1 3.8 1.1 5.5L12 15.4 7 18.1l1.1-5.5L4 8.8l5.6-.7z'/%3E%3C/svg%3E") !important; }
  .bi-habilidad{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.4 5.1 5.6.7-4.1 3.8 1.1 5.5L12 15.4 7 18.1l1.1-5.5L4 8.8l5.6-.7z'/%3E%3C/svg%3E"); }
  .ico-etiqueta{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12V4h8l10 10-8 8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.3'/%3E%3C/svg%3E") !important; }
  .bi-etiqueta{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12V4h8l10 10-8 8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.3'/%3E%3C/svg%3E"); }
  .ico-carpeta{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6a2 2 0 012-2h4l2 2h8a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2z'/%3E%3C/svg%3E") !important; }
  .bi-carpeta{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6a2 2 0 012-2h4l2 2h8a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2z'/%3E%3C/svg%3E"); }
  .ico-insignia{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='5'/%3E%3Cpath d='M9 12.5L7.5 21 12 18.5 16.5 21 15 12.5'/%3E%3C/svg%3E") !important; }
  .bi-insignia{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='5'/%3E%3Cpath d='M9 12.5L7.5 21 12 18.5 16.5 21 15 12.5'/%3E%3C/svg%3E"); }
  .ico-enviar{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2L11 13M22 2l-7 20-4-9-9-4z'/%3E%3C/svg%3E") !important; }
  .bi-enviar{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2L11 13M22 2l-7 20-4-9-9-4z'/%3E%3C/svg%3E"); }
  .ico-reenviar{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0115.5-6.2L21 8M21 3v5h-5M21 12a9 9 0 01-15.5 6.2L3 16M3 21v-5h5'/%3E%3C/svg%3E") !important; }
  .bi-reenviar{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0115.5-6.2L21 8M21 3v5h-5M21 12a9 9 0 01-15.5 6.2L3 16M3 21v-5h5'/%3E%3C/svg%3E"); }
  .ico-filtro{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h18l-7 8.5V19l-4 2v-8.5z'/%3E%3C/svg%3E") !important; }
  .bi-filtro{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h18l-7 8.5V19l-4 2v-8.5z'/%3E%3C/svg%3E"); }
  .ico-cerrar{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E") !important; }
  .bi-cerrar{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E"); }
  .ico-check{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") !important; }
  .bi-check{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); }
  .ico-borrar{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6M10 11v6M14 11v6'/%3E%3C/svg%3E") !important; }
  .bi-borrar{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6M10 11v6M14 11v6'/%3E%3C/svg%3E"); }
  .ico-guardar{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h11l5 5v11a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2z'/%3E%3Cpath d='M7 3v5h8M7 21v-7h10v7'/%3E%3C/svg%3E") !important; }
  .bi-guardar{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h11l5 5v11a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2z'/%3E%3Cpath d='M7 3v5h8M7 21v-7h10v7'/%3E%3C/svg%3E"); }
  .ico-cambiar{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 2l4 4-4 4M3 11V9a3 3 0 013-3h15M7 22l-4-4 4-4M21 13v2a3 3 0 01-3 3H3'/%3E%3C/svg%3E") !important; }
  .bi-cambiar{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 2l4 4-4 4M3 11V9a3 3 0 013-3h15M7 22l-4-4 4-4M21 13v2a3 3 0 01-3 3H3'/%3E%3C/svg%3E"); }
  .ico-entrar{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4M10 17l5-5-5-5M15 12H3'/%3E%3C/svg%3E") !important; }
  .bi-entrar{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4M10 17l5-5-5-5M15 12H3'/%3E%3C/svg%3E"); }
  .ico-salir{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E") !important; }
  .bi-salir{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E"); }
  .ico-mas{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") !important; }
  .bi-mas{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
  .ico-flecha{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") !important; }
  .bi-flecha{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
  .ico-volver{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 18l-6-6 6-6'/%3E%3C/svg%3E") !important; }
  .bi-volver{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 18l-6-6 6-6'/%3E%3C/svg%3E"); }
  .ico-seguimiento{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l3-8 4 16 3-8h4'/%3E%3C/svg%3E") !important; }
  .bi-seguimiento{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l3-8 4 16 3-8h4'/%3E%3C/svg%3E"); }
  .ico-campana{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0112 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.9 1.9 0 003.4 0'/%3E%3C/svg%3E") !important; }
  .bi-campana{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0112 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.9 1.9 0 003.4 0'/%3E%3C/svg%3E"); }
  .ico-descargar{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3'/%3E%3C/svg%3E") !important; }
  .bi-descargar{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3'/%3E%3C/svg%3E"); }
  .ico-ordenar{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4v16M3 8l4-4 4 4M17 20V4M13 16l4 4 4-4'/%3E%3C/svg%3E") !important; }
  .bi-ordenar{ --bi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4v16M3 8l4-4 4 4M17 20V4M13 16l4 4 4-4'/%3E%3C/svg%3E"); }
/* /ICONOS DE CAMPO */