/* ============================================================================
   V12 · Sistema de diseño
   Blanco, naranja y gris. Se apoya sobre Bootstrap 4 sin pelearse con él:
   todo lo propio va con prefijo .v12- y las sobrescrituras son deliberadas.
   ========================================================================== */

:root {
    /* --- Marca ------------------------------------------------------------ */
    --v12-orange-700: #C24A10;
    --v12-orange-600: #E05A15;
    --v12-orange-500: #F26A21;   /* principal: acciones e interacción */
    --v12-orange-400: #FF8442;
    --v12-orange-100: #FFE2D2;
    --v12-orange-50:  #FFF4ED;

    /* --- Neutros (gris cálido, para convivir con el naranja) --------------- */
    --v12-gray-900: #1B1F24;     /* texto principal */
    --v12-gray-800: #2C333A;
    --v12-gray-700: #414A54;     /* texto secundario fuerte */
    --v12-gray-600: #56606B;
    --v12-gray-500: #6B7681;     /* texto atenuado */
    --v12-gray-400: #98A2AC;
    --v12-gray-300: #C9D0D7;     /* bordes marcados */
    --v12-gray-200: #E3E8ED;     /* bordes */
    --v12-gray-100: #F1F4F7;     /* superficie hundida */
    --v12-gray-50:  #F8FAFB;     /* fondo de página */
    --v12-white: #FFFFFF;

    /* --- Semánticos ------------------------------------------------------- */
    --v12-ok:    #1F8A54;
    --v12-ok-bg: #E7F5ED;
    --v12-warn:  #B67300;
    --v12-warn-bg: #FDF4E3;
    --v12-danger: #B3261E;
    --v12-danger-bg: #FBEBEA;
    --v12-info:  #2E6FA8;
    --v12-info-bg: #EAF2F9;

    /* --- Severidad -------------------------------------------------------- */
    /* Deliberadamente distintas del naranja de marca: el naranja es "acción",
       nunca "gravedad". Además cada chip lleva punto + texto, así que no
       dependen solo del color. */
    --sev-critical: #B3261E;
    --sev-high:     #E07C00;
    --sev-medium:   #C9A227;
    --sev-low:      #3E7CB1;
    --sev-info:     #7A8592;

    /* --- Elevación (sutil; el papel manda, no la sombra) ------------------- */
    --v12-shadow-sm: 0 1px 2px rgba(27,31,36,.06), 0 1px 3px rgba(27,31,36,.04);
    --v12-shadow-md: 0 2px 6px rgba(27,31,36,.07), 0 6px 16px rgba(27,31,36,.06);
    --v12-shadow-lg: 0 8px 24px rgba(27,31,36,.10), 0 2px 6px rgba(27,31,36,.06);
    --v12-ring: 0 0 0 3px rgba(242,106,33,.22);

    /* --- Geometría y ritmo ------------------------------------------------ */
    --v12-r-sm: 6px;
    --v12-r-md: 10px;
    --v12-r-lg: 14px;
    --v12-r-pill: 999px;
    --v12-ease: cubic-bezier(.2,.7,.3,1);
    /* La plantilla de administración impone una serif a los encabezados; los
       componentes propios fijan su familia para no heredarla. */
    --v12-font: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, sans-serif;

    --v12-fast: 140ms;
    --v12-slow: 260ms;
}

/* ============================================================================
   Base
   ========================================================================== */

.v12 {
    color: var(--v12-gray-900);
    font-feature-settings: "cv02","cv03","cv04","tnum" 0;
}

.v12 h1, .v12 h2, .v12 h3, .v12 h4 {
    color: var(--v12-gray-900);
    letter-spacing: -.011em;
    font-weight: 600;
}

.v12-page-title {
    font-size: 1.375rem;
    font-weight: 650;
    letter-spacing: -.02em;
    margin: 0;
}
.v12-page-sub {
    color: var(--v12-gray-500);
    font-size: .875rem;
    margin: .25rem 0 0;
}

.v12-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

/* Números tabulares donde se comparan cifras */
.v12-num { font-variant-numeric: tabular-nums; }

/* ============================================================================
   Superficies
   ========================================================================== */

.v12-card {
    background: var(--v12-white);
    border: 1px solid var(--v12-gray-200);
    border-radius: var(--v12-r-md);
    box-shadow: var(--v12-shadow-sm);
    transition: box-shadow var(--v12-fast) var(--v12-ease),
                border-color var(--v12-fast) var(--v12-ease),
                transform var(--v12-fast) var(--v12-ease);
}
.v12-card--hover:hover {
    box-shadow: var(--v12-shadow-md);
    border-color: var(--v12-gray-300);
}
.v12-card__head {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--v12-gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}
/* Cuando el subtítulo explica el título en lugar de acompañarlo (los pasos del
   asistente), apilarlos se lee mucho mejor que enfrentarlos a los extremos. */
.v12-card__head--stack {
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
}
.v12-card__head--stack .v12-card__title { font-size: 1.125rem; font-weight: 700; letter-spacing: -.015em; }
.v12-card__head--stack .v12-card__sub { font-size: .875rem; }
.v12-card__title {
    font-size: .9375rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.v12-card__title .mdi { color: var(--v12-gray-400); font-size: 1.1rem; }
.v12-card__body { padding: 1.25rem; }
.v12-card__foot {
    padding: .875rem 1.25rem;
    border-top: 1px solid var(--v12-gray-200);
    background: var(--v12-gray-50);
    border-radius: 0 0 var(--v12-r-md) var(--v12-r-md);
}

/* ============================================================================
   Métricas
   ========================================================================== */

.v12-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.v12-stat {
    position: relative;
    background: var(--v12-white);
    border: 1px solid var(--v12-gray-200);
    border-radius: var(--v12-r-md);
    padding: 1.125rem 1.25rem;
    box-shadow: var(--v12-shadow-sm);
    overflow: hidden;
    transition: transform var(--v12-fast) var(--v12-ease),
                box-shadow var(--v12-fast) var(--v12-ease);
}
.v12-stat::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--v12-gray-300);
}
.v12-stat--accent::before { background: var(--v12-orange-500); }
.v12-stat--danger::before { background: var(--sev-critical); }
.v12-stat--ok::before     { background: var(--v12-ok); }
.v12-stat:hover { transform: translateY(-1px); box-shadow: var(--v12-shadow-md); }

