/* ==========================================================================
   DREAMS — Fase 2+: layout admin, modales, tablas y shells públicos (tokens :root)
   Objetivo: reducir style="" inline; modales admin con .p2-modal-is-hidden + JS (setAdminModalOpen).
   ========================================================================== */

/* ----- Admin shell ----- */
.p2-admin-header {
    padding: 12px 40px;
    border-bottom: 1px solid rgba(15, 52, 96, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    /* Por encima de .dash-subnav (8500); alinear con .navbar (9000) y evitar que el panel CRM quede tapado */
    z-index: 9200;
}

.p2-admin-nav-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Admin: un solo bloque de acciones — llevarlo al borde derecho para alinear campana + dropdown */
header.navbar.p2-admin-header > .p2-admin-nav-actions {
    margin-left: auto;
}

/* Admin: subnavbar en dos niveles (área → módulos) */
.p2-admin-subnav-stack {
    position: sticky;
    top: var(--navbar-height);
    z-index: 8500;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.76);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-bottom: 1px solid rgba(15, 52, 96, 0.08);
}

.p2-admin-subnav-stack > nav.dash-subnav {
    position: relative;
    top: auto;
    border-bottom: none;
}

.p2-admin-subnav-tier1 {
    padding-bottom: 6px;
}

.p2-admin-subnav-tier2 {
    padding-top: 0;
    background: rgba(248, 250, 252, 0.92);
    border-top: 1px solid rgba(15, 52, 96, 0.06);
}

.p2-admin-badge {
    font-size: 0.7rem;
    background: var(--primary-midnight);
    color: #fff;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    flex-shrink: 0;
}

/* CRM — alertas en tiempo real (admin) */
.p2-admin-crm-notify-wrap {
    position: relative;
    flex-shrink: 0;
}

.p2-admin-crm-notify-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid rgba(15, 52, 96, 0.12);
    background: #fff;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.p2-admin-crm-notify-btn:hover {
    background: rgba(15, 52, 96, 0.04);
    border-color: rgba(15, 52, 96, 0.2);
}

.p2-admin-crm-notify-icon {
    font-size: 1.15rem;
    line-height: 1;
}

.p2-admin-crm-notify-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #c62828;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
}

.p2-admin-crm-activity-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    width: min(360px, calc(100vw - 32px));
    max-height: min(70vh, 420px);
    overflow: auto;
    padding: 14px 16px 16px;
    background: #fff;
    border: 1px solid rgba(15, 52, 96, 0.12);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(15, 52, 96, 0.12);
    /* Por encima del contenido del propio header (badge, botón) */
    z-index: 5;
}

.p2-admin-crm-activity-head {
    margin: 0 0 10px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(15, 52, 96, 0.55);
}

.p2-admin-crm-activity-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.p2-crm-activity-empty {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(15, 52, 96, 0.55);
    line-height: 1.45;
}

.p2-crm-activity-row {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 10px;
    align-items: start;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(15, 52, 96, 0.03);
    font-size: 0.82rem;
}

.p2-crm-activity-time {
    font-weight: 700;
    color: rgba(15, 52, 96, 0.45);
    font-size: 0.72rem;
    white-space: nowrap;
}

.p2-crm-activity-text {
    color: rgba(15, 52, 96, 0.92);
    line-height: 1.35;
}

.p2-admin-crm-toast-stack {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 12000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
    pointer-events: none;
    max-width: min(380px, calc(100vw - 40px));
}

.p2-admin-crm-toast {
    pointer-events: auto;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.35;
    box-shadow: 0 8px 28px rgba(15, 52, 96, 0.18);
    animation: p2AdminCrmToastIn 0.28s ease;
}

.p2-admin-crm-toast--info {
    background: #fff;
    color: rgba(15, 52, 96, 0.95);
    border: 1px solid rgba(15, 52, 96, 0.12);
}

.p2-admin-crm-toast--success {
    background: rgba(15, 52, 96, 0.96);
    color: #fff;
    border: 1px solid rgba(15, 52, 96, 0.2);
}

.p2-admin-crm-toast--warn {
    background: #fff8e6;
    color: #5d4037;
    border: 1px solid rgba(183, 137, 42, 0.35);
}

.p2-admin-crm-toast--out {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

@keyframes p2AdminCrmToastIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.p2-admin-intro-card {
    width: 100%;
    max-width: none;
}

.p2-hr-soft {
    border: 0.5px solid #eee;
    margin: 20px 0;
}

.p2-btn-admin-compact {
    width: auto;
    padding: 10px 20px;
}

.p2-btn-admin-midnight {
    width: auto;
    padding: 10px 25px;
    background: var(--primary-midnight);
    font-size: 0.75rem;
}

.p2-alerts-slot {
    margin-top: 30px;
    display: none;
}

.p2-admin-bento {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.p2-bi-card-accent {
    border-left: 4px solid var(--accent-gold);
}

.p2-progress-track {
    background: #eee;
    height: 8px;
    border-radius: 4px;
}

.p2-progress-fill {
    background: var(--primary-midnight);
    height: 100%;
    width: 0%;
    border-radius: 4px;
    transition: width 1s;
}

/* ==========================================================================
   Admin — KPIs: teselas estilo Consultoría + wrapper “Power BI”
   Reglas: cada KPI usa .p2-consult-odoo-tile y se encapsula en otro tile.
   ========================================================================== */

/* Hub: replica gaps y densidad del dashboard (bento.css) */
.p2-admin-kpi-hub {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 30px;
    align-items: start;
}

/* Outer frame (Power BI): misma base visual que Consultoría, no interactivo. */
.p2-admin-powerbi-frame.p2-consult-odoo-tile {
    --consult-tile-accent: var(--accent-gold);
    cursor: default;
    min-height: unset;
    padding: 14px 14px 12px;
    align-items: stretch;
    justify-content: flex-start;
    flex-direction: column;
    gap: 10px;
    overflow: visible; /* permite expansión tipo “burbuja” del KPI interno */
}

.p2-admin-powerbi-kicker {
    display: inline-flex;
    align-self: flex-start;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(15, 52, 96, 0.55);
}

/* KPI node: usa el motor del dashboard (axis-node) para “burbuja desplegable” */
.p2-admin-kpi-node.axis-node {
    width: 100%;
    height: auto;
    min-height: 160px;
    border-radius: 16px;
    padding: 18px 18px 16px;
    border: 1px solid rgba(15, 52, 96, 0.08);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 6px 16px rgba(15, 52, 96, 0.06);
    overflow: hidden;
}

.p2-admin-kpi-node .node-content {
    text-align: left;
}

.p2-admin-kpi-node .node-label {
    color: rgba(15, 52, 96, 0.62);
}

.p2-admin-kpi-node .node-kpi {
    margin: 0;
    font-size: 1.35rem;
}

.p2-admin-kpi-node .node-kpi-sub {
    margin-top: 8px;
    max-width: none;
}

/* Chart container: la “burbuja” que se despliega al hover como en bento.css */
.p2-admin-kpi-node .node-chart-container {
    height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(16px);
    transition: all 0.5s ease 0.15s;
    pointer-events: none;
}

.p2-admin-kpi-node:hover {
    border-color: var(--accent-gold);
    box-shadow: 0 20px 40px rgba(15, 52, 96, 0.12);
    transform: translateY(-6px);
}

.p2-admin-kpi-node:hover .node-chart-container {
    height: 180px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    margin-top: 12px;
}

.p2-admin-kpi-node canvas {
    width: 100% !important;
    height: 100% !important;
}

.p2-admin-kpi-track {
    margin-top: 8px;
}

/* Admin — KPIs maestro (teselas alineadas con Centro de Resultados Estratégicos) */
.p2-admin-kpi-page {
    margin-top: 30px;
}

.p2-admin-kpi-root {
    width: 100%;
}

.p2-admin-kpi-shell-inner {
    max-width: 100%;
}

.p2-admin-kpi-page-title {
    text-align: center;
    margin-bottom: 0.35rem;
}

.p2-admin-kpi-summary {
    text-align: center;
    margin-bottom: 0.25rem;
}

.p2-admin-kpi-period-bar {
    margin: 1.1rem auto 0.25rem;
    justify-content: center;
    max-width: 720px;
}

.p2-admin-kpi-block {
    margin-top: 2rem;
}

.p2-admin-kpi-block-title {
    color: var(--primary-midnight);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 1rem 0;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid rgba(15, 52, 96, 0.08);
}

.p2-admin-reconcile-list-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    margin-top: 18px;
}

.p2-admin-reconcile-list-wrap {
    margin-top: 10px;
    border: 1px solid rgba(15, 52, 96, 0.08);
    border-radius: 14px;
    background: rgba(15, 52, 96, 0.025);
    overflow: hidden;
}

.p2-admin-reconcile-table th,
.p2-admin-reconcile-table td {
    padding: 12px;
    vertical-align: top;
    border-bottom: 1px solid rgba(15, 52, 96, 0.08);
}

.p2-admin-reconcile-table tbody tr:last-child td {
    border-bottom: none;
}

.p2-admin-reconcile-person {
    color: var(--primary-midnight);
    font-weight: 700;
}

.p2-admin-reconcile-email,
.p2-admin-reconcile-meta {
    margin-top: 4px;
    font-size: 0.74rem;
    color: #5f6b7a;
    line-height: 1.45;
}

.p2-admin-reconcile-program {
    color: var(--primary-midnight);
    font-weight: 600;
}

.p2-admin-reconcile-token {
    display: inline-block;
    max-width: 260px;
    padding: 4px 7px;
    border-radius: 8px;
    background: rgba(15, 52, 96, 0.06);
    color: var(--primary-midnight);
    word-break: break-word;
}

.p2-admin-reconcile-use-btn {
    white-space: nowrap;
}

.p2-admin-reconcile-disabled {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    color: #6b7280;
}

.dreams-axis-hub--admin {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    align-items: stretch;
}

.p2-admin-hub-tile.p2-dash-odoo-tile {
    cursor: default;
}

/* ----- Secciones con tabla ----- */
.p2-admin-section {
    margin-top: 30px;
    width: 100%;
    overflow-x: auto;
}

.p2-admin-section--gold-top {
    border-top: 4px solid var(--accent-gold);
}

.p2-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.p2-section-head--lg {
    margin-bottom: 25px;
}

.p2-section-title {
    color: var(--primary-midnight);
    margin: 0;
}

.p2-section-sub {
    font-size: 0.75rem;
    color: #888;
    margin-top: 5px;
}

.p2-muted-count {
    font-size: 0.75rem;
    color: #666;
    font-weight: 600;
    text-transform: uppercase;
}

.p2-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    text-align: left;
}

.p2-data-thead tr {
    border-bottom: 2px solid #eee;
    color: #999;
}

.p2-th {
    padding: 12px;
}

.p2-th-right {
    padding: 12px;
    text-align: right;
}

.p2-empty-cell {
    padding: 30px;
    text-align: center;
    color: #999;
}

.p2-scroll-x {
    overflow-x: auto;
}

.p2-catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.p2-catalog-placeholder {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    color: #999;
    background: #f9f9f9;
    border-radius: 12px;
    border: 1px dashed #ddd;
}

/* ----- Modales (fondo fijo; display controlado por JS) ----- */
.p2-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 52, 96, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    /* Debe quedar por encima del navbar/subnav sticky (style.css usa z-index 9000/8500). */
    z-index: 14000;
    overflow-y: auto;
}

