@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600 700;font-stretch:100%;font-display:swap;src:url(/f/bricolage-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600 700;font-stretch:100%;font-display:swap;src:url(/f/bricolage-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;src:url(/f/figtree-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;src:url(/f/figtree-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --paper:#F4F6F8; --panel:#FFFFFF; --sunk:#EDF1F4; --line:#DDE4EA;
  --ink:#1B2024; --ink-2:#3D4852; --muted:#6B7883;
  --accent:#17696B; --accent-soft:#DDEEEE;
  --alerta:#B3261E; --alerta-bg:#FBEAE8;
  --ambar:#8A5A08; --ambar-bg:#FBF1DF;
  --sombra:0 1px 2px rgba(20,30,40,.05), 0 4px 14px rgba(20,30,40,.05);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0E1216; --panel:#181F26; --sunk:#141B21; --line:#2A343D;
    --ink:#E9EDF1; --ink-2:#C3CDD6; --muted:#8593A0;
    --accent:#4FB3B0; --accent-soft:#12312F;
    --alerta:#F1998F; --alerta-bg:#3A1D1A;
    --ambar:#E0B268; --ambar-bg:#332616;
    --sombra:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35);
  }
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16.5px; line-height:1.62; -webkit-font-smoothing:antialiased;
}

/* cabecera */
.top{background:var(--panel); border-bottom:1px solid var(--line)}
.top-in{
  max-width:1280px; margin:0 auto; padding:12px 22px;
  display:flex; align-items:center; gap:14px;
}
.marca{display:flex; align-items:center; gap:9px; text-decoration:none}
.marca-barco{height:34px; width:auto}
.marca-n{
  font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:17px;
  letter-spacing:-.02em; color:var(--ink);
}
.marca-n i{font-style:normal; color:var(--accent); margin-left:5px}
.volver{
  margin-left:auto; font-size:13px; font-weight:600; color:var(--accent);
  text-decoration:none; border:1px solid var(--line); border-radius:99px;
  padding:6px 14px; background:var(--paper);
}
.volver:hover{border-color:var(--accent)}

/* pestañas de los cuatro documentos */
.tabs{background:var(--sunk); border-bottom:1px solid var(--line)}
.tabs-in{
  max-width:1280px; margin:0 auto; padding:0 22px;
  display:flex; gap:4px; overflow-x:auto; scrollbar-width:none;
}
.tabs-in::-webkit-scrollbar{display:none}
.tabs a, .tabs span{
  display:block; white-space:nowrap; padding:11px 14px; font-size:13px;
  font-weight:600; color:var(--muted); text-decoration:none;
  border-bottom:2px solid transparent;
}
.tabs a:hover{color:var(--ink)}
.tabs span{color:var(--accent); border-bottom-color:var(--accent)}

/* documento */
.doc{max-width:78ch; margin:0 auto; padding:34px 22px 10px}
h1{
  font-family:"Bricolage Grotesque",sans-serif; font-weight:700;
  font-size:34px; line-height:1.15; letter-spacing:-.02em; margin:0 0 10px;
}
.entradilla{font-size:17px; color:var(--ink-2); margin:0 0 16px}
.sello{
  display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px;
  font-size:11.5px; color:var(--muted);
}
.sello span{
  background:var(--sunk); border:1px solid var(--line); border-radius:99px;
  padding:3px 10px;
}
h2{
  font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:22px;
  letter-spacing:-.01em; margin:34px 0 10px; padding-top:14px;
  border-top:1px solid var(--line); scroll-margin-top:16px;
}
h2 .num{
  display:inline-block; min-width:1.9em; color:var(--accent);
  font-size:15px; vertical-align:2px;
}
h3{font-size:16.5px; font-weight:700; margin:22px 0 6px; color:var(--ink)}
p, li{color:var(--ink-2)}
p{margin:0 0 12px}
ul, ol{margin:0 0 14px; padding-left:22px}
li{margin:0 0 6px}
b, strong{color:var(--ink); font-weight:600}
a{color:var(--accent)}
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.88em;
  background:var(--sunk); border:1px solid var(--line); border-radius:5px;
  padding:1px 5px;
}
.datos-titular{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:6px 18px; margin:0 0 18px; box-shadow:var(--sombra);
}
.datos-titular dl{display:grid; grid-template-columns:auto 1fr; gap:2px 18px; margin:14px 0}
.datos-titular dt{font-size:12.5px; color:var(--muted); padding-top:3px}
.datos-titular dd{margin:0; color:var(--ink); font-weight:600}
.pendiente{
  display:inline-block; background:var(--alerta-bg); color:var(--alerta);
  border:1px dashed var(--alerta); border-radius:6px; padding:1px 8px;
  font-size:12.5px; font-weight:700; letter-spacing:.02em;
}
table{
  width:100%; border-collapse:collapse; margin:0 0 18px; font-size:14.5px;
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  overflow:hidden;
}
th, td{text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top}
th{font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); background:var(--sunk)}
tr:last-child td{border-bottom:none}
.aviso{
  border-left:3px solid var(--accent); background:var(--accent-soft);
  border-radius:0 10px 10px 0; padding:13px 16px; margin:0 0 18px; font-size:15px;
}
.aviso.rojo{border-left-color:var(--alerta); background:var(--alerta-bg)}
.aviso.ambar{border-left-color:var(--ambar); background:var(--ambar-bg)}
.indice{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:14px 18px; margin:0 0 26px; box-shadow:var(--sombra);
}
.indice h2{margin:0 0 6px; border:none; padding:0; font-size:13px;
  text-transform:uppercase; letter-spacing:.05em; color:var(--muted)}