.v12-stat__label {
    /* Los <span> quedarían en la misma línea que el valor. */
    display: block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--v12-gray-500);
    margin-bottom: .375rem;
}
.v12-stat__value {
    display: block;
    font-size: 1.875rem;
    font-weight: 650;
    line-height: 1.1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.v12-stat__meta {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .8125rem;
    color: var(--v12-gray-500);
    margin-top: .375rem;
}
.v12-trend { display: inline-flex; align-items: center; gap: .15rem; font-weight: 600; }
.v12-trend--up   { color: var(--v12-danger); }   /* más vulnerabilidades = malo */
.v12-trend--down { color: var(--v12-ok); }

/* ============================================================================
   Severidad
   ========================================================================== */

.v12-sev {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
    padding: .3125rem .5625rem .3125rem .5rem;
    border-radius: var(--v12-r-pill);
    white-space: nowrap;
    border: 1px solid transparent;
}
.v12-sev::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}
.v12-sev--critical { color: var(--sev-critical); background: #FBEBEA; border-color: #F3D3D1; }
.v12-sev--high     { color: #A85C00;            background: #FDF1E0; border-color: #F5DFC0; }
.v12-sev--medium   { color: #8C7016;            background: #FBF5E0; border-color: #EFE3BC; }
.v12-sev--low      { color: #2C5C86;            background: #EAF2F9; border-color: #CFE0EE; }
.v12-sev--info     { color: var(--sev-info);    background: var(--v12-gray-100); border-color: var(--v12-gray-200); }

/* Barra de distribución por severidad */
.v12-sevbar {
    display: flex;
    height: 8px;
    border-radius: var(--v12-r-pill);
    overflow: hidden;
    background: var(--v12-gray-100);
}
.v12-sevbar span { display: block; height: 100%; transition: width var(--v12-slow) var(--v12-ease); }

/* Los colores de segmento van por clase y no anidados bajo un contenedor
   concreto: los usan tanto la barra del informe como la del panel de inicio, y
   tenerlos atados a .v12-sevbar hacía que la segunda se dibujara sin fondo. */
.s-critical { background: var(--sev-critical); }
.s-high     { background: var(--sev-high); }
.s-medium   { background: var(--sev-medium); }
.s-low      { background: var(--sev-low); }
.s-info     { background: var(--sev-info); }

/* ============================================================================
   Puntuación de prioridad
   ========================================================================== */

.v12-score {
    display: inline-flex;
    align-items: baseline;
    gap: .125rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: -.02em;
}
.v12-score__n { font-size: 1.0625rem; }
.v12-score__d { font-size: .6875rem; color: var(--v12-gray-400); font-weight: 500; }
.v12-score--critical .v12-score__n { color: var(--sev-critical); }
.v12-score--high     .v12-score__n { color: #A85C00; }
.v12-score--medium   .v12-score__n { color: #8C7016; }
.v12-score--low      .v12-score__n { color: #2C5C86; }

/* ============================================================================
   Botones
   ========================================================================== */

.v12-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4375rem;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1;
    padding: .5625rem .875rem;
    border-radius: var(--v12-r-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--v12-fast) var(--v12-ease),
                border-color var(--v12-fast) var(--v12-ease),
                box-shadow var(--v12-fast) var(--v12-ease),
                transform var(--v12-fast) var(--v12-ease);
}
.v12-btn:focus-visible { outline: none; box-shadow: var(--v12-ring); }
.v12-btn:active { transform: translateY(.5px); }
.v12-btn .mdi { font-size: 1.05rem; }

.v12-btn--primary {
    background: var(--v12-orange-500);
    color: #fff;
    box-shadow: 0 1px 2px rgba(194,74,16,.28);
}
.v12-btn--primary:hover { background: var(--v12-orange-600); color: #fff; text-decoration: none; }
.v12-btn--primary:active { background: var(--v12-orange-700); }

.v12-btn--secondary {
    background: var(--v12-white);
    color: var(--v12-gray-700);
    border-color: var(--v12-gray-300);
}
.v12-btn--secondary:hover {
    background: var(--v12-gray-50);
    border-color: var(--v12-gray-400);
    color: var(--v12-gray-900);
    text-decoration: none;
}

.v12-btn--ghost { background: transparent; color: var(--v12-gray-600); }
.v12-btn--ghost:hover { background: var(--v12-gray-100); color: var(--v12-gray-900); text-decoration: none; }

.v12-btn--danger { background: var(--v12-danger); color: #fff; }
.v12-btn--danger:hover { background: #96201A; color: #fff; }

.v12-btn--lg { font-size: .9375rem; padding: .75rem 1.125rem; }
.v12-btn--sm { font-size: .8125rem; padding: .4375rem .6875rem; }
.v12-btn[disabled], .v12-btn.disabled { opacity: .5; pointer-events: none; }

/* ============================================================================
   Tablas
   ========================================================================== */

/* `overflow-x: auto` y no `hidden`: el tema deja `#wrapper`, `.content-page` y
   `body` con `overflow: hidden`, así que un contenedor de tabla que también
   recorta deja las últimas columnas inalcanzables en móvil —sin barra, sin
   paneo táctil y sin scroll de página—. Es lo que hacía el `.table-responsive`
   de Bootstrap al que sustituye. `overflow-y` se deja visible para no romper
   la cabecera `position: sticky` de más abajo. */
.v12-table-wrap {
    background: var(--v12-white);
    border: 1px solid var(--v12-gray-200);
    border-radius: var(--v12-r-md);
    overflow-x: auto;
    overflow-y: visible;
    box-shadow: var(--v12-shadow-sm);
}
.v12-table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; }
.v12-table thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--v12-gray-50);
    border-bottom: 1px solid var(--v12-gray-200);
    color: var(--v12-gray-600);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .6875rem .875rem;
    white-space: nowrap;
}
.v12-table tbody td {
    padding: .8125rem .875rem;
    border-bottom: 1px solid var(--v12-gray-100);
    font-size: .875rem;
    vertical-align: middle;
}
.v12-table tbody tr { transition: background var(--v12-fast) var(--v12-ease); }
.v12-table tbody tr:hover { background: var(--v12-orange-50); }
.v12-table tbody tr:last-child td { border-bottom: none; }
.v12-table .v12-td-strong { font-weight: 600; color: var(--v12-gray-900); }
.v12-table .v12-td-muted { color: var(--v12-gray-500); font-size: .8125rem; }

/* ============================================================================
   Estados y etiquetas
   ========================================================================== */

.v12-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    flex: none;
    position: relative;
}
.v12-dot--ok     { background: var(--v12-ok); }
.v12-dot--warn   { background: var(--v12-warn); }
.v12-dot--error  { background: var(--v12-danger); }
.v12-dot--idle   { background: var(--v12-gray-400); }
.v12-dot--live   { background: var(--v12-ok); }
.v12-dot--live::after {
    content: "";
    position: absolute; inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--v12-ok);
    opacity: .55;
    animation: v12-pulse 1.8s var(--v12-ease) infinite;
}
@keyframes v12-pulse {
    0%   { transform: scale(.7); opacity: .6; }
    70%  { transform: scale(1.35); opacity: 0; }
    100% { transform: scale(1.35); opacity: 0; }
}

.v12-tag {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .75rem;
    font-weight: 600;
    padding: .3125rem .5625rem;
    border-radius: var(--v12-r-sm);
    background: var(--v12-gray-100);
    color: var(--v12-gray-700);
    border: 1px solid var(--v12-gray-200);
}
.v12-tag--ok     { background: var(--v12-ok-bg);     color: var(--v12-ok);     border-color: #C9E7D6; }
.v12-tag--warn   { background: var(--v12-warn-bg);   color: var(--v12-warn);   border-color: #F0E0BE; }
.v12-tag--danger { background: var(--v12-danger-bg); color: var(--v12-danger); border-color: #F3D3D1; }
.v12-tag--info   { background: var(--v12-info-bg);   color: var(--v12-info);   border-color: #CFE0EE; }
.v12-tag--accent { background: var(--v12-orange-50); color: var(--v12-orange-700); border-color: var(--v12-orange-100); }

/* ============================================================================
   Formularios
   ========================================================================== */

.v12-field { margin-bottom: 1.125rem; }
.v12-label {
    display: block;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--v12-gray-700);
    margin-bottom: .375rem;
}
.v12-label__hint { font-weight: 400; color: var(--v12-gray-400); margin-left: .25rem; }

.v12-input,
.v12-select,
.v12-textarea {
    width: 100%;
    font-size: .875rem;
    color: var(--v12-gray-900);
    background: var(--v12-white);
    border: 1px solid var(--v12-gray-300);
    border-radius: var(--v12-r-sm);
    padding: .5625rem .75rem;
    transition: border-color var(--v12-fast) var(--v12-ease),
                box-shadow var(--v12-fast) var(--v12-ease);
}
.v12-input::placeholder { color: var(--v12-gray-400); }
.v12-input:focus,
.v12-select:focus,
.v12-textarea:focus {
    outline: none;
    border-color: var(--v12-orange-400);
    box-shadow: var(--v12-ring);
}
.v12-input--mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8125rem; }
.v12-help { font-size: .78125rem; color: var(--v12-gray-500); margin-top: .375rem; }
.v12-error { font-size: .78125rem; color: var(--v12-danger); margin-top: .375rem; display: flex; gap: .25rem; align-items: center; }

/* ============================================================================
   Asistente por pasos
   ========================================================================== */

.v12-steps {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.75rem;
    /* El marcador va como <ol> por semántica, pero Bootstrap le mete sangría y
       viñetas que descolocan la fila entera. */
    list-style: none;
    padding-left: 0;
}
.v12-step { display: flex; align-items: center; gap: .5rem; flex: none; }
.v12-step__bullet {
    width: 26px; height: 26px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: .75rem; font-weight: 700;
    background: var(--v12-gray-100);
    color: var(--v12-gray-500);
    border: 1px solid var(--v12-gray-200);
    transition: all var(--v12-slow) var(--v12-ease);
}
.v12-step__label { font-size: .8125rem; font-weight: 600; color: var(--v12-gray-500); }
.v12-step__line { flex: 1 1 auto; height: 2px; background: var(--v12-gray-200); border-radius: 2px; min-width: 18px; }

.v12-step--done .v12-step__bullet {
    background: var(--v12-ok); border-color: var(--v12-ok); color: #fff;
}
.v12-step--done .v12-step__label { color: var(--v12-gray-700); }
.v12-step--current .v12-step__bullet {
    background: var(--v12-orange-500); border-color: var(--v12-orange-500); color: #fff;
    box-shadow: var(--v12-ring);
}
.v12-step--current .v12-step__label { color: var(--v12-gray-900); }

/* ============================================================================
   Tarjetas de escáner (el momento de elegir origen)
   ========================================================================== */

.v12-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
    gap: .875rem;
}
.v12-source {
    position: relative;
    display: flex;
    align-items: center;
    gap: .8125rem;
    padding: 1rem;
    background: var(--v12-white);
    border: 1.5px solid var(--v12-gray-200);
    border-radius: var(--v12-r-md);
    cursor: pointer;
    text-align: left;
    transition: all var(--v12-fast) var(--v12-ease);
}
.v12-source:hover {
    border-color: var(--v12-orange-400);
    box-shadow: var(--v12-shadow-md);
    transform: translateY(-2px);
}
.v12-source--selected {
    border-color: var(--v12-orange-500);
    background: var(--v12-orange-50);
    box-shadow: var(--v12-ring);
}
.v12-source--selected::after {
    content: "\F012C";                 /* mdi-check */
    font-family: "Material Design Icons";
    position: absolute; top: .5rem; right: .625rem;
    color: var(--v12-orange-600);
    font-size: 1rem;
}
.v12-source > span:last-child { min-width: 0; padding-right: .75rem; }
.v12-source__logo {
    width: 40px; height: 40px;
    border-radius: var(--v12-r-sm);
    display: grid; place-items: center;
    background: var(--v12-gray-50);
    border: 1px solid var(--v12-gray-200);
    font-size: 1.25rem;
    color: var(--v12-gray-600);
    flex: none;
}
.v12-source__name { display: block; font-weight: 650; font-size: .875rem; line-height: 1.2; }
.v12-source__meta { display: block; font-size: .75rem; color: var(--v12-gray-500); margin-top: .1875rem; }
.v12-source[disabled] { opacity: .55; cursor: not-allowed; }
.v12-source[disabled]:hover { transform: none; border-color: var(--v12-gray-200); box-shadow: none; }

/* ============================================================================
   Verificación en vivo (el "probar conexión")
   ========================================================================== */

.v12-check { display: flex; flex-direction: column; gap: .625rem; }
.v12-check__row {
    display: flex; align-items: center; gap: .625rem;
    font-size: .875rem;
    color: var(--v12-gray-500);
    transition: color var(--v12-fast) var(--v12-ease);
}
.v12-check__icon {
    width: 20px; height: 20px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: .8125rem;
    background: var(--v12-gray-100);
    color: var(--v12-gray-400);
    border: 1px solid var(--v12-gray-200);
    flex: none;
    transition: all var(--v12-slow) var(--v12-ease);
}
.v12-check__row--run .v12-check__icon {
    background: var(--v12-orange-50); border-color: var(--v12-orange-100); color: var(--v12-orange-600);
}
.v12-check__row--run { color: var(--v12-gray-800); }
.v12-check__row--ok .v12-check__icon {
    background: var(--v12-ok-bg); border-color: #C9E7D6; color: var(--v12-ok);
}
.v12-check__row--ok { color: var(--v12-gray-800); }
.v12-check__row--fail .v12-check__icon {
    background: var(--v12-danger-bg); border-color: #F3D3D1; color: var(--v12-danger);
}
.v12-check__row--fail { color: var(--v12-danger); }
.v12-spin { animation: v12-rotate .9s linear infinite; display: inline-block; }
@keyframes v12-rotate { to { transform: rotate(360deg); } }

/* ============================================================================
   Progreso de importación
   ========================================================================== */

.v12-progress {
    height: 8px;
    background: var(--v12-gray-100);
    border-radius: var(--v12-r-pill);
    overflow: hidden;
}
.v12-progress__bar {
    height: 100%;
    background: linear-gradient(90deg, var(--v12-orange-500), var(--v12-orange-400));
    border-radius: var(--v12-r-pill);
    transition: width var(--v12-slow) var(--v12-ease);
    position: relative;
}
.v12-progress__bar--live::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
    animation: v12-sheen 1.4s linear infinite;
}
@keyframes v12-sheen { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.v12-pipeline { display: flex; flex-direction: column; gap: .5rem; }
.v12-pipeline__row {
    display: flex; align-items: center; justify-content: space-between;
    font-size: .875rem; padding: .375rem 0;
    color: var(--v12-gray-500);
}
.v12-pipeline__row--active { color: var(--v12-gray-900); font-weight: 600; }
.v12-pipeline__n { font-variant-numeric: tabular-nums; font-weight: 650; }

/* ============================================================================
   Estados vacíos
   ========================================================================== */

.v12-empty { text-align: center; padding: 3rem 1.5rem; }
.v12-empty__icon {
    width: 56px; height: 56px;
    margin: 0 auto 1rem;
    border-radius: var(--v12-r-lg);
    display: grid; place-items: center;
    background: var(--v12-orange-50);
    color: var(--v12-orange-500);
    font-size: 1.625rem;
}
.v12-empty__title { font-size: 1rem; font-weight: 650; margin-bottom: .375rem; }
.v12-empty__text { font-size: .875rem; color: var(--v12-gray-500); max-width: 420px; margin: 0 auto 1.25rem; }

/* ============================================================================
   Carga (esqueleto)
   ========================================================================== */

.v12-skel {
    background: linear-gradient(90deg, var(--v12-gray-100) 25%, var(--v12-gray-200) 37%, var(--v12-gray-100) 63%);
    background-size: 400% 100%;
    animation: v12-shimmer 1.3s ease infinite;
    border-radius: var(--v12-r-sm);
    height: 12px;
}
@keyframes v12-shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

/* ============================================================================
   Avisos
   ========================================================================== */

.v12-callout {
    display: flex;
    gap: .75rem;
    padding: .875rem 1rem;
    border-radius: var(--v12-r-sm);
    border: 1px solid var(--v12-gray-200);
    background: var(--v12-gray-50);
    font-size: .875rem;
}
.v12-callout__icon { flex: none; font-size: 1.125rem; line-height: 1.35; color: var(--v12-gray-500); }
.v12-callout--info   { background: var(--v12-info-bg);   border-color: #CFE0EE; }
.v12-callout--info .v12-callout__icon { color: var(--v12-info); }
.v12-callout--warn   { background: var(--v12-warn-bg);   border-color: #F0E0BE; }
.v12-callout--warn .v12-callout__icon { color: var(--v12-warn); }
.v12-callout--danger { background: var(--v12-danger-bg); border-color: #F3D3D1; }
.v12-callout--danger .v12-callout__icon { color: var(--v12-danger); }
.v12-callout--accent { background: var(--v12-orange-50); border-color: var(--v12-orange-100); }
.v12-callout--accent .v12-callout__icon { color: var(--v12-orange-600); }

/* ============================================================================
   Utilidades
   ========================================================================== */

.v12-stack   { display: flex; flex-direction: column; }
.v12-row     { display: flex; align-items: center; }
.v12-gap-xs  { gap: .25rem; }  .v12-gap-sm { gap: .5rem; }
.v12-gap     { gap: .75rem; }  .v12-gap-md { gap: 1rem; }  .v12-gap-lg { gap: 1.5rem; }
.v12-grow    { flex: 1 1 auto; }
.v12-muted   { color: var(--v12-gray-500); }
.v12-mono    { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8125rem; }
.v12-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        transition-duration: .01ms !important; }
}

/* ============================================================================
   Cabecera de página
   ========================================================================== */

.v12-page-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.v12-page-title {
    font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em;
    color: var(--v12-gray-900); margin: 0;
}
.v12-page-sub { font-size: .9375rem; color: var(--v12-gray-500); margin: .3125rem 0 0; }

/* ============================================================================
   Formularios del asistente
   ========================================================================== */

.v12-form { display: grid; gap: .25rem; }
@media (min-width: 768px) {
    /* Dos columnas sólo cuando hay sitio: en móvil un campo por fila siempre. */
    .v12-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; }
    .v12-form .v12-field--wide { grid-column: 1 / -1; }
}

.v12-check-inline {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .875rem; color: var(--v12-gray-700); cursor: pointer;
    user-select: none;
}
.v12-check-inline input { accent-color: var(--v12-orange-500); width: 16px; height: 16px; }

/* ============================================================================
   Selección de alcance
   ========================================================================== */

.v12-scopes { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.25rem; }
.v12-scope {
    display: flex; align-items: center; gap: .75rem;
    padding: .75rem .875rem;
    border: 1px solid var(--v12-gray-200); border-radius: var(--v12-r-md);
    background: var(--v12-white);
    cursor: pointer;
    transition: border-color var(--v12-fast) var(--v12-ease),
                background var(--v12-fast) var(--v12-ease);
}
.v12-scope:hover { border-color: var(--v12-orange-400); background: var(--v12-orange-50); }
.v12-scope input { accent-color: var(--v12-orange-500); width: 16px; height: 16px; flex: none; }
.v12-scope__body { min-width: 0; }
.v12-scope__name {
    display: block; font-weight: 650; font-size: .875rem;
    color: var(--v12-gray-900); line-height: 1.2;
}
.v12-scope__meta {
    display: block; font-size: .75rem; color: var(--v12-gray-500); margin-top: .1875rem;
}
.v12-scope--on { border-color: var(--v12-orange-500); background: var(--v12-orange-50); }

.v12-sevpick { display: flex; flex-wrap: wrap; gap: .5rem; }
.v12-sevpick__item { display: inline-flex; align-items: center; gap: .375rem; cursor: pointer; margin: 0; }
.v12-sevpick__item input { accent-color: var(--v12-orange-500); width: 15px; height: 15px; }
/* Sin marcar la severidad se apaga, pero el texto sigue ahí: nunca dependemos
   sólo del color para decir qué está activo. */
.v12-sevpick__item input:not(:checked) + .v12-sev { opacity: .4; }

/* ============================================================================
   Previsualización
   ========================================================================== */

.v12-preview__head { margin: 1.5rem 0 .875rem; }
.v12-preview__title { font-size: 1rem; font-weight: 650; color: var(--v12-gray-900); margin: 0; }
.v12-preview__sub { font-size: .875rem; color: var(--v12-gray-500); margin: .25rem 0 0; }

/* ============================================================================
   Pantalla final
   ========================================================================== */

.v12-done { text-align: center; padding: 1.5rem .5rem .5rem; }
.v12-done__icon {
    width: 72px; height: 72px; margin: 0 auto 1.125rem;
    border-radius: 50%; display: grid; place-items: center;
    font-size: 2.25rem;
    background: var(--v12-orange-50); color: var(--v12-orange-500);
    border: 1px solid var(--v12-orange-100);
}
.v12-done__icon--ok { background: var(--v12-ok-bg); color: var(--v12-ok); border-color: #C9E7D6; }
.v12-done__icon--fail { background: var(--v12-danger-bg); color: var(--v12-danger); border-color: #F3D3D1; }
.v12-done__title {
    font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em;
    color: var(--v12-gray-900); margin: 0;
}
.v12-done__sub {
    font-size: .9375rem; color: var(--v12-gray-500);
    margin: .5rem auto 1.5rem; max-width: 46ch;
}
.v12-done__actions {
    display: flex; gap: .625rem; justify-content: center; flex-wrap: wrap;
    margin-top: 1.5rem;
}

.v12-skel--row { height: 56px; border-radius: var(--v12-r-md); margin-bottom: .5rem; }

/* ============================================================================
   Tarjetas de conector (listado)
   ========================================================================== */

.v12-conn-grid {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}
.v12-conn { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.v12-conn--busy { opacity: .75; }

.v12-conn__head {
    display: flex; align-items: center; gap: .75rem;
    padding: 1rem 1.125rem;
    border-bottom: 1px solid var(--v12-gray-100);
}
.v12-conn__icon {
    font-size: 1.5rem; color: var(--v12-orange-500);
    width: 40px; height: 40px; flex: none;
    display: grid; place-items: center;
    background: var(--v12-orange-50); border-radius: var(--v12-r-md);
}
.v12-conn__id { min-width: 0; flex: 1; }
.v12-conn__name {
    display: block; font-weight: 650; font-size: .9375rem;
    color: var(--v12-gray-900); line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v12-conn__vendor { display: block; font-size: .75rem; color: var(--v12-gray-500); margin-top: .125rem; }

.v12-conn__body { padding: 1rem 1.125rem; flex: 1; }
.v12-conn__last { font-size: .8125rem; color: var(--v12-gray-700); margin: 0 0 .875rem; line-height: 1.5; }
.v12-conn__last--muted { color: var(--v12-gray-400); font-style: italic; }

.v12-conn__meta { display: flex; gap: 1.5rem; margin: 0; flex-wrap: wrap; }
.v12-conn__meta dt {
    font-size: .6875rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: var(--v12-gray-400); margin: 0 0 .1875rem;
}
.v12-conn__meta dd { font-size: .8125rem; color: var(--v12-gray-800); margin: 0; font-weight: 550; }

.v12-conn__foot {
    display: flex; gap: .375rem; flex-wrap: wrap;
    padding: .75rem 1.125rem;
    border-top: 1px solid var(--v12-gray-100);
    background: var(--v12-gray-50);
}

.v12-conn__status {
    display: flex; align-items: center; gap: .5rem;
    padding: .75rem 1.125rem;
    font-size: .8125rem; line-height: 1.4;
    border-top: 1px solid var(--v12-gray-100);
}
.v12-conn__status--run { background: var(--v12-orange-50); color: var(--v12-orange-700); }
.v12-conn__status--ok { background: var(--v12-ok-bg); color: var(--v12-ok); }
.v12-conn__status--fail { background: var(--v12-danger-bg); color: var(--v12-danger); }
.v12-conn__status em { font-size: 1rem; flex: none; }

.v12-btn--danger-ghost { color: var(--v12-danger); margin-left: auto; }
.v12-btn--danger-ghost:hover { background: var(--v12-danger-bg); }

.v12-callout--tight { margin-bottom: .875rem; padding: .625rem .75rem; font-size: .8125rem; }

/* La plantilla de administración impone una serif a los encabezados. */
.v12-page-title,
.v12-card__title,
.v12-done__title,
.v12-preview__title,
.v12-empty__title { font-family: var(--v12-font); }

/* ============================================================================
   Paneles del asistente
   ========================================================================== */

.v12-pane { margin-bottom: 1.25rem; }
/* El contenido del paso son hijos directos de la tarjeta; la cabecera y el pie
   traen su propio espaciado, así que se excluyen. */
.v12-pane > *:not(.v12-card__head):not(.v12-card__foot) {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
.v12-pane > *:not(.v12-card__head):not(.v12-card__foot):first-of-type { padding-top: 1.25rem; }
.v12-pane > .v12-card__head + * { padding-top: 1.25rem; }
.v12-pane > .v12-card__foot {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    margin-top: 1.25rem;
}
/* La acción principal a la derecha: es donde el ojo termina de leer la fila. */
.v12-pane > .v12-card__foot > .v12-btn--primary { margin-left: auto; }
.v12-pane > .v12-card__foot > .v12-btn--primary:only-child { margin-left: 0; }

.v12-btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.v12-btn[disabled]:hover { transform: none; }

/* ============================================================================
   Correcciones al tema base
   ============================================================================
   El tema declara `font-family: "Cerebri Sans,sans-serif"` — la lista entera
   dentro de unas comillas —, así que el navegador busca una familia llamada
   literalmente «Cerebri Sans,sans-serif», no la encuentra, y cae a la serif por
   defecto. Afecta a TODOS los encabezados de la aplicación, no sólo a los de
   estas pantallas. Se corrige aquí porque tocar el CSS del tema significaría
   perder el arreglo en la próxima actualización. */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--v12-font);
}

/* Las tarjetas de escáner se alinean arriba: los nombres ocupan una o dos
   líneas según el fabricante y centrarlos deja la fila desigual. */
.v12-source { align-items: flex-start; }
.v12-source__logo { font-size: 1.375rem; color: var(--v12-orange-500); background: var(--v12-orange-50); border-color: var(--v12-orange-100); }
.v12-source--selected .v12-source__logo { background: var(--v12-white); border-color: var(--v12-orange-200, var(--v12-orange-100)); }

/* ============================================================================
   Informe ejecutivo
   ========================================================================== */

/* Los avisos se escriben con el icono como hijo directo; se le da el mismo
   tratamiento que a .v12-callout__icon para no repetir clase en cada plantilla. */
.v12-callout > em.mdi {
    flex: none; font-size: 1.125rem; line-height: 1.35; color: var(--v12-gray-500);
}
.v12-callout p:last-child { margin-bottom: 0; }
.v12-callout--ok { background: var(--v12-ok-bg); border-color: #C9E7D6; }
.v12-callout--ok > em.mdi { color: var(--v12-ok); }
.v12-callout--danger > em.mdi { color: var(--v12-danger); }
.v12-callout--warn > em.mdi { color: var(--v12-warn); }
.v12-callout--info > em.mdi { color: var(--v12-info); }

.v12-input--sm { padding: .375rem .5rem; font-size: .8125rem; width: auto; }
.v12-stats--4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.v12-head-actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.v12-range { display: flex; align-items: center; gap: .375rem; margin: 0; }
.v12-range__label { font-size: .8125rem; color: var(--v12-gray-500); margin: 0; }

.v12-report {
    background: var(--v12-white);
    border: 1px solid var(--v12-gray-200);
    border-radius: var(--v12-r-md);
    box-shadow: var(--v12-shadow-sm);
    padding: 2rem 2.25rem;
    max-width: 1000px;
}
.v12-report__head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 2px solid var(--v12-orange-500);
    margin-bottom: 1.75rem;
}
.v12-report__eyebrow {
    font-size: .6875rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--v12-orange-600); margin: 0 0 .25rem;
}
.v12-report__title {
    font-family: var(--v12-font);
    font-size: 1.625rem; font-weight: 700; letter-spacing: -.02em;
    color: var(--v12-gray-900); margin: 0;
}
.v12-report__meta { font-size: .8125rem; color: var(--v12-gray-500); margin: .375rem 0 0; }
.v12-report__logo { max-height: 44px; max-width: 180px; object-fit: contain; flex: none; }

.v12-report__section { margin-bottom: 2.25rem; }
.v12-report__h3 {
    font-family: var(--v12-font);
    font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em;
    color: var(--v12-gray-900); margin: 0 0 .375rem;
}
.v12-report__lead {
    font-size: .875rem; color: var(--v12-gray-500);
    margin: 0 0 1rem; max-width: 68ch;
}
.v12-report__empty { font-size: .875rem; color: var(--v12-gray-400); font-style: italic; }
.v12-report__section .v12-stats { margin-bottom: 1.25rem; }
.v12-report__section .v12-sevbar { margin-bottom: 1.25rem; }
.v12-report__foot {
    border-top: 1px solid var(--v12-gray-200);
    padding-top: .875rem; margin-top: 2rem;
    font-size: .75rem; color: var(--v12-gray-400);
}

/* Barras de evolución: entradas frente a cierres, mes a mes. */
.v12-trend {
    display: flex; align-items: flex-end; gap: .5rem;
    height: 180px; padding: 0 .25rem;
    border-bottom: 1px solid var(--v12-gray-200);
}
.v12-trend__col { flex: 1; display: flex; flex-direction: column; height: 100%; min-width: 0; }
.v12-trend__bars { flex: 1; display: flex; align-items: flex-end; gap: 2px; }
.v12-trend__bar { flex: 1; border-radius: 2px 2px 0 0; min-height: 2px; }
.v12-trend__bar--in  { background: var(--sev-high); }
.v12-trend__bar--out { background: var(--v12-ok); }
.v12-trend__label {
    font-size: .625rem; color: var(--v12-gray-500);
    text-align: center; padding-top: .375rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.v12-legend { display: flex; gap: 1rem; margin-top: .75rem; }
.v12-legend__item { display: inline-flex; align-items: center; gap: .375rem; font-size: .75rem; color: var(--v12-gray-600); }
.v12-legend__key { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.v12-legend__key--in  { background: var(--sev-high); }
.v12-legend__key--out { background: var(--v12-ok); }

/* ============================================================================
   Impresión
   ============================================================================
   El informe se exporta con la impresión del navegador en lugar de rasterizarlo
   a imagen: así el PDF conserva texto seleccionable y buscable, y los saltos de
   página los decide el CSS y no el alto de una captura. */

@media print {
    /* Todo lo que es interfaz y no informe desaparece. */
    .left-side-menu,
    .navbar-custom,
    .topbar,
    .footer,
    .v12-noprint { display: none !important; }

    .content-page, .content, .container-fluid, body, .wrapper {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        background: #fff !important;
    }

    .v12-report {
        border: 0;
        box-shadow: none;
        padding: 0;
        max-width: none;
    }

    /* Una sección no debe partirse a la mitad si cabe entera en la página. */
    .v12-report__section { break-inside: avoid; page-break-inside: avoid; }
    /* Sin saltos forzados: con `break-inside: avoid` cada bloque se mueve
       entero a la página siguiente sólo cuando no cabe, y el informe no deja
       hojas medio vacías cuando hay pocos datos. */
    .v12-report__head { break-after: avoid; page-break-after: avoid; }
    .v12-report__h3 { break-after: avoid; page-break-after: avoid; }
    .v12-table-wrap { overflow: visible !important; }
    .v12-table thead { display: table-header-group; }
    .v12-table tr { break-inside: avoid; page-break-inside: avoid; }

    /* Sin esto el navegador descarta los fondos y las barras de severidad
       salen en blanco, que es justo la información que hay que ver. */
    .v12-stat, .v12-sev, .v12-sevbar span, .v12-trend__bar,
    .v12-legend__key, .v12-callout, .v12-stat::before {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .v12-stats { grid-template-columns: repeat(4, 1fr) !important; gap: .5rem !important; }
    .v12-stat { padding: .75rem !important; box-shadow: none !important; }
    .v12-stat__value { font-size: 1.375rem !important; }
    a[href]::after { content: none !important; }
}

@page {
    size: A4 portrait;
    margin: 16mm 14mm;
}

/* Con pocos meses las columnas se estirarían hasta ocupar media página; se
   limita el ancho para que la gráfica siga leyéndose como una serie. */
.v12-trend__col { max-width: 90px; }

/* ============================================================================
   Centro de escaneo
   ========================================================================== */

.v12-board { margin-bottom: 1.5rem; }
.v12-board__head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; margin: 1.5rem 0 .875rem;
}
.v12-board__title {
    font-family: var(--v12-font);
    display: flex; align-items: center; gap: .5rem;
    font-size: 1.0625rem; font-weight: 700; color: var(--v12-gray-900); margin: 0;
}
.v12-board__meta { font-size: .75rem; color: var(--v12-gray-400); font-variant-numeric: tabular-nums; }
.v12-board__grid {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
}
.v12-board__empty {
    display: flex; align-items: center; gap: .625rem;
    padding: 1.5rem; border: 1px dashed var(--v12-gray-300);
    border-radius: var(--v12-r-md); background: var(--v12-gray-50);
    font-size: .875rem; color: var(--v12-gray-500);
}
.v12-board__empty em { font-size: 1.25rem; color: var(--v12-gray-400); }

.v12-scan {
    background: var(--v12-white);
    border: 1px solid var(--v12-gray-200);
    border-left: 3px solid var(--v12-gray-300);
    border-radius: var(--v12-r-md);
    box-shadow: var(--v12-shadow-sm);
    padding: 1rem 1.125rem;
}
.v12-scan--run  { border-left-color: var(--v12-orange-500); }
.v12-scan--ok   { border-left-color: var(--v12-ok); }
.v12-scan--fail { border-left-color: var(--v12-danger); }
.v12-scan--idle { border-left-color: var(--v12-gray-400); }

.v12-scan__head { display: flex; align-items: center; gap: .5rem; margin-bottom: .625rem; }
.v12-scan__name {
    flex: 1; min-width: 0;
    font-weight: 650; font-size: .9375rem; color: var(--v12-gray-900);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v12-scan__target {
    display: flex; align-items: center; gap: .375rem;
    font-size: .8125rem; color: var(--v12-gray-600);
    margin: 0 0 .75rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v12-scan__target em { color: var(--v12-gray-400); flex: none; }
.v12-scan__meta {
    display: flex; justify-content: space-between; gap: .75rem;
    font-size: .75rem; color: var(--v12-gray-500);
    margin: .625rem 0 0;
}
.v12-scan__msg {
    font-size: .75rem; color: var(--v12-gray-500);
    margin: .5rem 0 0; line-height: 1.45;
}
.v12-scan__foot { display: flex; gap: .375rem; flex-wrap: wrap; margin-top: .875rem; }
.v12-scan__foot:empty { display: none; }

/* Barra indeterminada: ningún fabricante publica porcentaje de avance, así que
   la alternativa honesta a un 0 % inmóvil es no fingir que se sabe. */
.v12-progress--indeterminate { position: relative; overflow: hidden; }
.v12-progress--indeterminate span {
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 35%;
    animation: v12-slide 1.4s var(--v12-ease) infinite;
}
@keyframes v12-slide {
    0%   { left: -35%; }
    100% { left: 100%; }
}

.v12-muted { font-size: .75rem; color: var(--v12-gray-400); }

/* ============================================================================
   Panel lateral
   ========================================================================== */

.v12-drawer { position: fixed; inset: 0; z-index: 1050; }
.v12-drawer__scrim {
    position: absolute; inset: 0;
    background: rgba(27, 31, 36, .45);
    animation: v12-fade var(--v12-fast) var(--v12-ease);
}
.v12-drawer__panel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(520px, 100vw);
    background: var(--v12-white);
    box-shadow: var(--v12-shadow-lg);
    display: flex; flex-direction: column;
    animation: v12-slide-in var(--v12-slow) var(--v12-ease);
}
@keyframes v12-fade { from { opacity: 0; } }
@keyframes v12-slide-in { from { transform: translateX(100%); } }

.v12-drawer__head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--v12-gray-200);
}
.v12-drawer__title {
    font-family: var(--v12-font);
    font-size: 1.125rem; font-weight: 700; color: var(--v12-gray-900); margin: 0;
}
.v12-drawer__sub { font-size: .8125rem; color: var(--v12-gray-500); margin: .25rem 0 0; }
.v12-drawer__body { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem; }
.v12-drawer__foot {
    display: flex; justify-content: flex-end; gap: .5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--v12-gray-200);
    background: var(--v12-gray-50);
}

.v12-icon-btn {
    width: 32px; height: 32px; flex: none;
    display: grid; place-items: center;
    border: 0; border-radius: var(--v12-r-sm);
    background: transparent; color: var(--v12-gray-500);
    cursor: pointer;
    transition: background var(--v12-fast) var(--v12-ease);
}
.v12-icon-btn:hover { background: var(--v12-gray-100); color: var(--v12-gray-900); }

.v12-picker--tight { grid-template-columns: 1fr; gap: .5rem; }
.v12-picker--tight .v12-source { padding: .75rem; }

.v12-input--area { resize: vertical; min-height: 72px; font-family: inherit; }

@media (prefers-reduced-motion: reduce) {
    .v12-drawer__panel, .v12-drawer__scrim,
    .v12-progress--indeterminate span { animation: none; }
    .v12-progress--indeterminate span { left: 0; width: 100%; opacity: .4; }
}

/* ============================================================================
   Cromado oscuro
   ============================================================================
   Menú y cabecera en oscuro, contenido en blanco. La razón no es estética: el
   contenido de esta herramienta son tablas densas y texto largo, que se leen
   mejor sobre blanco; el cromado oscuro los enmarca y hace que el naranja de
   marca signifique siempre "acción" en lugar de competir con la cabecera. */

:root {
    --v12-chrome-900: #0F1318;   /* menú lateral */
    --v12-chrome-800: #12161C;   /* cabecera */
    --v12-chrome-700: #1A2028;   /* superficies elevadas del cromado */
    --v12-chrome-line: #262E38;  /* separadores */
    --v12-chrome-text: #A9B3BF;  /* texto del cromado en reposo */
    --v12-chrome-text-strong: #F2F5F8;
}

/* --- Menú lateral -------------------------------------------------------- */

.left-side-menu {
    background: var(--v12-chrome-900) !important;
    border-right: 1px solid var(--v12-chrome-line);
}
.left-side-menu .logo,
.left-side-menu .logo-box { background: var(--v12-chrome-900) !important; }

#sidebar-menu > ul > li > a {
    color: var(--v12-chrome-text) !important;
    border-left: 2px solid transparent;
    transition: background var(--v12-fast) var(--v12-ease),
                color var(--v12-fast) var(--v12-ease),
                border-color var(--v12-fast) var(--v12-ease);
}
#sidebar-menu > ul > li > a:hover,
#sidebar-menu > ul > li > a:focus,
#sidebar-menu > ul > li.mm-active > a {
    color: var(--v12-chrome-text-strong) !important;
    background: rgba(255, 255, 255, .04);
    /* El filo naranja marca dónde estás. Es el único naranja del cromado, así
       que no compite con nada y se encuentra de un vistazo. */
    border-left-color: var(--v12-orange-500);
}
#sidebar-menu > ul > li > a > em,
#sidebar-menu > ul > li > a > span.mdi { color: var(--v12-gray-400); }
#sidebar-menu > ul > li > a:hover > em,
#sidebar-menu > ul > li.mm-active > a > em { color: var(--v12-orange-400); }

.nav-second-level { background: rgba(0, 0, 0, .25); }
.nav-second-level li a {
    color: var(--v12-gray-400) !important;
    transition: color var(--v12-fast) var(--v12-ease), background var(--v12-fast) var(--v12-ease);
}
.nav-second-level li a:hover,
.nav-second-level li.mm-active > a {
    color: var(--v12-chrome-text-strong) !important;
    background: rgba(255, 255, 255, .05);
}
.menu-arrow { color: var(--v12-gray-500); }

/* --- Cabecera ------------------------------------------------------------ */

.navbar-custom {
    background-color: var(--v12-chrome-800) !important;
    border-bottom: 1px solid var(--v12-chrome-line);
    box-shadow: none;
}
.navbar-custom .nav-link,
.navbar-custom .nav-user,
.navbar-custom .pro-user-name { color: var(--v12-chrome-text) !important; }
.navbar-custom .nav-link:hover,
.navbar-custom .nav-user:hover { color: var(--v12-chrome-text-strong) !important; }
.navbar-custom .nav-user { background: transparent; border: 0; }

/* El desplegable del usuario cuelga de una cabecera oscura: en blanco daba un
   salto de contraste incómodo justo bajo el cursor. */
.navbar-custom .dropdown-menu {
    background: var(--v12-chrome-700);
    border: 1px solid var(--v12-chrome-line);
    box-shadow: var(--v12-shadow-lg);
}
.navbar-custom .dropdown-menu .dropdown-item { color: var(--v12-chrome-text); }
.navbar-custom .dropdown-menu .dropdown-item:hover,
.navbar-custom .dropdown-menu .dropdown-item:focus {
    background: rgba(255, 255, 255, .06);
    color: var(--v12-chrome-text-strong);
}
.navbar-custom .dropdown-menu .dropdown-divider { border-color: var(--v12-chrome-line); }
.navbar-custom .dropdown-header { color: var(--v12-gray-500); }

/* --- Contenido: sigue en blanco ------------------------------------------ */

.content-page, .wrapper { background: var(--v12-gray-50); }
.footer {
    background: transparent;
    border-top: 1px solid var(--v12-gray-200);
    color: var(--v12-gray-400);
}

/* ============================================================================
   Catálogo de integraciones
   ========================================================================== */

.v12-catalog { margin-top: 2.5rem; }
.v12-catalog__group {
    font-family: var(--v12-font);
    font-size: .75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--v12-gray-500);
    margin: 1.5rem 0 .75rem;
}
.v12-catalog__grid {
    display: grid; gap: .625rem;
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}
.v12-catalog__foot {
    font-size: .8125rem; color: var(--v12-gray-500);
    margin-top: 1.75rem; padding-top: 1rem;
    border-top: 1px solid var(--v12-gray-200);
}

.v12-integration {
    display: flex; align-items: flex-start; gap: .75rem;
    padding: .875rem;
    background: var(--v12-white);
    border: 1px solid var(--v12-gray-200);
    border-radius: var(--v12-r-md);
    transition: border-color var(--v12-fast) var(--v12-ease),
                box-shadow var(--v12-fast) var(--v12-ease);
}
.v12-integration:hover { border-color: var(--v12-gray-300); box-shadow: var(--v12-shadow-sm); }

/* Lo que aún no existe se atenúa, pero sigue siendo legible: es información,
   no un placeholder. La etiqueta "Pronto" es lo que lo dice, no el color. */
.v12-integration--soon { background: var(--v12-gray-50); }
.v12-integration--soon .v12-integration__mark { opacity: .55; }

.v12-integration__mark {
    width: 38px; height: 38px; flex: none;
    display: grid; place-items: center;
    border-radius: var(--v12-r-sm);
    background: var(--brand, var(--v12-gray-400));
    color: #fff;
    font-weight: 700; font-size: .8125rem; letter-spacing: .02em;
}
.v12-integration__body { flex: 1; min-width: 0; }
.v12-integration__name {
    display: block; font-weight: 650; font-size: .875rem; line-height: 1.2;
    color: var(--v12-gray-900);
}
.v12-integration__vendor {
    display: block; font-size: .75rem; color: var(--v12-gray-500); margin-top: .125rem;
}
.v12-integration__note {
    display: block; font-size: .75rem; color: var(--v12-gray-600);
    margin-top: .375rem; line-height: 1.45;
}
.v12-integration__site {
    display: inline-block; font-size: .6875rem; margin-top: .375rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--v12-orange-600);
}
.v12-integration__tag { flex: none; align-self: center; }
.v12-tag--muted {
    background: var(--v12-gray-100); color: var(--v12-gray-500);
    border-color: var(--v12-gray-200);
}

/* ============================================================================
   Login
   ============================================================================
   Dos mitades: la marca a la izquierda sobre el oscuro del cromado, el
   formulario a la derecha sobre blanco. En móvil desaparece la mitad
   decorativa en lugar de encogerse — en una pantalla estrecha lo único que
   importa es poder escribir usuario y contraseña. */

.v12-login-body {
    margin: 0;
    background: var(--v12-white);
    font-family: var(--v12-font);
}

.v12-login { display: grid; min-height: 100vh; grid-template-columns: 1fr; }
@media (min-width: 992px) {
    .v12-login { grid-template-columns: 1.05fr 1fr; }
}

/* --- Mitad de marca ------------------------------------------------------ */

.v12-login__brand {
    display: none;
    position: relative;
    overflow: hidden;
    flex-direction: column;
    justify-content: space-between;
    padding: 3rem;
    background: var(--v12-chrome-900);
    color: var(--v12-chrome-text);
}
@media (min-width: 992px) { .v12-login__brand { display: flex; } }

/* Un solo foco naranja difuminado: da profundidad sin robarle atención al
   formulario, que es donde la persona tiene que mirar. */
.v12-login__glow {
    position: absolute;
    width: 620px; height: 620px;
    top: -180px; right: -220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242,106,33,.28) 0%, rgba(242,106,33,0) 68%);
    pointer-events: none;
}

.v12-login__brandtop { position: relative; }
.v12-login__logo { max-width: 190px; height: auto; }
.v12-login__logo--mobile { display: block; max-width: 160px; margin: 0 auto 2rem; }
@media (min-width: 992px) { .v12-login__logo--mobile { display: none; } }

.v12-login__pitch { position: relative; max-width: 30rem; }
.v12-login__claim {
    font-size: 2.5rem; font-weight: 800; line-height: 1.1;
    letter-spacing: -.03em;
    color: var(--v12-white);
    margin: 0 0 .875rem;
}
.v12-login__lead {
    font-size: 1rem; line-height: 1.6;
    color: var(--v12-gray-400);
    margin: 0 0 2rem;
}
.v12-login__points { list-style: none; padding: 0; margin: 0; display: grid; gap: .875rem; }
.v12-login__points li {
    display: flex; align-items: flex-start; gap: .75rem;
    font-size: .9375rem; line-height: 1.45;
    color: var(--v12-chrome-text);
}
.v12-login__points em {
    flex: none;
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: var(--v12-r-sm);
    background: rgba(242, 106, 33, .14);
    color: var(--v12-orange-400);
    font-size: 1.0625rem;
}
.v12-login__foot { position: relative; font-size: .75rem; color: var(--v12-gray-600); margin: 0; }

/* --- Mitad del formulario ------------------------------------------------ */

.v12-login__panel {
    display: flex; align-items: center; justify-content: center;
    padding: 2.5rem 1.5rem;
    background: var(--v12-white);
}
.v12-login__form { width: 100%; max-width: 24rem; }
.v12-login__title {
    font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em;
    color: var(--v12-gray-900); margin: 0;
}
.v12-login__sub { font-size: .9375rem; color: var(--v12-gray-500); margin: .375rem 0 2rem; }
.v12-login__legal {
    font-size: .75rem; color: var(--v12-gray-400);
    margin: 1.75rem 0 0; line-height: 1.5;
}

.v12-btn--block { width: 100%; justify-content: center; }

.v12-input-group { position: relative; display: flex; }
.v12-input-group .v12-input { padding-right: 2.75rem; width: 100%; }
.v12-reveal {
    position: absolute; right: 0; top: 0; bottom: 0;
    width: 2.75rem;
    display: grid; place-items: center;
    border: 0; background: transparent;
    color: var(--v12-gray-400);
    cursor: pointer;
    border-radius: 0 var(--v12-r-sm) var(--v12-r-sm) 0;
}
.v12-reveal:hover { color: var(--v12-gray-700); }
.v12-reveal:focus-visible { outline: 0; box-shadow: var(--v12-ring); }

.v12-login__divider {
    display: flex; align-items: center; gap: .75rem;
    margin: 1.25rem 0;
    font-size: .75rem; color: var(--v12-gray-400);
}
.v12-login__divider::before,
.v12-login__divider::after {
    content: ""; flex: 1; height: 1px; background: var(--v12-gray-200);
}

/* El login hereda estilos del tema pensados para su propio marcado; se anulan
   aquí para que el formulario nuevo no salga con dos cajas superpuestas. */
.v12-login-body .card,
.v12-login-body .account-pages { background: transparent; border: 0; box-shadow: none; }

/* El botón de acceso llegaba con `visibility: hidden` puesto en línea por el
   JavaScript heredado del tema, que espera el marcado de Bootstrap y no lo
   encuentra. Se fuerza aquí en lugar de tocar ese JS, que lo comparten todas
   las pantallas antiguas. */
.v12-login__form .v12-btn,
.v12-login__form .v12-btn .ladda-label {
    visibility: visible !important;
    opacity: 1 !important;
}
.v12-login__form .v12-btn--primary { background: var(--v12-orange-500) !important; color: #fff !important; }
.v12-login__form .v12-btn--primary:hover { background: var(--v12-orange-600) !important; }

/* ============================================================================
   Índice de cuadros de mando
   ========================================================================== */

.v12-dashgrid {
    display: grid; gap: .875rem;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.v12-dashcard {
    display: flex; align-items: flex-start; gap: .875rem;
    padding: 1.125rem;
    background: var(--v12-white);
    border: 1px solid var(--v12-gray-200);
    border-radius: var(--v12-r-md);
    box-shadow: var(--v12-shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: transform var(--v12-fast) var(--v12-ease),
                box-shadow var(--v12-fast) var(--v12-ease),
                border-color var(--v12-fast) var(--v12-ease);
}
.v12-dashcard:hover {
    transform: translateY(-2px);
    box-shadow: var(--v12-shadow-md);
    border-color: var(--v12-orange-400);
    text-decoration: none;
    color: inherit;
}
.v12-dashcard:focus-visible { outline: none; box-shadow: var(--v12-ring); }

/* El panel ejecutivo es el que casi todo el mundo viene a buscar: ocupa dos
   columnas cuando hay sitio y lleva el naranja de marca en el icono. */
.v12-dashcard--featured { border-color: var(--v12-orange-100); background: var(--v12-orange-50); }
.v12-dashcard--featured .v12-dashcard__icon {
    background: var(--v12-orange-500); color: #fff; border-color: var(--v12-orange-500);
}
@media (min-width: 1100px) {
    .v12-dashcard--featured { grid-column: span 2; }
}

.v12-dashcard__icon {
    width: 44px; height: 44px; flex: none;
    display: grid; place-items: center;
    border-radius: var(--v12-r-md);
    background: var(--v12-gray-50);
    border: 1px solid var(--v12-gray-200);
    color: var(--v12-orange-500);
    font-size: 1.375rem;
    transition: background var(--v12-fast) var(--v12-ease),
                color var(--v12-fast) var(--v12-ease);
}
.v12-dashcard:hover .v12-dashcard__icon {
    background: var(--v12-orange-500); color: #fff; border-color: var(--v12-orange-500);
}

.v12-dashcard__body { flex: 1; min-width: 0; }
.v12-dashcard__title {
    display: block;
    font-family: var(--v12-font);
    font-weight: 700; font-size: 1rem; line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--v12-gray-900);
}
.v12-dashcard__text {
    display: block;
    font-size: .8125rem; line-height: 1.5;
    color: var(--v12-gray-500);
    margin-top: .3125rem;
}

.v12-dashcard__go {
    flex: none; align-self: center;
    color: var(--v12-gray-300);
    font-size: 1.125rem;
    transition: color var(--v12-fast) var(--v12-ease),
                transform var(--v12-fast) var(--v12-ease);
}
.v12-dashcard:hover .v12-dashcard__go {
    color: var(--v12-orange-500);
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .v12-dashcard:hover { transform: none; }
    .v12-dashcard:hover .v12-dashcard__go { transform: none; }
}

/* Logotipo oficial del fabricante cuando está disponible. Va sobre blanco y no
   sobre el color de marca: las marcas de terceros llegan con su propio color y
   superponerlas a otro fondo las deforma. */
.v12-integration__mark--logo {
    background: var(--v12-white);
    border: 1px solid var(--v12-gray-200);
    padding: 5px;
}
.v12-integration__mark--logo img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
}

/* Selector de idioma del acceso. Arriba a la derecha, discreto: es una salida
   de emergencia para quien llega en el idioma que no es, no una acción
   principal. */
.v12-login__lang {
    position: absolute; top: 1.5rem; right: 1.75rem;
    display: flex; gap: .25rem;
}
.v12-login__langlink {
    padding: .3125rem .625rem;
    border-radius: var(--v12-r-sm);
    font-size: .75rem; font-weight: 600;
    color: var(--v12-gray-400);
    text-decoration: none;
    transition: background var(--v12-fast) var(--v12-ease),
                color var(--v12-fast) var(--v12-ease);
}
.v12-login__langlink:hover { background: var(--v12-gray-100); color: var(--v12-gray-700); text-decoration: none; }
.v12-login__langlink--on { background: var(--v12-orange-50); color: var(--v12-orange-600); }
.v12-login__panel { position: relative; }

/* ============================================================================
   Panel de inicio
   ============================================================================
   La jerarquía es deliberada: el encabezado va oscuro y ocupa el ancho, los
   avisos son una fila de fichas compactas, y los paneles tienen tamaños
   distintos según lo que pesan. Una rejilla de cajas blancas idénticas obliga a
   leerlas todas para descubrir cuál importa.

   Barras y anillos arrancan a cero y el JavaScript les fija su valor un
   fotograma después; el valor final vive en una variable CSS para que también
   sirva de respaldo si el JavaScript no llega. */

.v12-cockpit {
    position: relative;
    overflow: hidden;
    display: flex; align-items: center; justify-content: space-between;
    gap: 2rem; flex-wrap: wrap;
    padding: 2rem 2.25rem;
    margin-bottom: 1rem;
    border-radius: var(--v12-r-lg);
    background: var(--v12-chrome-900);
    color: var(--v12-chrome-text);
}
.v12-cockpit__glow {
    position: absolute; width: 460px; height: 460px;
    top: -190px; right: 6%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242,106,33,.26) 0%, rgba(242,106,33,0) 70%);
    pointer-events: none;
}
.v12-cockpit__main { position: relative; min-width: 0; }
.v12-cockpit__eyebrow {
    font-size: .6875rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .1em; color: var(--v12-orange-400); margin: 0 0 .5rem;
}
.v12-cockpit__number {
    font-family: var(--v12-font);
    font-size: 4rem; font-weight: 800; line-height: .95;
    letter-spacing: -.04em; color: var(--v12-white);
    font-variant-numeric: tabular-nums; margin: 0;
}
.v12-cockpit__label { font-size: .9375rem; color: var(--v12-gray-400); margin: .625rem 0 1.25rem; }