.p2-modal-backdrop--dense {
    background: rgba(15, 52, 96, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.p2-modal-backdrop--z2001 {
    z-index: 14001;
}

.p2-modal-backdrop--z2002 {
    z-index: 14002;
}

.p2-modal-backdrop--z2005 {
    z-index: 14005;
}

.p2-modal-backdrop--z2010 {
    z-index: 14010;
    background: rgba(15, 52, 96, 0.9);
    /* Al abrir con JS (display:flex), centra el dossier */
    align-items: center;
    justify-content: center;
}

.p2-modal-card-sm {
    margin: 40px auto;
    width: 90%;
    max-width: 500px;
    border: 1px solid var(--accent-gold);
    background: #fff;
    position: relative;
    z-index: 2001;
    padding: 30px;
}

.p2-modal-card-md {
    margin: 2% auto;
    width: 95%;
    max-width: 700px;
    border-top: 6px solid var(--accent-gold);
    padding: 35px;
}

.p2-modal-card-edit {
    margin: 40px auto;
    width: 90%;
    max-width: 550px;
    border-top: 6px solid var(--accent-gold);
    background: #fff;
    padding: 35px;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.p2-modal-head-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.p2-modal-head-row--spaced {
    margin-bottom: 25px;
}

.p2-modal-title {
    color: var(--primary-midnight);
    font-weight: 700;
}

.p2-modal-title-lg {
    color: var(--primary-midnight);
    font-weight: 900;
    font-size: 1.4rem;
    margin: 0;
}

.p2-modal-sub {
    font-size: 0.75rem;
    color: #777;
    margin-top: 5px;
}

.p2-btn-close-x {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #ccc;
}

.p2-btn-close-x-lg {
    background: none;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: #ccc;
    transition: 0.3s;
}

.p2-btn-close-x-lg:hover {
    color: var(--primary-midnight);
}

.p2-btn-ghost-cancel {
    background: none;
    border: none;
    color: #999;
    width: 100%;
    margin-top: 10px;
    cursor: pointer;
}

.p2-btn-ghost-cancel-sm {
    background: none;
    border: none;
    color: #999;
    width: 100%;
    margin-top: 15px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
}

.p2-form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.p2-form-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.p2-form-actions--mt10 {
    margin-top: 10px;
}

.p2-btn-secondary {
    flex: 1;
    background: #eee;
    border: none;
    border-radius: 12px;
    color: #666;
    cursor: pointer;
    font-weight: 600;
}

.p2-btn-primary-flex2 {
    flex: 2;
    width: auto !important;
    padding: 15px;
    font-weight: 700;
}

.p2-logs-shell {
    background: #fff;
    width: 90%;
    max-width: 550px;
    max-height: 85vh;
    border-radius: 24px;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.p2-logs-header {
    background: var(--primary-midnight);
    padding: 30px;
    color: #fff;
    border-bottom: 5px solid var(--accent-gold);
}

.p2-logs-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.p2-logs-sub {
    margin: 8px 0 0 0;
    font-size: 0.8rem;
    color: var(--accent-gold);
    font-weight: 700;
    text-transform: uppercase;
}

.p2-logs-body {
    flex: 1;
    overflow-y: auto;
    padding: 40px;
    background: #fdfdfd;
}

.p2-logs-footer {
    padding: 25px;
    border-top: 1px solid #eee;
    text-align: right;
    background: #fff;
}

.p2-logs-close-btn {
    background: var(--primary-midnight);
    color: white;
    border: 1px solid var(--accent-gold);
    padding: 14px 30px;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    font-size: 0.8rem;
    letter-spacing: 1px;
    transition: 0.3s;
}

.p2-logs-close-btn:hover {
    background: #164275;
}

/* ----- Dashboard navbar micro-copy ----- */
.p2-dash-brand-mid {
    color: var(--primary-midnight);
    font-weight: 800;
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.p2-dash-brand-gold {
    color: var(--accent-gold);
    font-weight: 400;
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.p2-dash-aura-title {
    color: var(--primary-midnight);
    font-weight: 700;
    font-size: 0.65rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
    opacity: 0.8;
}

.p2-column-title-center {
    text-align: center;
    width: 100%;
}

.p2-mt-20 {
    margin-top: 20px;
}

.p2-mt-10 {
    margin-top: 10px;
}

/* ----- Dashboard: overlays contacto / desglose ----- */
.p2-purpose-bubble--500 {
    max-width: 500px;
}

.purpose-bubble.p2-operative-bubble {
    max-width: 520px !important;
    width: 100% !important;
    padding: 18px 16px !important;
    border: 1px solid rgba(149, 124, 61, 0.4) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 30px 70px rgba(15, 52, 96, 0.14) !important;
    overflow: hidden;
    /* Mitad del tamaño previo: altura deliberadamente compacta */
    max-height: min(36vh, 260px) !important;
    display: flex;
    flex-direction: column;
}

.p2-operative-bubble-head {
    padding-right: 48px;
    box-sizing: border-box;
    margin-bottom: 10px;
    flex: 0 0 auto;
}

.p2-operative-title {
    margin: 0 0 6px 0;
}

.p2-operative-sub {
    margin: 0;
}

.p2-operative-bubble-body {
    gap: 18px;
    flex: 1 1 auto;
    min-height: 0; /* permite scroll interno en flex */
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 6px;
}

.p2-operative-bubble .split-operative-panel {
    width: 100%;
}

@media (max-width: 991px) {
    .purpose-bubble.p2-operative-bubble {
        max-width: 440px !important;
        padding: 16px 14px !important;
        max-height: min(55vh, 340px) !important;
    }
}

.p2-purpose-bubble--550 {
    max-width: 550px;
    border-top: 6px solid var(--accent-gold);
}

.p2-ov-header-mb {
    margin-bottom: 25px;
}

.p2-contact-h2 {
    color: var(--primary-midnight);
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.p2-contact-lead {
    font-weight: 300;
    font-size: 0.9rem;
    color: #666;
    line-height: 1.4;
}

.p2-form-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.p2-contact-select {
    width: 100%;
    padding: 16px 20px;
    border-radius: 12px;
    border: 1.5px solid rgba(15, 52, 96, 0.12);
    font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
}

.p2-textarea-contact {
    min-height: 120px;
    resize: none;
}

.p2-contact-status {
    font-size: 0.75rem;
    text-align: center;
    margin-top: 10px;
    font-weight: 600;
    min-height: 20px;
}

.p2-breakdown-head-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.p2-breakdown-icon {
    font-size: 2rem;
}

.p2-breakdown-title {
    color: var(--primary-midnight);
    font-weight: 700;
    font-size: 1.4rem;
    margin: 0;
    text-transform: uppercase;
}

.p2-breakdown-sub {
    font-weight: 300;
    font-size: 0.85rem;
    color: #666;
    line-height: 1.4;
}

.p2-breakdown-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 25px;
    max-height: 350px;
    overflow-y: auto;
    padding-right: 10px;
}

.p2-breakdown-placeholder {
    text-align: center;
    color: #999;
    font-size: 0.8rem;
    padding: 20px;
}

.p2-breakdown-actions {
    display: flex;
    gap: 12px;
}

.p2-btn-breakdown-primary {
    flex: 2;
    font-weight: 700;
    letter-spacing: 1px;
    width: auto !important;
}

.p2-btn-breakdown-close {
    flex: 1;
    background: #eee;
    color: #666;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
}

/* ----- Admin controller: tablas dinámicas ----- */
.p2-tr-user {
    border-bottom: 1px solid #f4f4f4;
    transition: background 0.2s;
}

.p2-tr-user:hover {
    background: #fafafa;
}

.p2-td-user {
    padding: 15px;
}

.p2-td-actions {
    padding: 15px;
    text-align: right;
}

.p2-user-name {
    font-weight: 600;
    color: var(--primary-midnight);
}

.p2-user-org {
    font-size: 0.7rem;
    color: var(--accent-gold);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.p2-user-email {
    font-size: 0.75rem;
    color: #999;
}

.p2-pill-rol {
    background: #eee;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    text-transform: uppercase;
}

.p2-accesos-row {
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 15px;
}

.p2-accesos-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.p2-accesos-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.p2-app-stack {
    display: flex;
    gap: 8px;
}

.p2-app-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.p2-btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    margin-right: 12px;
    font-size: 1.2rem;
}

.p2-btn-icon--danger {
    color: #dc2626;
}

.p2-label-check {
    display: block;
    margin-bottom: 8px;
    cursor: pointer;
}

.p2-muted-p-sm {
    font-size: 0.7rem;
    color: #999;
}

.p2-saas-alert {
    padding: 15px 25px;
    border-radius: 16px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 20px;
    animation: fadeIn 0.6s ease-out;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.p2-saas-alert[data-tone="critical"] {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.p2-saas-alert[data-tone="warn"] {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

.p2-saas-alert-icon {
    font-size: 1.5rem;
}

.p2-saas-alert-body {
    flex: 1;
}

.p2-saas-alert-title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.p2-saas-alert-text {
    margin: 3px 0 0 0;
    font-size: 0.8rem;
    font-weight: 400;
    opacity: 0.9;
}

.p2-saas-alert-btn {
    background: rgba(255, 255, 255, 0.5);
    border: none;
    padding: 8px 15px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 800;
    cursor: pointer;
    color: inherit;
    transition: 0.3s;
}

.p2-table-empty {
    padding: 20px;
    text-align: center;
}

.p2-table-empty--error {
    color: red;
}

/* ----- Admin modals: form layout & callouts ----- */
.p2-label-rol {
    font-size: 0.8rem;
    color: #666;
    margin-top: 10px;
    display: block;
}

.p2-callout-gold-sm {
    margin: 20px 0;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 8px;
    border-left: 3px solid var(--accent-gold);
}

.p2-callout-title {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--primary-midnight);
    margin: 0 0 10px 0;
    text-transform: uppercase;
}

.p2-section-cap {
    font-size: 0.65rem;
    font-weight: 700;
    color: #999;
    display: block;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.p2-scroll-120 {
    max-height: 120px;
    overflow-y: auto;
    padding-right: 5px;
}

.p2-scroll-120--text {
    font-size: 0.85rem;
}

.p2-scroll-100 {
    max-height: 100px;
    overflow-y: auto;
    padding-right: 5px;
}

.p2-muted-7 {
    font-size: 0.7rem;
    color: #999;
}

.p2-muted-75 {
    font-size: 0.75rem;
    color: #999;
}

.p2-stack-mb12 {
    margin-bottom: 12px;
}

.p2-divider-block {
    margin-bottom: 12px;
    padding-top: 8px;
    border-top: 1px solid #eee;
}

.p2-label-row {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 4px;
}

.p2-btn-submit-gold {
    background: var(--accent-gold);
}

.p2-field-full {
    grid-column: 1 / -1;
}

.p2-panel-muted-full {
    grid-column: 1 / -1;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 12px;
    border-left: 4px solid var(--primary-midnight);
}

.p2-panel-muted-full--gold {
    border-left-color: var(--accent-gold);
}

.p2-lbl-upper-sm {
    font-size: 0.7rem;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    display: block;
}

.p2-input-mb15 {
    margin-bottom: 15px;
}

.p2-textarea-desc {
    min-height: 80px;
    margin-bottom: 15px;
}

.p2-panel-dashed-gold {
    background: #fff;
    padding: 15px;
    border-radius: 10px;
    border: 1.5px dashed var(--accent-gold);
    margin-top: 5px;
}

.p2-panel-dashed-midnight {
    background: #fff;
    padding: 15px;
    border-radius: 10px;
    border: 1.5px dashed var(--primary-midnight);
    margin-top: 5px;
}

.p2-lbl-gold-upper {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--accent-gold);
    text-transform: uppercase;
    display: block;
    margin-bottom: 10px;
}

.p2-lbl-midnight-upper {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--primary-midnight);
    text-transform: uppercase;
    display: block;
    margin-bottom: 10px;
}

.p2-lbl-micro {
    font-size: 0.65rem;
    font-weight: 700;
    color: #777;
    display: block;
}

.p2-lbl-micro-mb {
    font-size: 0.65rem;
    font-weight: 700;
    color: #777;
    display: block;
    margin-bottom: 5px;
}

.p2-textarea-purpose {
    min-height: 100px;
    border-color: #eee;
    font-size: 0.8rem;
    margin-bottom: 15px;
}

.p2-textarea-compact {
    min-height: 80px;
    border-color: #eee;
    font-size: 0.8rem;
}

.p2-input-mb12 {
    margin-bottom: 12px;
    border-color: #eee;
}

.p2-grid-2-tight {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

.p2-flex-gap8 {
    display: flex;
    gap: 8px;
}

.p2-color-swatch {
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.p2-input-mono {
    margin: 0;
    font-family: monospace;
    font-size: 0.8rem;
    flex: 1;
}

.p2-input-no-m {
    margin: 0;
}

.p2-kpi-row-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.p2-btn-kpi-add {
    background: var(--primary-midnight);
    color: #fff;
    border: none;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.6rem;
    cursor: pointer;
    font-weight: 700;
}

.p2-kpis-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.p2-kpi-section-divider {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1.5px solid rgba(149, 124, 61, 0.2);
}

.p2-lbl-gold-micro {
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--accent-gold);
    text-transform: uppercase;
}

.p2-lbl-form {
    font-size: 0.7rem;
    font-weight: 700;
    display: block;
}

.p2-lbl-form--muted {
    color: #999;
}

.p2-callout-free {
    background: #fff8e6;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid #ffeeba;
}

.p2-free-check-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 0.8rem;
    color: #856404;
    cursor: pointer;
}

.p2-checkbox-lg {
    transform: scale(1.3);
}

.p2-lbl-micro-upper {
    font-size: 0.65rem;
    font-weight: 700;
}

.p2-mt10 {
    margin-top: 10px;
}

.p2-mb0 {
    margin-bottom: 0;
}

.p2-panel-mats {
    background: #f0f4f8;
    padding: 15px;
    border-radius: 12px;
}

.p2-lbl-mats {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--brand-blue);
    display: block;
    margin-bottom: 10px;
}

.p2-mats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    font-size: 0.75rem;
}

.p2-lbl-check-tight {
    cursor: pointer;
}

.p2-footer-separated {
    grid-column: 1 / -1;
    border-top: 1px solid #eee;
    padding-top: 20px;
}

.p2-input-mb10 {
    margin-bottom: 10px;
}

.p2-divider-full {
    grid-column: 1 / -1;
    border-top: 1px solid #eee;
    padding-top: 20px;
    margin-top: 10px;
}

.p2-phase-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 15px;
}

.p2-phase-h4 {
    font-size: 0.8rem;
    color: var(--primary-midnight);
    margin: 0;
    font-weight: 800;
    text-transform: uppercase;
}

.p2-phase-p {
    font-size: 0.65rem;
    color: #888;
    margin: 4px 0 0 0;
}

.p2-phase-stats {
    display: flex;
    gap: 30px;
    align-items: flex-end;
}

.p2-stat-block {
    text-align: right;
}

.p2-stat-label {
    font-size: 0.6rem;
    color: #999;
    font-weight: 700;
    display: block;
    text-transform: uppercase;
}

.p2-stat-hours {
    font-size: 1.1rem;
    color: var(--primary-midnight);
}

.p2-stat-block--gold {
    text-align: right;
    border-left: 2px solid var(--accent-gold);
    padding-left: 20px;
}

.p2-stat-label-gold {
    font-size: 0.6rem;
    color: var(--accent-gold);
    font-weight: 800;
    display: block;
    text-transform: uppercase;
}

.p2-stat-money {
    font-size: 1.5rem;
    color: var(--accent-gold);
}

.p2-phases-stack {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.p2-btn-add-phase {
    width: 100%;
    padding: 12px;
    background: #f9f9f9;
    border: 1.5px dashed #ccc;
    border-radius: 8px;
    color: #666;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: 15px;
    transition: border-color 0.2s, color 0.2s;
}

.p2-btn-add-phase:hover {
    border-color: var(--accent-gold);
    color: var(--primary-midnight);
}

.p2-service-kpi-panel {
    grid-column: 1 / -1;
    background: rgba(15, 52, 96, 0.03);
    padding: 20px;
    border-radius: 12px;
    border: 1.5px dashed var(--accent-gold);
    margin-top: 10px;
}

.p2-service-kpi-title {
    margin-bottom: 12px;
}

.p2-grid-kpi-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 0.5fr;
    gap: 15px;
}

.p2-lbl-muted-micro {
    font-size: 0.6rem;
    color: #999;
    font-weight: 700;
    display: block;
}

.p2-input-75 {
    margin: 0;
    font-size: 0.75rem;
}

.p2-status-row {
    grid-column: 1 / -1;
    background: #f0f4f8;
    padding: 15px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
}

.p2-status-main {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary-midnight);
}

.p2-status-check {
    cursor: pointer;
    font-size: 0.8rem;
}

.p2-btn-sync-service {
    background: var(--primary-midnight);
}

.p2-modal-title-tracked {
    text-transform: uppercase;
    letter-spacing: 1px;
}

.p2-edit-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.p2-lbl-edit-upper {
    display: block;
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--primary-midnight);
    margin-bottom: 8px;
    text-transform: uppercase;
}

.p2-input-tight {
    margin: 0;
}

.p2-form-mb20 {
    margin-bottom: 20px;
}

.p2-edit-permissions-panel {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 25px;
}

.p2-edit-section {
    margin-bottom: 15px;
}

.p2-edit-section-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 800;
    color: #999;
    margin-bottom: 10px;
    text-transform: uppercase;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

.p2-edit-section-label--gold {
    color: var(--accent-gold);
}

.p2-apps-stack label {
    display: block;
    margin-bottom: 6px;
}

.p2-finance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 25px;
    padding: 15px;
    background: rgba(149, 124, 61, 0.05);
    border-radius: 10px;
    border: 1px solid rgba(149, 124, 61, 0.1);
}

.p2-lbl-finance {
    display: block;
    font-size: 0.6rem;
    color: #957c3d;
    font-weight: 800;
    text-transform: uppercase;
}

.p2-input-finance {
    border-color: rgba(149, 124, 61, 0.2);
}

.p2-btn-expediente-full {
    width: 100%;
    padding: 15px;
    background: var(--primary-midnight);
    color: #fff;
    font-weight: 700;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 4px 15px rgba(15, 52, 96, 0.2);
}

/* ----- Admin controller: KPI rows, phases, catalog, interventions ----- */
.p2-strong-underline {
    text-decoration: underline;
}

.p2-kpi-config-row {
    display: grid;
    grid-template-columns: 1fr 1fr 0.5fr 30px;
    gap: 8px;
    align-items: end;
    background: rgba(15, 52, 96, 0.03);
    padding: 10px;
    border-radius: 12px;
    border: 1px solid rgba(15, 52, 96, 0.08);
    margin-bottom: 8px;
}

.p2-kpi-lbl-micro {
    font-size: 0.55rem;
    color: #999;
    display: block;
    font-weight: 700;
}

.p2-kpi-input-tight {
    margin: 0;
    font-size: 0.7rem;
    padding: 8px;
}

.p2-btn-remove-row {
    background: none;
    border: none;
    color: #c00;
    cursor: pointer;
    font-size: 1.2rem;
    padding-bottom: 5px;
    line-height: 1;
}

.p2-grid-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    color: #999;
}

