/* ============================================================
   METODION · sistema visual v2 · M0 (Dirección, 12 sep 2026)
   ------------------------------------------------------------
   Un solo fichero, dos ámbitos:
     [data-ambito="panel"]  → landing, alta y panel del preparador (dirección A «Pizarra»)
     [data-ambito="app"]    → app del jugador (APP-V3 · propuesta A «papel»: el mismo papel que el
                              panel, tarjetas con borde y sombra, color del preparador como único
                              acento: --c-color / --c-color-texto)
   Reglas:
     · Nada de colores sueltos en las pantallas: siempre var(--m-*) o var(--a-*).
     · Radios: 0 en el panel (papel y tinta), 14 px en la app (tarjetas y botones; chips 999).
     · Tipografía: Instrument Serif solo para titulares del panel/landing.
       Schibsted Grotesk para todo lo demás; en la app, pesos 700-800.
     · Fuentes por Google Fonts (dos familias, cuatro pesos). Sin iconos de fuente: SVG inline.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Schibsted+Grotesk:wght@400;500;700;800&display=swap");

/* ---------- 1 · Tokens ---------- */
:root {
  /* Papel y tinta (panel) */
  --m-papel:      #f4efe6;   /* fondo general */
  --m-papel-2:    #fbf8f1;   /* tarjetas, filas */
  --m-papel-3:    #efe9dc;   /* barra lateral, cabeceras suaves */
  --m-papel-4:    #f7efe3;   /* fila resaltada (aviso) */
  --m-linea:      #ddd5c4;   /* bordes */
  --m-linea-2:    #eee7d8;   /* separadores de fila */
  --m-tinta:      #1b1a17;   /* texto principal, botón primario */
  --m-tinta-2:    #45423b;   /* texto secundario */
  --m-tinta-3:    #6b675e;   /* texto auxiliar, etiquetas */
  --m-tinta-4:    #9a9489;   /* texto sobre tinta, desactivado */
  --m-tiza:       #2d7a55;   /* acento: hecho, positivo, enlace activo */
  --m-tiza-suave: #9ecdb4;   /* acento sobre tinta */
  --m-tiza-fondo: #e6f0ea;   /* fondo de chip positivo */
  --m-arcilla:    #b5562a;   /* aviso: molestia, sin publicar, atención */
  --m-arcilla-fondo: #f6e6dd;
  --m-error:      #a8322d;
  --m-error-fondo:#f5e1df;

  /* Tipografía */
  --m-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --m-sans:  "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --m-t-1: 42px;  /* h1 panel (serif) */
  --m-t-2: 28px;  /* h2 (serif) */
  --m-t-3: 20px;  /* h3 (sans 700) */
  --m-t-4: 15px;  /* cuerpo */
  --m-t-5: 13px;  /* auxiliar */
  --m-t-6: 12px;  /* etiqueta mayúsculas */

  /* Espacio, radio, sombra */
  --m-e-1: 4px; --m-e-2: 8px; --m-e-3: 12px; --m-e-4: 16px; --m-e-5: 24px; --m-e-6: 32px; --m-e-7: 48px; --m-e-8: 64px;
  --m-radio: 0px;
  --m-sombra: 0 12px 32px rgba(27, 26, 23, 0.10);
  --m-control: 44px;         /* alto mínimo de botones y campos */
  --m-foco: 0 0 0 3px rgba(45, 122, 85, 0.35);

  /* El color del preparador, en tiempo de ejecución. VIVE EN :root A PROPÓSITO (APP-V3): `aplicarMarca`
     lo escribe inline en <html>, y en app.html el ámbito está en <body>; si estuviera en
     [data-ambito="app"], esa regla pisaría por herencia el color del equipo. */
  --c-color:       #2d7a55;  /* SE SOBRESCRIBE con branding.color del tenant */
  --c-color-texto: #ffffff;  /* SE SOBRESCRIBE: blanco o tinta según contraste (lib/contraste.js) */
}

