/* ============================================================================
   NICC · BEZ · Presentación de los botones del plan (nicc-pp-*)
   ----------------------------------------------------------------------------
   Adaptación de la maqueta aprobada "Botones que muestran el avance" a los
   botones reales del plan (span.plugin_button del plugin `button`).

   Reglas de esta hoja:
   - Prefijo único nicc-pp- en TODAS las clases propias: nada se filtra fuera
     de ese espacio de nombres. Cada selector incluye siempre al menos una
     clase nicc-pp-*, nunca un selector de elemento suelto.
   - Colores fijos (hexadecimales literales): la página del sistema siempre
     es blanca, no hay modo oscuro ni variables de tema que resolver aquí.
   - El botón base (.plugin_button) viene de lib/plugins/button/style.css con
     display:inline-table / table-cell. Los selectores que cambian el layout
     usan compuestos ".plugin_button.nicc-pp-b" para ganar por especificidad
     sin depender del orden de carga de las hojas ni usar !important salvo
     en el único punto donde es imprescindible (ver más abajo).
   ============================================================================ */

/* ── Botón del plan: base común a franja / anillo / riel ────────────────── */
.plugin_button.nicc-pp-b {
    display: flex !important; /* el botón base es inline-table/table-cell: hay
                                  que forzar el cambio de modelo de caja */
    width: 100%;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    text-align: left;
    font-weight: 700;
}
.nicc-pp-b > .plugin_button_text {
    display: block;
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Tipo de presentación: cada uno ajusta el padding/forma del botón. */
.plugin_button.nicc-pp-tipo-franja { padding: 12px 16px 15px; border-radius: 12px; }
.plugin_button.nicc-pp-tipo-anillo { padding: 10px 16px 10px 10px; border-radius: 12px; }
.plugin_button.nicc-pp-tipo-riel   { padding: 0; border-radius: 10px; gap: 0; }

/* ── Icono de trazo, común a los tres tipos ──────────────────────────────── */
.nicc-pp-ic {
    width: 19px;
    height: 19px;
    flex: none;
    color: #4a76ad;
}
.nicc-pp-tipo-riel .nicc-pp-ic { margin-left: 16px; }

/* ── Glifo de estado: el estado nunca depende solo del color ─────────────── */
.nicc-pp-glifo {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    flex: none;
    width: 14px;
    text-align: center;
}
.nicc-pp-e-fin  .nicc-pp-glifo { color: #15803d; }
.nicc-pp-e-pro  .nicc-pp-glifo { color: #8a5a06; }
.nicc-pp-e-cero .nicc-pp-glifo { color: #5b6b7f; }
.nicc-pp-e-nd   .nicc-pp-glifo { color: #7a8ba1; }

/* Texto solo para lector de pantalla: el dato completo, en orden. */
.nicc-pp-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── Insignias de datos (chip) ────────────────────────────────────────────── */
.nicc-pp-chip {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    padding: 2px 9px;
    flex: none;
    white-space: nowrap;
}
.nicc-pp-chip-pct { background: #dfeaf8; color: #0b4f86; }
.nicc-pp-chip-tar { background: #eef2f7; color: #46586c; }
.nicc-pp-chip-est {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.nicc-pp-e-fin  .nicc-pp-chip-est { background: #e7f5ec; color: #106830; }
.nicc-pp-e-pro  .nicc-pp-chip-est { background: #fdf1e3; color: #92400a; }
.nicc-pp-e-cero .nicc-pp-chip-est { background: #eef2f7; color: #46586c; }
.nicc-pp-e-nd   .nicc-pp-chip-est { background: #f1f5f9; color: #46586c; }

/* Cifra grande de porcentaje, usada por el tipo "riel". */
.nicc-pp-pct-gran {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.03em;
    color: #0b4f86;
    font-variant-numeric: tabular-nums;
    flex: none;
}
.nicc-pp-e-fin  .nicc-pp-pct-gran { color: #106830; }
.nicc-pp-e-cero .nicc-pp-pct-gran { color: #5b6b7f; }
.nicc-pp-e-nd   .nicc-pp-pct-gran { color: #7a8ba1; }

/* Los "datos" (glifo + insignias + cifra) siempre a la derecha del texto. */
.nicc-pp-tipo-franja .nicc-pp-add,
.nicc-pp-tipo-anillo .nicc-pp-add,
.nicc-pp-tipo-riel .nicc-pp-add {
    display: inline-flex;
    align-items: center;
}
.nicc-pp-tipo-franja > .nicc-pp-chip,
.nicc-pp-tipo-franja > .nicc-pp-glifo,
.nicc-pp-tipo-anillo > .nicc-pp-chip,
.nicc-pp-tipo-anillo > .nicc-pp-glifo {
    margin-left: auto;
}
.nicc-pp-tipo-franja > .nicc-pp-chip ~ .nicc-pp-chip,
.nicc-pp-tipo-anillo > .nicc-pp-chip ~ .nicc-pp-chip {
    margin-left: 0;
}

/* ── Tipo 1 (implícito): clásica ──────────────────────────────────────────
   No existe clase para ella a propósito: el botón se deja exactamente como
   está, sin ninguna adición del sistema de presentación. */

/* ── Tipo: franja al pie ──────────────────────────────────────────────────── */
.nicc-pp-franja {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: #dde8f6;
}
.nicc-pp-franja-i {
    display: block;
    height: 100%;
    background: #0369a1;
    border-radius: 0 2px 2px 0;
}
.nicc-pp-e-fin .nicc-pp-franja-i { background: #15803d; }
.nicc-pp-e-pro .nicc-pp-franja-i { background: #c2820b; }

/* ── Tipo: anillo de avance ───────────────────────────────────────────────── */
.nicc-pp-anillo {
    width: 38px;
    height: 38px;
    flex: none;
    position: relative;
    margin-left: auto;
}
.nicc-pp-anillo-svg { width: 38px; height: 38px; transform: rotate(-90deg); }
.nicc-pp-pista { stroke: #dde8f6; }
.nicc-pp-arco {
    stroke: #0369a1;
    transition: stroke-dashoffset .6s ease;
}
.nicc-pp-e-fin .nicc-pp-arco { stroke: #15803d; }
.nicc-pp-e-pro .nicc-pp-arco { stroke: #c2820b; }
.nicc-pp-anillo-num {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 10.5px;
    font-weight: 700;
    color: #22406b;
    letter-spacing: -.03em;
}
.nicc-pp-e-fin .nicc-pp-anillo-num { color: #106830; }

/* ── Tipo: riel de estado ─────────────────────────────────────────────────── */
.nicc-pp-tipo-riel { flex-wrap: nowrap; }
.nicc-pp-riel {
    width: 6px;
    align-self: stretch;
    flex: none;
    background: #94a3b8;
}
.nicc-pp-e-fin  .nicc-pp-riel { background: #15803d; }
.nicc-pp-e-pro  .nicc-pp-riel { background: #c2820b; }
.nicc-pp-e-cero .nicc-pp-riel { background: #b6c4d6; }
.nicc-pp-e-nd   .nicc-pp-riel { background: #dbe3ee; }
.nicc-pp-tipo-riel > .plugin_button_text {
    padding: 11px 0;
}
.nicc-pp-tipo-riel .nicc-pp-ic + .plugin_button_text,
.nicc-pp-tipo-riel .nicc-pp-glifo,
.nicc-pp-tipo-riel .nicc-pp-chip,
.nicc-pp-tipo-riel .nicc-pp-pct-gran {
    margin-top: 11px;
    margin-bottom: 11px;
}
.nicc-pp-tipo-riel .nicc-pp-pct-gran,
.nicc-pp-tipo-riel > .nicc-pp-chip:last-of-type {
    margin-right: 16px;
}
.nicc-pp-tipo-riel .nicc-pp-glifo { margin-left: auto; }
.nicc-pp-tipo-riel .nicc-pp-pct-gran ~ .nicc-pp-glifo,
.nicc-pp-tipo-riel .nicc-pp-chip ~ .nicc-pp-glifo {
    margin-left: 8px;
}

/* Foco de teclado visible sobre el botón, en los tres tipos activos. */
.plugin_button.nicc-pp-b:focus-visible {
    outline: 3px solid #0369a1;
    outline-offset: 2px;
}

/* ============================================================================
   Menú «Presentación de los botones del plan»
   ============================================================================ */
.nicc-pp-menu {
    margin: 18px 0;
    padding: 16px 18px;
    background: #ffffff;
    border: 1px solid #d7dee7;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 26, 38, .05);
}
.nicc-pp-titulo {
    margin: 0 0 14px;
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #46586c;
}
.nicc-pp-grupo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px dashed #d7dee7;
}
.nicc-pp-grupo:first-of-type { padding-top: 0; margin-top: 0; border-top: none; }
.nicc-pp-grupo-titulo {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #46586c;
}
.nicc-pp-fila {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

/* Botones de estilo (Clásica / Franja / Anillo / Riel) */
.nicc-pp-est {
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    min-height: 44px;
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid #d7dee7;
    background: #ffffff;
    color: #46586c;
    transition: background .15s, border-color .15s, color .15s;
}
.nicc-pp-est:hover { border-color: #0369a1; color: #0369a1; }
.nicc-pp-est:focus-visible { outline: 2px solid #0369a1; outline-offset: 2px; }
.nicc-pp-est[aria-pressed="true"] { background: #0369a1; border-color: #0369a1; color: #ffffff; }

/* Casillas de variables */
.nicc-pp-var {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-size: 13.5px;
    font-weight: 600;
    color: #46586c;
    background: transparent;
    border: 1px solid #d7dee7;
    border-radius: 999px;
    padding: 6px 15px 6px 10px;
    min-height: 44px;
    box-sizing: border-box;
    transition: border-color .15s, color .15s, background .15s;
}
.nicc-pp-var:hover { border-color: #0369a1; color: #0369a1; }
.nicc-pp-var-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.nicc-pp-var-caja {
    width: 15px;
    height: 15px;
    border-radius: 4px;
    border: 1.5px solid #d7dee7;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    transition: background .15s, border-color .15s;
}
.nicc-pp-var-tick {
    width: 11px;
    height: 11px;
    opacity: 0;
    color: #ffffff;
}
.nicc-pp-var-input:checked ~ .nicc-pp-var-caja {
    background: #0369a1;
    border-color: #0369a1;
}
.nicc-pp-var-input:checked ~ .nicc-pp-var-caja .nicc-pp-var-tick { opacity: 1; }
.nicc-pp-var:has(.nicc-pp-var-input:checked) {
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
}
.nicc-pp-var-input:focus-visible ~ .nicc-pp-var-caja {
    outline: 2px solid #0369a1;
    outline-offset: 2px;
}
.nicc-pp-var-input:disabled ~ .nicc-pp-var-caja,
.nicc-pp-var:has(.nicc-pp-var-input:disabled) {
    opacity: .55;
    cursor: not-allowed;
}
.nicc-pp-var:has(.nicc-pp-var-input:disabled) { pointer-events: none; }

.nicc-pp-nota {
    font-size: 12.5px;
    color: #46586c;
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}

/* Interruptores de módulo visible: objetivo táctil reducido (34px), a
   propósito, porque son muchos y van en una sola fila compacta. */
.nicc-pp-mod {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    min-width: 34px;
    min-height: 34px;
    padding: 0 6px;
    border-radius: 8px;
    border: 1px solid #d7dee7;
    background: #ffffff;
    color: #46586c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, border-color .15s, color .15s;
}
.nicc-pp-mod:hover { border-color: #0369a1; color: #0369a1; }
.nicc-pp-mod:focus-visible { outline: 2px solid #0369a1; outline-offset: 2px; }
.nicc-pp-mod[aria-pressed="true"] { background: #0f172a; border-color: #0f172a; color: #ffffff; }
.nicc-pp-mod[aria-pressed="false"] { text-decoration: line-through; opacity: .6; }

/* Fila de acción: guardar + mensaje de estado */
.nicc-pp-accion {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px solid #e7ecf2;
}
.nicc-pp-guardar {
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    min-height: 44px;
    padding: 8px 22px;
    border-radius: 999px;
    border: 1px solid #0369a1;
    background: #0369a1;
    color: #ffffff;
    transition: background .15s, border-color .15s, opacity .15s;
}
.nicc-pp-guardar:hover { background: #0b4f86; border-color: #0b4f86; }
.nicc-pp-guardar:focus-visible { outline: 2px solid #0369a1; outline-offset: 2px; }
.nicc-pp-guardar:disabled { opacity: .6; cursor: not-allowed; }
.nicc-pp-estado {
    font-size: 13.5px;
    color: #46586c;
}
.nicc-pp-estado-error { color: #b91c1c; font-weight: 600; }

/* ── Sin movimiento para quien lo pide ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .nicc-pp-b,
    .nicc-pp-arco,
    .nicc-pp-est,
    .nicc-pp-var,
    .nicc-pp-var-caja,
    .nicc-pp-mod,
    .nicc-pp-guardar {
        transition: none !important;
        animation: none !important;
    }
}

/* ── Responsive: en pantallas angostas se reduce el respiro ──────────────── */
@media screen and (max-width: 560px) {
    .plugin_button.nicc-pp-b { font-size: 13.5px; }
    .nicc-pp-tipo-riel .nicc-pp-ic { margin-left: 12px; }
    .nicc-pp-fila { gap: 6px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AJUSTES PEDIDOS EN LA REVISIÓN (2026-09-03)

   1. El menú era una nube de pastillas grandes. Pasa a ser una LISTA: una
      opción por renglón, con su casilla de verificación al frente. Ocupa
      menos y se lee de arriba abajo, que es como se decide.
   2. Las insignias de datos llevaban fondo gris y ensuciaban el botón. El
      dato se distingue por color de texto y peso, sin caja.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── El menú, más contenido ─────────────────────────────────────────────── */
.nicc-pp-menu {
    max-width: 560px;
}
.nicc-pp-grupo-titulo {
    margin-bottom: 4px;
}

/* Estilo y variables: una columna. Módulos: rejilla, que son trece. */
.nicc-pp-fila {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.nicc-pp-grupo:nth-of-type(3) .nicc-pp-fila {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 0 14px;
}

/* ── Cada opción es un renglón con su casilla al frente ─────────────────── */
.nicc-pp-est,
.nicc-pp-var,
.nicc-pp-mod {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    padding: 6px 8px;
    border: none;
    border-bottom: 1px solid #eef2f7;
    border-radius: 0;
    background: transparent;
    color: #334155;
    font-size: 13.5px;
    font-weight: 600;
    text-align: left;
    justify-content: flex-start;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}
.nicc-pp-est:last-child,
.nicc-pp-var:last-child,
.nicc-pp-mod:last-child { border-bottom: none; }

.nicc-pp-est:hover,
.nicc-pp-var:hover,
.nicc-pp-mod:hover {
    background: #f2f7fd;
    border-color: #eef2f7;
    color: #0b4f86;
}
.nicc-pp-est:focus-visible,
.nicc-pp-mod:focus-visible {
    outline: 2px solid #0369a1;
    outline-offset: -2px;
}

/* Estado elegido: manda la casilla y el peso del texto, no un relleno entero. */
.nicc-pp-est[aria-pressed="true"],
.nicc-pp-mod[aria-pressed="true"] {
    background: transparent;
    color: #0b4f86;
    font-weight: 700;
}
.nicc-pp-var:has(.nicc-pp-var-input:checked) {
    background: transparent;
    color: #0b4f86;
    font-weight: 700;
    border-color: #eef2f7;
}

/* La casilla de los botones (estilo y módulos) se dibuja con ::before, porque
   no son <input>; la de las variables ya la trae el marcado. */
.nicc-pp-est::before,
.nicc-pp-mod::before {
    content: "";
    width: 17px;
    height: 17px;
    flex: none;
    border: 1.5px solid #cbd5e1;
    border-radius: 4px;
    background: #ffffff no-repeat center center;
    background-size: 12px 12px;
}
.nicc-pp-est[aria-pressed="true"]::before,
.nicc-pp-mod[aria-pressed="true"]::before {
    border-color: #0369a1;
    background-color: #0369a1;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");
}
/* El estilo es una elección única: casilla redonda, para que se lea así. */
.nicc-pp-est::before { border-radius: 50%; }

/* Un módulo apagado se tacha: se ve de un vistazo cuál no va a salir. */
.nicc-pp-mod[aria-pressed="false"] {
    color: #6b7c92;
    text-decoration: line-through;
}

.nicc-pp-var-caja { order: -1; }

/* ── Insignias sin caja gris ────────────────────────────────────────────── */
.nicc-pp-chip {
    background: transparent;
    padding: 0 2px;
    border: none;
}
.nicc-pp-chip-pct { color: #0b4f86; font-weight: 700; }
.nicc-pp-chip-tar { color: #4a6a95; }
.nicc-pp-chip-est {
    color: #4a6a95;
    font-weight: 700;
    letter-spacing: .03em;
}
.nicc-pp-e-fin .nicc-pp-chip-est { color: #15803d; }
.nicc-pp-e-pro .nicc-pp-chip-est { color: #8a5a06; }

/* ═══════════════════════════════════════════════════════════════════════════
   SEGUNDA REVISIÓN EN PANTALLA (2026-09-03)

   El botón pasa a tener DOS LÍNEAS fijas: arriba el icono y el título, con la
   medida grande a la derecha; abajo, siempre, el resto de los datos. Antes las
   insignias se acomodaban donde cabían y la tira se veía desordenada: unas
   alineadas a la derecha, otras saltando de renglón.

   El anillo pierde la cifra de su interior —a 32 px "100%" se montaba sobre el
   trazo— y el porcentaje baja a la segunda línea. Icono e insignias quedan sin
   fondo: el dato se distingue por color y peso.
   ═══════════════════════════════════════════════════════════════════════════ */

.plugin_button.nicc-pp-b {
    /* !important porque la regla base del componente ya declara display:flex
       con !important para ganarle al CSS del plugin `button`. */
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 11px;
    row-gap: 1px;
    position: relative;
    text-align: left;
}

.nicc-pp-b > .nicc-pp-ic       { grid-column: 1; grid-row: 1; background: transparent; margin: 0; }
.nicc-pp-b > .plugin_button_text { grid-column: 2; grid-row: 1; }

/* La segunda línea, alineada bajo el título. */
.nicc-pp-b > .nicc-pp-datos {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 12px;
    font-weight: 600;
}

/* La medida grande ocupa las dos líneas, a la derecha. */
.nicc-pp-b > .nicc-pp-anillo,
.nicc-pp-b > .nicc-pp-pct-gran {
    grid-column: 3;
    grid-row: 1 / span 2;
    margin-left: 0;
    justify-self: end;
}

/* Riel y franja son cantos del botón, no elementos de la rejilla. */
.nicc-pp-b > .nicc-pp-riel {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 6px;
    height: auto;
}
.nicc-pp-b > .nicc-pp-franja {
    position: absolute;
    left: 0; right: 0; bottom: 0;
}
.nicc-pp-tipo-riel   { padding-left: 18px; }
.nicc-pp-tipo-franja { padding-bottom: 10px; }
.nicc-pp-tipo-riel .nicc-pp-ic { margin-left: 0; }
.nicc-pp-b > .nicc-pp-sr { grid-column: 1 / -1; grid-row: 3; }

/* Anillo sin cifra interior, algo más pequeño. */
.nicc-pp-anillo,
.nicc-pp-anillo-svg { width: 32px; height: 32px; }
.nicc-pp-anillo-num { display: none; }

/* Nada de cajas grises: ni tras el icono ni tras las insignias. */
.nicc-pp-ic,
.nicc-pp-chip,
.nicc-pp-chip-pct,
.nicc-pp-chip-tar,
.nicc-pp-chip-est,
.nicc-pp-e-cero .nicc-pp-chip-est,
.nicc-pp-e-nd .nicc-pp-chip-est,
.nicc-pp-e-fin .nicc-pp-chip-est,
.nicc-pp-e-pro .nicc-pp-chip-est {
    background: transparent;
    border: none;
    padding: 0;
}

/* ── El riel, alineado a la rejilla ─────────────────────────────────────────
   Sus reglas originales se escribieron para el orden en flex: rellenaban el
   título con 11 px arriba y abajo y empujaban las insignias con márgenes
   propios. Con las dos líneas fijas eso descuadra el texto, así que se anulan
   y el espaciado lo pone la rejilla, igual que en los demás estilos. */
.nicc-pp-tipo-riel > .plugin_button_text,
.nicc-pp-tipo-riel .nicc-pp-ic + .plugin_button_text,
.nicc-pp-tipo-riel .nicc-pp-glifo,
.nicc-pp-tipo-riel .nicc-pp-chip,
.nicc-pp-tipo-riel .nicc-pp-pct-gran,
.nicc-pp-tipo-riel > .nicc-pp-chip:last-of-type {
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0;
}
/* El riel es un canto absoluto: no necesita estirarse como hijo flex. */
.nicc-pp-b > .nicc-pp-riel { align-self: auto; }
/* El glifo llevaba margin-left:auto para empujarse al extremo derecho en flex.
   Dentro de la segunda línea eso lo separaba del resto de los datos. */
.nicc-pp-tipo-riel .nicc-pp-glifo,
.nicc-pp-tipo-riel .nicc-pp-pct-gran ~ .nicc-pp-glifo,
.nicc-pp-tipo-riel .nicc-pp-chip ~ .nicc-pp-glifo {
    margin-left: 0;
}

/* El riel original quitaba el relleno del botón y lo compensaba dentro del
   título (padding 11px 0). Anulado aquello, el botón se quedaba sin aire: se
   lo devolvemos, con un poco más a la izquierda para dejar pasar el canto. */
.plugin_button.nicc-pp-tipo-riel {
    padding: 11px 18px 11px 20px;
}

/* ── Blindaje frente al CSS del plugin `button` y del tema ──────────────────
   El botón real es `display:inline-table` y su rótulo `display:table-cell`
   con `width:99%`, además de `text-align:center`. Metidos en la rejilla, esos
   valores descolocan el contenido: el título se estira, las insignias se
   centran y la cifra grande se va a un renglón propio. Se neutralizan aquí,
   que es donde se sabe que la maquetación es una rejilla de dos líneas. */
.plugin_button.nicc-pp-b {
    justify-items: start;
    text-align: left;
}
.nicc-pp-b > .plugin_button_text {
    display: block !important;
    width: auto !important;
    max-width: 100%;
    text-align: left;
    vertical-align: baseline;
}
.nicc-pp-b > .nicc-pp-datos { justify-self: start; }
.nicc-pp-b > .nicc-pp-pct-gran,
.nicc-pp-b > .nicc-pp-anillo {
    justify-self: end;
    align-self: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TERCERA REVISIÓN EN PANTALLA (2026-09-03)

   El panel quedaba más angosto que la tabla de actividades que va justo
   encima (#unique-table-container: 95% del ancho, centrada) y además pegado
   al margen izquierdo, así que se leía como un recuadro suelto en vez de
   como el pie de esa tabla. Se le da la MISMA medida y el mismo centrado,
   y de paso el mismo redondeo y sombra: los dos bloques son una sola pieza.
   ═══════════════════════════════════════════════════════════════════════════ */

.nicc-pp-menu {
    width: 95%;
    max-width: none;
    margin: 18px auto;
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
}

/* Con el panel ancho, una opción por renglón dejaba media pantalla en blanco.
   Los tres grupos pasan a la misma rejilla que ya usaban los módulos: tantas
   columnas como quepan, y una sola cuando la pantalla es angosta. */
.nicc-pp-fila {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0 22px;
}
.nicc-pp-grupo:nth-of-type(3) .nicc-pp-fila {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0 22px;
}

@media screen and (max-width: 620px) {
    .nicc-pp-menu { width: 100%; margin: 18px 0; }
    .nicc-pp-fila,
    .nicc-pp-grupo:nth-of-type(3) .nicc-pp-fila { grid-template-columns: 1fr; }
}