.p2-catalog-card {
    padding: 20px;
    border-top: 4px solid var(--brand-blue);
}

.p2-catalog-card--live {
    border-top-color: var(--brand-orange);
}

.p2-catalog-card--ia {
    border-top-color: var(--accent-gold);
}

.p2-catalog-card--consult {
    border-top-color: var(--primary-midnight);
}

.p2-catalog-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.p2-catalog-head--tight {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.p2-catalog-cat {
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #999;
}

.p2-material-badges {
    font-size: 1.1rem;
}

.p2-material-badges--paid {
    filter: grayscale(1);
}

.p2-material-icon--dim {
    opacity: 0.2;
}

.p2-catalog-title {
    margin: 0;
    font-size: 1rem;
    color: var(--primary-midnight);
}

.p2-catalog-title--svc {
    margin: 10px 0;
    font-size: 1rem;
    color: var(--primary-midnight);
}

.p2-catalog-desc {
    font-size: 0.7rem;
    color: #666;
    margin: 10px 0;
    line-height: 1.4;
    min-height: 3em;
}

.p2-catalog-desc--svc {
    font-size: 0.7rem;
    color: #666;
    line-height: 1.4;
    min-height: 3em;
}

.p2-catalog-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.p2-catalog-price {
    font-size: 0.8rem;
    font-weight: 900;
    color: var(--primary-midnight);
}

.p2-catalog-price--plain {
    font-size: 0.8rem;
    font-weight: 900;
}

.p2-catalog-modality {
    font-size: 0.6rem;
    color: #999;
    text-transform: uppercase;
}

.p2-catalog-actions {
    display: flex;
    gap: 8px;
}

.p2-btn-catalog-edit {
    background: #f0f4f8;
    border: none;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
}

.p2-btn-catalog-del {
    background: #fff0f0;
    border: none;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    color: #dc2626;
}

.p2-phase-block {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 15px;
    position: relative;
    margin-bottom: 10px;
}

.p2-phase-head {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 15px;
}

.p2-phase-num {
    background: var(--primary-midnight);
    color: #fff;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
}

.p2-phase-title-input {
    margin: 0;
    font-weight: 700;
    border-color: transparent;
    background: #f9f9f9;
    flex: 1;
}

.p2-btn-remove-phase {
    background: none;
    border: none;
    color: #c00;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 5px;
}

.p2-activities-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 32px;
}

.p2-btn-add-activity {
    margin: 10px 0 0 32px;
    background: none;
    border: 1px dashed #ddd;
    color: #999;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.65rem;
    cursor: pointer;
    font-weight: 600;
    transition: border-color 0.2s, color 0.2s;
}

.p2-btn-add-activity:hover {
    border-color: var(--accent-gold);
    color: var(--primary-midnight);
}

.p2-activity-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.p2-activity-title {
    flex: 3;
    font-size: 0.75rem;
    margin: 0;
    padding: 8px;
}

.p2-activity-dur-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 5px;
}

.p2-activity-duration {
    margin: 0;
    font-size: 0.75rem;
    text-align: center;
    padding: 8px;
}

.p2-activity-hrs {
    font-size: 0.6rem;
    color: #999;
    font-weight: 700;
}

.p2-btn-remove-activity {
    background: none;
    border: none;
    color: #ccc;
    cursor: pointer;
    font-size: 0.7rem;
    padding: 5px;
}

.p2-acceso-source {
    font-size: 0.9rem;
}

.p2-app-source {
    font-size: 0.6rem;
    opacity: 0.6;
}

.p2-status-icon {
    cursor: help;
    font-size: 1.1rem;
    font-weight: 700;
}

.p2-log-item {
    border-left: 3px solid var(--accent-gold);
    padding-left: 20px;
    margin-bottom: 25px;
    position: relative;
    animation: fadeIn 0.4s ease-out;
}

.p2-log-dot {
    width: 12px;
    height: 12px;
    background: var(--accent-gold);
    border-radius: 50%;
    position: absolute;
    left: -8px;
    top: 4px;
    box-shadow: 0 0 10px rgba(149, 124, 61, 0.4);
}

.p2-log-date {
    font-size: 0.65rem;
    color: #999;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.p2-log-event {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--primary-midnight);
    text-transform: uppercase;
    margin: 4px 0;
}

.p2-log-desc {
    font-size: 0.85rem;
    color: #444;
    line-height: 1.5;
    font-weight: 400;
}

.p2-log-empty {
    text-align: center;
    padding: 40px;
    color: #999;
    font-style: italic;
}

.p2-sync-msg {
    font-size: 0.7rem;
    color: var(--accent-gold);
}

.p2-sync-msg--err {
    color: red;
    font-size: 0.7rem;
}

.p2-placeholder-muted {
    font-size: 0.75rem;
    color: #999;
}

.p2-placeholder-muted--sm {
    font-size: 0.7rem;
    color: #999;
}

.p2-tr-intervention {
    border-bottom: 1px solid #f4f4f4;
    transition: background 0.2s;
}

.p2-tr-intervention:hover {
    background: #fafafa;
}

.p2-td-req {
    padding: 15px;
}