/* App del jugador · APP-V3 (propuesta A, «papel»). El color del equipo (--c-color) es ACENTO, no fondo:
   botón principal, pestaña activa + subrayado, .a-etiqueta, serie activa, sello, borde del día de hoy.
   El «hecho» es SIEMPRE --a-ok (verde), nunca el color del equipo. Umbrales de contraste que el test
   comprueba (tests/v2-app-v3.test.js): texto/capa ≥ 12:1, texto-2/capa ≥ 6:1, texto-3/fondo ≥ 3:1,
   capa/fondo ≥ 1,05:1 (+ borde 1px --a-linea siempre), ok y aviso sobre capa ≥ 4,5:1. */
[data-ambito="app"] {
  --a-fondo:   #f4efe6;      /* papel */
  --a-capa:    #fffdf9;      /* tarjeta */
  --a-capa-2:  #ece6da;      /* tarjeta hundida / chip / celda vacía del calendario */
  --a-linea:   #ddd5c4;
  --a-texto:   #1b1a17;
  --a-texto-2: #5b574f;
  --a-texto-3: #8c877d;      /* el #8f8a80 del encargo daba 2,998:1 sobre el papel; este pasa el 3:1 de §1 */
  --a-ok:      #2d7a55;      /* hecho / asistencia sí  (verde, NUNCA el color del equipo) */
  --a-aviso:   #b5562a;      /* molestia / no voy / pausado (arcilla) */
  --a-celda:   #e3ddd0;      /* día vacío del calendario: se ve, no es «cuadrado vacío» */
  --a-sombra:  0 4px 14px rgba(27,26,23,.06);
  --a-radio:   14px;         /* tarjetas; botón 14, chip 999 */
  --a-control: 54px;         /* alto del botón principal y de la pestaña */
  --a-t-1: 30px;  /* h1 · Schibsted Grotesk 800 · line-height 1.1 · caja normal (sin uppercase) */
  --a-t-2: 20px;
  --a-t-3: 16px;
  --a-t-4: 13px;
  --a-t-5: 11px;
  --a-safe: env(safe-area-inset-bottom, 0px);
}