.v12-cockpit__chips { display: flex; gap: .5rem; flex-wrap: wrap; }
.v12-chip {
    display: flex; align-items: center; gap: .4375rem;
    padding: .4375rem .75rem;
    border-radius: var(--v12-r-pill);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
    text-decoration: none;
    transition: background var(--v12-fast) var(--v12-ease),
                border-color var(--v12-fast) var(--v12-ease);
}
.v12-chip:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .18); text-decoration: none; }
.v12-chip i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.v12-chip--critical i { background: var(--sev-critical); }
.v12-chip--high i     { background: var(--sev-high); }
.v12-chip--medium i   { background: var(--sev-medium); }
.v12-chip--low i      { background: var(--sev-low); }
.v12-chip__value {
    font-size: .9375rem; font-weight: 700; color: var(--v12-white);
    font-variant-numeric: tabular-nums;
}
.v12-chip__label { font-size: .75rem; color: var(--v12-gray-400); }

/* --- Anillo de severidad -------------------------------------------------- */

.v12-cockpit__ring { position: relative; flex: none; width: 168px; height: 168px; }
.v12-cockpit__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.v12-ring__track { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 11; }
.v12-ring__seg {
    fill: none; stroke-width: 11; stroke-linecap: butt;
    /* Arranca sin longitud: el JavaScript aplica --len y el trazo se dibuja. */
    stroke-dasharray: 0 var(--gap);
    stroke-dashoffset: var(--off);
    transition: stroke-dasharray 900ms var(--v12-ease);
}
.s-stroke-critical { stroke: var(--sev-critical); }
.s-stroke-high     { stroke: var(--sev-high); }
.s-stroke-medium   { stroke: var(--sev-medium); }
.s-stroke-low      { stroke: var(--sev-low); }