.p2-td-req-actions {
    padding: 15px;
    text-align: right;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.p2-req-name {
    font-weight: 600;
    color: var(--primary-midnight);
}

.p2-req-org {
    font-size: 0.7rem;
    color: var(--accent-gold);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.p2-req-email {
    font-size: 0.75rem;
    color: #999;
}

.p2-req-servicio {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-gold);
    text-transform: uppercase;
}

.p2-req-fecha {
    font-size: 0.75rem;
    color: #666;
}

.p2-pill-status--ok {
    background: #e6fffa;
    color: #065f46;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    border: 1px solid #34d399;
}

.p2-pill-status--scheduled {
    background: #e0f2fe;
    color: #0369a1;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    border: 1px solid #7dd3fc;
}

.p2-pill-status--pending {
    background: #fff8e6;
    color: #856404;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
}

.p2-pill-status--error {
    background: #fef2f2;
    color: #b91c1c;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    border: 1px solid #fecaca;
}

.p2-pill-status--muted {
    background: #f3f4f6;
    color: #4b5563;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    border: 1px solid #d1d5db;
}

.p2-btn-reply {
    background: #f0f4f8;
    border: none;
    cursor: pointer;
    color: var(--primary-midnight);
    font-size: 1rem;
    padding: 5px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    border: 1px solid rgba(15, 52, 96, 0.1);
}

.p2-btn-reply-label {
    font-size: 0.6rem;
    margin-left: 6px;
    font-weight: 800;
}

.p2-btn-danger-plain {
    background: none;
    border: none;
    cursor: pointer;
    color: #dc2626;
    font-size: 1.1rem;
}

.p2-intervention-empty {
    padding: 30px;
    text-align: center;
    color: #999;
}

/* ==========================================================================
   Admin CRM — Kanban (pipeline tipo Trello)
   ========================================================================== */

.p2-crm-board {
    display: grid;
    grid-template-columns: repeat(4, minmax(240px, 1fr));
    gap: 14px;
    align-items: start;
}

.p2-crm-col {
    background: rgba(15, 52, 96, 0.03);
    border: 1px solid rgba(15, 52, 96, 0.08);
    border-radius: 16px;
    overflow: hidden;
    min-height: 220px;
}

.p2-crm-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 14px 12px;
    background: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(15, 52, 96, 0.08);
}

.p2-crm-col-title {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary-midnight);
    line-height: 1.2;
}

.p2-crm-col-count {
    font-size: 0.7rem;
    font-weight: 900;
    color: rgba(15, 52, 96, 0.75);
    background: rgba(15, 52, 96, 0.06);
    border: 1px solid rgba(15, 52, 96, 0.1);
    padding: 4px 10px;
    border-radius: 999px;
}

.p2-crm-col-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 180px;
    /* Estabilidad UX: el board no debe crecer indefinidamente (evita alturas 5000px). */
    max-height: min(62vh, 560px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.p2-crm-col-body::-webkit-scrollbar {
    width: 10px;
}
.p2-crm-col-body::-webkit-scrollbar-thumb {
    background: rgba(15, 52, 96, 0.18);
    border-radius: 999px;
    border: 3px solid rgba(255, 255, 255, 0.65);
}
.p2-crm-col-body::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 52, 96, 0.28);
}

.p2-crm-col-body[data-drop-active="true"] {
    background: rgba(149, 124, 61, 0.08);
    outline: 2px dashed rgba(149, 124, 61, 0.55);
    outline-offset: -6px;
}

.p2-crm-card {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(15, 52, 96, 0.1);
    border-radius: 14px;
    padding: 12px 12px 10px;
    box-shadow: 0 4px 14px rgba(15, 52, 96, 0.06);
    cursor: grab;
    -webkit-tap-highlight-color: transparent;
}

.p2-crm-card--compact {
    padding: 10px 10px 8px;
}

.p2-crm-card--compact .p2-crm-card-head {
    margin-bottom: 6px;
}

.p2-crm-card--compact .p2-crm-card-name {
    font-size: 0.8rem;
}

.p2-crm-card--compact .p2-crm-card-service {
    margin-top: 4px;
    font-size: 0.65rem;
}

.p2-crm-card-preview {
    display: grid;
    gap: 4px;
    margin: 6px 0 8px;
    padding: 6px 0 2px;
    border-top: 1px solid rgba(15, 52, 96, 0.06);
}

.p2-crm-preview-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 0.68rem;
    color: rgba(15, 52, 96, 0.78);
}

.p2-crm-preview-row .p2-crm-meta-label {
    flex: 0 1 auto;
    max-width: 48%;
    line-height: 1.2;
}

.p2-crm-preview-val {
    font-weight: 800;
    text-align: right;
    line-height: 1.25;
    color: rgba(15, 52, 96, 0.88);
    word-break: break-word;
}

.p2-crm-card--compact .p2-crm-card-actions-leads {
    margin-top: 6px;
}

.p2-crm-card:active {
    cursor: grabbing;
}

.p2-crm-card[data-dragging="true"] {
    opacity: 0.55;
    transform: rotate(0.4deg);
}

.p2-crm-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.p2-crm-card-name {
    font-weight: 800;
    color: var(--primary-midnight);
    font-size: 0.86rem;
    margin: 0;
    line-height: 1.2;
}

.p2-crm-card-service {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--accent-gold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 6px;
}

.p2-crm-card-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 10px;
}

.p2-crm-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 0.7rem;
    color: rgba(15, 52, 96, 0.72);
}

.p2-crm-meta-label {
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.58rem;
    color: rgba(15, 52, 96, 0.5);
}

.p2-crm-assignee {
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(15, 52, 96, 0.12);
    padding: 10px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
    background: #fff;
    color: rgba(15, 52, 96, 0.85);
}

.p2-crm-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
}

.p2-crm-action-btn {
    background: #f0f4f8;
    border: 1px solid rgba(15, 52, 96, 0.12);
    cursor: pointer;
    color: var(--primary-midnight);
    font-size: 0.8rem;
    padding: 8px 10px;
    border-radius: 10px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.p2-crm-action-btn--danger {
    background: #fff0f0;
    border-color: rgba(220, 38, 38, 0.18);
    color: #dc2626;
}

.p2-crm-card-actions-leads {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.p2-crm-action-btn--gold {
    background: rgba(149, 124, 61, 0.08);
    border-color: rgba(149, 124, 61, 0.35);
    color: var(--primary-midnight);
}

.p2-crm-action-btn--gold:hover {
    background: rgba(149, 124, 61, 0.14);
}

.p2-crm-action-btn--block {
    width: 100%;
    justify-content: center;
    text-align: center;
}

.p2-crm-acciones-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    padding: 0 5px;
    height: 1.15rem;
    margin-left: 6px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 900;
    background: rgba(15, 52, 96, 0.1);
    color: rgba(15, 52, 96, 0.85);
    vertical-align: middle;
}

/* Modal resumen CRM: ~2/3 historial (scroll) + ~1/3 alta de acción */
.p2-crm-acciones-modal {
    display: flex;
    flex-direction: column;
    max-height: min(88vh, 700px);
    min-height: min(72vh, 520px);
    width: 100%;
    box-sizing: border-box;
}

.p2-crm-acciones-modal > .p2-modal-head-row {
    flex-shrink: 0;
}

.p2-crm-acciones-modal > .p2-crm-historial-list {
    flex: 2 1 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 8px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 6px 8px 0;
}

.p2-crm-acciones-modal > .p2-crm-historial-add {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
}

.p2-crm-historial-item {
    border: 1px solid rgba(15, 52, 96, 0.1);
    border-radius: 12px;
    padding: 12px;
    background: rgba(15, 52, 96, 0.02);
}

.p2-crm-historial-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.p2-crm-historial-section-title {
    margin: 0;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(15, 52, 96, 0.55);
}

.p2-crm-historial-item--system {
    background: #fff;
}

.p2-crm-historial-item-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.p2-crm-historial-tipo {
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-gold);
}

.p2-crm-historial-fecha {
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(15, 52, 96, 0.75);
}

.p2-crm-historial-add {
    border-top: 1px solid rgba(15, 52, 96, 0.08);
    padding-top: 10px;
    margin-top: 8px;
}

.p2-crm-historial-add-title {
    margin: 0 0 6px;
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(15, 52, 96, 0.55);
}

.p2-crm-historial-add-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 8px;
}

.p2-crm-historial-add .p2-crm-historial-add-grid textarea.form-control,
.p2-crm-historial-add #crm-h-add-obs {
    min-height: 2.5rem;
    max-height: 4.25rem;
    resize: vertical;
    padding: 8px 10px;
    font-size: 0.78rem;
}

.p2-crm-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 800;
    color: rgba(15, 52, 96, 0.65);
}

.p2-crm-field--full {
    grid-column: 1 / -1;
}

.p2-crm-historial-add-btn {
    width: 100%;
    flex-shrink: 0;
    margin-top: auto;
}

.p2-crm-historial-obs {
    width: 100%;
    min-height: 56px;
    max-height: 120px;
    resize: vertical;
    border-radius: 10px;
    border: 1px solid rgba(15, 52, 96, 0.12);
    padding: 8px 10px;
    font-family: inherit;
    font-size: 0.78rem;
}

.p2-crm-historial-event-title {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--primary-midnight);
}

.p2-crm-historial-event-detail {
    margin: 5px 0 0;
    font-size: 0.78rem;
    color: rgba(15, 52, 96, 0.8);
}

.p2-crm-historial-event-meta {
    margin: 6px 0 0;
    font-size: 0.7rem;
    color: rgba(15, 52, 96, 0.52);
}

.p2-crm-historial-audit {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(15, 52, 96, 0.1);
}

.p2-crm-historial-audit-line {
    margin: 0;
    font-size: 0.68rem;
    color: rgba(15, 52, 96, 0.55);
}

.p2-crm-historial-audit-line + .p2-crm-historial-audit-line {
    margin-top: 4px;
}

.p2-crm-historial-save-row {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.p2-crm-estado-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-right: auto;
}

.p2-crm-estado-btn {
    border: 1px solid rgba(15, 52, 96, 0.14);
    background: #fff;
    color: rgba(15, 52, 96, 0.72);
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
    line-height: 1.1;
    -webkit-tap-highlight-color: transparent;
}

.p2-crm-estado-btn:hover {
    border-color: rgba(149, 124, 61, 0.45);
    color: var(--primary-midnight);
}

.p2-crm-estado-btn.is-active {
    background: rgba(149, 124, 61, 0.14);
    border-color: rgba(149, 124, 61, 0.5);
    color: var(--primary-midnight);
}

.p2-crm-estado-badge {
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.p2-crm-estado-badge--programado {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.22);
    color: #1d4ed8;
}

.p2-crm-estado-badge--realizado {
    background: rgba(22, 163, 74, 0.1);
    border-color: rgba(22, 163, 74, 0.22);
    color: #15803d;
}

.p2-crm-estado-badge--cancelado {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.2);
    color: #b91c1c;
}

.p2-crm-historial-item-head .p2-crm-historial-fecha {
    margin-left: auto;
}

.p2-crm-historial-save-row .p2-crm-action-btn {
    font-size: 0.68rem;
    padding: 6px 12px;
}

@media (max-width: 560px) {
    .p2-crm-historial-add-grid {
        grid-template-columns: 1fr;
    }

    .p2-crm-acciones-modal {
        min-height: min(85vh, 480px);
        max-height: 90vh;
    }
}

.p2-crm-empty {
    padding: 20px 12px;
    text-align: center;
    color: rgba(15, 52, 96, 0.45);
    font-size: 0.75rem;
    font-style: italic;
}

@media (max-width: 1200px) {
    .p2-crm-board {
        grid-template-columns: repeat(2, minmax(240px, 1fr));
    }
}

@media (max-width: 640px) {
    .p2-crm-board {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Academia (Fase 2): vistas, lobby, guía, etapa de aprendizaje — tokens :root
   Visibilidad inicial: JS sigue usando element.style.display al navegar.
   ========================================================================== */

#view-categories {
    display: block;
    animation: fadeIn 0.5s ease-out;
}

#view-lobby,
#view-session-selector,
#view-intro-guide,
#view-learning-stage {
    display: none;
}