/* ---------- 2 · Base ---------- */
[data-ambito] { margin: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
[data-ambito="panel"] { background: var(--m-papel); color: var(--m-tinta); font-family: var(--m-sans); font-size: var(--m-t-4); line-height: 1.5; }
[data-ambito="app"]   { background: var(--a-fondo); color: var(--a-texto); font-family: var(--m-sans); font-size: var(--a-t-3); line-height: 1.45; }
[data-ambito] *, [data-ambito] *::before, [data-ambito] *::after { box-sizing: border-box; }
[data-ambito] a { color: inherit; }
[data-ambito] :focus-visible { outline: none; box-shadow: var(--m-foco); }
[data-ambito] button { font: inherit; cursor: pointer; }
[data-ambito] svg { display: block; }
/* DISEÑO (auditoría 21 sep 2026) · dos reglas que cada página llevaba por su cuenta:
   · `[hidden]` gana a cualquier display de clase (m-campo, m-check, a-pantalla son flex). GLOBAL, sin
     ancestro (HOTFIX coach-v43): en index.html las secciones llevan `data-ambito="app"` y `hidden`
     ELLAS MISMAS, sin ningún `[data-ambito]` por encima, y `[data-ambito] [hidden]` no las alcanzaba: la
     puerta pintó los ocho pasos seguidos en producción. `hidden` es del navegador y ninguna clase de
     ninguna página tiene por qué pisarlo.
   · un ENLACE con piel de botón primario: `[data-ambito] a { color: inherit }` pesa más que
     `.m-btn-primario` y se leía tinta sobre tinta (estados vacíos de inicio.js y contenido.js). */
[hidden] { display: none !important; }
[data-ambito] a.m-btn-primario, [data-ambito] a.m-btn-primario:hover { color: var(--m-papel); }

/* ---------- 3 · Tipografía del panel ---------- */
.m-h1 { font-family: var(--m-serif); font-weight: 400; font-size: var(--m-t-1); line-height: 1.05; letter-spacing: -0.01em; margin: 0; }
.m-h2 { font-family: var(--m-serif); font-weight: 400; font-size: var(--m-t-2); line-height: 1.1; margin: 0; }
.m-h3 { font-family: var(--m-sans); font-weight: 700; font-size: var(--m-t-3); line-height: 1.25; margin: 0; }
.m-etiqueta { font-size: var(--m-t-6); letter-spacing: 0.14em; text-transform: uppercase; color: var(--m-tinta-3); font-weight: 700; }
.m-aux { font-size: var(--m-t-5); color: var(--m-tinta-3); }
.m-sec { color: var(--m-tinta-2); }
.m-num { font-family: var(--m-serif); font-size: 40px; line-height: 1; }

/* ---------- 4 · Botones (panel) ---------- */
.m-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--m-e-2); min-height: var(--m-control); padding: 0 var(--m-e-4); border: 1.5px solid var(--m-tinta); background: transparent; color: var(--m-tinta); font-weight: 500; font-size: 14px; text-decoration: none; border-radius: var(--m-radio); white-space: nowrap; }
.m-btn:hover { background: var(--m-papel-3); }
.m-btn-primario { background: var(--m-tinta); color: var(--m-papel); font-weight: 700; }
.m-btn-primario:hover { background: #000; }
.m-btn-suave { border-color: transparent; color: var(--m-tinta-2); }
.m-btn-suave:hover { background: var(--m-papel-3); color: var(--m-tinta); }
.m-btn-peligro { border-color: var(--m-error); color: var(--m-error); }
.m-btn-peligro:hover { background: var(--m-error-fondo); }
.m-btn-pequeno { min-height: 34px; padding: 0 var(--m-e-3); font-size: 13px; }
.m-btn[disabled], .m-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.m-enlace { color: var(--m-tinta); text-decoration: underline; text-underline-offset: 3px; }
.m-enlace:hover { color: var(--m-tiza); }

/* ---------- 5 · Campos ---------- */
.m-campo { display: flex; flex-direction: column; gap: 6px; }
.m-campo > label { font-size: var(--m-t-5); font-weight: 700; color: var(--m-tinta-2); }
.m-input, .m-select, .m-textarea { width: 100%; min-height: var(--m-control); padding: 10px 14px; border: 1px solid var(--m-linea); background: var(--m-papel-2); color: var(--m-tinta); font: inherit; border-radius: var(--m-radio); }
.m-input::placeholder, .m-textarea::placeholder { color: var(--m-tinta-4); }
.m-input:focus, .m-select:focus, .m-textarea:focus { border-color: var(--m-tinta); }
.m-textarea { min-height: 96px; resize: vertical; }
.m-ayuda { font-size: var(--m-t-5); color: var(--m-tinta-3); }
.m-error-txt { font-size: var(--m-t-5); color: var(--m-error); }
.m-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--m-tinta-2); }
.m-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--m-tinta); }
.m-muestras { display: flex; gap: 8px; }
.m-muestra { width: 36px; height: 36px; border: 2px solid transparent; cursor: pointer; }
.m-muestra[aria-checked="true"] { border-color: var(--m-tinta); outline: 2px solid var(--m-papel); outline-offset: -4px; }