.v12-ring__center {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .125rem; pointer-events: none;
}
.v12-ring__pct {
    font-family: var(--v12-font);
    font-size: 1.75rem; font-weight: 800; color: var(--v12-white);
    letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1;
}
.v12-ring__cap { font-size: .6875rem; color: var(--v12-gray-500); text-align: center; }

/* --- Avisos accionables --------------------------------------------------- */

.v12-alerts {
    display: grid; gap: .75rem; margin-bottom: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.v12-alert {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "icon value" "icon title" "text text";
    align-items: center;
    column-gap: .75rem;
    padding: 1rem 1.125rem;
    background: var(--v12-white);
    border: 1px solid var(--v12-gray-200);
    border-radius: var(--v12-r-md);
    text-decoration: none; color: inherit;
    position: relative; overflow: hidden;
    transition: transform var(--v12-fast) var(--v12-ease),
                box-shadow var(--v12-fast) var(--v12-ease);
}
.v12-alert::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
    background: var(--v12-gray-300);
}
.v12-alert--danger::before { background: var(--sev-critical); }
.v12-alert--warn::before   { background: var(--sev-high); }
.v12-alert:hover { transform: translateY(-2px); box-shadow: var(--v12-shadow-md); text-decoration: none; color: inherit; }

.v12-alert__icon {
    grid-area: icon;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: var(--v12-r-sm);
    font-size: 1.25rem;
}
.v12-alert--danger .v12-alert__icon { background: var(--v12-danger-bg); color: var(--v12-danger); }
.v12-alert--warn .v12-alert__icon   { background: var(--v12-warn-bg);   color: var(--v12-warn); }
.v12-alert__value {
    grid-area: value; align-self: end;
    font-family: var(--v12-font);
    font-size: 1.625rem; font-weight: 800; line-height: 1;
    letter-spacing: -.02em; color: var(--v12-gray-900);
    font-variant-numeric: tabular-nums;
}
.v12-alert__title { grid-area: title; align-self: start; font-size: .8125rem; color: var(--v12-gray-600); }
.v12-alert__text {
    grid-area: text; font-size: .75rem; color: var(--v12-gray-400);
    margin-top: .625rem; line-height: 1.4;
}