#btn-global-back {
    display: none;
    margin-right: 15px;
}

#header-logo-brand {
    display: flex;
    align-items: center;
    gap: 8px;
}

.p2-academia-brand-dreams {
    color: var(--primary-midnight);
    font-weight: 800;
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.p2-academia-brand-platform {
    color: var(--accent-gold);
    font-weight: 400;
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

#header-aura-title.p2-academia-aura-title {
    color: var(--primary-midnight);
    font-weight: 700;
    font-size: 0.65rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
    opacity: 0.8;
}

.p2-academia-section-header--lobby {
    margin-bottom: 40px;
    text-align: center;
}

.p2-academia-section-header--session {
    margin-bottom: 50px;
    text-align: center;
}

.p2-academia-link-back {
    background: none;
    border: none;
    color: var(--accent-gold);
    cursor: pointer;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
}

.p2-academia-link-back--lobby {
    margin: 0 auto 20px;
}

.p2-academia-link-back--session-footer {
    margin: 0 auto;
}

.p2-academia-title-upper {
    text-transform: uppercase;
}

.p2-academia-course-lobby {
    display: grid;
    /* Paridad con .bento-consultoria--odoo: teselas compactas; un poco más de ancho mínimo por el CTA */
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px 14px;
    align-items: stretch;
    justify-content: stretch;
    margin-top: 8px;
    overflow-x: visible;
    overflow-y: visible;
}

/* Catálogo Academia: misma piel visual que .p2-consult-odoo-tile + fila título + acción */
.p2-academia-course-catalog-card {
    --consult-tile-accent: var(--primary-midnight);
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px 14px;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 12px 14px;
    text-align: left;
    font-family: 'Montserrat', system-ui, sans-serif;
    background: #fff;
    border: 1px solid rgba(15, 52, 96, 0.12);
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(15, 52, 96, 0.05);
    border-left: 4px solid var(--consult-tile-accent);
    color: var(--primary-midnight);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

.p2-academia-course-catalog-card:hover {
    border-color: rgba(15, 52, 96, 0.22);
    box-shadow: 0 2px 8px rgba(15, 52, 96, 0.08);
    transform: translateY(-1px);
}

.p2-academia-course-catalog-card:has(.p2-academia-spec-popover.is-open) {
    z-index: 40;
}

.p2-academia-course-catalog-card--soon {
    opacity: 0.65;
}

.p2-academia-course-catalog-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

/* Ficha Firebase (antes roadmap / popover): se abre con “Ver especificaciones” */
.p2-academia-specs-trigger {
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--accent-gold);
    cursor: pointer;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.p2-academia-specs-trigger:hover {
    color: var(--primary-midnight);
}

/* Panel de especificaciones: hijo directo del article → ancho útil (no limitado a la columna del título) */
.p2-academia-spec-popover {
    display: none;
    box-sizing: border-box;
    margin: 0;
    padding: 14px 18px 16px;
    background: #fff;
    border: 1px solid rgba(15, 52, 96, 0.12);
    border-radius: 8px;
    border-left: 4px solid var(--consult-tile-accent, var(--primary-midnight));
    box-shadow: 0 16px 44px rgba(15, 52, 96, 0.12);
    z-index: 50;
    text-align: left;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.p2-academia-course-catalog-card > .p2-academia-spec-popover {
    position: absolute;
    /* Anclado al tile (no centrado): evita que en la 1.ª columna quede mitad del panel fuera del viewport */
    left: 10px;
    right: auto;
    transform: none;
    top: calc(100% + 10px);
    width: min(560px, calc(100vw - 32px));
    max-width: none;
    max-height: min(38vh, 268px);
}

.p2-academia-spec-popover.is-open {
    display: block;
}

.p2-academia-spec-block + .p2-academia-spec-block {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(15, 52, 96, 0.08);
}

.p2-academia-spec-h {
    margin: 0 0 5px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(15, 52, 96, 0.5);
}

.p2-academia-spec-p {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: rgba(15, 52, 96, 0.92);
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.p2-academia-spec-body .p2-academia-spec-p + .p2-academia-spec-p {
    margin-top: 5px;
}

.p2-academia-spec-body--pre {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: rgba(15, 52, 96, 0.92);
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.p2-academia-spec-muted {
    color: rgba(15, 52, 96, 0.5);
    font-style: italic;
    font-size: 0.74rem !important;
}

.p2-academia-course-catalog-card__meta {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(15, 52, 96, 0.55);
    line-height: 1.2;
}

.p2-academia-course-catalog-card__price {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--accent-gold);
    margin-top: 2px;
}

.p2-academia-course-catalog-card__cta.btn-primary {
    flex-shrink: 0;
    width: auto;
    min-width: 0;
    max-width: 46%;
    font-size: 0.62rem;
    padding: 9px 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.15;
    border-radius: 4px;
    white-space: normal;
    text-align: center;
}

.p2-academia-course-catalog-card__cta.btn-primary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

@media (max-width: 420px) {
    .p2-academia-course-catalog-card {
        flex-direction: column;
        align-items: stretch;
    }

    .p2-academia-course-catalog-card__cta.btn-primary {
        max-width: none;
        width: 100%;
    }

    .p2-academia-course-catalog-card > .p2-academia-spec-popover {
        left: 6px;
        width: calc(100vw - 20px);
        max-width: none;
        max-height: min(46vh, 300px);
    }
}

.p2-academia-card-eyebrow {
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.p2-academia-card-eyebrow--elearning {
    color: var(--secondary-color);
}

.p2-academia-card-eyebrow--live {
    color: var(--primary-color);
}

.p2-academia-btn-compact {
    font-size: 0.8rem;
}

.p2-academia-card--soon {
    opacity: 0.6;
    border: 1px dashed rgba(15, 52, 96, 0.22);
}

.p2-academia-card-eyebrow--muted {
    color: rgba(15, 52, 96, 0.45);
}

.p2-academia-card-title--muted {
    color: rgba(15, 52, 96, 0.45);
}

.p2-academia-soon-btn:disabled {
    background: rgba(15, 52, 96, 0.08) !important;
    color: rgba(15, 52, 96, 0.42) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

#view-session-selector.p2-academia-session-wrap {
    max-width: 1000px;
    margin: 40px auto;
    padding: 0 16px;
}

@media (min-width: 640px) {
    #view-session-selector.p2-academia-session-wrap {
        padding: 0 20px;
    }
}

.p2-academia-session-title {
    letter-spacing: -1px;
}

.p2-academia-session-lead {
    max-width: 600px;
    margin: 15px auto 0;
}

#session-list.p2-academia-session-grid {
    display: grid;
    gap: 20px;
    /* Estrecho: una columna (equivalente a cuando 3 sesiones se apilan en móvil). */
    grid-template-columns: 1fr;
}

@media (min-width: 900px) {
    #session-list.p2-academia-session-grid {
        /* Siempre 3 carriles del mismo ancho: 1 sesión no ocupa todo el lobby; 4+ sesiones siguen filas de 3. */
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Una sola sesión: misma anchura que un carril, centrada en el lobby. */
    #session-list.p2-academia-session-grid:has(> .card:only-child) > .card {
        grid-column: 2;
    }
}

#session-list.p2-academia-session-grid > .card {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

.p2-academia-session-footer {
    text-align: center;
    margin-top: 40px;
}

#view-intro-guide.p2-academia-intro-view {
    max-width: 1300px;
    margin: 30px auto;
    padding: 0 16px;
    animation: fadeIn 0.8s ease-out;
}

@media (min-width: 640px) {
    #view-intro-guide.p2-academia-intro-view {
        padding: 0 20px;
    }
}

.intro-guide-shell.p2-academia-intro-shell {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-radius: 40px;
    padding: 36px 20px 40px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 30px 60px rgba(15, 52, 96, 0.1);
    text-align: center;
}

@media (min-width: 640px) {
    .intro-guide-shell.p2-academia-intro-shell {
        padding: 48px 32px 48px;
    }
}

@media (min-width: 900px) {
    .intro-guide-shell.p2-academia-intro-shell {
        padding: 60px 40px;
    }
}

.intro-guide-header.p2-academia-intro-header {
    margin-bottom: 36px;
}

.p2-academia-intro-kicker {
    color: var(--accent-gold);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    display: block;
    margin-bottom: 10px;
    font-size: 0.68rem;
}

#guide-session-eyebrow.p2-academia-guide-eyebrow {
    margin: 0 0 12px 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary-midnight);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.intro-guide-title.p2-academia-intro-h2 {
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--primary-midnight);
    margin: 0 0 20px 0;
    font-size: clamp(1.15rem, 2.5vw, 1.45rem);
}

.intro-guide-tools-lead.p2-academia-intro-tools-lead {
    margin: 0 auto 24px;
    font-size: 0.88rem;
    color: rgba(15, 52, 96, 0.62);
    max-width: 640px;
    line-height: 1.55;
}

.p2-academia-guide-cards-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 20px;
    margin: 0 auto 50px;
    width: 100%;
    max-width: 900px;
}

.card-guide.p2-academia-guide-card {
    background: #fff;
    padding: 24px 16px;
    border-radius: 24px;
    border: 1px solid rgba(15, 52, 96, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: none;
}

@media (min-width: 480px) {
    .card-guide.p2-academia-guide-card {
        padding: 30px 20px;
    }
}

@media (max-width: 900px) {
    .p2-academia-guide-cards-row {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
        max-width: 680px;
    }
}

@media (max-width: 520px) {
    .p2-academia-guide-cards-row {
        grid-template-columns: 1fr;
        max-width: 360px;
    }
}

.p2-academia-guide-card-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.guide-card-title.p2-academia-guide-card-title {
    font-weight: 700;
    color: var(--primary-midnight);
    margin-bottom: 10px;
}

.p2-academia-guide-card-desc {
    margin: 0;
    line-height: 1.5;
    font-size: 0.85rem;
    color: rgba(15, 52, 96, 0.62);
}

#btn-guide-continue.p2-academia-guide-cta {
    width: auto;
    max-width: 400px;
}

#view-learning-stage.p2-academia-learning-view {
    padding-top: 5px;
}

.p2-academia-learning-row {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
    max-width: 1300px;
    margin: 0 auto;
    min-height: 0;
}

@media (min-width: 900px) {
    .p2-academia-learning-row {
        flex-direction: row;
        align-items: flex-start;
        gap: 20px;
        height: 85vh;
        min-height: 600px;
    }
}

#learning-content-area.p2-academia-learning-main {
    flex: 1;
    height: auto;
    min-height: 50vh;
    position: relative;
}

@media (min-width: 900px) {
    #learning-content-area.p2-academia-learning-main {
        height: 100%;
    }
}

#view-presentation.p2-academia-view-fill,
#view-workbook.p2-academia-view-fill {
    display: none;
    height: 100%;
    width: 100%;
}

.presentation-wrapper.p2-academia-presentation-frame {
    height: 100%;
    width: 100%;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(15, 52, 96, 0.08);
}

#stage-reveal.p2-academia-reveal-fill {
    width: 100%;
    height: 100%;
}

#video-tutorial {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 10;
    display: flex;
    flex-direction: column;
}

.p2-academia-video-toolbar {
    background: var(--brand-blue);
    padding: 15px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
}

.p2-academia-video-toolbar-label {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.p2-academia-video-close {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-weight: 900;
}

#tutorial-media-container.p2-academia-video-media {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

#tutorial-video.p2-academia-tutorial-video {
    display: block;
    background: #000;
    object-fit: contain;
}

#tutorial-youtube.p2-academia-tutorial-youtube {
    display: none;
    background: #000;
}

/* Documento teórico (HTML sesión): mismo contenedor absoluto que el video sobre Reveal */
#theoretical-doc-stage.p2-academia-theory-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f5f7fb;
    z-index: 11;
    display: flex;
    flex-direction: column;
}

.p2-academia-theory-media {
    flex: 1;
    display: flex;
    min-height: 0;
    background: #fff;
}

.p2-academia-theory-iframe {
    flex: 1;
    width: 100%;
    min-height: 0;
    border: 0;
    background: #fff;
}