/* ---------- 6 · Chips y estados ---------- */
.m-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--m-linea); font-size: 13px; background: transparent; color: var(--m-tinta); white-space: nowrap; }
.m-chip-activo { background: var(--m-tinta); color: var(--m-papel); border-color: var(--m-tinta); }
.m-estado { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.m-estado::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.m-estado-ok { color: var(--m-tiza); }
.m-estado-aviso { color: var(--m-arcilla); }
.m-estado-inactivo { color: var(--m-tinta-3); }
.m-estado-inactivo::before { background: transparent; border: 1.5px solid currentColor; }
.m-tag { display: inline-block; padding: 3px 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.m-tag-tiza { background: var(--m-tiza-fondo); color: var(--m-tiza); }
.m-tag-arcilla { background: var(--m-arcilla-fondo); color: var(--m-arcilla); }
.m-tag-neutro { background: var(--m-papel-3); color: var(--m-tinta-3); }
.m-semana { display: flex; gap: 4px; }                     /* siete cuadrados L-D */
.m-semana i { width: 14px; height: 14px; border: 1px solid var(--m-linea); display: block; }
.m-semana i.si { background: var(--m-tiza); border-color: var(--m-tiza); }
.m-semana i.molestia { background: var(--m-arcilla); border-color: var(--m-arcilla); }

/* ---------- 7 · Superficies ---------- */
.m-tarjeta { background: var(--m-papel-2); border: 1px solid var(--m-linea); }
.m-tarjeta-cab { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; border-bottom: 1px solid var(--m-linea); }
.m-tarjeta-pie { padding: 14px 24px; border-top: 1px solid var(--m-linea); font-size: var(--m-t-5); color: var(--m-tinta-3); }
.m-tinta-bloque { background: var(--m-tinta); color: var(--m-papel); padding: var(--m-e-5); }
.m-tinta-bloque .m-etiqueta { color: var(--m-tiza-suave); }
.m-fila { display: grid; gap: 12px; padding: 14px 24px; border-bottom: 1px solid var(--m-linea-2); align-items: center; }
.m-fila:last-child { border-bottom: 0; }
.m-fila-resaltada { background: var(--m-papel-4); }
.m-fila-cab { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--m-tinta-3); padding: 10px 24px; border-bottom: 1px solid var(--m-linea-2); }
.m-vacio { padding: var(--m-e-7) var(--m-e-5); text-align: center; color: var(--m-tinta-3); display: flex; flex-direction: column; align-items: center; gap: var(--m-e-3); }
.m-vacio .m-h2 { color: var(--m-tinta); }

/* ---------- 8 · Estructura del panel ---------- */
.m-panel { display: flex; min-height: 100vh; }
.m-lateral { width: 248px; flex-shrink: 0; background: var(--m-papel-3); border-right: 1px solid var(--m-linea); padding: 28px 20px; display: flex; flex-direction: column; gap: 28px; }
.m-marca { display: flex; align-items: center; gap: 12px; padding: 0 8px; }
.m-marca-sello { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-family: var(--m-serif); font-size: 20px; background: var(--c-color); color: var(--c-color-texto); }
.m-nav { display: flex; flex-direction: column; gap: 2px; }
.m-nav a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; text-decoration: none; color: var(--m-tinta); font-weight: 500; min-height: var(--m-control); }
.m-nav a:hover { background: var(--m-papel); }
.m-nav a[aria-current="page"] { background: var(--m-tinta); color: var(--m-papel); }
.m-nav svg { width: 18px; height: 18px; }
.m-lateral-pie { margin-top: auto; padding: 0 12px; display: flex; flex-direction: column; gap: 10px; font-size: var(--m-t-5); color: var(--m-tinta-3); }
.m-principal { flex: 1; min-width: 0; padding: 40px 48px; display: flex; flex-direction: column; gap: var(--m-e-6); }
.m-cabecera { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--m-e-5); }
.m-acciones { display: flex; gap: 10px; flex-wrap: wrap; }
.m-rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px; }
.m-col-4 { grid-column: span 4; } .m-col-5 { grid-column: span 5; } .m-col-6 { grid-column: span 6; } .m-col-7 { grid-column: span 7; } .m-col-8 { grid-column: span 8; } .m-col-12 { grid-column: span 12; }
@media (max-width: 1100px) { .m-lateral { width: 72px; padding: 20px 12px; } .m-lateral .m-nav a span, .m-lateral .m-marca div, .m-lateral-pie { display: none; } .m-principal { padding: 24px; } [class^="m-col-"] { grid-column: span 12; } }
@media (max-width: 720px) { .m-panel { flex-direction: column; } .m-lateral { width: auto; flex-direction: row; align-items: center; border-right: 0; border-bottom: 1px solid var(--m-linea); padding: 10px 12px; gap: 12px; overflow-x: auto; } .m-nav { flex-direction: row; } .m-cabecera { flex-direction: column; align-items: stretch; } }