/* --- Rejilla de paneles --------------------------------------------------- */

.v12-grid { display: grid; gap: 1rem; margin-bottom: 1rem; grid-template-columns: 1fr; }
@media (min-width: 1100px) {
    .v12-grid { grid-template-columns: 1fr 1fr; }
    /* El panel de la serie temporal pesa más: es la única pregunta que no se
       responde con un número suelto. */
    .v12-grid--wide { grid-template-columns: 1.6fr 1fr; }
}
.v12-panel { display: flex; flex-direction: column; }
.v12-panel__body { padding: 1.25rem; flex: 1; }
.v12-panel .v12-card__foot { margin-top: auto; }

/* --- Serie temporal ------------------------------------------------------- */

.v12-balance {
    display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
    font-size: .8125rem; color: var(--v12-gray-500); margin: 0 0 1rem;
}
.v12-balance strong {
    font-family: var(--v12-font);
    font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.v12-balance em { font-size: 1.125rem; }
.v12-balance--up strong, .v12-balance--up em { color: var(--v12-danger); }
.v12-balance--down strong, .v12-balance--down em { color: var(--v12-ok); }

.v12-chart { position: relative; }
.v12-chart svg { width: 100%; height: 130px; display: block; overflow: visible; }
.v12-chart__area { fill: url(#v12FillIn); }
.v12-chart__line {
    fill: none; stroke-width: 1.6;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round; stroke-linejoin: round;
}
.v12-chart__line--in  { stroke: var(--sev-high); }
.v12-chart__line--out { stroke: var(--v12-ok); stroke-dasharray: 3 2.5; }
.v12-chart__axis {
    display: flex; justify-content: space-between;
    margin-top: .5rem; font-size: .6875rem; color: var(--v12-gray-400);
}

/* --- Flujo ---------------------------------------------------------------- */

.v12-flow { display: flex; flex-direction: column; gap: .625rem; }
.v12-flow__step {
    position: relative;
    display: grid; grid-template-columns: auto 1fr; align-items: baseline;
    gap: .5rem;
    padding: .75rem .875rem;
    border-radius: var(--v12-r-sm);
    background: var(--v12-gray-50);
    overflow: hidden;
    text-decoration: none; color: inherit;
}
.v12-flow__step:hover { text-decoration: none; color: inherit; background: var(--v12-gray-100); }
/* La barra vive detrás del texto: el ancho ES el dato, no un adorno al lado. */
.v12-flow__bar {
    position: absolute; inset: 0 auto 0 0;
    width: 0;
    opacity: .16;
    transition: width 800ms var(--v12-ease);
}
.v12-flow__step--in   .v12-flow__bar { background: var(--sev-high); }
.v12-flow__step--work .v12-flow__bar { background: var(--v12-info); }
.v12-flow__step--done .v12-flow__bar { background: var(--v12-ok); }
.v12-flow__value {
    position: relative;
    font-family: var(--v12-font);
    font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em;
    color: var(--v12-gray-900); font-variant-numeric: tabular-nums;
}
.v12-flow__label { position: relative; font-size: .8125rem; color: var(--v12-gray-600); }

/* --- Concentración -------------------------------------------------------- */

.v12-ranking { display: flex; flex-direction: column; gap: .75rem; }
.v12-rank {
    display: grid; grid-template-columns: minmax(0, 1fr) 42% auto;
    align-items: center; gap: .75rem;
    padding: .3125rem .5rem; margin: 0 -.5rem;
    border-radius: var(--v12-r-sm);
    text-decoration: none; color: inherit;
    transition: background var(--v12-fast) var(--v12-ease);
}
.v12-rank:hover { background: var(--v12-gray-50); text-decoration: none; color: inherit; }
.v12-rank__name {
    font-size: .8125rem; color: var(--v12-gray-800);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v12-rank__track { height: 10px; background: var(--v12-gray-100); border-radius: var(--v12-r-pill); overflow: hidden; }
/* Apilada por gravedad: con varios activos del mismo total, una barra lisa no
   dice nada y el reparto por severidad sí. */
.v12-rank__fill {
    display: flex; height: 100%; width: 0;
    border-radius: var(--v12-r-pill); overflow: hidden;
    transition: width 800ms var(--v12-ease);
}
.v12-rank__fill i { display: block; height: 100%; }
.v12-rank__value {
    font-size: .8125rem; font-weight: 650; color: var(--v12-gray-900);
    font-variant-numeric: tabular-nums; text-align: right; min-width: 2.25rem;
}

/* --- Últimas críticas ----------------------------------------------------- */

.v12-feed { list-style: none; margin: 0; padding: 0; }
.v12-feed li + li { border-top: 1px solid var(--v12-gray-100); }
.v12-feed__item {
    display: flex; align-items: center; gap: .75rem;
    padding: .75rem 1.25rem;
    text-decoration: none; color: inherit;
    transition: background var(--v12-fast) var(--v12-ease);
}
.v12-feed__item:hover { background: var(--v12-orange-50); text-decoration: none; color: inherit; }
.v12-feed__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.v12-feed__body { flex: 1; min-width: 0; }
.v12-feed__title {
    display: block; font-size: .875rem; font-weight: 600; color: var(--v12-gray-900);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v12-feed__meta { display: block; font-size: .75rem; color: var(--v12-gray-500); margin-top: .125rem; }
.v12-feed__go { color: var(--v12-gray-300); flex: none; }
.v12-feed__item:hover .v12-feed__go { color: var(--v12-orange-500); }

@media (prefers-reduced-motion: reduce) {
    .v12-ring__seg, .v12-flow__bar, .v12-rank__fill { transition: none; }
    .v12-alert:hover { transform: none; }
}

/* El tema deja `.content-page` con `padding-top: 0`, así que el contenido queda
   pegado al borde inferior de la cabecera. Con las pantallas antiguas apenas se
   notaba —empiezan con un título sobre fondo claro—, pero el encabezado oscuro
   del inicio se funde con la cabecera y parece un solo bloque. Se da el aire
   aquí, para todas las pantallas del sistema de diseño. */
.container-fluid > .v12-cockpit:first-child,
.container-fluid > .v12-page-head:first-child,
.container-fluid > .row:first-child > .col-12 > .v12-page-head {
    margin-top: 1.25rem;
}

/* ============================================================================
   Listado de activos
   ========================================================================== */

/* Selector de riesgo de la cabecera. Son enlaces, no botones: cada corte tiene
   su URL y se puede compartir o volver atrás con el navegador. */
.v12-riskpick {
    display: inline-flex; flex-wrap: wrap; gap: .25rem;
    padding: .25rem;
    background: var(--v12-gray-100);
    border: 1px solid var(--v12-gray-200);
    border-radius: var(--v12-r-md);
}
.v12-riskpick__item {
    display: inline-flex; align-items: center; gap: .375rem;
    padding: .4375rem .75rem;
    font-size: .8125rem; font-weight: 600; line-height: 1;
    color: var(--v12-gray-600);
    border-radius: calc(var(--v12-r-md) - 3px);
    white-space: nowrap;
    transition: background var(--v12-fast) var(--v12-ease),
                color var(--v12-fast) var(--v12-ease),
                box-shadow var(--v12-fast) var(--v12-ease);
}
.v12-riskpick__item:hover { color: var(--v12-gray-900); background: var(--v12-white); text-decoration: none; }
.v12-riskpick__item .mdi { font-size: 1rem; opacity: .75; }
.v12-riskpick__item--on {
    background: var(--v12-white);
    color: var(--v12-orange-700);
    box-shadow: var(--v12-shadow-sm);
}
.v12-riskpick__item--on .mdi { opacity: 1; color: var(--v12-orange-500); }

/* Panel de filtros: se reaprovecha la rejilla Bootstrap de InlineForm porque es
   la que también emiten los campos personalizados. Lo que cambia es la piel. */
.v12-filters__count { font-size: .8125rem; color: var(--v12-gray-500); }
.v12-filters__count strong { color: var(--v12-gray-900); margin-right: .25rem; }
.v12-filters .form-group { margin-bottom: 1rem; }
.v12-filters .form-group label {
    display: block; font-size: .75rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--v12-gray-500); margin-bottom: .375rem;
}
.v12-filters .form-control,
.v12-filters .bootstrap-select > .dropdown-toggle {
    height: auto;
    min-height: 38px;
    padding: .5rem .75rem;
    font-size: .875rem;
    color: var(--v12-gray-900);
    background: var(--v12-white);
    border: 1px solid var(--v12-gray-300);
    border-radius: var(--v12-r-sm);
    box-shadow: none;
    transition: border-color var(--v12-fast) var(--v12-ease),
                box-shadow var(--v12-fast) var(--v12-ease);
}
.v12-filters .form-control:focus,
.v12-filters .bootstrap-select > .dropdown-toggle:focus {
    border-color: var(--v12-orange-500);
    box-shadow: 0 0 0 3px var(--v12-orange-100);
    outline: none;
}
.v12-filters__foot {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: .75rem;
    padding-top: .25rem;
}

/* Etiquetas de filtro activo. El aspa es parte del enlace entero: el objetivo
   táctil es la etiqueta completa, no una cruz de diez píxeles.
   Se llaman `fchip` y no `chip` a propósito: `.v12-chip` ya existe más arriba,
   es la píldora sobre fondo oscuro del panel de inicio, y reutilizar el nombre
   le ponía texto blanco sobre fondo casi blanco. */
.v12-fchips { display: flex; flex-wrap: wrap; gap: .375rem; align-items: center; }
.v12-fchip {
    display: inline-flex; align-items: center; gap: .375rem;
    padding: .3125rem .5rem .3125rem .625rem;
    font-size: .75rem; line-height: 1;
    background: var(--v12-orange-50);
    border: 1px solid var(--v12-orange-100);
    color: var(--v12-orange-700);
    border-radius: var(--v12-r-pill);
    max-width: 22rem;
    transition: background var(--v12-fast) var(--v12-ease);
}
.v12-fchip:hover { background: var(--v12-orange-100); text-decoration: none; color: var(--v12-orange-700); }
.v12-fchip__key { font-weight: 700; text-transform: uppercase; letter-spacing: .03em; opacity: .75; }
.v12-fchip__val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v12-fchip .mdi { font-size: .875rem; opacity: .6; }
.v12-fchip:hover .mdi { opacity: 1; }
.v12-fchip--clear {
    background: transparent; border-color: transparent;
    color: var(--v12-gray-500); text-decoration: underline;
}
.v12-fchip--clear:hover { background: transparent; color: var(--v12-gray-900); }

/* Tabla de activos */
.v12-assets__pick { width: 2.5rem; text-align: center; }
.v12-assets__pick input { accent-color: var(--v12-orange-500); width: 15px; height: 15px; }
.v12-assets__name {
    display: block; font-weight: 650; font-size: .875rem;
    color: var(--v12-gray-900); line-height: 1.25;
}
.v12-assets__name:hover { color: var(--v12-orange-600); text-decoration: none; }
.v12-assets__ip {
    display: block; margin-top: .125rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .75rem; color: var(--v12-gray-500);
}
.v12-assets__none { font-size: .8125rem; color: var(--v12-gray-400); font-style: italic; }
.v12-assets__clean { display: inline-flex; align-items: center; gap: .375rem; font-size: .8125rem; color: var(--v12-ok); }
.v12-assets__actions { width: 2.5rem; text-align: right; }
.v12-assets__risk { min-width: 13rem; }
.v12-assets__worst { display: inline-flex; gap: .25rem; margin-left: .5rem; vertical-align: middle; }

/* Barra de riesgo: el ancho compara el activo con el peor de la página y los
   segmentos reparten ese ancho por gravedad. Dos lecturas en un solo gesto —
   cuánto hay, y de qué tipo. */
.v12-riskbar {
    display: inline-flex; align-items: center; gap: .5rem;
    min-width: 9rem; vertical-align: middle;
}
.v12-riskbar:hover { text-decoration: none; }
/* El carril es el ancho de referencia y la barra el trozo proporcional. Sin
   separarlos, el porcentaje se calculaba contra el flex-container completo y el
   recuento acababa encima de las etiquetas de gravedad. */
.v12-riskbar__rail {
    display: block; width: 7rem; flex: none;
    height: 8px; border-radius: var(--v12-r-pill);
    background: var(--v12-gray-100); overflow: hidden;
}
.v12-riskbar__track {
    display: flex; height: 100%; min-width: 6px;
    border-radius: var(--v12-r-pill); overflow: hidden;
    transition: filter var(--v12-fast) var(--v12-ease);
}
.v12-riskbar__track i { display: block; height: 100%; min-width: 3px; }
.v12-riskbar:hover .v12-riskbar__track { filter: brightness(.92); }
.v12-riskbar__count {
    font-size: .8125rem; font-weight: 650; font-variant-numeric: tabular-nums;
    color: var(--v12-gray-700);
}

/* Pie del listado: edición masiva a la izquierda, recuento y paginación a la
   derecha, en una sola línea. */
.v12-listfoot {
    display: flex; align-items: center; justify-content: flex-end;
    flex-wrap: wrap; gap: .75rem;
}
.v12-listfoot #bulk-edit { margin-right: auto; }
.v12-listfoot__info { font-size: .8125rem; color: var(--v12-gray-500); }
.v12-listfoot .dataTables_paginate { margin: 0; }

@media (max-width: 767px) {
    .v12-riskpick { width: 100%; }
    .v12-assets__risk { min-width: 0; }
}

/* El tema pinta la página activa del paginador en violeta, que es el acento de
   la plantilla comprada y no el del producto. Se corrige aquí y no dentro de
   `.v12-listfoot` porque el paginador es el mismo en todos los listados. */
.pagination .page-item.active .page-link,
.pagination .page-item.active .page-link:hover,
.pagination .page-item.active .page-link:focus {
    background-color: var(--v12-orange-500);
    border-color: var(--v12-orange-500);
    color: var(--v12-white);
    box-shadow: none;
}
.pagination .page-link {
    color: var(--v12-gray-600);
    border-color: var(--v12-gray-200);
}
.pagination .page-link:hover {
    color: var(--v12-orange-700);
    background-color: var(--v12-orange-50);
    border-color: var(--v12-orange-100);
}
.pagination .page-link:focus { box-shadow: 0 0 0 3px var(--v12-orange-100); }

/* Ordenación de columnas.
   Las flechas y el cursor de mano los ponía dataTables.bootstrap4.css, pero
   todas sus reglas cuelgan de `table.dataTable`, y `.v12-table` no lleva esa
   clase. La cabecera seguía siendo pulsable y nada lo indicaba. Se resuelve
   aquí, con el acento del producto, en vez de heredar el aspecto de DataTables. */
.v12-table thead th.sorting {
    cursor: pointer;
    padding-right: 1.75rem;
    position: relative;
    user-select: none;
}
.v12-table thead th.sorting:hover { color: var(--v12-gray-900); }
.v12-table thead th.sorting::before,
.v12-table thead th.sorting::after {
    content: "";
    position: absolute;
    right: .75rem;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    opacity: .28;
}
.v12-table thead th.sorting::before { top: calc(50% - 8px); border-bottom: 5px solid currentColor; }
.v12-table thead th.sorting::after  { top: calc(50% + 3px); border-top: 5px solid currentColor; }
.v12-table thead th.sorting_asc::before,
.v12-table thead th.sorting_desc::after { opacity: 1; color: var(--v12-orange-500); }

/* ============================================================================
   Ficha de registro (detalle de una vulnerabilidad)
   ========================================================================== */

/* Cabecera de un registro concreto, no de una pantalla: la identidad
   —gravedad, título, CVE— tiene que leerse antes que cualquier campo del
   formulario. El filo de color de la izquierda lleva la gravedad. */
.v12-rechead {
    position: relative;
    background: var(--v12-white);
    border: 1px solid var(--v12-gray-200);
    border-radius: var(--v12-r-md);
    box-shadow: var(--v12-shadow-sm);
    padding: 1.25rem 1.5rem 1.25rem 1.75rem;
    margin-bottom: 1.25rem;
    overflow: hidden;
}
.v12-rechead::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
    background: var(--v12-gray-300);
}
.v12-rechead--critical::before { background: var(--sev-critical); }
.v12-rechead--high::before     { background: var(--sev-high); }
.v12-rechead--medium::before   { background: var(--sev-medium); }
.v12-rechead--low::before      { background: var(--sev-low); }
.v12-rechead--info::before     { background: var(--sev-info); }

.v12-rechead__top {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
}
.v12-rechead__main { min-width: 0; flex: 1 1 22rem; }
.v12-rechead__eyebrow {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    font-size: .75rem; color: var(--v12-gray-500);
    margin-bottom: .375rem;
}
.v12-rechead__sep { color: var(--v12-gray-300); }
.v12-rechead__id {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--v12-gray-600); font-weight: 600;
}
.v12-rechead__title {
    font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em;
    color: var(--v12-gray-900); margin: 0; line-height: 1.25;
    overflow-wrap: anywhere;
}
.v12-rechead__actions { display: flex; align-items: center; gap: .5rem; flex: none; }
.v12-rechead__meta {
    display: flex; flex-wrap: wrap; gap: .875rem 1.75rem;
    margin: 1rem 0 0; padding-top: .875rem;
    border-top: 1px solid var(--v12-gray-100);
}
.v12-rechead__item { display: flex; flex-direction: column; gap: .1875rem; min-width: 0; }
.v12-rechead__key {
    font-size: .6875rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--v12-gray-400);
}
.v12-rechead__value {
    font-size: .875rem; font-weight: 600; color: var(--v12-gray-800);
    display: flex; align-items: center; gap: .375rem;
}
.v12-rechead__value .mdi { color: var(--v12-gray-400); }
.v12-rechead__cvss { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1rem; }
.v12-rechead__cvss small { font-weight: 500; color: var(--v12-gray-400); }

/* ============================================================================
   Formulario de detalle: etiqueta a la izquierda, valor a la derecha
   ========================================================================== */

/* Reaprovecha la rejilla que emite el helper `Form::` en vez de reescribir los
   campos. No es pereza: el JavaScript de esta pantalla lee cada campo por su id
   (#title, #scan, #cvss…) y los campos personalizados por sus `data-cf-*`.
   Cambiando sólo la piel, el contrato con el JS queda intacto. */
.v12-vform .form-group.row {
    margin: 0; padding: .75rem 0;
    border-bottom: 1px solid var(--v12-gray-100);
}
.v12-vform .form-group.row:last-of-type { border-bottom: none; }
.v12-vform .col-form-label {
    font-size: .8125rem; font-weight: 600; color: var(--v12-gray-600);
    padding-top: .5rem; line-height: 1.35;
}
.v12-vform .col-form-label .text-danger { color: var(--v12-orange-500) !important; }
.v12-vform .form-control,
.v12-vform .bootstrap-select > .dropdown-toggle {
    height: auto; min-height: 38px;
    padding: .5rem .75rem;
    font-size: .875rem; color: var(--v12-gray-900);
    background: var(--v12-white);
    border: 1px solid var(--v12-gray-300);
    border-radius: var(--v12-r-sm);
    box-shadow: none;
}
.v12-vform textarea.form-control { min-height: 96px; line-height: 1.55; }
.v12-vform .form-control:focus,
.v12-vform .bootstrap-select > .dropdown-toggle:focus {
    border-color: var(--v12-orange-500);
    box-shadow: 0 0 0 3px var(--v12-orange-100);
    outline: none;
}
.v12-vform .form-control[readonly] { background: var(--v12-gray-50); color: var(--v12-gray-600); }
.v12-vform .form-control-plaintext {
    font-size: .875rem; color: var(--v12-gray-800); padding-top: .5rem; margin: 0;
}
.v12-formfoot {
    display: flex; justify-content: flex-end; gap: .5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--v12-gray-200);
    background: var(--v12-gray-50);
    border-radius: 0 0 var(--v12-r-md) var(--v12-r-md);
}