.indice ol{margin:0; padding-left:20px; font-size:14.5px}
.indice li{margin:2px 0}
.pie-aqui{font-size:12.5px; font-weight:600; color:var(--muted)}
@media (max-width:620px){
  body{font-size:16px}
  .doc{padding:24px 16px 6px}
  h1{font-size:27px}
  .top-in, .tabs-in{padding-left:16px; padding-right:16px}
  .datos-titular dl{grid-template-columns:1fr; gap:0 0}
  .datos-titular dd{margin-bottom:9px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
html{scroll-behavior:smooth}

/* ================= pie legal (común a ranking, guía y legales) =================
   Tres plantas: marca y navegación en columnas; los tres avisos obligatorios,
   cada uno con su rótulo, también en columnas; y la línea de copyright. Antes
   era un bloque de párrafos corridos y parecía un descargo pegado con prisa. */
.pie-legal{
  border-top:1px solid var(--line); background:var(--panel);
  margin-top:40px; padding:30px 0 26px; font-family:inherit;
}
.pie-in{max-width:1280px; margin:0 auto; padding:0 22px}
.pie-sup{display:grid; grid-template-columns:minmax(240px,1.5fr) 1fr 1fr; gap:24px 36px}
.pie-h{
  margin:0 0 9px; font-size:10.5px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted);
}
.pie-logo{display:inline-flex; align-items:center; gap:9px; text-decoration:none; margin-bottom:9px}
.pie-logo img{height:30px; width:auto; display:block}
:root[data-theme="dark"] .pie-logo img{filter:brightness(1.28) saturate(1.05)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .pie-logo img{filter:brightness(1.28) saturate(1.05)}
}
.pie-logo b{
  font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:16.5px;
  letter-spacing:-.02em; color:var(--ink);
}
.pie-logo b i{font-style:normal; color:var(--accent); margin-left:4px}
.pie-marca{margin:0; font-size:12.5px; color:var(--muted); line-height:1.55; max-width:44ch}
.pie-nav{display:flex; flex-direction:column; gap:7px}
.pie-nav a{
  font-size:13px; font-weight:500; color:var(--ink-2); text-decoration:none;
  width:fit-content; border-bottom:1px solid transparent; line-height:1.3;
}
.pie-nav a:hover{color:var(--accent); border-bottom-color:var(--accent)}
.pie-aqui{font-size:13px; font-weight:600; color:var(--muted); line-height:1.3}
.pie-avisos{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px 36px;
  margin-top:24px; padding-top:20px; border-top:1px solid var(--line);
}
.pie-avisos p{margin:0; font-size:11.5px; color:var(--muted); line-height:1.6}
.pie-avisos b{color:var(--ink-2); font-weight:600}
.pie-avisos a{color:var(--accent)}
.pie-avisos code{font-size:10.5px}
.pie-copy{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 20px;
  margin-top:22px; padding-top:14px; border-top:1px solid var(--line);
  font-size:11px; color:var(--muted);
}
.pie-copy a{color:var(--muted)}
.pie-copy a:hover{color:var(--accent)}
.pie-copy span{margin:0}
@media (max-width:900px){
  .pie-sup{grid-template-columns:1fr 1fr}
  .pie-sup > :first-child{grid-column:1 / -1}
  .pie-avisos{grid-template-columns:1fr}
}
@media (max-width:620px){ .pie-in{padding:0 16px} .pie-sup{grid-template-columns:1fr} }

.top-der{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap}
.idiomas{display:inline-flex;align-items:center;gap:2px;padding:2px;
  border:1px solid var(--line);border-radius:999px;background:var(--panel)}
.idiomas a,.idiomas span{display:block;padding:3px 10px;border-radius:999px;
  font-size:11.5px;font-weight:600;letter-spacing:.03em;text-decoration:none;
  line-height:1.5}
.idiomas a{color:var(--muted)}
.idiomas a:hover{color:var(--ink);background:var(--sunk,rgba(127,127,127,.12))}
.idiomas .aqui{color:var(--paper);background:var(--accent);cursor:default}
@media (max-width:620px){.idiomas a,.idiomas span{padding:3px 8px;font-size:11px}}

.ficha{max-width:860px;margin:0 auto;padding:26px 22px 60px}
.migas{font-size:13px;color:var(--muted);margin:0 0 14px}
.migas a{color:var(--muted);text-decoration:none}
.migas a:hover{color:var(--accent)}
.migas span{margin:0 6px}
.ficha h1{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:31px;line-height:1.18;letter-spacing:-.02em;margin:0 0 6px;
}
.operada{color:var(--muted);font-size:14.5px;margin:0 0 18px}
.operada b{color:var(--ink-2);font-weight:600}
.estado{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;padding:3px 10px;border-radius:99px;margin-left:8px;
  vertical-align:3px;
}
.estado.viva{background:var(--accent-soft);color:var(--accent)}
.estado.muerta{background:var(--sunk);color:var(--muted);border:1px solid var(--line)}
.cerrada-aviso{
  background:var(--sunk);border:1px solid var(--line);border-left:3px solid var(--muted);
  border-radius:8px;padding:12px 15px;margin:0 0 22px;font-size:14.5px;color:var(--ink-2);
}
.banner{
  width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:10px;border:1px solid var(--line);margin:0 0 22px;display:block;
}
.ficha h2{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:19px;
  letter-spacing:-.01em;margin:34px 0 12px;padding-bottom:7px;
  border-bottom:1px solid var(--line);
}
/* nota y su desglose */
.nota-caja{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:18px 20px;box-shadow:var(--sombra);
}
.nota-cab{display:flex;align-items:baseline;gap:12px;margin-bottom:4px}
.nota-num{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:40px;
  line-height:1;letter-spacing:-.03em;color:var(--accent);
}
.nota-de{color:var(--muted);font-size:14px}
.nota-pie{color:var(--muted);font-size:13px;margin:8px 0 16px}
.desglose{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.desglose li{
  display:grid;grid-template-columns:1fr auto;gap:4px 14px;
  padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px;
}
.desglose b{font-weight:600}
.desglose .pts{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.desglose .pts.mas{color:var(--accent)}
.desglose .pts.menos{color:var(--alerta)}
.desglose .porque{grid-column:1/-1;color:var(--muted);font-size:13.5px}
/* cifras */
.cifras{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;
}
.cifras div{background:var(--panel);padding:13px 16px}
.cifras dt{color:var(--muted);font-size:12.5px;margin-bottom:3px}
.cifras dd{
  margin:0;font-weight:600;font-size:17px;font-variant-numeric:tabular-nums;
}
.cifras dd small{font-weight:400;color:var(--muted);font-size:13px}
/* normativa: pregunta -> respuesta -> cita literal */
.qa{margin:0}
.qa-i{padding:13px 0;border-bottom:1px solid var(--line)}
.qa-p{font-weight:600;font-size:14.5px;margin:0 0 3px}
.qa-r{color:var(--ink-2);font-size:14.5px;margin:0}
.qa-r ul{margin:4px 0 0;padding-left:20px}
.qa-c{
  color:var(--muted);font-size:13px;font-style:italic;margin:6px 0 0;
  padding-left:11px;border-left:2px solid var(--line);
}
.qa-t{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);margin-left:7px;
}
.original{margin:30px 0 0}
.original a{
  display:inline-block;font-weight:600;font-size:14.5px;color:var(--accent);
  text-decoration:none;border:1px solid var(--line);border-radius:99px;
  padding:9px 18px;background:var(--panel);
}
.original a:hover{border-color:var(--accent)}
.leida{color:var(--muted);font-size:13px;margin:14px 0 0}
@media(max-width:560px){
  .ficha{padding:18px 16px 46px}
  .ficha h1{font-size:25px}
  .nota-num{font-size:34px}
}

/* ================= menú de secciones ================= */
/* Solo palabras. Ni bandeja, ni recuadro, ni fondo: lo único que marca dónde
   estás es un subrayado bajo el rótulo. Lo que separa este menú de la fila de
   chips que viene justo debajo ya no es un marco, es la letra —Bricolage, la
   de los titulares, contra la Figtree del resto— y el aire de alrededor. */
.menu{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline;
  gap:4px 26px; margin:12px 0 20px;
}
/* 17px: un punto por encima del texto corrido (16) y bien por debajo del
   titular. El relleno de abajo no es decoración: reserva el sitio del
   subrayado, que al ir en un elemento en línea no ocupa alto propio y si no
   se metería en la fila de filtros. */
.menu-b{
  display:inline-flex; align-items:baseline; gap:7px; text-decoration:none;
  font-family:"Bricolage Grotesque",Figtree,sans-serif;
  font-size:17px; font-weight:600; letter-spacing:-.012em; line-height:1.25;
  color:var(--muted); white-space:nowrap; padding-bottom:7px;
}
.menu-b:hover{color:var(--ink)}
.menu-b:focus-visible{outline:2px solid var(--accent); outline-offset:3px;
  border-radius:5px}
/* El subrayado va bajo la palabra, no bajo el conjunto: el recuento no es
   parte del nombre de la sección. De ahí que el rótulo viaje en su propio
   `<span class="w">`. En hover se insinúa en gris, para que se vea que la
   palabra es un enlace sin tener que subrayarlas todas. */
.menu-b .w{border-bottom:2.5px solid transparent; padding-bottom:4px}
.menu-b:hover .w{border-bottom-color:var(--line)}
.menu-b.aqui{color:var(--ink); cursor:default}
.menu-b.aqui .w{border-bottom-color:var(--accent)}
/* El recuento, en la letra del texto y en gris: es un dato de apoyo, y en la
   letra del titular competía con el nombre de la sección. */
.menu-b .n{
  font-family:Figtree,"Segoe UI",system-ui,sans-serif;
  font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums;
  color:var(--muted); letter-spacing:0;
}
@media (max-width:620px){
  .menu{gap:4px 18px; margin:10px 0 16px}
  .menu-b{font-size:15.5px; gap:6px; padding-bottom:6px}
  .menu-b .n{font-size:11.5px}
}

.dir-entrada{font-size:16.5px;color:var(--ink-2);line-height:1.5;margin:0;max-width:72ch}
.dir-nota{font-size:13.5px;color:var(--muted);line-height:1.5;margin:14px 0 0;max-width:78ch}
.dir-nota b{color:var(--ink-2)}
.dir-h2{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:19px;
  letter-spacing:-.01em;margin:34px 0 12px;padding-bottom:7px;
  border-bottom:1px solid var(--line);
}
.dir-tabla-env{overflow-x:auto;margin:18px 0 0;border:1px solid var(--line);
  border-radius:13px;background:var(--panel)}
.dir-tabla{width:100%;border-collapse:collapse;font-size:14.5px;min-width:640px}
.dir-tabla th,.dir-tabla td{
  text-align:right;padding:11px 14px;border-bottom:1px solid var(--line2,var(--line));
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.dir-tabla th:first-child,.dir-tabla td:first-child{text-align:left;white-space:normal}
.dir-tabla tbody tr:last-child td{border-bottom:none}
.dir-tabla thead th{
  font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  font-weight:700;border-bottom:1px solid var(--line);cursor:pointer;user-select:none;
  background:var(--sunk);
}
.dir-tabla thead th:first-child{border-top-left-radius:12px}
.dir-tabla thead th:last-child{border-top-right-radius:12px}
.dir-tabla thead th:hover{color:var(--ink)}
.dir-tabla thead th[aria-sort]{color:var(--accent)}
.dir-tabla tbody tr:hover{background:var(--sunk)}
.dir-tabla .op{font-weight:600;color:var(--accent);text-decoration:none}
.dir-tabla .op:hover{text-decoration:underline}
.dir-tabla .sub{display:block;font-size:12.5px;color:var(--muted);font-weight:400}
.dir-tabla .flojo{color:var(--muted)}
/* La nota, con el mismo código de color que la portada. Con respaldo por si
   se pinta en un contexto que no defina esas variables (la ficha de
   operador, que no carga la paleta de `ranking.CSS`). */
.dir-tabla .nota{font-weight:700}
.dir-tabla .nota.alta{color:var(--facil,#0F7A5A)}
.dir-tabla .nota.baja{color:var(--muted)}

/* ---------- el listado de operadores, con el formato de la portada ----------
   No es una tabla parecida a la de campañas: es la misma. Las clases (`.cab`,
   `.fila-c`, `.c-nombre`, `.ico`, `.dato`, `.nota`) salen de `ranking.CSS`,
   que este bundle ya carga, así que lo único que hay aquí es el ancho de las
   siete columnas —las cifras son otras— y cómo se pliega en estrecho. Si algún
   día cambia el aspecto de una fila de campaña, cambia también el de esta sin
   que nadie tenga que acordarse.
   Un préstamo que NO se hace: `.barrita`. En la portada el verde es lo que
   queda por repartir de una campaña; en un operador la cifra es lo ya
   repartido, y pintar de verde el otro lado de la misma proporción sería usar
   el mismo color para decir lo contrario. */
.dir-lista{margin-top:16px}
/* Mínimo real 998px, como la de campañas (988): por debajo la fila se pliega
   sola con las medias de abajo, no hay scroll horizontal. */
.dir-lista .cab, .dir-lista .fila-c{
  grid-template-columns:minmax(230px,1fr) 132px 128px 122px 118px 92px;
}
/* El hueco de identidad es el mismo `.ban` de 128x72 de la portada, pero lo
   llena un logo cuadrado: `contain` para que no se recorte —un logotipo
   recortado deja de ser el logotipo— sobre el fondo hundido, que es lo que
   convierte el sobrante de los lados en marco y no en agujero. */
.dir-lista .ban-logo{object-fit:contain; padding:7px; background:var(--sunk)}
.dir-lista .ban-logo.ico-letra{font-size:30px; padding:0}
/* la fila es un enlace, no un botón como en la portada */
.dir-lista .fila-c{text-decoration:none; display:grid}
.dir-lista .dato{min-width:0}
@media (max-width:1080px){
  .dir-lista .fila-c{grid-template-columns:repeat(4,1fr); gap:10px 12px; padding:14px 15px}
  .dir-lista .fila-c > .c-nombre{grid-row:1; grid-column:1 / 4}
  .dir-lista .fila-c > .c-nota{grid-row:1; grid-column:4; text-align:right}
  .dir-lista .fila-c > .c-camps, .dir-lista .fila-c > .c-bolsa,
  .dir-lista .fila-c > .c-pagado,
  .dir-lista .fila-c > .c-legibles{grid-column:span 2; text-align:left}
}
/* Teléfono: dos columnas y cada dato con su rótulo (`.movil-et`), que sin
   cabecera un número suelto no dice de qué es. */
@media (max-width:620px){
  .dir-lista .fila-c{grid-template-columns:1fr auto; gap:9px 12px}
  .dir-lista .fila-c > .c-nombre{grid-row:1; grid-column:1}
  .dir-lista .fila-c > .c-nota{grid-row:1; grid-column:2; text-align:right; align-self:start}
  .dir-lista .fila-c > .c-camps{grid-row:2; grid-column:1; text-align:left}
  .dir-lista .fila-c > .c-bolsa{grid-row:2; grid-column:2; text-align:right}
  .dir-lista .fila-c > .c-pagado{grid-row:3; grid-column:1; text-align:left}
  .dir-lista .fila-c > .c-legibles{grid-row:3; grid-column:2; text-align:right}
}