/* ---------- 9 · Modal y toast ---------- */
.m-velo { position: fixed; inset: 0; background: rgba(27, 26, 23, 0.55); display: flex; align-items: center; justify-content: center; padding: var(--m-e-5); z-index: 50; }
.m-modal { width: 100%; max-width: 560px; background: var(--m-papel-2); border: 1px solid var(--m-linea); box-shadow: var(--m-sombra); display: flex; flex-direction: column; }
.m-modal-cab { padding: 24px 28px 8px; }
.m-modal-cuerpo { padding: 8px 28px 24px; display: flex; flex-direction: column; gap: var(--m-e-4); }
.m-modal-pie { padding: 16px 28px; border-top: 1px solid var(--m-linea); display: flex; justify-content: flex-end; gap: 10px; }
.m-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--m-tinta); color: var(--m-papel); padding: 12px 18px; font-size: 14px; box-shadow: var(--m-sombra); z-index: 60; }

/* ---------- 10 · Avatares e iniciales ---------- */
.m-avatar { width: 34px; height: 34px; border: 1px solid var(--m-linea); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; background: var(--m-papel-2); flex-shrink: 0; }

/* ============================================================
   APP DEL JUGADOR · APP-V3 (propuesta A) · los componentes base
   ------------------------------------------------------------
   Aquí lo que también pinta el móvil de muestra del panel (miapp.js, que no carga app.css): la
   pantalla, la cabecera, la etiqueta, el h1, las cifras, la fila, el botón, la barra. El resto de
   piezas (campos, series, calendario, vídeo, evento, día del programa…) está en coach/css/app.css.
   ============================================================ */