/* ============================================================================
   Paneles laterales del detalle
   ========================================================================== */

.v12-side { margin-bottom: 1rem; }
.v12-side__head {
    display: flex; align-items: center; gap: .5rem;
    width: 100%;
    padding: .875rem 1rem;
    font-size: .8125rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--v12-gray-700);
    background: none; border: 0; text-align: left;
    cursor: pointer;
}
.v12-side__head:hover { color: var(--v12-gray-900); text-decoration: none; }
.v12-side__head > .mdi:first-child { font-size: 1rem; color: var(--v12-orange-500); }
.v12-side__title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v12-side__caret { flex: none; color: var(--v12-gray-400); transition: transform var(--v12-fast) var(--v12-ease); }
.v12-side__head[aria-expanded="false"] .v12-side__caret { transform: rotate(-90deg); }
.v12-side__body { padding: 0 1rem 1rem; }
.v12-side__body > *:first-child { margin-top: 0; }

/* Pares clave-valor en vertical, que es como se leen los metadatos de un
   registro. `.v12-conn__meta` no vale: es horizontal y vive en otra tarjeta. */
.v12-meta { display: grid; grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); gap: .5rem .75rem; margin: 0; }
.v12-meta__key {
    font-size: .75rem; font-weight: 600; color: var(--v12-gray-500);
    display: flex; align-items: center; gap: .25rem;
}
.v12-meta__value { font-size: .8125rem; color: var(--v12-gray-900); margin: 0; min-width: 0; overflow-wrap: anywhere; }
.v12-meta__value--none { color: var(--v12-gray-400); font-style: italic; }
.v12-meta__link { color: var(--v12-gray-400); }
.v12-meta__link:hover { color: var(--v12-orange-500); }

