/* Control Center · Operational Intelligence · extracted from stable 2026.09.17.15 */

.io-shell {
        --io-blue: #2563eb;
        --io-cyan: #0891b2;
        --io-green: #059669;
        --io-amber: #d97706;
        --io-purple: #7c3aed;
        --io-rose: #e11d48;
    }

    .io-shell > .card,
    .io-shell .io-card-3d {
        border: 1px solid rgba(148, 163, 184, .18);
        box-shadow:
            0 18px 42px rgba(15, 23, 42, .08),
            0 3px 10px rgba(15, 23, 42, .05);
        border-radius: 22px;
        background:
            radial-gradient(circle at top right, rgba(37, 99, 235, .055), transparent 34%),
            var(--card, #fff);
    }

    .io-shell .kpi-card {
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(148, 163, 184, .14);
        border-radius: 18px;
        background:
            linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,250,252,.92));
        box-shadow:
            0 14px 28px rgba(15,23,42,.08),
            inset 0 1px 0 rgba(255,255,255,.9);
        transform: translateZ(0);
        transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }

    .io-shell .kpi-card::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 4px;
        background: linear-gradient(90deg, var(--io-blue), var(--io-cyan));
    }

    .io-shell .kpi-card:nth-child(6n+2)::before {
        background: linear-gradient(90deg, var(--io-green), #34d399);
    }

    .io-shell .kpi-card:nth-child(6n+3)::before {
        background: linear-gradient(90deg, var(--io-purple), #a78bfa);
    }

    .io-shell .kpi-card:nth-child(6n+4)::before {
        background: linear-gradient(90deg, var(--io-amber), #fbbf24);
    }

    .io-shell .kpi-card:nth-child(6n+5)::before {
        background: linear-gradient(90deg, var(--io-rose), #fb7185);
    }

    .io-shell .kpi-card:nth-child(6n+6)::before {
        background: linear-gradient(90deg, var(--io-cyan), #22d3ee);
    }

    .io-shell .kpi-card:hover {
        transform: translateY(-4px);
        border-color: rgba(37, 99, 235, .2);
        box-shadow:
            0 22px 40px rgba(15,23,42,.12),
            inset 0 1px 0 rgba(255,255,255,.92);
    }

    .io-shell .detail-box {
        border-radius: 16px;
        border: 1px solid rgba(148,163,184,.14);
        background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(248,250,252,.88));
        box-shadow: 0 9px 22px rgba(15,23,42,.05);
    }

    .io-shell .io-chart-card .chart-wrap {
        min-height: 360px;
        height: 360px;
        padding: 20px 22px 24px;
    }

    .io-shell .io-chart-card canvas {
        max-height: 320px;
    }

    .io-shell .io-period-toolbar {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 14px;
    }

    .io-shell .io-section-title {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .io-shell .io-dot {
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: linear-gradient(135deg, var(--io-blue), var(--io-cyan));
        box-shadow: 0 0 0 5px rgba(37,99,235,.08);
    }

    @media (max-width: 760px) {
        .io-shell .io-chart-card .chart-wrap {
            min-height: 300px;
            height: 300px;
            padding: 14px;
        }
    }

.io-behavior-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
    }

    .io-behavior-card {
        position: relative;
        overflow: hidden;
        min-height: 132px;
        padding: 18px;
        border-radius: 18px;
        border: 1px solid rgba(148, 163, 184, .16);
        background:
            radial-gradient(circle at top right, rgba(37,99,235,.10), transparent 38%),
            linear-gradient(145deg, rgba(255,255,255,.99), rgba(248,250,252,.92));
        box-shadow: 0 14px 28px rgba(15,23,42,.07);
    }

    .io-behavior-card[data-tone="good"] {
        background:
            radial-gradient(circle at top right, rgba(5,150,105,.12), transparent 42%),
            linear-gradient(145deg, rgba(255,255,255,.99), rgba(240,253,250,.92));
    }

    .io-behavior-card[data-tone="warn"] {
        background:
            radial-gradient(circle at top right, rgba(217,119,6,.13), transparent 42%),
            linear-gradient(145deg, rgba(255,255,255,.99), rgba(255,251,235,.92));
    }

    .io-behavior-card[data-tone="danger"] {
        background:
            radial-gradient(circle at top right, rgba(225,29,72,.12), transparent 42%),
            linear-gradient(145deg, rgba(255,255,255,.99), rgba(255,241,242,.92));
    }

    .io-behavior-label {
        display: block;
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 900;
        letter-spacing: .04em;
        text-transform: uppercase;
        margin-bottom: 10px;
    }

    .io-behavior-value {
        display: block;
        color: var(--navy);
        font-size: 28px;
        line-height: 1;
        font-weight: 950;
    }

    .io-behavior-sub {
        display: block;
        margin-top: 10px;
        color: var(--text-muted);
        font-size: 12px;
        line-height: 1.4;
        font-weight: 750;
    }

    .io-trend {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        margin-top: 10px;
        padding: 5px 8px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 900;
        background: #f1f5f9;
        color: #475569;
    }

    .io-trend.good {
        background: rgba(5,150,105,.10);
        color: #047857;
    }

    .io-trend.warn {
        background: rgba(217,119,6,.11);
        color: #b45309;
    }

    .io-insight-list {
        display: grid;
        gap: 12px;
    }

    .io-insight {
        display: grid;
        grid-template-columns: 10px minmax(0,1fr);
        gap: 12px;
        align-items: start;
        padding: 15px 16px;
        border-radius: 16px;
        border: 1px solid rgba(148,163,184,.15);
        background: rgba(248,250,252,.76);
    }

    .io-insight-dot {
        width: 10px;
        height: 10px;
        border-radius: 999px;
        margin-top: 5px;
        background: #2563eb;
        box-shadow: 0 0 0 5px rgba(37,99,235,.07);
    }

    .io-insight.good .io-insight-dot {
        background: #059669;
        box-shadow: 0 0 0 5px rgba(5,150,105,.08);
    }

    .io-insight.warn .io-insight-dot {
        background: #d97706;
        box-shadow: 0 0 0 5px rgba(217,119,6,.09);
    }

    .io-insight.danger .io-insight-dot {
        background: #e11d48;
        box-shadow: 0 0 0 5px rgba(225,29,72,.08);
    }

    .io-insight strong {
        display: block;
        color: var(--navy);
        font-size: 13px;
        font-weight: 950;
        margin-bottom: 3px;
    }

    .io-insight span {
        display: block;
        color: var(--text-muted);
        font-size: 12px;
        font-weight: 700;
        line-height: 1.45;
    }

    .io-confidence {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 7px 10px;
        border-radius: 999px;
        background: rgba(37,99,235,.08);
        color: #1d4ed8;
        font-size: 11px;
        font-weight: 900;
    }

    .io-team-behavior td,
    .io-team-behavior th {
        white-space: nowrap;
    }

    @media (max-width: 1050px) {
        .io-behavior-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 620px) {
        .io-behavior-grid {
            grid-template-columns: 1fr;
        }
    }

.io-adaptive-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .io-adaptive-card {
        padding: 18px;
        border-radius: 18px;
        border: 1px solid rgba(148,163,184,.16);
        background:
            linear-gradient(145deg, rgba(255,255,255,.99), rgba(248,250,252,.93));
        box-shadow: 0 14px 28px rgba(15,23,42,.06);
    }

    .io-adaptive-card.good {
        background:
            radial-gradient(circle at top right, rgba(5,150,105,.11), transparent 42%),
            linear-gradient(145deg, rgba(255,255,255,.99), rgba(240,253,250,.93));
    }

    .io-adaptive-card.warn {
        background:
            radial-gradient(circle at top right, rgba(217,119,6,.12), transparent 42%),
            linear-gradient(145deg, rgba(255,255,255,.99), rgba(255,251,235,.93));
    }

    .io-adaptive-card.danger {
        background:
            radial-gradient(circle at top right, rgba(225,29,72,.11), transparent 42%),
            linear-gradient(145deg, rgba(255,255,255,.99), rgba(255,241,242,.93));
    }

    .io-adaptive-title {
        display:block;
        font-size:11px;
        font-weight:900;
        color:var(--text-muted);
        letter-spacing:.04em;
        text-transform:uppercase;
        margin-bottom:8px;
    }

    .io-adaptive-value {
        display:block;
        font-size:26px;
        line-height:1.05;
        font-weight:950;
        color:var(--navy);
    }

    .io-adaptive-note {
        display:block;
        margin-top:9px;
        font-size:12px;
        line-height:1.45;
        font-weight:700;
        color:var(--text-muted);
    }

    .io-recommendation-grid {
        display:grid;
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap:12px;
    }

    .io-recommendation {
        padding:15px 16px;
        border-radius:16px;
        border:1px solid rgba(148,163,184,.15);
        background:rgba(248,250,252,.74);
    }

    .io-recommendation strong {
        display:block;
        color:var(--navy);
        font-size:13px;
        font-weight:950;
        margin-bottom:5px;
    }

    .io-recommendation span {
        display:block;
        color:var(--text-muted);
        font-size:12px;
        line-height:1.45;
        font-weight:700;
    }

    .io-risk-pill {
        display:inline-flex;
        align-items:center;
        gap:7px;
        padding:7px 10px;
        border-radius:999px;
        font-size:11px;
        font-weight:900;
        background:#f1f5f9;
        color:#475569;
    }

    .io-risk-pill.good {
        background:rgba(5,150,105,.10);
        color:#047857;
    }

    .io-risk-pill.warn {
        background:rgba(217,119,6,.11);
        color:#b45309;
    }

    .io-risk-pill.danger {
        background:rgba(225,29,72,.10);
        color:#be123c;
    }

    @media (max-width: 980px) {
        .io-adaptive-grid {
            grid-template-columns: repeat(2, minmax(0,1fr));
        }
    }

    @media (max-width: 680px) {
        .io-adaptive-grid,
        .io-recommendation-grid {
            grid-template-columns: 1fr;
        }
    }

.io-process-grid {
        display:grid;
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:14px;
    }

    .io-process-card {
        padding:18px;
        border-radius:18px;
        border:1px solid rgba(148,163,184,.16);
        background:
            radial-gradient(circle at top right, rgba(14,165,233,.09), transparent 42%),
            linear-gradient(145deg,rgba(255,255,255,.99),rgba(248,250,252,.94));
        box-shadow:0 14px 28px rgba(15,23,42,.06);
    }

    .io-process-card.good {
        background:
            radial-gradient(circle at top right, rgba(5,150,105,.11), transparent 42%),
            linear-gradient(145deg,rgba(255,255,255,.99),rgba(240,253,250,.94));
    }

    .io-process-card.warn {
        background:
            radial-gradient(circle at top right, rgba(217,119,6,.12), transparent 42%),
            linear-gradient(145deg,rgba(255,255,255,.99),rgba(255,251,235,.94));
    }

    .io-process-card.danger {
        background:
            radial-gradient(circle at top right, rgba(225,29,72,.11), transparent 42%),
            linear-gradient(145deg,rgba(255,255,255,.99),rgba(255,241,242,.94));
    }

    .io-process-label {
        display:block;
        color:var(--text-muted);
        font-size:11px;
        font-weight:900;
        letter-spacing:.04em;
        text-transform:uppercase;
        margin-bottom:8px;
    }

    .io-process-value {
        display:block;
        color:var(--navy);
        font-size:25px;
        line-height:1.05;
        font-weight:950;
    }

    .io-process-note {
        display:block;
        color:var(--text-muted);
        margin-top:9px;
        font-size:12px;
        line-height:1.45;
        font-weight:700;
    }

    .io-process-bar {
        height:8px;
        border-radius:999px;
        overflow:hidden;
        background:#e2e8f0;
        margin-top:10px;
    }

    .io-process-bar > span {
        display:block;
        height:100%;
        border-radius:999px;
        background:linear-gradient(90deg,#2563eb,#06b6d4);
    }

    .io-process-table td,
    .io-process-table th {
        white-space:nowrap;
    }

    .io-process-alerts {
        display:grid;
        gap:12px;
    }

    .io-process-alert {
        padding:14px 16px;
        border-radius:16px;
        border:1px solid rgba(148,163,184,.15);
        background:rgba(248,250,252,.76);
    }

    .io-process-alert strong {
        display:block;
        color:var(--navy);
        font-size:13px;
        font-weight:950;
        margin-bottom:4px;
    }

    .io-process-alert span {
        display:block;
        color:var(--text-muted);
        font-size:12px;
        line-height:1.45;
        font-weight:700;
    }

    @media (max-width:1050px) {
        .io-process-grid {
            grid-template-columns:repeat(2,minmax(0,1fr));
        }
    }

    @media (max-width:620px) {
        .io-process-grid {
            grid-template-columns:1fr;
        }
    }

.io-learning-plan {
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
    }

    .io-learning-action {
        padding:16px;
        border-radius:17px;
        border:1px solid rgba(148,163,184,.16);
        background:
            radial-gradient(circle at top right,rgba(37,99,235,.08),transparent 42%),
            linear-gradient(145deg,rgba(255,255,255,.99),rgba(248,250,252,.94));
        box-shadow:0 10px 24px rgba(15,23,42,.05);
    }

    .io-learning-action strong {
        display:block;
        color:var(--navy);
        font-size:13px;
        font-weight:950;
        margin-bottom:5px;
    }

    .io-learning-action p {
        color:var(--text-muted);
        font-size:12px;
        line-height:1.5;
        font-weight:700;
        margin:0 0 12px;
    }

    .io-learning-meta {
        display:flex;
        gap:8px;
        flex-wrap:wrap;
        align-items:center;
    }

    .io-learning-badge {
        display:inline-flex;
        align-items:center;
        gap:6px;
        padding:6px 9px;
        border-radius:999px;
        font-size:10px;
        font-weight:900;
        background:#f1f5f9;
        color:#475569;
    }

    .io-learning-badge.helpful {
        background:rgba(5,150,105,.10);
        color:#047857;
    }

    .io-learning-badge.neutral {
        background:rgba(8,145,178,.10);
        color:#0e7490;
    }

    .io-learning-badge.not_helpful {
        background:rgba(225,29,72,.10);
        color:#be123c;
    }

    .io-learning-badge.inconclusive {
        background:rgba(217,119,6,.11);
        color:#b45309;
    }

    .io-learning-table td,
    .io-learning-table th {
        white-space:nowrap;
    }

    .io-learning-score {
        font-weight:950;
        color:var(--navy);
    }

    @media (max-width:780px) {
        .io-learning-plan {
            grid-template-columns:1fr;
        }
    }

/* Tipografía más legible solo dentro de Inteligencia Operativa */
    .io-shell {
        font-size: 14px;
    }

    .io-shell h2 {
        font-size: 28px !important;
        line-height: 1.15;
    }

    .io-shell .card-title {
        font-size: 17px !important;
        line-height: 1.25;
        letter-spacing: -0.01em;
    }

    .io-shell .mini-note,
    .io-shell .io-behavior-sub,
    .io-shell .io-adaptive-note,
    .io-shell .io-process-note,
    .io-shell .io-learning-action p,
    .io-shell .io-insight span,
    .io-shell .io-process-alert span,
    .io-shell .io-recommendation span {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .io-shell .kpi-label,
    .io-shell .io-behavior-label,
    .io-shell .io-adaptive-title,
    .io-shell .io-process-label {
        font-size: 12px !important;
        line-height: 1.35;
    }

    .io-shell .kpi-val {
        font-size: 30px !important;
        line-height: 1.05;
    }

    .io-shell .io-behavior-value,
    .io-shell .io-adaptive-value,
    .io-shell .io-process-value {
        font-size: 29px !important;
        line-height: 1.08;
    }

    .io-shell table {
        font-size: 13px !important;
    }

    .io-shell table th {
        font-size: 11.5px !important;
        line-height: 1.35;
        padding-top: 13px !important;
        padding-bottom: 13px !important;
    }

    .io-shell table td {
        font-size: 13px !important;
        line-height: 1.4;
        padding-top: 13px !important;
        padding-bottom: 13px !important;
    }

    .io-shell table td strong {
        font-size: 13.5px !important;
    }

    .io-shell .btn,
    .io-shell .fc {
        font-size: 13px !important;
    }

    .io-shell .btn-sm {
        font-size: 12px !important;
        padding: 7px 11px !important;
    }

    .io-shell .status-badge,
    .io-shell .io-confidence,
    .io-shell .io-risk-pill,
    .io-shell .io-learning-badge,
    .io-shell .io-trend {
        font-size: 11.5px !important;
    }

    .io-shell .detail-box > span {
        font-size: 12.5px !important;
    }

    .io-shell .detail-box > strong {
        font-size: 15px !important;
        line-height: 1.35;
    }

    .io-shell .io-learning-action strong,
    .io-shell .io-insight strong,
    .io-shell .io-process-alert strong,
    .io-shell .io-recommendation strong {
        font-size: 14px !important;
        line-height: 1.35;
    }

    .io-shell .view-bar .btn {
        min-height: 38px;
    }

    /* Da un poco más de aire para que el aumento de letra no apriete el contenido */
    .io-shell .card-header {
        padding-top: 18px;
        padding-bottom: 18px;
    }

    .io-shell .card-body {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    @media (max-width: 760px) {
        .io-shell {
            font-size: 13.5px;
        }

        .io-shell h2 {
            font-size: 24px !important;
        }

        .io-shell .card-title {
            font-size: 16px !important;
        }

        .io-shell table {
            font-size: 12.5px !important;
        }

        .io-shell table th {
            font-size: 11px !important;
        }

        .io-shell table td {
            font-size: 12.5px !important;
        }
    }

/* Segundo ajuste: un poco más grande, manteniendo proporción */
    .io-shell {
        font-size: 15px;
    }

    .io-shell h2 {
        font-size: 31px !important;
    }

    .io-shell .card-title {
        font-size: 19px !important;
    }

    .io-shell .mini-note,
    .io-shell .io-behavior-sub,
    .io-shell .io-adaptive-note,
    .io-shell .io-process-note,
    .io-shell .io-learning-action p,
    .io-shell .io-insight span,
    .io-shell .io-process-alert span,
    .io-shell .io-recommendation span {
        font-size: 14px !important;
    }

    .io-shell .kpi-label,
    .io-shell .io-behavior-label,
    .io-shell .io-adaptive-title,
    .io-shell .io-process-label {
        font-size: 13px !important;
    }

    .io-shell .kpi-val {
        font-size: 33px !important;
    }

    .io-shell .io-behavior-value,
    .io-shell .io-adaptive-value,
    .io-shell .io-process-value {
        font-size: 32px !important;
    }

    .io-shell table {
        font-size: 14px !important;
    }

    .io-shell table th {
        font-size: 12.5px !important;
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    .io-shell table td {
        font-size: 14px !important;
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    .io-shell table td strong {
        font-size: 14.5px !important;
    }

    .io-shell .btn,
    .io-shell .fc {
        font-size: 14px !important;
    }

    .io-shell .btn-sm {
        font-size: 13px !important;
        padding: 8px 12px !important;
    }

    .io-shell .status-badge,
    .io-shell .io-confidence,
    .io-shell .io-risk-pill,
    .io-shell .io-learning-badge,
    .io-shell .io-trend {
        font-size: 12px !important;
    }

    .io-shell .detail-box > span {
        font-size: 13.5px !important;
    }

    .io-shell .detail-box > strong {
        font-size: 16px !important;
    }

    .io-shell .io-learning-action strong,
    .io-shell .io-insight strong,
    .io-shell .io-process-alert strong,
    .io-shell .io-recommendation strong {
        font-size: 15px !important;
    }

    .io-shell .view-bar .btn {
        min-height: 40px;
    }

    @media (max-width: 760px) {
        .io-shell {
            font-size: 14px;
        }

        .io-shell h2 {
            font-size: 27px !important;
        }

        .io-shell .card-title {
            font-size: 17px !important;
        }

        .io-shell table {
            font-size: 13px !important;
        }

        .io-shell table th {
            font-size: 11.5px !important;
        }

        .io-shell table td {
            font-size: 13px !important;
        }
    }

/* Ajuste fino: ligeramente menor que TYPOGRAPHY_PLUS, mayor que el primer ajuste */
    .io-shell {
        font-size: 14.5px;
    }

    .io-shell h2 {
        font-size: 29px !important;
    }

    .io-shell .card-title {
        font-size: 18px !important;
    }

    .io-shell .mini-note,
    .io-shell .io-behavior-sub,
    .io-shell .io-adaptive-note,
    .io-shell .io-process-note,
    .io-shell .io-learning-action p,
    .io-shell .io-insight span,
    .io-shell .io-process-alert span,
    .io-shell .io-recommendation span {
        font-size: 13.5px !important;
        line-height: 1.48 !important;
    }

    .io-shell .kpi-label,
    .io-shell .io-behavior-label,
    .io-shell .io-adaptive-title,
    .io-shell .io-process-label {
        font-size: 12.5px !important;
    }

    .io-shell .kpi-val {
        font-size: 31px !important;
    }

    .io-shell .io-behavior-value,
    .io-shell .io-adaptive-value,
    .io-shell .io-process-value {
        font-size: 30px !important;
    }

    .io-shell table {
        font-size: 13.5px !important;
    }

    .io-shell table th {
        font-size: 12px !important;
        padding-top: 13px !important;
        padding-bottom: 13px !important;
    }

    .io-shell table td {
        font-size: 13.5px !important;
        padding-top: 13px !important;
        padding-bottom: 13px !important;
    }

    .io-shell table td strong {
        font-size: 14px !important;
    }

    .io-shell .btn,
    .io-shell .fc {
        font-size: 13.5px !important;
    }

    .io-shell .btn-sm {
        font-size: 12.5px !important;
        padding: 7px 11px !important;
    }

    .io-shell .status-badge,
    .io-shell .io-confidence,
    .io-shell .io-risk-pill,
    .io-shell .io-learning-badge,
    .io-shell .io-trend {
        font-size: 11.5px !important;
    }

    .io-shell .detail-box > span {
        font-size: 13px !important;
    }

    .io-shell .detail-box > strong {
        font-size: 15.5px !important;
    }

    .io-shell .io-learning-action strong,
    .io-shell .io-insight strong,
    .io-shell .io-process-alert strong,
    .io-shell .io-recommendation strong {
        font-size: 14.5px !important;
    }

    .io-shell .view-bar .btn {
        min-height: 39px;
    }

    @media (max-width: 760px) {
        .io-shell {
            font-size: 13.5px;
        }

        .io-shell h2 {
            font-size: 25px !important;
        }

        .io-shell .card-title {
            font-size: 16.5px !important;
        }

        .io-shell table {
            font-size: 12.5px !important;
        }

        .io-shell table th {
            font-size: 11px !important;
        }

        .io-shell table td {
            font-size: 12.5px !important;
        }
    }