.a-pantalla { display: flex; flex-direction: column; background: var(--a-fondo); color: var(--a-texto); min-height: 100%; }
/* La barra es FIJA (abajo): la pantalla que la lleva reserva su alto para que el último elemento no quede debajo. */
.a-pantalla.a-con-pie { padding-bottom: calc(var(--a-control) + var(--a-safe) + 16px); }
.a-cab { min-height: 56px; padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 8px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.a-marca { display: flex; align-items: center; gap: 10px; min-width: 0; }
.a-marca-sello { width: 32px; height: 32px; flex: none; border-radius: 8px; background: var(--c-color); color: var(--c-color-texto); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; overflow: hidden; }
.a-marca-sello img { width: 100%; height: 100%; object-fit: cover; }
.a-marca strong { font-size: 15px; font-weight: 700; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-marca .a-cab-txt span { font-size: var(--a-t-5); color: var(--a-texto-3); }   /* (no el sello: es un span también) */
.a-chip { width: 36px; height: 36px; flex: none; border-radius: 999px; background: var(--a-capa-2); border: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--a-texto-2); text-decoration: none; }
.a-etiqueta { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-acento, var(--c-color)); }   /* la ÚNICA uppercase de la app */
.a-h1 { font-size: var(--a-t-1); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; margin: 0; text-transform: none; overflow-wrap: anywhere; hyphens: auto; text-wrap: balance; }
.a-h2 { font-size: var(--a-t-2); font-weight: 800; line-height: 1.15; margin: 0; }
.a-sec { color: var(--a-texto-2); font-size: 15px; line-height: 1.45; }
.a-cifras { display: flex; gap: 22px; }
.a-cifra { display: flex; flex-direction: column; gap: 4px; }
.a-cifra b { font-size: 24px; font-weight: 800; line-height: 1; }
.a-cifra span { font-size: 12px; color: var(--a-texto-2); }
.a-cifra-color b { color: var(--c-acento, var(--c-color)); }
.a-bloque { display: flex; flex-direction: column; gap: 10px; margin: 12px 16px 0; padding: 16px; background: var(--a-capa); border: 1px solid var(--a-linea); border-radius: var(--a-radio); box-shadow: var(--a-sombra); }   /* la tarjeta (mockup .card) */
.a-bloque-hi { border-left: 4px solid var(--c-color); }
.a-bloque:empty { display: none; }
.a-lista { display: flex; flex-direction: column; gap: 8px; padding: 0 16px; }
.a-fila { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--a-capa); border: 1px solid var(--a-linea); border-radius: var(--a-radio); box-shadow: var(--a-sombra); min-height: 64px; color: inherit; text-decoration: none; }
.a-fila-num { width: 28px; height: 28px; flex: none; border-radius: 8px; background: var(--a-capa-2); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--a-texto-2); }
.a-fila-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.a-fila-txt strong { font-size: 16px; font-weight: 700; }
.a-fila-txt span { font-size: var(--a-t-4); color: var(--a-texto-2); }
.a-fila-hecha strong { color: var(--a-texto-3); text-decoration: line-through; }
.a-fila-actual { display: flex; flex-direction: column; gap: 12px; padding: 14px; background: var(--a-capa); color: var(--a-texto); border: 1px solid var(--a-linea); border-left: 4px solid var(--c-color); border-radius: var(--a-radio); box-shadow: var(--a-sombra); }
.a-fila-actual .a-fila-num { background: var(--c-acento, var(--c-color)); color: var(--c-acento-texto, var(--c-color-texto)); }
.a-btn { display: flex; align-items: center; justify-content: center; min-height: var(--a-control); padding: 0 20px; border-radius: 14px; font-weight: 700; font-size: 17px; text-decoration: none; border: 0; transition: transform 120ms; }
.a-btn:active { transform: scale(0.98); }
.a-btn-color { background: var(--c-acento, var(--c-color)); color: var(--c-acento-texto, var(--c-color-texto)); }
.a-btn-tinta { background: var(--a-texto); color: var(--a-fondo); }
.a-btn-fantasma { background: transparent; color: var(--a-texto); border: 1.5px solid var(--a-linea); }
.a-check { width: 22px; height: 22px; color: var(--a-ok); flex: none; }
.a-progreso { height: 6px; background: var(--a-capa-2); border-radius: 999px; overflow: hidden; }
.a-progreso i { display: block; height: 100%; background: var(--c-color); border-radius: 999px; }
.a-aviso { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #f6e7de; border: 1px solid var(--a-aviso); border-radius: var(--a-radio); color: var(--a-texto); }
.a-aviso svg { color: var(--a-aviso); }
.a-pie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; min-height: calc(var(--a-control) + var(--a-safe)); border-top: 1px solid var(--a-linea); background: var(--a-capa); padding: 6px 8px var(--a-safe); }
.a-pie a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--a-texto-2); text-decoration: none; min-height: calc(var(--a-control) - 6px); position: relative; }
.a-pie a[aria-current="page"] { color: var(--c-acento, var(--c-color)); }
.a-pie a[aria-current="page"]::after { content: ""; position: absolute; top: -6px; width: 28px; height: 3px; border-radius: 2px; background: var(--c-color); }
.a-pie svg { width: 22px; height: 22px; }
.a-pie .punto { position: absolute; top: 4px; right: calc(50% - 16px); width: 8px; height: 8px; border-radius: 50%; background: var(--a-aviso); }