/* Estado del flujo de trabajo del registro. */
.v12-wfstate {
    display: flex; align-items: center; gap: .625rem;
    padding: .75rem .875rem;
    background: var(--v12-orange-50);
    border: 1px solid var(--v12-orange-100);
    border-radius: var(--v12-r-sm);
    margin-bottom: .75rem;
}
.v12-wfstate__icon { flex: none; font-size: 1.25rem; line-height: 1; }
.v12-wfstate__body { min-width: 0; }
.v12-wfstate__key {
    display: block; font-size: .6875rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--v12-orange-600);
}
.v12-wfstate__name {
    display: block; font-size: .9375rem; font-weight: 650; color: var(--v12-gray-900);
    line-height: 1.2; margin-top: .125rem;
}

/* Ficheros adjuntos. */
.v12-upload {
    display: block; position: relative;
    padding: .875rem; margin-bottom: .75rem;
    border: 1px dashed var(--v12-gray-300);
    border-radius: var(--v12-r-sm);
    background: var(--v12-gray-50);
    text-align: center; cursor: pointer;
    transition: border-color var(--v12-fast) var(--v12-ease),
                background var(--v12-fast) var(--v12-ease);
}
.v12-upload:hover { border-color: var(--v12-orange-400); background: var(--v12-orange-50); }
.v12-upload__icon { display: block; font-size: 1.375rem; color: var(--v12-gray-400); }
.v12-upload:hover .v12-upload__icon { color: var(--v12-orange-500); }
.v12-upload__text { display: block; font-size: .8125rem; color: var(--v12-gray-600); margin-top: .25rem; }
.v12-upload__hint { display: block; font-size: .6875rem; color: var(--v12-gray-400); margin-top: .125rem; }
/* El input real sigue en el DOM porque el JS se engancha a su `change`; sólo se
   le quita el aspecto nativo. */