.p2-academia-workbook-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    background: #fff;
    padding: 12px 16px;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(15, 52, 96, 0.08);
}

@media (min-width: 640px) {
    .p2-academia-workbook-toolbar {
        padding: 15px 25px;
    }
}

.p2-academia-workbook-toolbar-left {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

#btn-back-to-lobby-workbook.p2-academia-workbook-back {
    background: var(--brand-blue);
    border: none;
    color: #fff;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.7rem;
    padding: 8px 15px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#status-message.p2-academia-workbook-status {
    font-size: 0.65rem;
    color: rgba(15, 52, 96, 0.45);
    font-weight: 300;
}

.btn-contact-trigger.p2-academia-workbook-help {
    background: none;
    border: 1.5px solid var(--brand-orange);
    color: var(--brand-blue);
    padding: 8px 18px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

#workbook-iframe.p2-academia-workbook-iframe {
    width: 100%;
    height: calc(100% - 75px);
    border: none;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

.purpose-bubble.p2-academia-feedback-bubble {
    width: min(92vw, 620px);
    padding: 28px;
}

.p2-academia-feedback-head {
    margin-bottom: 16px;
}

.p2-academia-feedback-summary {
    background: rgba(15, 52, 96, 0.04);
    border: 1px solid rgba(15, 52, 96, 0.08);
    border-radius: 18px;
    padding: 16px 18px;
    margin-bottom: 18px;
}

.p2-academia-feedback-summary-line {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--primary-midnight);
}

.p2-academia-feedback-summary-line + .p2-academia-feedback-summary-line {
    margin-top: 8px;
}

.p2-academia-feedback-prompt {
    margin: 0 0 14px;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--primary-midnight);
}

.p2-academia-feedback-scale {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.p2-academia-feedback-score {
    border: 1px solid rgba(15, 52, 96, 0.12);
    background: #fff;
    border-radius: 16px;
    padding: 14px 8px;
    color: var(--primary-midnight);
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.1;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.p2-academia-feedback-score span {
    display: block;
    margin-top: 6px;
    font-size: 0.62rem;
    font-weight: 600;
    color: rgba(15, 52, 96, 0.68);
}

.p2-academia-feedback-score:hover,
.p2-academia-feedback-score:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(149, 124, 61, 0.58);
    box-shadow: 0 14px 28px rgba(15, 52, 96, 0.08);
    outline: none;
}

.p2-academia-feedback-status {
    min-height: 1.1rem;
    margin-top: 14px;
}

.p2-academia-feedback-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

#btn-session-feedback-skip.p2-academia-feedback-skip {
    min-width: 180px;
}

@media (max-width: 640px) {
    .p2-academia-feedback-scale {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

.bubble-dashboard.p2-academia-bubble-rail {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 16px 12px;
    border-radius: 32px;
    box-shadow: 0 15px 45px rgba(15, 52, 96, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.5);
    position: relative;
    top: 0;
    z-index: 100;
}

@media (min-width: 900px) {
    .bubble-dashboard.p2-academia-bubble-rail {
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 15px;
        padding: 25px 14px;
        border-radius: 50px;
        position: sticky;
        top: 10px;
        width: auto;
    }
}

#btn-pres-back-to-lobby.p2-academia-bubble-back {
    background: var(--primary-midnight);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 25px rgba(15, 52, 96, 0.2);
    transition: all 0.3s ease;
}

.p2-academia-bubble-sep {
    height: 1px;
    width: 35px;
    background: rgba(15, 52, 96, 0.1);
    margin: 5px auto;
}

@media (max-width: 899px) {
    .p2-academia-bubble-sep {
        display: none;
    }
}

.btn-bubble-toggle.p2-academia-bubble-white {
    background: #fff;
    border: none;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    font-size: 1.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#btn-toggle-zoom.p2-academia-bubble-zoom {
    display: none;
    background: #2d8cff;
    border: none;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    font-size: 1.6rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 25px rgba(45, 140, 255, 0.4);
    transition: all 0.3s ease;
    color: #fff;
}

#podcast-player.p2-academia-podcast-panel {
    position: fixed;
    bottom: 16px;
    right: 16px;
    left: 16px;
    background: #fff;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    width: auto;
    max-width: 340px;
    margin: 0 auto;
    border: 1px solid rgba(15, 52, 96, 0.1);
    box-sizing: border-box;
}

@media (min-width: 480px) {
    #podcast-player.p2-academia-podcast-panel {
        left: auto;
        width: 300px;
        margin: 0;
        right: 20px;
        bottom: 20px;
    }
}

.p2-academia-podcast-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.p2-academia-podcast-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--primary-color);
    text-transform: uppercase;
}

#btn-close-podcast.p2-academia-podcast-close {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: rgba(15, 52, 96, 0.4);
}

#podcast-selector.p2-academia-podcast-select {
    width: 100%;
    margin-bottom: 12px;
    padding: 6px;
    border-radius: 6px;
    border: 1px solid rgba(15, 52, 96, 0.1);
    font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
    font-size: 0.7rem;
    color: rgba(15, 52, 96, 0.65);
}

#audio-element.p2-academia-podcast-audio {
    width: 100%;
    height: 35px;
}

#universal-purpose-title.p2-academia-purpose-title {
    color: var(--primary-color);
    margin-top: 0;
    line-height: 1.2;
}

#universal-purpose-content.p2-academia-purpose-body {
    margin-top: 15px;
    color: rgba(15, 52, 96, 0.65);
    line-height: 1.6;
}

.purpose-bubble.p2-academia-contact-bubble {
    max-width: 500px !important;
}

/* Mis cursos (modal): no reutilizar .p2-breakdown-list ni teselas del dashboard (.p2-dash-odoo-tile + .node-*),
   para evitar max-height fijo, tipografías de “eje” y solapes al crecer el catálogo. */
#my-courses-overlay .purpose-bubble.p2-academia-contact-bubble {
    max-width: min(500px, 100%) !important;
    max-height: min(calc(100vh - 40px), 640px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}

#my-courses-overlay .p2-academia-contact-head {
    flex-shrink: 0;
    margin-bottom: 16px;
}

#my-courses-list.p2-academia-my-courses-list {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 6px;
    margin-bottom: 0;
    -webkit-overflow-scrolling: touch;
}

.p2-academia-my-course-card {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid rgba(15, 52, 96, 0.12);
    border-radius: 12px;
    border-left: 4px solid var(--accent-gold);
    background: #fff;
    text-align: left;
    font-family: 'Montserrat', system-ui, sans-serif;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    flex: 0 0 auto;
    box-shadow: 0 1px 2px rgba(15, 52, 96, 0.05);
    color: var(--primary-midnight);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}

.p2-academia-my-course-card:hover {
    border-color: rgba(15, 52, 96, 0.22);
    box-shadow: 0 2px 8px rgba(15, 52, 96, 0.08);
    transform: translateY(-1px);
}

.p2-academia-my-course-card:focus {
    outline: 2px solid var(--accent-gold);
    outline-offset: 2px;
}

.p2-academia-my-course-card:focus:not(:focus-visible) {
    outline: none;
}

.p2-academia-my-course-card__title {
    font-size: clamp(0.68rem, 0.35vw + 0.62rem, 0.78rem);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-gold);
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-wrap: break-word;
}

.p2-academia-my-course-card__meta {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(15, 52, 96, 0.78);
    line-height: 1.45;
    overflow-wrap: anywhere;
    word-wrap: break-word;
}

.p2-academia-my-course-card__cta {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(15, 52, 96, 0.5);
    margin-top: 2px;
}

.p2-academia-contact-head {
    margin-bottom: 25px;
}

.p2-academia-contact-title {
    color: var(--primary-midnight);
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.p2-academia-contact-sub {
    font-weight: 300;
    font-size: 0.9rem;
    color: rgba(15, 52, 96, 0.55);
    line-height: 1.4;
}

#contact-form.p2-academia-contact-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#contact-interest.p2-academia-contact-select {
    width: 100%;
    padding: 16px 20px;
    border-radius: 12px;
    border: 1.5px solid rgba(15, 52, 96, 0.12);
    font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
}

#contact-message.p2-academia-contact-textarea {
    min-height: 120px;
    resize: none;
}

#btn-send-contact.p2-academia-contact-submit {
    margin-top: 10px;
}

#contact-status.p2-academia-contact-status {
    font-size: 0.75rem;
    text-align: center;
    margin-top: 10px;
    font-weight: 600;
    min-height: 20px;
}

/* ==========================================================================
   Consultoría (Fase 2): intro, tarjetas estáticas, contenedor grid, modal
   ========================================================================== */

/* Catálogo consultoría: cuadrícula compacta estilo Odoo (solo nombre en tesela; detalle en modal). */
.bento-consultoria--odoo {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 12px 14px;
    margin-top: 28px;
    align-items: stretch;
}

.p2-consult-odoo-tile {
    --consult-tile-accent: var(--primary-midnight);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 12px 14px;
    text-align: left;
    font-family: 'Montserrat', system-ui, sans-serif;
    background: #fff;
    border: 1px solid rgba(15, 52, 96, 0.12);
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(15, 52, 96, 0.05);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
    border-left: 4px solid var(--consult-tile-accent);
    color: var(--primary-midnight);
}

.p2-consult-odoo-tile:hover {
    border-color: rgba(15, 52, 96, 0.22);
    box-shadow: 0 2px 8px rgba(15, 52, 96, 0.08);
    transform: translateY(-1px);
}

.p2-consult-odoo-tile:focus {
    outline: 2px solid var(--accent-gold);
    outline-offset: 2px;
}

.p2-consult-odoo-tile:focus:not(:focus-visible) {
    outline: none;
}

.p2-consult-odoo-tile__label {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.25;
    color: rgba(15, 52, 96, 0.92);
    letter-spacing: 0.01em;
}

/* Tooltip bubble (paridad con navbar data-nav-tip) */
.p2-consult-odoo-tile[data-consult-tip] {
    position: relative;
}

.p2-consult-odoo-tile[data-consult-tip]::after {
    content: attr(data-consult-tip);
    position: absolute;
    left: 50%;
    top: calc(100% + 8px);
    transform: translateX(-50%);
    width: max-content;
    max-width: 190px;
    height: 24px;
    padding: 0 10px;
    background: rgba(15, 52, 96, 0.96);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    text-align: center;
    line-height: 1;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(15, 52, 96, 0.28);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 10002;
    transition: opacity 0.14s ease, visibility 0.14s ease, transform 0.14s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

.p2-consult-odoo-tile[data-consult-tip]:hover::after,
.p2-consult-odoo-tile[data-consult-tip]:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-2px);
}

/* ==========================================================================
   Dashboard — Teselas tipo Consultoría (Odoo tile)
   Replica: estilo, colores, reglas y tooltip de .p2-consult-odoo-tile
   ========================================================================== */

.p2-dash-odoo-tile {
    --dash-tile-accent: var(--accent-gold);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 12px 14px;
    text-align: left;
    font-family: 'Montserrat', system-ui, sans-serif;
    background: #fff;
    border: 1px solid rgba(15, 52, 96, 0.12);
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(15, 52, 96, 0.05);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease, background-color 0.15s ease;
    border-left: 4px solid var(--dash-tile-accent);
    color: var(--primary-midnight);
    -webkit-tap-highlight-color: transparent;
}

/* Permite usarlo tanto en <button> como en <div role="button"> */
.p2-dash-odoo-tile:focus {
    outline: 2px solid var(--accent-gold);
    outline-offset: 2px;
}
.p2-dash-odoo-tile:focus:not(:focus-visible) {
    outline: none;
}

.p2-dash-odoo-tile:hover {
    border-color: rgba(15, 52, 96, 0.22);
    box-shadow: 0 2px 8px rgba(15, 52, 96, 0.08);
    transform: translateY(-1px);
}

/* Tooltip bubble (paridad con Consultoría: data-consult-tip) */
.p2-dash-odoo-tile[data-dash-tip] {
    position: relative;
}