.v12-upload input[type="file"] {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer;
}

.v12-files { display: flex; flex-direction: column; gap: .375rem; max-height: 13rem; overflow-y: auto; }
.v12-file {
    display: flex; align-items: center; gap: .5rem;
    padding: .5rem .625rem;
    border: 1px solid var(--v12-gray-200);
    border-radius: var(--v12-r-sm);
    background: var(--v12-white);
}
.v12-file__icon { flex: none; color: var(--v12-gray-400); }
.v12-file__name {
    flex: 1 1 auto; min-width: 0; font-size: .8125rem; color: var(--v12-gray-800);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v12-file__actions { flex: none; display: flex; gap: .125rem; }

/* Estado vacío de panel: `.v12-empty` mete 3rem de aire y aquí sobra. */
.v12-empty--sm { padding: 1.25rem .75rem; }
.v12-empty--sm .v12-empty__icon { width: 40px; height: 40px; font-size: 1.25rem; margin-bottom: .5rem; }
.v12-empty--sm .v12-empty__text { font-size: .8125rem; margin-bottom: .875rem; }

/* Tabla embebida en un campo del formulario: la del sistema es de pantalla
   completa (cabecera pegajosa, mayúsculas) y aquí resulta demasiado. */
.v12-minitable { width: 100%; margin: 0; font-size: .8125rem; }
.v12-minitable td { padding: .4375rem .5rem; border-top: 1px solid var(--v12-gray-100); vertical-align: middle; }
.v12-minitable tr:first-child td { border-top: none; }
.v12-minitable__actions { width: 2rem; text-align: right; }
.v12-scroll { max-height: 11rem; overflow-y: auto; }

@media (max-width: 991px) {
    .v12-rechead__meta { gap: .875rem 1.25rem; }
}