.p2-dash-odoo-tile[data-dash-tip]::after {
    content: attr(data-dash-tip);
    position: absolute;
    left: 50%;
    top: calc(100% + 8px);
    transform: translateX(-50%);
    width: max-content;
    max-width: 220px;
    height: 24px;
    padding: 0 10px;
    background: rgba(15, 52, 96, 0.96);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    text-align: center;
    line-height: 1;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(15, 52, 96, 0.28);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 10002;
    transition: opacity 0.14s ease, visibility 0.14s ease, transform 0.14s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

.p2-dash-odoo-tile[data-dash-tip]:hover::after,
.p2-dash-odoo-tile[data-dash-tip]:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-2px);
}

/* Centro de Resultados Estratégicos: usa exactamente las dimensiones base del tile */
.dreams-axis-hub .axis-node.p2-dash-odoo-tile {
    width: 100%;
    min-height: 52px;
    padding: 12px 14px;
    border-radius: 4px;
    gap: 12px;
    align-items: center;
}

.dreams-axis-hub .axis-node.p2-dash-odoo-tile .node-icon {
    margin: 0;
    font-size: 1.25rem;
    filter: none;
}

.dreams-axis-hub .axis-node.p2-dash-odoo-tile .node-content {
    width: 100%;
    text-align: left;
}

.dreams-axis-hub .axis-node.p2-dash-odoo-tile .node-label {
    margin: 0 0 2px 0;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(15, 52, 96, 0.5);
}

.dreams-axis-hub .axis-node.p2-dash-odoo-tile .node-kpi {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--primary-midnight);
    letter-spacing: -0.01em;
}

.dreams-axis-hub .axis-node.p2-dash-odoo-tile .node-kpi-sub {
    margin-top: 6px;
    font-size: 0.6rem;
}

/* El hub ya no expande a 380px; ocultamos la gráfica en este layout “tile” */
.dreams-axis-hub .axis-node.p2-dash-odoo-tile .node-chart-container {
    display: none !important;
}

@media (max-width: 480px) {
    .bento-consultoria--odoo {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .p2-consult-odoo-tile {
        min-height: 48px;
        padding: 10px 12px;
    }

    .p2-consult-odoo-tile__label {
        font-size: 0.82rem;
    }
}

.bento-consultoria--odoo .p2-consult-fetch-error {
    grid-column: 1 / -1;
}

.p2-consult-page-intro h2 {
    color: var(--primary-midnight);
    font-weight: 700;
}

.p2-consult-page-intro p {
    color: rgba(15, 52, 96, 0.55);
}

.p2-consult-card-title {
    color: var(--primary-midnight);
}

.p2-consult-card-title--bold {
    font-weight: 700;
}

.p2-consult-card-desc {
    font-size: 0.9rem;
    color: rgba(15, 52, 96, 0.55);
}

.p2-consult-card-desc--tight {
    font-size: 0.85rem;
    margin-top: 15px;
    line-height: 1.7;
}

.p2-consult-callout {
    background: rgba(15, 52, 96, 0.03);
    border: 1px solid rgba(15, 52, 96, 0.05);
    border-radius: 12px;
    padding: 25px;
    text-align: center;
}

.p2-consult-callout--ia {
    margin-top: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.p2-consult-callout--bespoke {
    margin-top: 30px;
}

.p2-consult-callout-kicker {
    color: var(--accent-gold);
    font-weight: 700;
    font-size: 0.65rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.p2-consult-callout-kicker--heavy {
    font-weight: 800;
}

.p2-consult-callout-line {
    font-size: 0.85rem;
    color: var(--primary-midnight);
    font-weight: 600;
    margin: 10px 0 0 0;
}

.p2-consult-callout-line--sm {
    font-size: 0.8rem;
    margin-top: 10px;
    opacity: 0.8;
}

.p2-consult-callout-meta {
    font-size: 0.7rem;
    color: rgba(15, 52, 96, 0.4);
    margin-top: 8px;
    display: inline-block;
}

.p2-consult-btn-full {
    width: 100%;
    margin-top: 15px;
}

.p2-consult-btn-full--lg {
    width: 100%;
    margin-top: 25px;
    font-weight: 700;
    letter-spacing: 1px;
}

.p2-consult-gold-cap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-gold), transparent);
}

/* Consultoría: tarjetas legacy estáticas (si reaparecen en otro layout). */
.p2-consult-static-card {
    position: relative;
}

.purpose-bubble.p2-consult-modal-bubble {
    max-width: 600px !important;
    /* Homologación: todas las burbujas de servicios con el mismo tamaño (referencia: IA Expert). */
    height: 10cm !important;
    min-height: 10cm !important;
    max-height: 10cm !important;
    padding: 30px 30px !important; /* anula padding global (50px) de .purpose-bubble */
    overflow-y: auto !important;
}

/* En móvil/tablet, priorizamos altura de viewport para evitar recortes por UI del navegador. */
@media (max-width: 768px) {
    .purpose-bubble.p2-consult-modal-bubble {
        height: auto !important;
        min-height: unset !important;
        max-height: 85vh !important;
        padding: 26px 22px !important;
    }
}

.p2-consult-modal-footer {
    margin-top: 35px;
    padding-top: 20px;
    border-top: 1px solid rgba(15, 52, 96, 0.1);
    display: flex;
    justify-content: flex-end;
}

.p2-consult-modal-cta {
    width: auto;
    min-width: 200px;
}

/* ==========================================================================
   Agendar (Fase 2): cabecera de página
   ========================================================================== */

.p2-agendar-kicker {
    color: var(--accent-gold);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.p2-agendar-title {
    color: var(--primary-midnight);
    font-weight: 900;
    margin-top: 10px;
}

.p2-agendar-lead {
    color: rgba(15, 52, 96, 0.55);
    max-width: 600px;
    margin: 15px auto;
}

/* ==========================================================================
   Consultoría — tarjetas staff y modal (HTML generado en consultoria.js)
   ========================================================================== */

.p2-consult-catalog-empty {
    font-size: 0.8rem;
    color: rgba(15, 52, 96, 0.4);
    margin: 0;
}

.p2-consult-fetch-error {
    padding: 20px;
    border-radius: 12px;
    background: rgba(149, 124, 61, 0.05);
    border: 1px dashed var(--accent-gold);
    text-align: center;
}

.p2-consult-fetch-error p {
    font-size: 0.8rem;
    color: rgba(15, 52, 96, 0.55);
    margin: 0;
}

.p2-consult-card-phase {
    margin-top: 12px;
    padding-left: 12px;
    border-left: 2px solid var(--accent-gold);
}

.p2-consult-card-phase-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.p2-consult-card-phase-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--primary-midnight);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.p2-consult-service-card {
    position: relative;
    border-top: 4px solid var(--accent-gold);
}

.p2-consult-service-card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.p2-consult-service-card-head {
    margin-bottom: 20px;
}

.p2-consult-service-card-cat {
    color: var(--accent-gold);
    display: block;
    margin-bottom: 5px;
    font-size: var(--font-size-label);
    font-weight: 700;
}

.p2-consult-service-card-title {
    color: var(--primary-midnight);
    margin: 0;
    font-size: var(--font-size-h3);
    font-weight: 700;
}

.p2-consult-service-card-price-row {
    margin-top: 10px;
}

.p2-consult-service-card-price {
    font-size: var(--font-size-label);
    font-weight: 800;
    color: var(--primary-midnight);
}

.p2-consult-service-card-body {
    flex-grow: 1;
    margin-bottom: 25px;
}

.p2-consult-service-card-footer {
    margin-top: auto;
}

.p2-consult-service-card-cta {
    font-size: var(--font-size-button);
    padding: 16px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* Modal de detalle (cuerpo inyectado en #service-modal-body) */
.p2-consult-modal-hero-title {
    color: var(--primary-midnight);
    font-weight: 900;
    margin-bottom: 5px;
}

.p2-consult-modal-hero-tag {
    color: var(--accent-gold);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.p2-consult-modal-promise {
    margin: 30px 0;
    padding: 30px;
    background: linear-gradient(135deg, rgba(149, 124, 61, 0.08), rgba(15, 52, 96, 0.02));
    border-left: 5px solid var(--accent-gold);
    border-radius: 0 20px 20px 0;
    position: relative;
    overflow: hidden;
}

.p2-consult-modal-promise-deco {
    position: absolute;
    top: -10px;
    right: 10px;
    font-size: 6rem;
    color: var(--accent-gold);
    opacity: 0.1;
    font-family: Georgia, "Times New Roman", serif;
    pointer-events: none;
}

.p2-consult-modal-promise-kicker {
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--accent-gold);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: block;
    margin-bottom: 12px;
}

.p2-consult-modal-promise-text {
    font-size: 1.15rem;
    color: var(--primary-midnight);
    line-height: 1.5;
    font-style: italic;
    font-weight: 500;
    margin: 0;
    position: relative;
    z-index: 1;
}

.p2-consult-modal-desc {
    margin-bottom: 30px;
    line-height: 1.8;
    color: var(--text-color);
    font-size: 0.95rem;
    white-space: pre-wrap;
}

.p2-consult-modal-roadmap-box {
    background: rgba(15, 52, 96, 0.03);
    padding: 25px;
    border-radius: 16px;
    border: 1px solid rgba(15, 52, 96, 0.05);
}

.p2-consult-modal-roadmap-title {
    font-size: 0.65rem;
    color: var(--accent-gold);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.p2-consult-modal-roadmap-title-rule {
    width: 20px;
    height: 1px;
    background: var(--accent-gold);
    flex-shrink: 0;
}

.p2-consult-modal-roadmap-empty {
    font-size: 0.7rem;
    color: rgba(15, 52, 96, 0.4);
    font-style: italic;
    margin: 0;
}

.p2-consult-modal-phase {
    margin-bottom: 15px;
    padding-left: 15px;
    border-left: 3px solid var(--accent-gold);
}

.p2-consult-modal-phase-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--primary-midnight);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   Cierre global: shells públicos, admin, utilidades compartidas
   ========================================================================== */

/* Admin / overlays: estado inicial sin style="" en HTML */
.p2-modal-is-hidden {
    display: none !important;
}

.p2-hidden-display {
    display: none !important;
}

@keyframes p2-fade-in-soft {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ----- Login (index.html) ----- */
.form-group.p2-login-form-group--compact {
    margin-bottom: 5px;
}

.p2-login-forgot-row {
    text-align: right;
    margin-bottom: 20px;
}

.p2-login-forgot-link {
    color: var(--accent-gold);
    font-size: 0.72rem;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: opacity 0.3s ease, text-decoration 0.3s ease;
    opacity: 0.88;
}

.p2-login-forgot-link:hover {
    opacity: 1;
    text-decoration: underline;
}

.p2-login-quote-band {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(15, 52, 96, 0.08);
    text-align: center;
}

.p2-login-quote-text {
    color: rgba(26, 26, 26, 0.55);
    font-size: 0.82rem;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0.3px;
    line-height: 1.45;
    margin: 0;
}

/* ----- Apps (apps.html) ----- */
.p2-apps-nav-wordmark-dreams {
    color: var(--primary-midnight);
    font-weight: 800;
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.p2-apps-nav-wordmark-platform {
    color: var(--accent-gold);
    font-weight: 400;
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.p2-apps-nav-hero-title {
    color: var(--primary-midnight);
    font-weight: 700;
    font-size: 0.65rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
    opacity: 0.85;
}

.p2-apps-main-shell {
    padding-top: 75px;
}

.p2-apps-intro-panel {
    display: block;
    animation: p2-fade-in-soft 0.5s ease-out;
    margin-top: 10px;
}

.p2-loading-apps-centered {
    margin: 24px auto;
}

/* ==========================================================================
   Apps — Focus overlay (burbuja de detalle + contacto)
   Motivo: apps-logic.js usa purpose-overlay/purpose-bubble, pero los botones
   secundarios no tenían base de estilo (btn-secondary no existe en style.css).
   ========================================================================== */

#apps-focus-overlay.p2-apps-focus-overlay {
    z-index: 2500;
}

.purpose-bubble.p2-apps-focus-bubble {
    width: min(92vw, 640px);
    max-width: 640px;
    padding: 26px 24px !important;
    border-radius: 26px !important;
    border: 1px solid rgba(149, 124, 61, 0.35);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 40px 110px rgba(15, 52, 96, 0.22);
    text-align: left;
}

.close-bubble.p2-apps-focus-close {
    top: 14px !important;
    right: 14px !important;
}

.p2-apps-focus-head {
    padding-right: 46px; /* espacio para la X */
    margin-bottom: 14px;
}

.p2-apps-focus-title {
    margin: 0;
    color: var(--primary-midnight);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.15;
    font-size: clamp(1.1rem, 2.2vw, 1.55rem);
}

.p2-apps-focus-desc {
    margin: 8px 0 0 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: rgba(15, 52, 96, 0.62);
    text-wrap: balance;
}

.p2-apps-focus-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.p2-apps-focus-channels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.p2-apps-focus-channel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(15, 52, 96, 0.14);
    background: rgba(15, 52, 96, 0.035);
    color: rgba(15, 52, 96, 0.82);
    font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, background-color 0.12s ease;
}

.p2-apps-focus-channel:hover {
    border-color: rgba(149, 124, 61, 0.42);
    background: rgba(149, 124, 61, 0.07);
    box-shadow: 0 10px 24px rgba(15, 52, 96, 0.12);
    transform: translateY(-1px);
}

.p2-apps-focus-channel:focus {
    outline: 2px solid rgba(149, 124, 61, 0.55);
    outline-offset: 2px;
}

.p2-apps-focus-channel:focus:not(:focus-visible) {
    outline: none;
}

.btn-primary.p2-apps-focus-primary {
    margin-top: 4px;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

@media (max-width: 520px) {
    .purpose-bubble.p2-apps-focus-bubble {
        width: min(94vw, 520px);
        padding: 22px 18px !important;
        border-radius: 22px !important;
    }

    .p2-apps-focus-channels {
        grid-template-columns: 1fr;
    }

    .p2-apps-focus-channel {
        font-size: 0.75rem;
    }
}

/* ==========================================================================
   Apps — Override “Pillars” para replicar Consultoría Odoo tiles
   Motivo: apps.html carga platform-phase2.css después de bento.css y
   .academia-pillars-list li.academia-pillar-item pisa estilos de Apps.
   ========================================================================== */

.academia-pillars-list li.academia-pillar-item.apps-pillar-item {
    padding: 14px 16px 16px;
    background: #fff;
    border: 1px solid rgba(15, 52, 96, 0.12);
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(15, 52, 96, 0.05);
    border-left: 4px solid var(--apps-tile-accent, var(--accent-gold));
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease, filter 0.25s ease, opacity 0.25s ease;
}

.academia-pillars-list li.academia-pillar-item.apps-pillar-item:hover {
    border-color: rgba(15, 52, 96, 0.22);
    box-shadow: 0 2px 8px rgba(15, 52, 96, 0.08);
    transform: translateY(-1px);
}

.academia-pillars-list li.academia-pillar-item.apps-pillar-item:focus-within {
    outline: 2px solid var(--accent-gold);
    outline-offset: 2px;
}

.academia-pillars-list li.academia-pillar-item.apps-pillar-item[data-app-tip] {
    position: relative;
}

.academia-pillars-list li.academia-pillar-item.apps-pillar-item[data-app-tip]::after {
    content: attr(data-app-tip);
    position: absolute;
    left: 50%;
    top: calc(100% + 8px);
    transform: translateX(-50%);
    width: max-content;
    max-width: 220px;
    height: 24px;
    padding: 0 10px;
    background: rgba(15, 52, 96, 0.96);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    text-align: center;
    line-height: 1;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(15, 52, 96, 0.28);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 10002;
    transition: opacity 0.14s ease, visibility 0.14s ease, transform 0.14s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

.academia-pillars-list li.academia-pillar-item.apps-pillar-item[data-app-tip]:hover::after,
.academia-pillars-list li.academia-pillar-item.apps-pillar-item[data-app-tip]:focus-within::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-2px);
}

/* ----- Workbook contact overlay (Consolida sesión A u otras) ----- */
.p2-workbook-contact-bubble {
    max-width: 500px;
}

.p2-workbook-contact-head {
    margin-bottom: 25px;
}

.p2-workbook-contact-title {
    color: var(--primary-midnight);
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.p2-workbook-contact-lead {
    font-weight: 300;
    font-size: 0.9rem;
    color: rgba(26, 26, 26, 0.55);
    line-height: 1.4;
    margin: 0;
}

/* reset-password: logo antes de hidratar */
.logo-reset.logo-reset--pending {
    opacity: 0;
}

/* Consultoría staff: tarjetas dinámicas alineadas a Academia (.card-lobby-item + cristal bento). */

/* ----- Dashboard: campana de notificaciones + tarjetas de avisos ----- */
#header-aura-actions .nav-btn-platform#btn-nav-notifications {
    position: relative;
}

.p2-nav-notif-badge {
    display: none;
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #c62828;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95);
    pointer-events: none;
}

.p2-nav-notif-badge.is-visible {
    display: flex;
}

.p2-notif-item {
    text-align: left;
    padding: 14px 16px;
    margin-bottom: 12px;
    border-radius: 12px;
    border: 1px solid rgba(15, 52, 96, 0.1);
    background: rgba(15, 52, 96, 0.03);
}

.p2-notif-item:last-child {
    margin-bottom: 0;
}

.p2-notif-item__tag {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-gold, #957c3d);
    margin-bottom: 6px;
}

.p2-notif-item__title {
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-midnight, #0f3460);
}

.p2-notif-item__body {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.45;
    color: rgba(26, 26, 26, 0.72);
    font-weight: 400;
}

.p2-notif-item--live {
    border-color: rgba(149, 124, 61, 0.35);
}

.p2-notif-item--credit {
    border-color: rgba(15, 52, 96, 0.18);
    background: rgba(149, 124, 61, 0.06);
}

.p2-notif-item--seen {
    opacity: 0.9;
    border-style: dashed;
    background: rgba(15, 52, 96, 0.02);
}

.p2-notif-section-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(15, 52, 96, 0.55);
    margin: 16px 0 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(15, 52, 96, 0.1);
    text-align: left;
}

/* Academia — burbuja desbloqueo cursos gratis (compacta + pestañas) */
.purpose-bubble.p2-gratis-referidos-bubble {
    max-width: min(440px, 94vw) !important;
    max-height: min(78vh, 520px) !important;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 18px 18px 16px !important;
    overflow: hidden;
    box-sizing: border-box;
}

/* Anula reglas globales .purpose-bubble h2 / p (style.css) en esta burbuja compacta */
.purpose-bubble.p2-gratis-referidos-bubble h2.p2-gratis-bubble-title {
    margin-bottom: 4px !important;
    font-size: 1.15rem !important;
    letter-spacing: -0.02em !important;
}

.purpose-bubble.p2-gratis-referidos-bubble p {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
    color: rgba(15, 52, 96, 0.72) !important;
}

.purpose-bubble.p2-gratis-referidos-bubble .p2-gratis-bubble-saldo p {
    color: var(--primary-midnight, #0f3460) !important;
}

.p2-gratis-referidos-bubble .close-bubble {
    top: 10px;
    right: 12px;
}

.p2-gratis-bubble-head {
    margin-bottom: 10px;
    padding-right: 28px;
    flex-shrink: 0;
}

.p2-gratis-bubble-title {
    font-size: 1.15rem;
    margin-bottom: 4px;
    line-height: 1.25;
}

.p2-gratis-bubble-sub {
    font-size: 0.78rem;
    line-height: 1.35;
    margin: 0;
}

.p2-gratis-bubble-sub + .p2-gratis-bubble-sub {
    margin-top: 6px;
}

.p2-gratis-bubble-nav {
    display: flex;
    flex-shrink: 0;
    gap: 4px;
    margin-bottom: 10px;
    padding: 4px;
    border-radius: 10px;
    background: rgba(15, 52, 96, 0.06);
    border: 1px solid rgba(15, 52, 96, 0.08);
}

.p2-gratis-bubble-nav__btn {
    flex: 1;
    margin: 0;
    padding: 8px 6px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: rgba(15, 52, 96, 0.55);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.p2-gratis-bubble-nav__btn:hover {
    color: var(--primary-midnight, #0f3460);
    background: rgba(255, 255, 255, 0.5);
}

.p2-gratis-bubble-nav__btn.is-active {
    color: var(--primary-midnight, #0f3460);
    background: #fff;
    box-shadow: 0 1px 4px rgba(15, 52, 96, 0.12);
}

.p2-gratis-bubble-panels {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.p2-gratis-bubble-panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.p2-gratis-bubble-panel--scroll {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 2px;
}

.p2-gratis-bubble-panel-hint {
    margin: 0 0 8px;
    font-size: 0.75rem;
    line-height: 1.35;
    color: rgba(15, 52, 96, 0.62);
    flex-shrink: 0;
}

.p2-gratis-bubble-table-wrap {
    flex: 1;
    min-height: 0;
    max-height: 200px;
    overflow: auto;
    border-radius: 10px;
    border: 1px solid rgba(15, 52, 96, 0.1);
}

.p2-gratis-bubble-saldo {
    padding: 10px 12px;
    margin-bottom: 10px;
    border-radius: 10px;
    border: 1px solid rgba(149, 124, 61, 0.35);
    background: rgba(149, 124, 61, 0.08);
    flex-shrink: 0;
}

.p2-gratis-bubble-saldo-line {
    margin: 0 0 4px;
    font-size: 0.82rem;
    color: var(--primary-midnight, #0f3460);
}

.p2-gratis-bubble-saldo-line:last-child {
    margin-bottom: 0;
}

.p2-gratis-bubble-saldo-line--highlight {
    font-weight: 600;
}

.p2-gratis-bubble-inline-status {
    min-height: 1.25em;
    margin: 0 0 8px;
    font-size: 0.78rem;
}

.p2-gratis-bubble-btn-unlock {
    width: 100%;
    margin-bottom: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 0.85rem;
}

.p2-gratis-bubble-dash-link {
    margin: 0;
    font-size: 0.75rem;
    text-align: center;
}

.p2-gratis-bubble-dash-link a {
    color: var(--secondary-color, #0f3460);
    font-weight: 600;
}

.p2-gratis-bubble-form .p2-referidos-form-grid,
.p2-gratis-bubble-form-grid {
    gap: 8px;
}

.p2-gratis-bubble-form .form-group {
    margin-bottom: 0;
}

.p2-gratis-bubble-form .p2-referidos-label {
    font-size: 0.72rem;
    margin-bottom: 4px;
}

.p2-gratis-bubble-form input {
    padding: 10px 12px;
    font-size: 0.85rem;
}

.p2-gratis-bubble-form .p2-referidos-submit {
    margin-top: 10px;
    width: 100%;
    padding: 10px;
    font-size: 0.82rem;
}

.p2-gratis-bubble-new-invite-actions {
    margin-top: 8px;
}

.p2-gratis-bubble-new-invite-card {
    padding: 10px;
    border-radius: 12px;
    border: 1px solid rgba(15, 52, 96, 0.12);
    background: rgba(255, 255, 255, 0.72);
}

.p2-gratis-bubble-new-invite-title,
.p2-gratis-bubble-new-invite-copy {
    margin: 0 0 6px;
    font-size: 0.76rem;
    line-height: 1.35;
}

.p2-gratis-bubble-new-invite-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.p2-gratis-bubble-new-invite-btn {
    width: auto;
    min-width: 112px;
    height: 36px;
    padding: 0 10px;
    gap: 6px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
}

.p2-gratis-bubble-empty {
    padding: 10px;
    font-size: 0.78rem;
    color: rgba(26, 26, 26, 0.65);
}

.p2-academia-course-catalog-card__price--gratis-pts {
    color: var(--accent-gold, #957c3d);
    font-weight: 600;
}