/*
Theme Name: Astra Child
Template: astra
Version: 1.0
*/

/* ================================
RESET BASE
================================ */

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #f5f7fb;
}

/* ================================
QUITAR CONTENEDOR ASTRA
================================ */

.ast-container,
.site-content,
#primary {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.site,
#page {
    background: transparent !important;
}

/* ================================
LAYOUT APP
================================ */

.app-dashboard {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

/* ================================
SIDEBAR
================================ */

.app-sidebar {
    width: 240px;
    min-height: 100vh;
    background: #0f172a;
    color: white;
    padding: 30px 20px;
}

.app-sidebar h2 {
    font-size: 20px;
    margin-bottom: 30px;
}

.app-sidebar nav {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.app-sidebar nav a {
    color: #cbd5e1;
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 8px;
    transition: 0.25s;
}

.app-sidebar nav a:hover,
.app-sidebar nav a.active {
    background: #1e293b;
    color: white;
    font-weight: 600;
}

/* ================================
HEADER
================================ */

.dashboard-header {
    margin-bottom: 30px;
}

.dashboard-header h1 {
    margin: 0;
    font-size: 28px;
}

.dashboard-header p {
    margin-top: 5px;
    color: #6b7280;
}

.racha {
    color: #f59e0b;
    font-weight: 600;
}

/* ================================
NIVEL / XP
================================ */

.barra-nivel {
    width: 100%;
    height: 10px;
    background: #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    margin: 12px 0;
}

.barra-nivel-interna {
    height: 100%;
    background: linear-gradient(90deg,#6366f1,#22c55e);
}

/* ================================
GRID OBJETIVOS
================================ */

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
}

/* ================================
TARJETAS
================================ */

.dashboard-card {
    transition: all .25s ease;
    cursor: pointer;
}

.dashboard-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.dashboard-card:active {
    transform: scale(0.98);
}

.objetivo-completado {
    border-left: 5px solid #22c55e;
}

/* ================================
PROGRESO
================================ */

.progress-bar {
    background: #e5e7eb;
    height: 8px;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 10px;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg,#6366f1,#22c55e);
}

/* ================================
LINK
================================ */

.card-link {
    display: inline-block;
    margin-top: 12px;
    font-size: 14px;
    text-decoration: none;
    color: #3b82f6;
}

.card-link:hover {
    text-decoration: underline;
}

/* ================================
MISIONES
================================ */

.misiones-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.mision-card {
    transition: 0.25s;
}

.mision-card:hover {
    transform: translateY(-4px);
}

.mision-card button {
    background: #22c55e;
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 8px;
    cursor: pointer;
}

.mision-card button:hover {
    background: #16a34a;
}

/* ================================
RETOS
================================ */

.retos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
    gap: 20px;
    margin-top: 20px;
}

.reto-card {
    background: white;
    padding: 20px;
    border-radius: 14px;
    transition: all .2s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.reto-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.reto-completado {
    border-left: 5px solid #22c55e;
}

/* ================================
ROLES DASHBOARD (PRO)
================================ */

.roles-grid-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
    gap: 20px;
    margin-top: 15px;
}

.rol-card-dashboard {
    background: white;
    padding: 20px;
    border-radius: 14px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: 0.2s;
    cursor: pointer;
}

.rol-card-dashboard:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.rol-card-dashboard:active {
    transform: scale(0.98);
}

.rol-card-dashboard h4 {
    margin-bottom: 10px;
}

/* ================================
BOTÓN CREAR ROL
================================ */

.btn-crear-rol {
    display: inline-block;
    margin-top: 10px;
    background: #6366f1;
    color: white;
    padding: 10px 16px;
    border-radius: 8px;
    text-decoration: none;
    transition: 0.2s;
}

.btn-crear-rol:hover {
    background: #4f46e5;
}

/* ================================
ONBOARDING
================================ */

.onboarding-vida {
    max-width: 900px;
    margin: 60px auto;
    text-align: center;
}

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

.rol-card input {
    display: none;
}

.rol-content {
    background: white;
    padding: 25px;
    border-radius: 16px;
    border: 2px solid transparent;
    transition: 0.2s;
}

.rol-card input:checked + .rol-content {
    border: 2px solid #6366f1;
    transform: scale(1.05);
}

/* ================================
OCULTAR HEADER / FOOTER
================================ */

.page-template-dashboard-page header,
.page-template-dashboard-page footer,
.page-template-dashboard-page .ast-primary-header-bar {
    display: none !important;
}

/* ================================
BREADCRUMB
================================ */

.breadcrumb {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 20px;
}

.breadcrumb a {
    color: #3b82f6;
    text-decoration: none;
}

/* ================================
RESPONSIVE
================================ */

@media (max-width: 768px) {

    .app-sidebar {
        display: none;
    }

    .app-content {
        padding: 20px;
    }

}

/* ================================
ANIMACIÓN APP
================================ */

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ================================
OBJETIVOS PRO (TARJETAS)
================================ */

.objetivo-card-pro {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    transition: 0.25s;
}

.objetivo-card-pro:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.objetivo-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.objetivo-desc {
    font-size: 14px;
    color: #6b7280;
    margin: 10px 0;
}

.objetivo-meta {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 10px;
}

.subobjetivos-preview {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sub-pill {
    background: #eef2ff;
    color: #6366f1;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 999px;
}

.btn-completar-tarea {
    background: #6366f1;
    color: white;
    border: none;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 10px;
}

.btn-completar-tarea:hover {
    background: #4f46e5;
}

/* =========================================
APP DASHBOARD PRO
========================================= */

body{
background:#0f172a;
font-family:'Inter',sans-serif;
color:white;
}

/* LAYOUT */

.app-dashboard{
display:flex;
min-height:100vh;
}

/* SIDEBAR */

.app-sidebar{
width:260px;
background:#111827;
padding:30px;
border-right:1px solid rgba(255,255,255,0.05);
position:fixed;
height:100vh;
}

.app-sidebar h2{
font-size:24px;
font-weight:700;
margin-bottom:40px;
}

.app-sidebar nav{
display:flex;
flex-direction:column;
gap:12px;
}

.app-sidebar nav a{
color:#cbd5e1;
text-decoration:none;
padding:14px 18px;
border-radius:14px;
transition:0.3s;
font-weight:600;
}

.app-sidebar nav a:hover,
.app-sidebar nav a.active{
background:linear-gradient(90deg,#2563eb,#7c3aed);
color:white;
}

/* CONTENIDO */

.app-content{
margin-left:260px;
padding:40px;
width:100%;
background:#0f172a;
}

/* HEADER */

.dashboard-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:30px;
}

.dashboard-header h1{
font-size:34px;
font-weight:800;
}

.racha{
background:#1e293b;
padding:12px 20px;
border-radius:14px;
font-weight:700;
}

/* GRID TOP */

.top-widgets{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:20px;
margin-bottom:30px;
}

.widget-card{
background:linear-gradient(145deg,#1e293b,#111827);
padding:28px;
border-radius:24px;
box-shadow:0 10px 30px rgba(0,0,0,0.3);
}

.widget-card h3{
font-size:16px;
color:#94a3b8;
margin-bottom:12px;
}

.widget-big{
font-size:38px;
font-weight:800;
}

/* NIVEL */

.nivel-card{
background:linear-gradient(135deg,#2563eb,#7c3aed);
}

.barra-nivel{
height:14px;
background:rgba(255,255,255,0.2);
border-radius:30px;
overflow:hidden;
margin-top:18px;
}

.barra-nivel-interna{
height:100%;
background:white;
border-radius:30px;
transition:1s;
}

/* MISIONES */

.mision-dia{
background:linear-gradient(145deg,#1e293b,#111827);
padding:30px;
border-radius:28px;
margin-bottom:35px;
display:flex;
justify-content:space-between;
align-items:center;
}

.mision-info h2{
font-size:28px;
margin-bottom:10px;
}

.mision-btn{
background:linear-gradient(90deg,#22c55e,#16a34a);
padding:14px 22px;
border:none;
border-radius:14px;
color:white;
font-weight:700;
cursor:pointer;
}

/* ROLES */

.roles-grid-dashboard{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:25px;
}

.rol-card-dashboard{
background:linear-gradient(145deg,#1e293b,#111827);
padding:28px;
border-radius:26px;
box-shadow:0 10px 30px rgba(0,0,0,0.25);
transition:0.3s;
position:relative;
overflow:hidden;
}

.rol-card-dashboard:hover{
transform:translateY(-5px);
}

.rol-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}

.rol-header h4{
font-size:24px;
font-weight:700;
}

.rol-badge{
background:#2563eb;
padding:8px 14px;
border-radius:12px;
font-size:14px;
font-weight:700;
}

.progress-bar{
height:14px;
background:#0f172a;
border-radius:20px;
overflow:hidden;
margin-bottom:15px;
}

.progress-fill{
height:100%;
background:linear-gradient(90deg,#2563eb,#22c55e);
border-radius:20px;
transition:1s;
}

.rol-stats{
color:#cbd5e1;
margin-bottom:20px;
}

.card-link{
color:#60a5fa;
font-weight:700;
text-decoration:none;
}

/* BOTÓN */

.btn-crear-rol{
display:inline-block;
margin-top:30px;
background:linear-gradient(90deg,#2563eb,#7c3aed);
padding:16px 24px;
border-radius:16px;
color:white;
text-decoration:none;
font-weight:700;
}

/* RESPONSIVE */

@media(max-width:900px){

.app-sidebar{
display:none;
}

.app-content{
margin-left:0;
padding:20px;
}

.dashboard-header{
flex-direction:column;
align-items:flex-start;
gap:15px;
}

}

/* =====================================================
TOP WIDGETS DASHBOARD
===================================================== */

.top-widgets{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin-bottom:30px;

}

.widget-card h3{

font-size:20px;
margin-bottom:20px;
font-weight:700;
color:#111827;

}

/* =====================================================
RESPONSIVE
===================================================== */

@media(max-width:1100px){

.top-widgets{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:700px){

.top-widgets{
grid-template-columns:1fr;
}

.mision-dia{
flex-direction:column;
align-items:flex-start;
gap:20px;
}

}

/* =========================
TÍTULOS DE ROLES VISIBLES
========================= */

.rol-card-dashboard h4{
    color:#ffffff !important;
    font-size:24px;
    font-weight:700;
    margin-bottom:25px;
    line-height:1.3;
}

.rol-card-dashboard p{
    color:#cbd5e1 !important;
}

.rol-card-dashboard a{
    color:#60a5fa !important;
}

/* =========================
OBJETIVOS - TEXTO VISIBLE
========================= */

.dashboard-card{
    background:rgba(15,23,42,0.92) !important;
    border:1px solid rgba(255,255,255,0.06);
    border-radius:24px;
    padding:30px;
    color:#ffffff !important;
    box-shadow:
        0 10px 40px rgba(0,0,0,0.35);
}

/* TÍTULOS */
.dashboard-card h1,
.dashboard-card h2,
.dashboard-card h3,
.dashboard-card h4{
    color:#ffffff !important;
}

/* TEXTOS */
.dashboard-card p,
.dashboard-card span,
.dashboard-card strong{
    color:#cbd5e1 !important;
}

/* LINKS */
.dashboard-card a{
    color:#60a5fa !important;
}

/* OBJETIVOS COMPLETADOS */
.objetivo-completado{
    border-left:5px solid #22c55e !important;
}

/* BARRAS */
.progress-bar{
    width:100%;
    height:12px;
    background:rgba(255,255,255,0.08);
    border-radius:999px;
    overflow:hidden;
    margin:20px 0;
}

.progress-fill{
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,#4f46e5,#22c55e);
}

/* =====================================================
FIX FINAL TEXTOS OSCUROS
===================================================== */

/* TITULOS GENERALES */

.app-content h1,
.app-content h2,
.app-content h3,
.app-content h4,
.app-content h5,
.app-content h6{

color:#ffffff !important;

}

/* TEXTOS GENERALES */

.app-content p,
.app-content span,
.app-content li{

color:#cbd5e1 !important;

}

/* TITULOS SECCIONES */

.roles-section h3,
.mision-dia h2,
.mision-dia h3{

color:#ffffff !important;

}

/* OBJETIVOS */

.dashboard-card h3,
.dashboard-card h4{

color:#ffffff !important;

}

/* TITULO OBJETIVOS DE */

.app-content .objetivos-titulo,
.app-content .roles-title{

color:#ffffff !important;
}

/* LINKS */

.app-content a{

color:#60a5fa;

}

/* TEXTO BARRAS */

.rol-stats,
.progress-text{

color:#cbd5e1 !important;

}

/* TITULOS DENTRO WIDGETS */

.widget-card h3{

color:#94a3b8 !important;

}

/* NUMEROS GRANDES */

.widget-big{

color:#ffffff !important;

}

/* =====================================================
   RESUMEN DE MISIONES DE HOY
===================================================== */

.resumen-misiones-hoy {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 12px !important;
}

.resumen-misiones-hoy span {
    display: inline-flex !important;
    align-items: center !important;
    padding: 7px 11px !important;
    background: #f5f7fb !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* =====================================================
   RUTINA DE HOY — PLANTILLA PARA PDF
===================================================== */

.rutina-hoy-pdf {
    max-width: 800px;
    margin: 40px auto;
    padding: 40px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 35px rgba(15, 23, 42, 0.08);
    color: #0f172a;
}

.rutina-hoy-cabecera {
    text-align: center;
    padding-bottom: 25px;
    border-bottom: 2px solid #e2e8f0;
}

.rutina-hoy-logo {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #6366f1;
    margin-bottom: 15px;
}

.rutina-hoy-cabecera h1 {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    color: #0f172a;
}

.rutina-hoy-fecha {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 14px;
}

.rutina-hoy-resumen {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin: 25px 0;
}

.rutina-hoy-dato {
    padding: 18px;
    text-align: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.rutina-hoy-icono {
    display: block;
    font-size: 22px;
    margin-bottom: 7px;
}

.rutina-hoy-dato strong {
    display: block;
    font-size: 24px;
    line-height: 1;
}

.rutina-hoy-dato small {
    display: block;
    margin-top: 6px;
    color: #64748b;
    font-size: 12px;
}

.rutina-hoy-lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rutina-hoy-mision {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
}

.rutina-hoy-numero {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    background: #f1f5f9;
    font-size: 16px;
    font-weight: 700;
}

.rutina-hoy-mision-contenido {
    flex: 1;
}

.rutina-hoy-mision-contenido h2 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
}

.rutina-hoy-meta {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    color: #64748b;
    font-size: 13px;
}

.rutina-hoy-check {
    font-size: 28px;
    color: #94a3b8;
}

.rutina-hoy-pie {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
    text-align: center;
}

.rutina-hoy-pie p {
    margin: 0 0 5px;
    color: #64748b;
    font-size: 13px;
}

.rutina-hoy-pie strong {
    font-size: 15px;
}

/* =====================================================
   BOTÓN RUTINA DE HOY
===================================================== */

.btn-rutina-hoy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 13px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.btn-rutina-hoy:hover {
    background: #f8fafc;
    color: #0f172a;
    text-decoration: none;
}

/* =========================================================
   ROLES — DASHBOARD COMPACTO
========================================================= */


/* ---------------------------------------------------------
   CABECERA DE LA SECCIÓN
--------------------------------------------------------- */

.roles-section {
    width: 100%;
    margin-top: 28px;
}

.roles-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.roles-section-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: #64748b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.roles-section-header h3 {
    margin: 0 !important;
    color: #f8fafc !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.2;
}

.roles-section-header p {
    margin: 5px 0 0 !important;
    color: #94a3b8 !important;
    font-size: 12px !important;
}


/* ---------------------------------------------------------
   BOTÓN AÑADIR ROL
--------------------------------------------------------- */

.roles-section-header .btn-crear-rol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 14px;
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border: 1px solid #334155 !important;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.roles-section-header .btn-crear-rol:hover {
    background: #334155 !important;
    color: #ffffff !important;
}


/* ---------------------------------------------------------
   GRID
--------------------------------------------------------- */

.roles-grid-dashboard {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
}


/* ---------------------------------------------------------
   TARJETA
--------------------------------------------------------- */

.rol-card-dashboard {
    position: relative;
    min-width: 0;
    padding: 16px !important;
    background: #172033 !important;
    border: 1px solid #25324a !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    color: #e2e8f0 !important;
    overflow: hidden;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}

.rol-card-dashboard:hover {
    transform: translateY(-2px);
    background: #1a263b !important;
    border-color: #344563 !important;
}


/* ---------------------------------------------------------
   CABECERA DE TARJETA
--------------------------------------------------------- */

.rol-card-top {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    margin-bottom: 13px;
}

.rol-card-icon {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #243b69;
    color: #60a5fa;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
}

.rol-card-title {
    min-width: 0;
    flex: 1;
}

.rol-card-title h4 {
    margin: 0 !important;
    color: #f8fafc !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rol-card-title span {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 9px;
    line-height: 1.2;
}

.rol-card-dashboard .rol-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 25px;
    padding: 0 7px;
    background: #1d4ed8 !important;
    color: #ffffff !important;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 700;
}


/* ---------------------------------------------------------
   MI YO IDEAL
--------------------------------------------------------- */

.rol-identidad-ideal {
    margin: 0 0 13px !important;
    padding: 11px !important;
    background: #1c2940 !important;
    border: 1px solid #293956 !important;
    border-left: 3px solid #6366f1 !important;
    border-radius: 9px !important;
}

.rol-identidad-ideal span {
    display: block;
    margin-bottom: 5px;
    color: #818cf8 !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rol-identidad-ideal p {
    display: -webkit-box;
    margin: 0 !important;
    color: #cbd5e1 !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


/* ---------------------------------------------------------
   ACTUAL / IDEAL
--------------------------------------------------------- */

.rol-estados {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-bottom: 13px;
}

.rol-estado-item {
    min-width: 0;
    padding: 9px;
    background: #111a2b;
    border-radius: 8px;
}

.rol-estado-item span {
    display: block;
    margin-bottom: 4px;
    color: #64748b;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.07em;
}

.rol-estado-item p {
    display: -webkit-box;
    margin: 0 !important;
    color: #cbd5e1 !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


/* ---------------------------------------------------------
   PROGRESO
--------------------------------------------------------- */

.rol-progreso {
    margin: 0 !important;
    padding: 11px 0 0 !important;
    border-top: 1px solid #25324a !important;
}

.rol-progreso-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
}

.rol-progreso-header span {
    color: #94a3b8 !important;
    font-size: 10px !important;
    font-weight: 500;
}

.rol-progreso-header strong {
    color: #60a5fa !important;
    font-size: 10px !important;
    font-weight: 700;
}


/* ---------------------------------------------------------
   BARRA DE PROGRESO
--------------------------------------------------------- */

.rol-progress-track {
    width: 100%;
    height: 5px;
    background: #263247;
    border-radius: 999px;
    overflow: hidden;
}

.rol-progress-fill {
    height: 100%;
    min-width: 3px;
    background: linear-gradient(
        90deg,
        #6366f1,
        #3b82f6
    );
    border-radius: 999px;
    transition: width 0.35s ease;
}

.rol-progreso-puntos {
    display: flex;
    justify-content: flex-end;
    margin-top: 5px;
}

.rol-progreso-puntos span {
    color: #64748b;
    font-size: 9px;
}


/* ---------------------------------------------------------
   ENLACE
--------------------------------------------------------- */

.rol-card-link {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #25324a;
    color: #60a5fa !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.rol-card-link span {
    font-size: 14px;
    line-height: 1;
    transition: transform 0.2s ease;
}

.rol-card-link:hover {
    color: #93c5fd !important;
}

.rol-card-link:hover span {
    transform: translateX(3px);
}


/* ---------------------------------------------------------
   SIN ROLES
--------------------------------------------------------- */

.roles-empty {
    padding: 30px;
    background: #172033;
    border: 1px solid #25324a;
    border-radius: 14px;
    text-align: center;
}

.roles-empty p {
    margin: 0 0 15px;
    color: #94a3b8;
    font-size: 13px;
}


/* ---------------------------------------------------------
   TABLET
--------------------------------------------------------- */

@media (max-width: 1100px) {

    .roles-grid-dashboard {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* ---------------------------------------------------------
   MÓVIL
--------------------------------------------------------- */

@media (max-width: 700px) {

    .roles-section-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .roles-grid-dashboard {
        grid-template-columns: 1fr;
    }

    .roles-section-header .btn-crear-rol {
        width: 100%;
    }

}

/* =========================================================
   ROLES — ALTURA UNIFORME
========================================================= */

.roles-grid-dashboard {
    align-items: stretch;
}

.rol-card-dashboard {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
}

/* Mantener los textos con alturas consistentes */
.rol-identidad-ideal p,
.rol-estado-item p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* Reservar un espacio consistente para identidad y estados */
.rol-identidad-ideal {
    min-height: 67px;
    box-sizing: border-box;
}

.rol-estados {
    min-height: 76px;
}

/* Mantener el progreso y el enlace alineados abajo */
.rol-progreso {
    margin-top: auto !important;
}

.rol-card-link {
    margin-top: 12px;
}

/* Identidad visual individual de cada Rol */

.rol-card-icon {
    background: color-mix(in srgb, var(--rol-color) 20%, #172033);
    color: var(--rol-color);
}

.rol-card-dashboard .rol-badge {
    background: color-mix(in srgb, var(--rol-color) 24%, #172033) !important;
    color: var(--rol-color) !important;
    border: 1px solid color-mix(in srgb, var(--rol-color) 45%, transparent);
}

.rol-identidad-ideal {
    border-left-color: var(--rol-color) !important;
}

.rol-identidad-ideal span {
    color: var(--rol-color) !important;
}

.rol-progreso-header strong {
    color: var(--rol-color) !important;
}

.rol-progress-fill {
    background: var(--rol-color) !important;
}

.rol-card-link {
    color: var(--rol-color) !important;
}

/* =========================================================
   ICONOS PERSONALIZADOS DE LOS ROLES
========================================================= */

.rol-card-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: color-mix(
        in srgb,
        var(--rol-color) 20%,
        #172033
    ) !important;
    color: var(--rol-color) !important;
}

.rol-card-icon span {
    display: block;
    font-size: 17px;
    line-height: 1;
}

/* =========================================================
   CAPA VISUAL DEL DASHBOARD — AJUSTES SIN ELIMINAR ESTILOS EXISTENTES
========================================================= */
.page-template-dashboard-page .app-dashboard {
    align-items: stretch;
    min-height: 100vh;
    gap: 0;
}
.page-template-dashboard-page .app-sidebar {
    box-sizing: border-box;
    z-index: 20;
}
.page-template-dashboard-page .app-sidebar nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.page-template-dashboard-page .app-sidebar nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 10px 14px;
    border-radius: 10px;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.page-template-dashboard-page .app-sidebar nav a:hover {
    transform: translateX(2px);
}
.page-template-dashboard-page .app-content {
    box-sizing: border-box;
    min-width: 0;
}
.page-template-dashboard-page .dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 26px;
}
.page-template-dashboard-page .dashboard-header h1 {
    margin: 4px 0 8px;
    line-height: 1.15;
    letter-spacing: -.035em;
}
.page-template-dashboard-page .dashboard-header > div > p {
    margin: 0;
    color: #94a3b8;
}
.page-template-dashboard-page .dashboard-eyebrow {
    color: #818cf8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .13em;
}
.page-template-dashboard-page .dashboard-header .racha {
    flex-shrink: 0;
    margin: 0;
    padding: 11px 15px;
    border: 1px solid #293956;
    border-radius: 12px;
    background: #172033;
    color: #cbd5e1;
}
.page-template-dashboard-page .top-widgets {
    align-items: stretch;
    gap: 16px;
    margin-bottom: 28px;
}
.page-template-dashboard-page .widget-card {
    box-sizing: border-box;
    min-width: 0;
    padding: 20px;
    border: 1px solid #26344b;
    border-radius: 16px;
    background: linear-gradient(145deg, #172238, #121b2d);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.page-template-dashboard-page .widget-card h3 {
    margin: 0 0 14px;
    color: #aebbd0;
    font-size: 12px;
    font-weight: 650;
}
.page-template-dashboard-page .widget-big {
    margin-bottom: 10px;
    color: #f8fafc;
    font-size: clamp(24px, 2.2vw, 32px);
    font-weight: 750;
    letter-spacing: -.04em;
}
.page-template-dashboard-page .widget-footnote {
    margin: 10px 0 0;
    color: #94a3b8;
    font-size: 11px;
}
.page-template-dashboard-page .barra-nivel {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #29364c;
}
.page-template-dashboard-page .barra-nivel-interna {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #818cf8, #34d399);
    transition: width .3s ease;
}
.page-template-dashboard-page .misiones-hoy-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 16px;
    padding: 22px;
    border: 1px solid #293956;
    border-radius: 16px;
    background: #172238;
}
.page-template-dashboard-page .misiones-hoy-header h3 {
    margin-top: 0;
}
.page-template-dashboard-page .resumen-misiones-hoy {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
.page-template-dashboard-page .resumen-misiones-hoy span,
.page-template-dashboard-page .mision-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid #2b3a52;
    border-radius: 9px;
    background: #111a2b;
    color: #cbd5e1;
    font-size: 11px;
}
.page-template-dashboard-page .misiones-hoy-controles {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 10px;
    min-width: 220px;
}
.page-template-dashboard-page .misiones-hoy-controles label {
    width: 100%;
    color: #aebbd0;
    font-size: 11px;
}
.page-template-dashboard-page .tiempo-misiones-input {
    display: flex;
    align-items: center;
    gap: 8px;
}
.page-template-dashboard-page .tiempo-misiones-input input {
    width: 92px;
    min-height: 40px;
    border: 1px solid #34445e;
    border-radius: 9px;
    background: #0f172a;
    color: #f8fafc;
}
.page-template-dashboard-page .btn-regenerar-misiones,
.page-template-dashboard-page .btn-rutina-hoy,
.page-template-dashboard-page .btn-crear-rol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 10px 14px;
    border: 1px solid #3c4d6a;
    border-radius: 10px;
    background: #263650;
    color: #f8fafc;
    font-size: 12px;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease;
}
.page-template-dashboard-page .btn-regenerar-misiones:hover,
.page-template-dashboard-page .btn-rutina-hoy:hover,
.page-template-dashboard-page .btn-crear-rol:hover {
    transform: translateY(-1px);
    background: #334766;
    color: #fff;
}
.page-template-dashboard-page .mision-dia {
    align-items: center;
    gap: 20px;
    margin: 12px 0;
    padding: 22px;
    border: 1px solid #2b3a52;
    border-radius: 16px;
    background: linear-gradient(120deg, #1b2940, #151f32);
}
.page-template-dashboard-page .mision-dia h2 {
    margin: 4px 0 12px;
    color: #f8fafc;
}
.page-template-dashboard-page .mision-dia h3 {
    margin: 0;
    color: #a5b4fc;
    font-size: 11px;
}
.page-template-dashboard-page .mision-puntos {
    color: #fbbf24;
    font-size: 12px;
}
.page-template-dashboard-page .mision-btn {
    flex-shrink: 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: #4f46e5;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}
.page-template-dashboard-page .roles-section {
    margin-top: 30px;
}
.page-template-dashboard-page .roles-section-header {
    gap: 18px;
    margin-bottom: 18px;
}
.page-template-dashboard-page .roles-section-header h3 {
    margin: 5px 0;
    color: #f8fafc;
    font-size: 22px;
    letter-spacing: -.025em;
}
.page-template-dashboard-page .roles-section-header p {
    margin: 0;
    color: #94a3b8;
}
.page-template-dashboard-page .rol-card-dashboard {
    border: 1px solid #293956;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .13);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.page-template-dashboard-page .rol-card-dashboard:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--rol-color) 55%, #293956);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .2);
}
.page-template-dashboard-page .mensaje-regenerar-misiones {
    margin: 8px 0 12px;
    color: #a5b4fc;
    font-size: 12px;
}
.page-template-dashboard-page .misiones-hoy-vacio {
    padding: 24px;
    border: 1px dashed #34445e;
    border-radius: 14px;
    color: #aebbd0;
    text-align: center;
}
@media (max-width: 900px) {
    .page-template-dashboard-page .dashboard-header,
    .page-template-dashboard-page .misiones-hoy-header {
        flex-direction: column;
    }
    .page-template-dashboard-page .misiones-hoy-controles {
        justify-content: flex-start;
        width: 100%;
    }
}
@media (max-width: 767px) {
    .page-template-dashboard-page .app-dashboard {
        display: block;
    }
    .page-template-dashboard-page .app-sidebar {
        position: static;
        width: 100%;
        min-height: 0;
    }
    .page-template-dashboard-page .app-sidebar nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .page-template-dashboard-page .app-content {
        margin-left: 0;
        padding: 22px 16px;
    }
    .page-template-dashboard-page .dashboard-header .racha {
        align-self: flex-start;
    }
    .page-template-dashboard-page .mision-dia {
        align-items: flex-start;
        flex-direction: column;
    }
    .page-template-dashboard-page .mision-btn {
        align-self: flex-start;
    }
}

/* Estilos limitados a Estadísticas. */
.estadisticas-page{max-width:1440px;margin:0 auto;padding:8px 0 44px;color:#f8fafc}
.estadisticas-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:0 0 28px}
.estadisticas-eyebrow{display:block;margin-bottom:8px;color:#a5b4fc;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.estadisticas-heading h1{margin:0 0 8px;color:#f8fafc;font-size:clamp(28px,3vw,38px);line-height:1.15;font-weight:750}
.estadisticas-heading p,.estadisticas-panel-heading p{margin:0;color:#94a3b8;font-size:14px}
.estadisticas-periodo,.estadisticas-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid #334155;border-radius:12px;background:#172033;color:#cbd5e1;font-size:13px;white-space:nowrap}
.estadisticas-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:24px}
.estadistica-card,.estadisticas-panel,.estadistica-rol-card{min-width:0;border:1px solid #263449;border-radius:18px;background:linear-gradient(145deg,#172033,#111827);box-shadow:0 12px 30px rgba(0,0,0,.12)}
.estadistica-card{padding:21px}
.estadistica-icono{display:grid;place-items:center;width:40px;height:40px;margin-bottom:18px;border-radius:12px;font-size:21px;font-weight:800}
.estadistica-icono.xp{background:rgba(234,179,8,.14);color:#facc15}.estadistica-icono.racha{background:rgba(249,115,22,.14);color:#fb923c}.estadistica-icono.completadas{background:rgba(34,197,94,.14);color:#4ade80}.estadistica-icono.tiempo{background:rgba(45,212,191,.14);color:#2dd4bf}
.estadistica-card p{margin:0 0 8px;color:#94a3b8;font-size:13px}
.estadistica-card>strong{display:block;color:#f8fafc;font-size:clamp(25px,2.4vw,32px);line-height:1.2;font-weight:750;overflow-wrap:anywhere}
.estadistica-card>strong small{font-size:14px;color:#cbd5e1;font-weight:600}
.estadistica-nota{display:block;margin-top:9px;color:#64748b;font-size:12px}
.estadisticas-panel{padding:25px;margin-bottom:28px}
.estadisticas-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.estadisticas-panel-heading h2{margin:0 0 7px;color:#f8fafc;font-size:22px;font-weight:750}
.estadisticas-grafico{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px;align-items:end;height:210px;padding:8px 0 0}
.estadisticas-dia{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;height:100%;min-width:0}
.estadisticas-dia-valor{color:#cbd5e1;font-size:12px;font-weight:700}
.estadisticas-barra-fondo{display:flex;align-items:flex-end;justify-content:center;width:min(100%,42px);height:145px;overflow:hidden;border-radius:9px 9px 4px 4px;background:#202c40}
.estadisticas-barra{width:100%;min-height:4px;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,#818cf8,#6366f1);transition:height .25s ease}
.estadisticas-dia-etiqueta{color:#94a3b8;font-size:12px;text-transform:capitalize}
.estadisticas-resumen-semana{display:flex;justify-content:space-between;gap:12px;margin-top:18px;padding-top:17px;border-top:1px solid #263449;color:#cbd5e1;font-size:13px}
.estadisticas-roles-section{margin-top:8px}
.estadisticas-roles-section>.estadisticas-panel-heading{margin-bottom:18px}
.estadisticas-roles-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.estadistica-rol-card{padding:22px;border-top:3px solid var(--estadistica-rol-color,#6366f1)}
.estadistica-rol-top{display:flex;align-items:center;gap:13px;margin-bottom:22px}
.estadistica-rol-icono{display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;border-radius:15px;background:color-mix(in srgb,var(--estadistica-rol-color,#6366f1) 17%,#172033);font-size:24px}
.estadistica-rol-titulo{min-width:0;flex:1}
.estadistica-rol-titulo h3{margin:0 0 5px;color:#f8fafc;font-size:18px;font-weight:750;overflow-wrap:anywhere}
.estadistica-rol-titulo span{color:#94a3b8;font-size:12px}
.estadistica-rol-progreso-label{display:flex;justify-content:space-between;gap:12px;margin-bottom:9px;color:#cbd5e1;font-size:12px}
.estadistica-rol-progreso-label strong{color:#f8fafc}
.estadistica-rol-track{height:8px;overflow:hidden;border-radius:20px;background:#2a3548}
.estadistica-rol-track span{display:block;height:100%;border-radius:20px;background:var(--estadistica-rol-color,#6366f1)}
.estadistica-rol-metricas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:22px 0 16px}
.estadistica-rol-metricas>div{padding:13px;border-radius:12px;background:#111827}
.estadistica-rol-metricas strong,.estadistica-rol-metricas span{display:block}
.estadistica-rol-metricas strong{color:#f8fafc;font-size:20px}
.estadistica-rol-metricas span{margin-top:5px;color:#94a3b8;font-size:11px}
.estadistica-rol-semana{display:flex;justify-content:space-between;gap:12px;padding:14px 0;border-top:1px solid #29364a;border-bottom:1px solid #29364a;color:#94a3b8;font-size:12px}
.estadistica-rol-semana strong{color:#e2e8f0}
.estadistica-rol-enlace{display:flex;align-items:center;justify-content:space-between;margin-top:16px;color:#c7d2fe!important;font-size:13px;font-weight:700;text-decoration:none!important}
.estadistica-rol-enlace:hover{color:#fff!important}
.estadisticas-vacio{padding:30px 20px;text-align:center;border:1px dashed #3a4960;border-radius:14px;background:rgba(15,23,42,.45)}
.estadisticas-vacio>span{font-size:28px}.estadisticas-vacio h3{margin:8px 0;color:#e2e8f0;font-size:17px}.estadisticas-vacio p{max-width:650px;margin:0 auto 14px;color:#94a3b8;font-size:13px;line-height:1.7}
.estadisticas-aclaracion{margin:22px 0 0;color:#64748b;font-size:11px;line-height:1.6}
@media(max-width:1100px){.estadisticas-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.estadisticas-page{padding-top:0}.estadisticas-heading{align-items:flex-start;flex-direction:column;margin-bottom:20px}.estadisticas-kpis{gap:10px}.estadistica-card{padding:16px}.estadistica-icono{margin-bottom:13px}.estadisticas-panel{padding:17px}.estadisticas-roles-grid{grid-template-columns:1fr}.estadisticas-grafico{gap:7px;height:180px}.estadisticas-barra-fondo{height:120px}.estadisticas-resumen-semana{flex-direction:column}.estadisticas-panel-heading h2{font-size:20px}}

/* =========================================================
   ESTADISTICAS — CORRECCION VISUAL AISLADA
   Añadir al final de style.css. No sustituye los estilos existentes.
========================================================= */

/* Ocultar solo el encabezado y pie propios de Astra en esta página. */
body:has(.estadisticas-page) #masthead,
body:has(.estadisticas-page) #colophon,
body:has(.estadisticas-page) .ast-primary-header-bar,
body:has(.estadisticas-page) .ast-above-header,
body:has(.estadisticas-page) .ast-below-header {
    display: none !important;
}

/* Cubrir las variantes habituales de la clase de plantilla WordPress. */
body.page-template-estadisticas header#masthead,
body.page-template-page-estadisticas header#masthead,
body.page-template-page-estadisticas-php header#masthead,
body.page-estadisticas header#masthead,
body.page-template-estadisticas .ast-primary-header-bar,
body.page-template-page-estadisticas .ast-primary-header-bar,
body.page-template-page-estadisticas-php .ast-primary-header-bar,
body.page-estadisticas .ast-primary-header-bar,
body.page-template-estadisticas footer#colophon,
body.page-template-page-estadisticas footer#colophon,
body.page-template-page-estadisticas-php footer#colophon,
body.page-estadisticas footer#colophon {
    display: none !important;
}

/* Mantener el fondo y la estructura de la app en Estadísticas. */
body:has(.estadisticas-page) {
    margin: 0;
    background: #0f172a !important;
    color: #f8fafc;
}

body:has(.estadisticas-page) .site,
body:has(.estadisticas-page) #page,
body:has(.estadisticas-page) .site-content,
body:has(.estadisticas-page) #primary,
body:has(.estadisticas-page) .ast-container {
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #0f172a !important;
}

body:has(.estadisticas-page) .app-dashboard {
    display: flex;
    width: 100%;
    min-height: 100vh;
    align-items: stretch;
    gap: 0;
}

body:has(.estadisticas-page) .app-sidebar {
    box-sizing: border-box;
    flex: 0 0 260px;
    width: 260px;
    min-height: 100vh;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 100;
    overflow-y: auto;
    background: #111827 !important;
    color: #f8fafc;
}

body:has(.estadisticas-page) .app-content {
    box-sizing: border-box;
    width: calc(100% - 260px);
    min-width: 0;
    min-height: 100vh;
    margin-left: 260px;
    padding: 38px clamp(20px, 3vw, 48px) 48px;
    background: #0f172a !important;
    color: #f8fafc;
}

/* Cabecera de página. */
.estadisticas-page {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 8px 0 44px;
    color: #f8fafc;
    box-sizing: border-box;
}

.estadisticas-page * {
    box-sizing: border-box;
}

.estadisticas-page .estadisticas-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 28px;
}

.estadisticas-page .estadisticas-eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    color: #a5b4fc;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
}

.estadisticas-page .estadisticas-heading h1 {
    margin: 0 0 8px;
    color: #f8fafc !important;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -.035em;
}

.estadisticas-page .estadisticas-heading p,
.estadisticas-page .estadisticas-panel-heading p {
    margin: 0;
    color: #aebbd0 !important;
    line-height: 1.6;
}

.estadisticas-page .estadisticas-periodo,
.estadisticas-page .estadisticas-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 10px 14px;
    border: 1px solid #334155;
    border-radius: 999px;
    background: #1e293b;
    color: #e2e8f0 !important;
    font-size: 13px;
    font-weight: 700;
}

/* Cuatro tarjetas de resumen. */
.estadisticas-page .estadisticas-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin: 0 0 28px;
}

.estadisticas-page .estadistica-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    min-height: 180px;
    padding: 22px;
    border: 1px solid #293956;
    border-radius: 18px;
    background: linear-gradient(145deg, #1e293b, #151e2e);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .15);
}

.estadisticas-page .estadistica-icono {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    border-radius: 13px;
    background: #29364b;
    font-size: 21px;
}

.estadisticas-page .estadistica-icono.xp { background: #3b321e; }
.estadisticas-page .estadistica-icono.racha { background: #422b25; }
.estadisticas-page .estadistica-icono.completadas { background: #163a34; }
.estadisticas-page .estadistica-icono.tiempo { background: #282b50; }

.estadisticas-page .estadistica-card p {
    margin: 0 0 10px;
    color: #cbd5e1 !important;
    font-size: 13px;
    line-height: 1.45;
}

.estadisticas-page .estadistica-card > strong {
    display: block;
    margin: auto 0 5px;
    color: #fff !important;
    font-size: clamp(26px, 2.5vw, 34px);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -.03em;
}

.estadisticas-page .estadistica-card > strong small {
    color: #cbd5e1 !important;
    font-size: 13px;
    letter-spacing: 0;
}

.estadisticas-page .estadistica-nota {
    color: #94a3b8 !important;
    font-size: 12px;
    line-height: 1.45;
}

/* Paneles principales y gráfico. */
.estadisticas-page .estadisticas-panel {
    margin: 0 0 28px;
    padding: 26px;
    border: 1px solid #293956;
    border-radius: 20px;
    background: #151e2e;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .12);
}

.estadisticas-page .estadisticas-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 22px;
}

.estadisticas-page .estadisticas-panel-heading h2 {
    margin: 0 0 6px;
    color: #f8fafc !important;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 800;
}

.estadisticas-page .estadisticas-grafico {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 14px;
    min-height: 220px;
    padding: 18px 12px 0;
    border-bottom: 1px solid #334155;
}

.estadisticas-page .estadisticas-dia {
    display: grid;
    grid-template-rows: 20px minmax(90px, 1fr) 24px;
    align-items: end;
    gap: 8px;
    min-width: 0;
    text-align: center;
}

.estadisticas-page .estadisticas-dia-valor {
    color: #cbd5e1 !important;
    font-size: 12px;
    font-weight: 700;
}

.estadisticas-page .estadisticas-barra-fondo {
    display: flex;
    height: 100%;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    border-radius: 9px 9px 3px 3px;
    background: #202c40;
}

.estadisticas-page .estadisticas-barra {
    width: min(100%, 34px);
    min-height: 3px;
    border-radius: 8px 8px 2px 2px;
    background: linear-gradient(180deg, #818cf8, #6366f1);
}

.estadisticas-page .estadisticas-dia-etiqueta {
    color: #94a3b8 !important;
    font-size: 12px;
    text-transform: capitalize;
}

.estadisticas-page .estadisticas-resumen-semana {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    padding-top: 18px;
    color: #cbd5e1 !important;
    font-size: 13px;
}

.estadisticas-page .estadisticas-vacio {
    padding: 30px 22px;
    border: 1px dashed #3b4a63;
    border-radius: 15px;
    text-align: center;
    background: #182337;
}

.estadisticas-page .estadisticas-vacio > span {
    font-size: 28px;
}

.estadisticas-page .estadisticas-vacio h3 {
    margin: 10px 0 8px;
    color: #f8fafc !important;
    font-size: 18px;
}

.estadisticas-page .estadisticas-vacio p {
    max-width: 650px;
    margin: 0 auto;
    color: #aebbd0 !important;
    font-size: 13px;
    line-height: 1.7;
}

/* Tarjetas por Rol. */
.estadisticas-page .estadisticas-roles-section {
    margin-top: 30px;
}

.estadisticas-page .estadisticas-roles-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.estadisticas-page .estadistica-rol-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 22px;
    border: 1px solid #293956;
    border-top: 3px solid var(--estadistica-rol-color, #6366f1);
    border-radius: 18px;
    background: linear-gradient(145deg, #1e293b, #151e2e);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .13);
    transition: transform .2s ease, border-color .2s ease;
}

.estadisticas-page .estadistica-rol-card:hover {
    transform: translateY(-3px);
}

.estadisticas-page .estadistica-rol-top {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 22px;
}

.estadisticas-page .estadistica-rol-icono {
    display: flex;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: color-mix(in srgb, var(--estadistica-rol-color, #6366f1) 18%, #172033);
    font-size: 21px;
}

.estadisticas-page .estadistica-rol-titulo { min-width: 0; }

.estadisticas-page .estadistica-rol-titulo h3 {
    margin: 0 0 5px;
    color: #f8fafc !important;
    font-size: 17px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.estadisticas-page .estadistica-rol-titulo span {
    color: #94a3b8 !important;
    font-size: 12px;
}

.estadisticas-page .estadistica-rol-progreso-label {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
    color: #cbd5e1 !important;
    font-size: 12px;
}

.estadisticas-page .estadistica-rol-progreso-label strong {
    color: var(--estadistica-rol-color, #a5b4fc) !important;
}

.estadisticas-page .estadistica-rol-track {
    height: 8px;
    margin-bottom: 20px;
    overflow: hidden;
    border-radius: 999px;
    background: #0f172a;
}

.estadisticas-page .estadistica-rol-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--estadistica-rol-color, #6366f1);
}

.estadisticas-page .estadistica-rol-metricas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.estadisticas-page .estadistica-rol-metricas > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px;
    border-radius: 12px;
    background: #192538;
}

.estadisticas-page .estadistica-rol-metricas strong {
    color: #f8fafc !important;
    font-size: 19px;
}

.estadisticas-page .estadistica-rol-metricas span {
    color: #94a3b8 !important;
    font-size: 11px;
    line-height: 1.4;
}

.estadisticas-page .estadistica-rol-semana {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 0;
    border-top: 1px solid #334155;
    color: #94a3b8 !important;
    font-size: 12px;
}

.estadisticas-page .estadistica-rol-semana strong {
    color: #e2e8f0 !important;
}

.estadisticas-page .estadistica-rol-enlace {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 14px;
    color: var(--estadistica-rol-color, #a5b4fc) !important;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.estadisticas-page .estadistica-rol-enlace:hover {
    text-decoration: underline;
}

.estadisticas-page .estadisticas-aclaracion {
    margin: 20px 0 0;
    color: #94a3b8 !important;
    font-size: 12px;
    line-height: 1.6;
}

/* Tablet. */
@media (max-width: 1100px) {
    .estadisticas-page .estadisticas-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .estadisticas-page .estadisticas-roles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Móvil. */
@media (max-width: 767px) {
    body:has(.estadisticas-page) .app-dashboard { display: block; }
    body:has(.estadisticas-page) .app-sidebar {
        position: relative;
        inset: auto;
        width: 100%;
        min-height: 0;
        padding: 20px 16px;
    }
    body:has(.estadisticas-page) .app-sidebar nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    body:has(.estadisticas-page) .app-content {
        width: 100%;
        margin-left: 0;
        padding: 24px 16px 36px;
    }
    .estadisticas-page .estadisticas-heading,
    .estadisticas-page .estadisticas-panel-heading {
        align-items: flex-start;
        flex-direction: column;
    }
    .estadisticas-page .estadisticas-periodo { align-self: flex-start; }
    .estadisticas-page .estadisticas-kpis,
    .estadisticas-page .estadisticas-roles-grid { grid-template-columns: 1fr; }
    .estadisticas-page .estadistica-card { min-height: 155px; }
    .estadisticas-page .estadisticas-panel { padding: 18px 14px; }
    .estadisticas-page .estadisticas-grafico { gap: 7px; padding-inline: 2px; }
}


/* =========================================
   CORRECCIÓN: PÁGINAS DE OBJETIVOS
   ========================================= */

.single-objetivos .app-dashboard {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

.single-objetivos .app-content {
    width: 100%;
    max-width: none;
    margin-left: 0 !important;
    padding: 35px 40px;
    box-sizing: border-box;
}

/* Adaptación a móviles */
@media (max-width: 768px) {
    .single-objetivos .app-content {
        padding: 20px 16px;
    }
}


/* =========================================
   OBJETIVOS: DISEÑO A PANTALLA COMPLETA
   ========================================= */

body.single-objetivos #masthead,
body.single-objetivos .site-header,
body.single-objetivos #colophon,
body.single-objetivos .site-footer {
    display: none !important;
}

body.single-objetivos .site-content,
body.single-objetivos #primary,
body.single-objetivos #main,
body.single-objetivos .ast-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.single-objetivos .app-content {
    width: 100% !important;
    margin: 0 !important;
    padding: 35px 40px !important;
    box-sizing: border-box;
}

body.single-objetivos .app-dashboard {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (max-width: 768px) {
    body.single-objetivos .app-content {
        padding: 20px 16px !important;
    }
}


/* =====================================================
   OBJETIVOS: ELIMINAR CABECERA ASTRA Y ESPACIOS
   ===================================================== */

/* Ocultar cabecera y pie del tema Astra */
body.single-objetivos #masthead,
body.single-objetivos .site-header,
body.single-objetivos #colophon,
body.single-objetivos .site-footer {
    display: none !important;
}

/* Eliminar márgenes y espacios del contenedor Astra */
body.single-objetivos #page,
body.single-objetivos .site,
body.single-objetivos .site-content,
body.single-objetivos .ast-container,
body.single-objetivos #primary,
body.single-objetivos #main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #0f172a !important;
}

/* La página de objetivos no utiliza una barra lateral propia */
body.single-objetivos .app-dashboard {
    display: block !important;
    width: 100% !important;
    min-height: 100vh;
    margin: 0 !important;
    padding: 0 !important;
    background: #0f172a !important;
}

/* Contenido a pantalla completa, sin desplazamiento lateral */
body.single-objetivos .app-content {
    display: block;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    min-height: 100vh;
    margin: 0 !important;
    padding: 35px 40px !important;
    box-sizing: border-box;
    background: #0f172a !important;
}

@media (max-width: 768px) {
    body.single-objetivos .app-content {
        padding: 20px 16px !important;
    }
}

/* CORRECCIÓN CABECERA ASTRA EN OBJETIVOS */
body.single-objetivos #masthead,
body.single-objetivos .site-header,
body.single-objetivos .ast-primary-header-bar,
body.single-objetivos .site-header-primary-section,
body.single-objetivos .ast-builder-grid-row,
body.single-objetivos .ast-above-header,
body.single-objetivos .ast-below-header {
    display: none !important;
}

/* Eliminar el espacio superior de la página */
body.single-objetivos #content,
body.single-objetivos .site-content,
body.single-objetivos #primary,
body.single-objetivos #main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* OCULTAR CABECERA ASTRA EN LA PLANTILLA DE OBJETIVOS */
body.page-template-page-objetivos #masthead,
body.page-template-page-objetivos .site-header,
body.page-template-page-objetivos .ast-primary-header-bar,
body.page-template-page-objetivos .ast-main-header-wrap,
body.page-template-page-objetivos .ast-mobile-header-wrap {
    display: none !important;
}

/* ELIMINAR ESPACIO SUPERIOR */
body.page-template-page-objetivos #content,
body.page-template-page-objetivos .site-content,
body.page-template-page-objetivos .ast-container,
body.page-template-page-objetivos #primary,
body.page-template-page-objetivos #main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* =========================================================
   OBJETIVOS PRO — estilos aislados para la página Objetivos
   Añadir al FINAL del style.css actual. No sustituye estilos.
========================================================= */
body:has(.objetivos-pro-page) #masthead,
body:has(.objetivos-pro-page) #colophon,
body:has(.objetivos-pro-page) .ast-primary-header-bar,
body:has(.objetivos-pro-page) .ast-above-header,
body:has(.objetivos-pro-page) .ast-below-header {
    display: none !important;
}
body:has(.objetivos-pro-page) .site-content,
body:has(.objetivos-pro-page) .ast-container,
body:has(.objetivos-pro-page) #primary,
body:has(.objetivos-pro-page) .content-area {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}
body:has(.objetivos-pro-page) #content { margin: 0; }
.objetivos-pro-page { min-height: 100vh; background: #0b1220; color: #f8fafc; }
.objetivos-pro-content { box-sizing: border-box; width: 100%; max-width: 1480px; margin: 0 auto; padding: 38px clamp(18px, 3vw, 44px) 56px; }
.objetivos-pro-header { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:0 0 28px; }
.objetivos-pro-eyebrow { display:block; color:#8b9ab3; font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.objetivos-pro-header h1 { margin:7px 0 8px; color:#f8fafc; font-size:clamp(28px,3vw,38px); line-height:1.15; letter-spacing:-.035em; }
.objetivos-pro-header p,.objetivos-pro-rol-top p,.objetivos-pro-section-heading p { margin:0; color:#94a3b8; font-size:13px; line-height:1.65; }
.objetivos-pro-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:43px; padding:0 17px; border:1px solid transparent; border-radius:11px; font-family:inherit; font-size:13px; font-weight:700; line-height:1.2; text-decoration:none; cursor:pointer; transition:transform .18s ease,background .18s ease,border-color .18s ease; }
.objetivos-pro-btn:hover { transform:translateY(-1px); }
.objetivos-pro-btn-primary { background:linear-gradient(135deg,#6366f1,#4f46e5); color:#fff!important; box-shadow:0 8px 22px rgba(79,70,229,.22); }
.objetivos-pro-btn-primary:hover { background:linear-gradient(135deg,#7779ff,#5b55ee); }
.objetivos-pro-btn-secondary { border-color:#34445e; background:#151f31; color:#dbe4f3!important; }
.objetivos-pro-rol-panel { margin-bottom:22px; padding:24px 26px 20px; border:1px solid #2c3a53; border-radius:18px; background:linear-gradient(120deg,#18243a,#111b2d 72%); box-shadow:0 12px 28px rgba(0,0,0,.12); }
.objetivos-pro-rol-top { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.objetivos-pro-rol-top h2 { margin:6px 0 5px; color:#f8fafc; font-size:22px; letter-spacing:-.025em; }
.objetivos-pro-rol-score { text-align:right; white-space:nowrap; }
.objetivos-pro-rol-score strong { display:block; color:#fff; font-size:25px; letter-spacing:-.04em; }
.objetivos-pro-rol-score strong span { color:#8493ad; font-size:15px; font-weight:600; }
.objetivos-pro-rol-score small { color:#94a3b8; font-size:11px; }
.objetivos-pro-progress-track { overflow:hidden; height:8px; margin-top:22px; border-radius:99px; background:#28354a; }
.objetivos-pro-progress-track span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#818cf8,#34d399); transition:width .25s ease; }
.objetivos-pro-progress-caption { display:flex; justify-content:space-between; gap:12px; margin-top:9px; color:#94a3b8; font-size:11px; }
.objetivos-pro-progress-caption strong { color:#c7d2fe; }
.objetivos-pro-overview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:0 0 34px; }
.objetivos-pro-stat-card { display:flex; align-items:center; gap:15px; min-width:0; padding:19px; border:1px solid #26344b; border-radius:15px; background:#111b2d; }
.objetivos-pro-stat-icon { display:flex; align-items:center; justify-content:center; flex:0 0 43px; width:43px; height:43px; border-radius:13px; font-size:22px; }
.objetivos-pro-icon-violet { color:#a5b4fc; background:rgba(99,102,241,.16); }
.objetivos-pro-icon-green { color:#6ee7b7; background:rgba(16,185,129,.13); }
.objetivos-pro-icon-amber { color:#fcd34d; background:rgba(245,158,11,.13); }
.objetivos-pro-stat-label { display:block; margin-bottom:3px; color:#94a3b8; font-size:11px; }
.objetivos-pro-stat-card strong { display:block; color:#f8fafc; font-size:25px; line-height:1.25; letter-spacing:-.035em; }
.objetivos-pro-stat-card small { display:block; margin-top:3px; color:#73829b; font-size:10px; }
.objetivos-pro-list-section { margin-top:4px; }
.objetivos-pro-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:18px; }
.objetivos-pro-section-heading h2 { margin:0 0 5px; color:#f8fafc; font-size:22px; letter-spacing:-.025em; }
.objetivos-pro-count { padding:6px 10px; border:1px solid #29374e; border-radius:9px; color:#aab8cd; background:#111b2d; font-size:11px; white-space:nowrap; }
.objetivos-pro-form-panel { margin:0 0 22px; padding:23px; border:1px solid #33435f; border-radius:16px; background:#111b2d; }
.objetivos-pro-form-panel[hidden] { display:none!important; }
.objetivos-pro-form-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; }
.objetivos-pro-form-heading h3 { margin:0 0 5px; color:#f8fafc; font-size:18px; }
.objetivos-pro-form-heading p { margin:0; color:#94a3b8; font-size:12px; }
.objetivos-pro-close { width:32px; height:32px; border:1px solid #34445e; border-radius:9px; background:#172338; color:#cbd5e1; font-size:22px; line-height:1; cursor:pointer; }
.objetivos-pro-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.objetivos-pro-field { display:flex; flex-direction:column; gap:7px; min-width:0; }
.objetivos-pro-field-full { grid-column:1/-1; }
.objetivos-pro-field>span { color:#cbd5e1; font-size:12px; font-weight:700; }
.objetivos-pro-field em { color:#fca5a5; font-style:normal; }
.objetivos-pro-field input,.objetivos-pro-field textarea { box-sizing:border-box; width:100%; min-height:43px; padding:11px 12px; border:1px solid #34445e!important; border-radius:10px!important; outline:none; background:#0b1424!important; color:#f1f5f9!important; box-shadow:none!important; font-family:inherit; font-size:13px; font-weight:400; line-height:1.5; }
.objetivos-pro-field textarea { min-height:92px; resize:vertical; }
.objetivos-pro-field input:focus,.objetivos-pro-field textarea:focus { border-color:#818cf8!important; box-shadow:0 0 0 3px rgba(99,102,241,.13)!important; }
.objetivos-pro-field input::placeholder,.objetivos-pro-field textarea::placeholder { color:#64748b; }
.objetivos-pro-form-actions { grid-column:1/-1; display:flex; justify-content:flex-end; gap:10px; margin-top:4px; }
.objetivos-pro-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.objetivos-pro-card { display:flex; flex-direction:column; min-width:0; min-height:220px; padding:20px; border:1px solid #29374e; border-radius:16px; background:linear-gradient(160deg,#141f32,#101929); color:#f8fafc!important; text-decoration:none!important; box-shadow:0 8px 20px rgba(0,0,0,.09); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.objetivos-pro-card:hover { transform:translateY(-3px); border-color:#5966a5; box-shadow:0 14px 28px rgba(0,0,0,.2); }
.objetivos-pro-card.is-complete { border-color:#245747; background:linear-gradient(160deg,#122b2b,#101d2b); }
.objetivos-pro-card-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:17px; }
.objetivos-pro-card-symbol { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:11px; background:rgba(99,102,241,.15); color:#a5b4fc; font-size:21px; }
.objetivos-pro-card.is-complete .objetivos-pro-card-symbol { background:rgba(16,185,129,.15); color:#6ee7b7; }
.objetivos-pro-status { padding:5px 8px; border-radius:7px; background:rgba(245,158,11,.1); color:#fcd34d; font-size:10px; font-weight:700; }
.objetivos-pro-status.is-complete { background:rgba(16,185,129,.12); color:#6ee7b7; }
.objetivos-pro-card h3 { margin:0 0 8px; color:#f8fafc; font-size:17px; line-height:1.35; letter-spacing:-.02em; overflow-wrap:anywhere; }
.objetivos-pro-card-description { margin:0 0 18px; color:#a0aec2; font-size:12px; line-height:1.65; }
.objetivos-pro-muted { color:#71819a; }
.objetivos-pro-card-meta { display:flex; align-items:center; gap:14px; margin-top:auto; padding-top:14px; border-top:1px solid #26344a; color:#8f9db3; font-size:11px; }
.objetivos-pro-card-meta span:first-child { color:#c7d2fe; }
.objetivos-pro-card-meta strong { color:#c7d2fe; font-size:13px; }
.objetivos-pro-card-deadline { margin-top:11px; color:#8492a8; font-size:11px; }
.objetivos-pro-card-deadline span { margin-right:5px; }
.objetivos-pro-card-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:17px; color:#a5b4fc; font-size:11px; font-weight:800; }
.objetivos-pro-card-footer span:last-child { font-size:17px; transition:transform .18s ease; }
.objetivos-pro-card:hover .objetivos-pro-card-footer span:last-child { transform:translateX(3px); }
.objetivos-pro-empty { padding:46px 20px; border:1px dashed #34445e; border-radius:16px; background:rgba(17,27,45,.6); text-align:center; }
.objetivos-pro-empty>span { display:block; color:#a5b4fc; font-size:35px; }
.objetivos-pro-empty h3 { margin:10px 0 7px; color:#f8fafc; font-size:18px; }
.objetivos-pro-empty p { max-width:480px; margin:0 auto 18px; color:#94a3b8; font-size:12px; line-height:1.7; }
@media(max-width:1050px) { .objetivos-pro-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) { .objetivos-pro-content { padding:25px 16px 40px; } .objetivos-pro-header { align-items:flex-start; flex-direction:column; gap:18px; } .objetivos-pro-overview { grid-template-columns:1fr; gap:10px; margin-bottom:28px; } .objetivos-pro-stat-card { padding:15px; } .objetivos-pro-rol-panel { padding:19px; } .objetivos-pro-grid { grid-template-columns:1fr; } .objetivos-pro-card { min-height:0; } .objetivos-pro-section-heading { align-items:flex-start; flex-direction:column; gap:10px; } .objetivos-pro-form { grid-template-columns:1fr; } .objetivos-pro-field-full,.objetivos-pro-form-actions { grid-column:1; } .objetivos-pro-form-actions { flex-wrap:wrap; } }
@media(max-width:420px) { .objetivos-pro-rol-top { align-items:flex-start; flex-direction:column; } .objetivos-pro-rol-score { text-align:left; } .objetivos-pro-form-actions .objetivos-pro-btn { flex:1; } }


/* =========================================================
   REDISEÑO FASE 1 — OBJETIVO PRINCIPAL Y TARJETAS DE MISIONES
   Aislado a la página individual de objetivos. No cambia PHP.
   ========================================================= */
body.single-objetivos .app-content > h1 {
    max-width: 1100px;
    margin: 0 auto 8px !important;
    color: #f8fafc !important;
    font-size: clamp(28px, 3vw, 42px) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -.035em;
    overflow-wrap: anywhere;
}
body.single-objetivos .app-content > h1 + p {
    max-width: 1100px;
    margin: 0 auto 28px !important;
    color: #aebbd0 !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
}
body.single-objetivos .app-content > h2 {
    max-width: 1300px;
    margin: 30px auto 14px !important;
    color: #f8fafc !important;
    font-size: clamp(22px, 2vw, 27px) !important;
    font-weight: 800 !important;
    line-height: 1.25;
    letter-spacing: -.025em;
}
body.single-objetivos .app-content > h2::first-letter {
    color: #a5b4fc;
}

/* Panel para crear misión: conserva el botón y el formulario existentes. */
body.single-objetivos .app-content > .dashboard-card:has(#toggle-mision) {
    max-width: 1300px;
    margin: 0 auto 30px !important;
    padding: 24px 26px !important;
    border: 1px solid #34445f !important;
    border-radius: 20px !important;
    background: linear-gradient(135deg, #1b2940 0%, #172338 100%) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.025) !important;
}
body.single-objetivos #toggle-mision,
body.single-objetivos #form-mision button[name="crear_mision"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 12px 19px !important;
    border: 1px solid rgba(199,210,254,.35) !important;
    border-radius: 11px !important;
    background: linear-gradient(135deg, #7167f5 0%, #5145df 100%) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 750 !important;
    line-height: 1.2;
    box-shadow: 0 7px 18px rgba(79,70,229,.24) !important;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
body.single-objetivos #toggle-mision:hover,
body.single-objetivos #form-mision button[name="crear_mision"]:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 11px 24px rgba(79,70,229,.32) !important;
}
body.single-objetivos #toggle-mision:focus-visible,
body.single-objetivos #form-mision button:focus-visible,
body.single-objetivos .dashboard-grid > a.dashboard-card:focus-visible {
    outline: 3px solid #a5b4fc !important;
    outline-offset: 3px;
}

/* Formulario desplegable, sin modificar sus campos ni su envío. */
body.single-objetivos #form-mision {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid #34445e;
}
body.single-objetivos #form-mision h3 {
    margin: 0 0 18px !important;
    color: #f8fafc !important;
    font-size: 20px !important;
    font-weight: 800;
}
body.single-objetivos #form-mision p {
    margin: 0 0 16px !important;
    color: #cbd5e1 !important;
    line-height: 1.5;
}
body.single-objetivos #form-mision label {
    display: inline-block;
    margin-bottom: 7px;
    color: #cbd5e1 !important;
    font-size: 13px;
    font-weight: 700;
}
body.single-objetivos #form-mision input,
body.single-objetivos #form-mision textarea,
body.single-objetivos #form-mision select {
    box-sizing: border-box;
    max-width: 100%;
    padding: 12px 13px !important;
    border: 1px solid #3a4a65 !important;
    border-radius: 10px !important;
    background: #0e1829 !important;
    color: #f1f5f9 !important;
    box-shadow: none !important;
    font: inherit;
}
body.single-objetivos #form-mision input:focus,
body.single-objetivos #form-mision textarea:focus,
body.single-objetivos #form-mision select:focus {
    border-color: #818cf8 !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(129,140,248,.15) !important;
}
body.single-objetivos #form-mision input::placeholder,
body.single-objetivos #form-mision textarea::placeholder {
    color: #73829a !important;
}

/* Cuadrícula de misiones. */
body.single-objetivos .app-content > .dashboard-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px !important;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto !important;
    align-items: stretch;
}
body.single-objetivos .app-content > .dashboard-grid > a.dashboard-card {
    position: relative;
    display: flex !important;
    flex-direction: column;
    min-width: 0;
    min-height: 245px;
    margin: 0 !important;
    padding: 24px 24px 20px !important;
    overflow: hidden;
    border: 1px solid #26354c !important;
    border-left: 4px solid #475569 !important;
    border-radius: 19px !important;
    background: linear-gradient(155deg, #1b2940 0%, #151f31 70%, #131c2c 100%) !important;
    color: #f8fafc !important;
    text-decoration: none !important;
    box-shadow: 0 10px 25px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.025) !important;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
body.single-objetivos .app-content > .dashboard-grid > a.dashboard-card::before {
    position: absolute;
    top: 0;
    right: 0;
    width: 105px;
    height: 105px;
    border-radius: 0 0 0 100%;
    background: radial-gradient(circle at top right, rgba(129,140,248,.13), transparent 72%);
    content: "";
    pointer-events: none;
}
body.single-objetivos .app-content > .dashboard-grid > a.dashboard-card:hover {
    transform: translateY(-5px);
    border-color: #465b7a !important;
    border-left-color: #818cf8 !important;
    background: linear-gradient(155deg, #22324b 0%, #19263a 100%) !important;
    box-shadow: 0 18px 34px rgba(0,0,0,.25), 0 0 0 1px rgba(129,140,248,.08) !important;
}
body.single-objetivos .app-content > .dashboard-grid > a.dashboard-card h3 {
    position: relative;
    margin: 0 0 11px !important;
    color: #f8fafc !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
}
body.single-objetivos .app-content > .dashboard-grid > a.dashboard-card p {
    position: relative;
    margin: 0 0 14px !important;
    color: #b8c5d8 !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
}
body.single-objetivos .app-content > .dashboard-grid > a.dashboard-card p strong {
    display: inline-flex;
    align-items: center;
    margin-top: 4px;
    padding: 7px 10px;
    border: 1px solid rgba(165,180,252,.16);
    border-radius: 9px;
    background: rgba(99,102,241,.12);
    color: #c7d2fe !important;
    font-size: 13px;
    font-weight: 800;
}
body.single-objetivos .app-content > .dashboard-grid > a.dashboard-card p[style*="color"] {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-top: auto !important;
    margin-bottom: 0 !important;
    padding: 7px 10px;
    border: 1px solid rgba(34,197,94,.2);
    border-radius: 9px;
    background: rgba(34,197,94,.1);
    color: #86efac !important;
    font-size: 12px !important;
    font-weight: 750;
}
body.single-objetivos .app-content > .dashboard-grid > a.dashboard-card.objetivo-completado {
    border-left-color: #22c55e !important;
    background: linear-gradient(155deg, #19332f 0%, #172a2c 55%, #151f30 100%) !important;
}
body.single-objetivos .app-content > .dashboard-grid > a.dashboard-card.objetivo-completado:hover {
    border-color: #2c6b54 !important;
    border-left-color: #4ade80 !important;
}

@media (max-width: 1000px) {
    body.single-objetivos .app-content > .dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    body.single-objetivos .app-content > h1 { font-size: 29px !important; }
    body.single-objetivos .app-content > h1 + p { margin-bottom: 22px !important; font-size: 14px !important; }
    body.single-objetivos .app-content > .dashboard-card:has(#toggle-mision) { padding: 18px !important; border-radius: 15px !important; }
    body.single-objetivos .app-content > .dashboard-grid { grid-template-columns: 1fr; gap: 14px !important; }
    body.single-objetivos .app-content > .dashboard-grid > a.dashboard-card { min-height: 0; padding: 21px !important; }
    body.single-objetivos .app-content > .dashboard-grid > a.dashboard-card h3 { font-size: 18px !important; }
}
@media (prefers-reduced-motion: reduce) {
    body.single-objetivos .app-content > .dashboard-grid > a.dashboard-card,
    body.single-objetivos #toggle-mision,
    body.single-objetivos #form-mision button[name="crear_mision"] { transition: none !important; }
}

/* FASE 2: página individual de misión secundaria. Solo afecta a la tarjeta
   de misión dentro del contenido de single-objetivos.php. */
body.single-objetivos .app-content > .dashboard-card {
    width: min(100%, 980px);
    margin: 18px auto 32px !important;
    padding: clamp(22px, 4vw, 40px) !important;
    color: #f3f6fc !important;
    background: linear-gradient(145deg, #1b2a41 0%, #172337 100%) !important;
    border: 1px solid rgba(148, 163, 184, .20) !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .20) !important;
}
body.single-objetivos .app-content > .dashboard-card h1,
body.single-objetivos .app-content > .dashboard-card h2,
body.single-objetivos .app-content > .dashboard-card h3 {
    color: #f8fafc !important;
    line-height: 1.2;
}
body.single-objetivos .app-content > .dashboard-card p,
body.single-objetivos .app-content > .dashboard-card .objetivo-meta,
body.single-objetivos .app-content > .dashboard-card .objetivo-meta span {
    color: #b9c6d8;
    line-height: 1.75;
}
body.single-objetivos .app-content > .dashboard-card .progress-bar {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #0d1728;
}
body.single-objetivos .app-content > .dashboard-card .progress-fill {
    min-height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, #818cf8, #34d399);
    transition: width .35s ease;
}
body.single-objetivos .app-content > .dashboard-card .objetivo-meta span {
    display: inline-flex;
    margin: 6px 8px 6px 0;
    padding: 8px 12px;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 10px;
    background: #202f46;
}
body.single-objetivos .app-content > .dashboard-card .btn-primary,
body.single-objetivos .app-content > .dashboard-card .btn-secondary {
    min-height: 44px;
    padding: 11px 17px;
    border-radius: 12px;
    font-weight: 750;
    cursor: pointer;
}
body.single-objetivos .app-content > .dashboard-card .btn-primary {
    color: #fff !important;
    background: linear-gradient(135deg, #7779ff, #5145e5) !important;
    border: 1px solid rgba(165, 180, 252, .35) !important;
    box-shadow: 0 8px 20px rgba(79, 70, 229, .22);
}
body.single-objetivos .app-content > .dashboard-card .btn-secondary {
    color: #e2e8f0 !important;
    background: #26364e !important;
    border: 1px solid rgba(148, 163, 184, .22) !important;
}
body.single-objetivos .app-content > .dashboard-card .btn-primary:hover,
body.single-objetivos .app-content > .dashboard-card .btn-secondary:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}
@media (max-width: 640px) {
    body.single-objetivos .app-content > .dashboard-card {
        padding: 20px !important;
        border-radius: 17px !important;
    }
}

/* =========================================================
   AJUSTE VISUAL FINAL — MISIÓN INDIVIDUAL
   Restringido a single-objetivos para no alterar listados/Dashboard.
   Utiliza las clases del template compartido: dashboard-card,
   progress-bar, progress-fill, objetivo-meta y botones existentes.
   ========================================================= */
body.single-objetivos .app-dashboard > .app-content > .dashboard-card {
    width: min(100%, 980px);
    margin: 0 auto 28px;
    padding: clamp(22px, 4vw, 40px);
    box-sizing: border-box;
    color: #f3f6fc;
    background: linear-gradient(145deg, #1b2a41 0%, #172337 100%);
    border: 1px solid rgba(148, 163, 184, .19);
    border-radius: 22px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .18);
}

body.single-objetivos .app-dashboard > .app-content .dashboard-card h1,
body.single-objetivos .app-dashboard > .app-content .dashboard-card h2,
body.single-objetivos .app-dashboard > .app-content .dashboard-card h3 {
    color: #f3f6fc;
    line-height: 1.22;
    letter-spacing: -.025em;
}

body.single-objetivos .app-dashboard > .app-content .dashboard-card h1 {
    margin: 0 0 10px;
    font-size: clamp(1.7rem, 3.8vw, 2.45rem);
}

body.single-objetivos .app-dashboard > .app-content .dashboard-card p {
    color: #c0cad9;
    line-height: 1.75;
}

body.single-objetivos .app-dashboard > .app-content .dashboard-card .progress-bar {
    height: 10px;
    overflow: hidden;
    margin: 16px 0 10px;
    border-radius: 999px;
    background: #0d1728;
}

body.single-objetivos .app-dashboard > .app-content .dashboard-card .progress-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #818cf8, #34d399);
    transition: width .3s ease;
}

body.single-objetivos .app-dashboard > .app-content .dashboard-card .objetivo-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 22px 0;
}

body.single-objetivos .app-dashboard > .app-content .dashboard-card .objetivo-meta > *,
body.single-objetivos .app-dashboard > .app-content .dashboard-card .objetivo-meta span {
    padding: 9px 12px;
    color: #dbe5f5;
    background: #202f46;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 12px;
}

body.single-objetivos .app-dashboard > .app-content .dashboard-card .btn-primary,
body.single-objetivos .app-dashboard > .app-content .dashboard-card .btn-secondary {
    min-height: 46px;
    padding: 12px 18px;
    border-radius: 12px;
    font-weight: 750;
    cursor: pointer;
    transition: transform .18s ease, filter .18s ease;
}

body.single-objetivos .app-dashboard > .app-content .dashboard-card .btn-primary {
    color: #fff;
    background: linear-gradient(135deg, #7779ff, #5145e5);
    border: 1px solid rgba(165, 180, 252, .25);
    box-shadow: 0 8px 20px rgba(79, 70, 229, .2);
}

body.single-objetivos .app-dashboard > .app-content .dashboard-card .btn-secondary {
    color: #e2e8f0;
    background: #26364e;
    border: 1px solid rgba(148, 163, 184, .2);
}

body.single-objetivos .app-dashboard > .app-content .dashboard-card .btn-primary:hover,
body.single-objetivos .app-dashboard > .app-content .dashboard-card .btn-secondary:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

body.single-objetivos .app-dashboard > .app-content .dashboard-card button:focus-visible {
    outline: 3px solid #a5b4fc;
    outline-offset: 3px;
}

@media (max-width: 640px) {
    body.single-objetivos .app-dashboard > .app-content > .dashboard-card {
        padding: 20px;
        border-radius: 17px;
    }

    body.single-objetivos .app-dashboard > .app-content .dashboard-card .objetivo-meta {
        align-items: stretch;
        flex-direction: column;
    }

    body.single-objetivos .app-dashboard > .app-content .dashboard-card form {
        margin-bottom: 12px;
    }

    body.single-objetivos .app-dashboard > .app-content .dashboard-card form button {
        width: 100%;
    }
}


/* AJUSTE VISUAL — PROGRESO, RECOMPENSA Y ACCIONES
   Solo afecta al detalle individual de misión. */
body.single-objetivos .mission-detail-page .mission-detail-progress {
    display: block;
    padding: 22px;
    margin: 26px 0 18px;
    background: linear-gradient(135deg, rgba(32,47,70,.96), rgba(19,31,49,.96));
    border: 1px solid rgba(148,163,184,.2);
    border-radius: 17px;
}
body.single-objetivos .mission-detail-page .mission-detail-progress-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
body.single-objetivos .mission-detail-page .mission-detail-progress-top strong {
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}
body.single-objetivos .mission-detail-page .mission-detail-points {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 4px 0 0;
    padding: 13px 16px;
    border-radius: 14px;
    color: #ddd6fe;
    background: linear-gradient(135deg, rgba(99,102,241,.18), rgba(79,70,229,.09));
    border: 1px solid rgba(129,140,248,.3);
    font-size: 1rem;
    font-weight: 800;
}
body.single-objetivos .mission-detail-page .mission-detail-actions {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid rgba(148,163,184,.18);
}
body.single-objetivos .mission-detail-page .mission-detail-actions form { display: inline-flex; margin: 0; }
body.single-objetivos .mission-detail-page .mission-detail-actions button {
    min-height: 46px;
    padding: 12px 18px;
    border-radius: 12px;
    font-weight: 750;
    line-height: 1.3;
}
body.single-objetivos .mission-detail-page .mission-detail-actions .btn-primary {
    background: linear-gradient(135deg, #7779ff, #5145e5);
    border: 1px solid rgba(199,210,254,.18);
    color: #fff;
    box-shadow: 0 8px 20px rgba(79,70,229,.2);
}
body.single-objetivos .mission-detail-page .mission-detail-actions .btn-secondary {
    background: #26364e;
    border: 1px solid rgba(148,163,184,.22);
    color: #e8eef8;
}
@media (max-width: 640px) {
    body.single-objetivos .mission-detail-page .mission-detail-progress { padding: 16px; }
    body.single-objetivos .mission-detail-page .mission-detail-actions { flex-direction: column; align-items: stretch; }
    body.single-objetivos .mission-detail-page .mission-detail-actions form,
    body.single-objetivos .mission-detail-page .mission-detail-actions button { width: 100%; }
}


/* =========================================================
   AJUSTE FINAL — PROGRESO Y RECOMPENSA
   Solo página individual de misión; no cambia cálculos ni formularios.
   ========================================================= */
body.single-objetivos .mission-detail-page .mission-detail-progress {
    padding: 22px;
    margin: 26px 0 18px;
    background: linear-gradient(145deg, #202f46, #172337);
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 17px;
}
body.single-objetivos .mission-detail-page .mission-detail-progress-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}
body.single-objetivos .mission-detail-page .mission-detail-progress-top strong {
    color: #f3f6fc;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}
body.single-objetivos .mission-detail-page .mission-detail-points {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 16px;
    margin: 8px 0 0;
    color: #ddd6fe;
    background: linear-gradient(135deg, rgba(99,102,241,.2), rgba(79,70,229,.1));
    border: 1px solid rgba(129,140,248,.3);
    border-radius: 14px;
    font-weight: 800;
}
body.single-objetivos .mission-detail-page .mission-detail-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid rgba(148,163,184,.18);
}
body.single-objetivos .mission-detail-page .mission-detail-actions form {
    display: inline-flex;
    margin: 0;
}
body.single-objetivos .mission-detail-page .mission-detail-actions button {
    min-height: 46px;
    padding: 12px 18px;
    border-radius: 12px;
    font-weight: 750;
}
body.single-objetivos .mission-detail-page .mission-detail-actions .btn-primary {
    color: #fff;
    background: linear-gradient(135deg, #7779ff, #5145e5);
    border: 1px solid rgba(199,210,254,.18);
    box-shadow: 0 8px 20px rgba(79,70,229,.2);
}
body.single-objetivos .mission-detail-page .mission-detail-actions .btn-secondary {
    color: #e8eef8;
    background: #26364e;
    border: 1px solid rgba(148,163,184,.22);
}
body.single-objetivos .mission-detail-page .mission-detail-actions button:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}
body.single-objetivos .mission-detail-page .mission-detail-actions button:focus-visible {
    outline: 3px solid #a5b4fc;
    outline-offset: 3px;
}
@media (max-width: 640px) {
    body.single-objetivos .mission-detail-page .mission-detail-progress { padding: 16px; }
    body.single-objetivos .mission-detail-page .mission-detail-actions {
        flex-direction: column;
        align-items: stretch;
    }
    body.single-objetivos .mission-detail-page .mission-detail-actions form,
    body.single-objetivos .mission-detail-page .mission-detail-actions button {
        width: 100%;
    }
}


/* =========================================================
   AJUSTE CORREGIDO — SELECTORES REALES DE secundario.php
   Aplica a la página individual de objetivos/misiones.
   Usa las clases existentes: dashboard-card, progress-bar,
   progress-fill, objetivo-meta, btn-primary y btn-secondary.
   No modifica HTML, formularios ni lógica PHP.
   ========================================================= */
body.single-objetivos .app-dashboard .app-content > .dashboard-card {
    box-sizing: border-box;
    width: min(100%, 1040px);
    margin: 0 auto 28px;
    padding: clamp(22px, 3.8vw, 38px);
    color: #f3f6fc;
    background: linear-gradient(145deg, #1b2a41 0%, #172337 100%);
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 22px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .18);
}

body.single-objetivos .app-dashboard .app-content > .dashboard-card h1,
body.single-objetivos .app-dashboard .app-content > .dashboard-card h2,
body.single-objetivos .app-dashboard .app-content > .dashboard-card h3 {
    color: #f7f9ff;
    line-height: 1.2;
    letter-spacing: -.02em;
}

body.single-objetivos .app-dashboard .app-content > .dashboard-card p {
    color: #d5deec;
    line-height: 1.7;
}

body.single-objetivos .app-dashboard .app-content > .dashboard-card .progress-bar {
    height: 10px;
    margin: 18px 0 10px;
    overflow: hidden;
    background: #0d1728;
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 999px;
}

body.single-objetivos .app-dashboard .app-content > .dashboard-card .progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #818cf8 0%, #34d399 100%);
    transition: width .3s ease;
}

body.single-objetivos .app-dashboard .app-content > .dashboard-card .objetivo-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 22px 0;
}

body.single-objetivos .app-dashboard .app-content > .dashboard-card .objetivo-meta > span {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    box-sizing: border-box;
    padding: 10px 13px;
    color: #e2eaf6;
    background: #202f46;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 12px;
    font-size: .9rem;
}

body.single-objetivos .app-dashboard .app-content > .dashboard-card strong,
body.single-objetivos .app-dashboard .app-content > .dashboard-card .puntos,
body.single-objetivos .app-dashboard .app-content > .dashboard-card .puntos-objetivo {
    color: #ddd6fe;
    font-weight: 800;
}

body.single-objetivos .app-dashboard .app-content > .dashboard-card form {
    display: inline-flex;
    margin: 10px 10px 0 0;
}

body.single-objetivos .app-dashboard .app-content > .dashboard-card form button,
body.single-objetivos .app-dashboard .app-content > .dashboard-card form input[type="submit"] {
    min-height: 46px;
    padding: 12px 18px;
    border-radius: 12px;
    font-weight: 750;
    line-height: 1.3;
    cursor: pointer;
    transition: transform .18s ease, filter .18s ease;
}

body.single-objetivos .app-dashboard .app-content > .dashboard-card form .btn-primary,
body.single-objetivos .app-dashboard .app-content > .dashboard-card form button.btn-primary {
    color: #fff;
    background: linear-gradient(135deg, #7779ff, #5145e5);
    border: 1px solid rgba(199, 210, 254, .18);
    box-shadow: 0 8px 20px rgba(79, 70, 229, .2);
}

body.single-objetivos .app-dashboard .app-content > .dashboard-card form .btn-secondary,
body.single-objetivos .app-dashboard .app-content > .dashboard-card form button.btn-secondary {
    color: #e8eef8;
    background: #26364e;
    border: 1px solid rgba(148, 163, 184, .24);
}

body.single-objetivos .app-dashboard .app-content > .dashboard-card form button:hover,
body.single-objetivos .app-dashboard .app-content > .dashboard-card form input[type="submit"]:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

body.single-objetivos .app-dashboard .app-content > .dashboard-card form button:focus-visible,
body.single-objetivos .app-dashboard .app-content > .dashboard-card form input[type="submit"]:focus-visible {
    outline: 3px solid #a5b4fc;
    outline-offset: 3px;
}

@media (max-width: 640px) {
    body.single-objetivos .app-dashboard .app-content > .dashboard-card {
        padding: 20px;
        border-radius: 17px;
    }

    body.single-objetivos .app-dashboard .app-content > .dashboard-card .objetivo-meta {
        grid-template-columns: 1fr;
    }

    body.single-objetivos .app-dashboard .app-content > .dashboard-card form {
        display: flex;
        width: 100%;
        margin: 10px 0 0;
    }

    body.single-objetivos .app-dashboard .app-content > .dashboard-card form button,
    body.single-objetivos .app-dashboard .app-content > .dashboard-card form input[type="submit"] {
        width: 100%;
    }
}


/* =========================================================
   OBJETIVO PRINCIPAL — estilos basados en principal.php real
   Conserva la funcionalidad PHP y los estilos de misión v4.
   ========================================================= */
body.single-objetivos .app-dashboard .app-content > h1 {
    margin: 0 0 12px;
    color: #f8fafc;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.035em;
    font-weight: 750;
}

body.single-objetivos .app-dashboard .app-content > p {
    max-width: 760px;
    margin: 0 0 26px;
    color: #aab8cc;
    font-size: 1rem;
    line-height: 1.75;
}

/* Panel para crear misión */
body.single-objetivos .app-dashboard .app-content > .dashboard-card {
    box-sizing: border-box;
    margin: 24px 0 34px !important;
    padding: 24px;
    color: #e5edf8;
    background: linear-gradient(145deg, #17243a 0%, #111c2e 100%);
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 20px;
    box-shadow: 0 14px 34px rgba(2, 8, 23, .22);
}

body.single-objetivos .app-dashboard .app-content > .dashboard-card > #toggle-mision {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 12px 18px;
    border: 1px solid rgba(199, 210, 254, .22);
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, #7779ff, #5145e5);
    box-shadow: 0 8px 20px rgba(79, 70, 229, .2);
    font-weight: 700;
    cursor: pointer;
    transition: transform .18s ease, filter .18s ease;
}

body.single-objetivos .app-dashboard .app-content > .dashboard-card > #toggle-mision:hover,
body.single-objetivos .app-dashboard .app-content > .dashboard-card #form-mision button:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

body.single-objetivos .app-dashboard .app-content > .dashboard-card #form-mision {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid rgba(148, 163, 184, .18);
}

body.single-objetivos .app-dashboard .app-content > .dashboard-card #form-mision h3 {
    margin: 0 0 18px;
    color: #f8fafc;
    font-size: 1.15rem;
}

body.single-objetivos .app-dashboard .app-content > .dashboard-card #form-mision p {
    margin: 0 0 16px;
    color: #cbd5e1;
    line-height: 1.5;
}

body.single-objetivos .app-dashboard .app-content > .dashboard-card #form-mision label {
    display: inline-block;
    margin-bottom: 7px;
    color: #dbe5f3;
    font-size: .9rem;
    font-weight: 650;
}

body.single-objetivos .app-dashboard .app-content > .dashboard-card #form-mision input[type="text"],
body.single-objetivos .app-dashboard .app-content > .dashboard-card #form-mision input[type="number"],
body.single-objetivos .app-dashboard .app-content > .dashboard-card #form-mision input[type="date"],
body.single-objetivos .app-dashboard .app-content > .dashboard-card #form-mision textarea {
    box-sizing: border-box;
    max-width: 100%;
    padding: 12px 14px !important;
    color: #f1f5f9;
    background: #0c1728;
    border: 1px solid #34445d;
    border-radius: 10px;
    font: inherit;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

body.single-objetivos .app-dashboard .app-content > .dashboard-card #form-mision input[type="text"],
body.single-objetivos .app-dashboard .app-content > .dashboard-card #form-mision textarea {
    width: 100% !important;
}

body.single-objetivos .app-dashboard .app-content > .dashboard-card #form-mision textarea {
    min-height: 110px;
    resize: vertical;
}

body.single-objetivos .app-dashboard .app-content > .dashboard-card #form-mision input:focus,
body.single-objetivos .app-dashboard .app-content > .dashboard-card #form-mision textarea:focus {
    border-color: #818cf8;
    box-shadow: 0 0 0 3px rgba(129, 140, 248, .16);
}

body.single-objetivos .app-dashboard .app-content > .dashboard-card #form-mision input::placeholder,
body.single-objetivos .app-dashboard .app-content > .dashboard-card #form-mision textarea::placeholder {
    color: #8292aa;
}

body.single-objetivos .app-dashboard .app-content > .dashboard-card #form-mision button.btn-primary {
    min-height: 44px;
    padding: 11px 18px;
    border: 1px solid rgba(199, 210, 254, .2);
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(135deg, #7779ff, #5145e5);
    font-weight: 700;
    cursor: pointer;
    transition: transform .18s ease, filter .18s ease;
}

/* Listado de misiones */
body.single-objetivos .app-dashboard .app-content > h2 {
    margin: 0 0 18px;
    color: #f8fafc;
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    font-weight: 750;
    letter-spacing: -.02em;
}

body.single-objetivos .app-dashboard .app-content > .dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: 18px;
    align-items: stretch;
}

body.single-objetivos .app-dashboard .app-content > .dashboard-grid > a.dashboard-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 22px;
    color: #e5edf8;
    text-decoration: none;
    background: linear-gradient(145deg, #1b2a41, #131f32);
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 18px;
    box-shadow: 0 10px 26px rgba(2, 8, 23, .16);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

body.single-objetivos .app-dashboard .app-content > .dashboard-grid > a.dashboard-card:hover {
    transform: translateY(-3px);
    border-color: rgba(129, 140, 248, .55);
    box-shadow: 0 16px 32px rgba(2, 8, 23, .28);
}

body.single-objetivos .app-dashboard .app-content > .dashboard-grid > a.dashboard-card:focus-visible {
    outline: 3px solid #a5b4fc;
    outline-offset: 3px;
}

body.single-objetivos .app-dashboard .app-content > .dashboard-grid > a.dashboard-card h3 {
    margin: 0 0 10px;
    color: #f8fafc;
    font-size: 1.1rem;
    line-height: 1.4;
    font-weight: 700;
}

body.single-objetivos .app-dashboard .app-content > .dashboard-grid > a.dashboard-card p {
    margin: 0 0 14px;
    color: #aebdd1;
    font-size: .94rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

body.single-objetivos .app-dashboard .app-content > .dashboard-grid > a.dashboard-card p strong {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    color: #c7d2fe;
    background: rgba(99, 102, 241, .14);
    border: 1px solid rgba(129, 140, 248, .22);
    border-radius: 9px;
    font-size: .88rem;
}

body.single-objetivos .app-dashboard .app-content > .dashboard-grid > a.dashboard-card p[style*="color:#22c55e"] {
    margin-top: auto;
    padding-top: 8px;
    color: #86efac !important;
    font-weight: 700;
}

body.single-objetivos .app-dashboard .app-content > .dashboard-grid > a.dashboard-card.objetivo-completado {
    background: linear-gradient(145deg, #17352f, #132a29);
    border-color: rgba(34, 197, 94, .28);
}

body.single-objetivos .app-dashboard .app-content > .dashboard-grid > a.dashboard-card.objetivo-completado h3 {
    color: #dcfce7;
}

@media (max-width: 640px) {
    body.single-objetivos .app-dashboard .app-content > .dashboard-card {
        padding: 18px;
        border-radius: 16px;
    }

    body.single-objetivos .app-dashboard .app-content > .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    body.single-objetivos .app-dashboard .app-content > .dashboard-grid > a.dashboard-card {
        padding: 18px;
    }

    body.single-objetivos .app-dashboard .app-content > .dashboard-card #form-mision button.btn-primary {
        width: 100%;
    }
}


/* =========================================================
   DASHBOARD PRODUCTIVIDAD — REDISEÑO BASADO EN MOCKUP
   Conserva las clases y funciones PHP existentes.
   ========================================================= */
body.page-template-dashboard-page {
  --dash-bg: #071326;
  --dash-panel: #0d1b31;
  --dash-panel-2: #10223b;
  --dash-border: rgba(148, 163, 184, .17);
  --dash-text: #edf4ff;
  --dash-muted: #9eb0c9;
  background: var(--dash-bg) !important;
  color: var(--dash-text);
}
body.page-template-dashboard-page .app-dashboard {
  display: flex;
  min-height: 100vh;
  background: radial-gradient(ellipse at 75% 0%, rgba(30, 64, 110, .22), transparent 42%), var(--dash-bg);
}
body.page-template-dashboard-page .app-sidebar {
  flex: 0 0 220px;
  width: 220px;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 25px 14px;
  background: #081326;
  border-right: 1px solid var(--dash-border);
  color: var(--dash-text);
}
body.page-template-dashboard-page .app-sidebar h2 {
  margin: 0 8px 28px;
  color: #f8fbff;
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -.3px;
}
body.page-template-dashboard-page .app-sidebar nav { display: grid; gap: 7px; }
body.page-template-dashboard-page .app-sidebar nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #aebed3;
  font-size: 12px;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
body.page-template-dashboard-page .app-sidebar nav a:hover,
body.page-template-dashboard-page .app-sidebar nav a.active {
  color: #fff;
  background: #172b49;
  border-color: rgba(96, 165, 250, .2);
}
body.page-template-dashboard-page .app-sidebar nav a.active { box-shadow: inset 3px 0 #60a5fa; }
body.page-template-dashboard-page .app-content {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-width: 0;
  padding: 24px clamp(18px, 3vw, 42px) 36px;
  color: var(--dash-text);
}
body.page-template-dashboard-page .dashboard-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 160px;
  margin: 0 0 22px;
  padding: 28px 30px;
  overflow: hidden;
  border: 1px solid var(--dash-border);
  border-radius: 18px;
  background: radial-gradient(ellipse at 82% 18%, rgba(66, 111, 170, .36), transparent 34%), linear-gradient(115deg, #0b192e 0%, #122744 58%, #1b3556 100%);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .15);
}
body.page-template-dashboard-page .dashboard-header h1 {
  margin: 7px 0 8px;
  color: #fff;
  font-size: clamp(23px, 2.2vw, 32px);
  font-weight: 750;
  letter-spacing: -.8px;
}
body.page-template-dashboard-page .dashboard-header p { margin: 0; color: #bdcbe0; font-size: 13px; }
body.page-template-dashboard-page .dashboard-header .dashboard-eyebrow,
body.page-template-dashboard-page .roles-section-eyebrow {
  color: #83b7ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.25px;
}
body.page-template-dashboard-page .dashboard-header .racha {
  flex: 0 0 auto;
  padding: 10px 13px;
  border: 1px solid rgba(251, 146, 60, .22);
  border-radius: 12px;
  background: rgba(9, 20, 38, .68);
  color: #ffd6a5;
  white-space: nowrap;
}
body.page-template-dashboard-page .dashboard-lower-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(270px, .85fr);
  align-items: start;
  gap: 18px;
  margin-top: 20px;
}
body.page-template-dashboard-page .dashboard-lower-grid > .top-widgets { grid-column: 2; grid-row: 1; }
body.page-template-dashboard-page .dashboard-lower-grid > .misiones-hoy-header,
body.page-template-dashboard-page .dashboard-lower-grid > #mensaje-regenerar-misiones,
body.page-template-dashboard-page .dashboard-lower-grid > .mision-dia,
body.page-template-dashboard-page .dashboard-lower-grid > .misiones-hoy-vacio { grid-column: 1; }
body.page-template-dashboard-page .top-widgets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}
body.page-template-dashboard-page .widget-card,
body.page-template-dashboard-page .roles-empty,
body.page-template-dashboard-page .rol-card-dashboard,
body.page-template-dashboard-page .misiones-hoy-vacio,
body.page-template-dashboard-page .mision-dia {
  color: var(--dash-text);
  background: linear-gradient(145deg, rgba(17, 35, 59, .98), rgba(11, 25, 44, .98));
  border: 1px solid var(--dash-border);
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
}
body.page-template-dashboard-page .widget-card { min-width: 0; padding: 17px; }
body.page-template-dashboard-page .widget-card h3 { margin: 0 0 13px; color: #b8c8dd; font-size: 11px; font-weight: 650; }
body.page-template-dashboard-page .widget-big { color: #f8fbff; font-size: clamp(22px, 2vw, 29px); font-weight: 800; line-height: 1.2; }
body.page-template-dashboard-page .widget-footnote { margin: 9px 0 0; color: var(--dash-muted); font-size: 10px; }
body.page-template-dashboard-page .barra-nivel { height: 6px; margin-top: 12px; overflow: hidden; border-radius: 99px; background: #263852; }
body.page-template-dashboard-page .barra-nivel-interna { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #647cff, #2dd4a7); }
body.page-template-dashboard-page .roles-section { margin: 0; }
body.page-template-dashboard-page .roles-section-header {
  display: flex; align-items: end; justify-content: space-between; gap: 18px; margin: 0 0 14px;
}
body.page-template-dashboard-page .roles-section-header h3 { margin: 5px 0 4px; color: #f5f8ff; font-size: 19px; font-weight: 750; }
body.page-template-dashboard-page .roles-section-header p { margin: 0; color: var(--dash-muted); font-size: 11px; }
body.page-template-dashboard-page .btn-crear-rol,
body.page-template-dashboard-page .btn-regenerar-misiones,
body.page-template-dashboard-page .btn-rutina-hoy {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 36px; padding: 9px 13px; border: 1px solid var(--dash-border); border-radius: 9px;
  background: #172b49; color: #edf5ff; font-size: 11px; font-weight: 700; text-decoration: none; cursor: pointer;
}
body.page-template-dashboard-page .btn-crear-rol:hover,
body.page-template-dashboard-page .btn-regenerar-misiones:hover,
body.page-template-dashboard-page .btn-rutina-hoy:hover { background: #213d63; color: #fff; }
body.page-template-dashboard-page .roles-grid-dashboard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
body.page-template-dashboard-page .rol-card-dashboard {
  position: relative; min-width: 0; padding: 15px; overflow: hidden;
  border-top: 2px solid var(--rol-color, #647cff); transition: transform .18s ease, border-color .18s ease;
}
body.page-template-dashboard-page .rol-card-dashboard:hover { transform: translateY(-2px); border-color: var(--rol-color, #647cff); }
body.page-template-dashboard-page .rol-card-top { display: flex; align-items: center; gap: 10px; }
body.page-template-dashboard-page .rol-card-icon { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--rol-color, #647cff) 18%, #10223b); font-size: 17px; }
body.page-template-dashboard-page .rol-card-title { flex: 1; min-width: 0; }
body.page-template-dashboard-page .rol-card-title h4 { margin: 0; color: #f4f8ff; font-size: 13px; font-weight: 750; overflow-wrap: anywhere; }
body.page-template-dashboard-page .rol-card-title > span { display: block; margin-top: 3px; color: var(--dash-muted); font-size: 9px; }
body.page-template-dashboard-page .rol-badge { padding: 4px 7px; border-radius: 7px; background: color-mix(in srgb, var(--rol-color, #647cff) 18%, #10223b); color: #f0f6ff; font-size: 10px; font-weight: 800; }
body.page-template-dashboard-page .rol-identidad-ideal { margin: 14px 0 10px; padding: 10px; border-radius: 9px; background: rgba(4, 12, 25, .3); }
body.page-template-dashboard-page .rol-identidad-ideal > span,
body.page-template-dashboard-page .rol-estado-item > span { color: #8fa7c4; font-size: 8px; font-weight: 800; letter-spacing: .8px; }
body.page-template-dashboard-page .rol-identidad-ideal p,
body.page-template-dashboard-page .rol-estado-item p { margin: 5px 0 0; color: #d0dced; font-size: 10px; line-height: 1.5; }
body.page-template-dashboard-page .rol-estados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
body.page-template-dashboard-page .rol-estado-item { min-width: 0; padding: 9px; border-radius: 8px; background: rgba(5, 15, 29, .28); }
body.page-template-dashboard-page .rol-progreso { margin-top: 14px; }
body.page-template-dashboard-page .rol-progreso-header { display: flex; justify-content: space-between; gap: 10px; color: #b8c8dd; font-size: 10px; }
body.page-template-dashboard-page .rol-progreso-header strong { color: #f5f8ff; }
body.page-template-dashboard-page .rol-progress-track { height: 5px; margin-top: 8px; overflow: hidden; border-radius: 99px; background: #263852; }
body.page-template-dashboard-page .rol-progress-fill { height: 100%; border-radius: inherit; background: var(--rol-color, #647cff); }
body.page-template-dashboard-page .rol-progreso-puntos { margin-top: 6px; color: var(--dash-muted); font-size: 9px; }
body.page-template-dashboard-page .rol-card-link { display: flex; justify-content: space-between; margin-top: 13px; padding-top: 10px; border-top: 1px solid var(--dash-border); color: #a9caff; font-size: 10px; font-weight: 750; text-decoration: none; }
body.page-template-dashboard-page .misiones-hoy-header { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 14px; margin: 0; padding: 17px; border: 1px solid var(--dash-border); border-radius: 14px 14px 0 0; background: #0d1b31; }
body.page-template-dashboard-page .misiones-hoy-header h3 { margin: 0 0 5px; color: #f5f8ff; font-size: 15px; }
body.page-template-dashboard-page .misiones-hoy-header p { color: var(--dash-muted); font-size: 11px; }
body.page-template-dashboard-page .resumen-misiones-hoy { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
body.page-template-dashboard-page .resumen-misiones-hoy span { padding: 6px 8px; border: 1px solid var(--dash-border); border-radius: 7px; color: #bdcce0; background: #10223b; font-size: 9px; }
body.page-template-dashboard-page .misiones-hoy-controles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
body.page-template-dashboard-page .misiones-hoy-controles label,
body.page-template-dashboard-page .tiempo-misiones-input span { color: #aebed3; font-size: 10px; }
body.page-template-dashboard-page .tiempo-misiones-input { display: flex; align-items: center; gap: 6px; }
body.page-template-dashboard-page #tiempo-misiones-hoy { width: 70px; padding: 8px; border: 1px solid #30445f; border-radius: 8px; background: #071326; color: #f5f8ff; }
body.page-template-dashboard-page .misiones-hoy-header + #mensaje-regenerar-misiones { padding: 0 17px; border-right: 1px solid var(--dash-border); border-left: 1px solid var(--dash-border); background: #0d1b31; color: #9ee8cf; font-size: 10px; }
body.page-template-dashboard-page .mision-dia { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0; padding: 15px 17px; border-radius: 0; border-bottom: 0; }
body.page-template-dashboard-page .mision-dia:last-of-type { border-radius: 0 0 14px 14px; border-bottom: 1px solid var(--dash-border); }
body.page-template-dashboard-page .mision-dia h3 { margin: 0 0 5px; color: #8fbaff; font-size: 9px; }
body.page-template-dashboard-page .mision-dia h2 { margin: 0; color: #f1f6ff; font-size: 12px; }
body.page-template-dashboard-page .mision-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
body.page-template-dashboard-page .mision-meta span { color: var(--dash-muted); font-size: 9px; }
body.page-template-dashboard-page .mision-puntos { margin: 7px 0 0; color: #f6d58a; font-size: 10px; }
body.page-template-dashboard-page .mision-btn { flex: 0 0 auto; padding: 8px 10px; border: 1px solid #304a70; border-radius: 8px; background: #172b49; color: #dceaff; font-size: 10px; font-weight: 700; text-decoration: none; }
body.page-template-dashboard-page .misiones-hoy-vacio { padding: 18px; border-radius: 0 0 14px 14px; color: var(--dash-muted); font-size: 11px; }
body.page-template-dashboard-page .misiones-hoy-vacio p { margin: 0; }
@media (max-width: 1100px) {
  body.page-template-dashboard-page .app-sidebar { flex-basis: 190px; width: 190px; }
  body.page-template-dashboard-page .roles-grid-dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.page-template-dashboard-page .dashboard-lower-grid { grid-template-columns: minmax(0, 1fr); }
  body.page-template-dashboard-page .dashboard-lower-grid > .top-widgets,
  body.page-template-dashboard-page .dashboard-lower-grid > .misiones-hoy-header,
  body.page-template-dashboard-page .dashboard-lower-grid > #mensaje-regenerar-misiones,
  body.page-template-dashboard-page .dashboard-lower-grid > .mision-dia,
  body.page-template-dashboard-page .dashboard-lower-grid > .misiones-hoy-vacio { grid-column: 1; }
  body.page-template-dashboard-page .dashboard-lower-grid > .top-widgets { grid-row: auto; }
}
@media (max-width: 700px) {
  body.page-template-dashboard-page .app-dashboard { display: block; }
  body.page-template-dashboard-page .app-sidebar { width: 100%; min-height: 0; padding: 13px; border-right: 0; border-bottom: 1px solid var(--dash-border); }
  body.page-template-dashboard-page .app-sidebar h2 { margin: 0 0 10px; }
  body.page-template-dashboard-page .app-sidebar nav { display: flex; flex-wrap: wrap; gap: 5px; }
  body.page-template-dashboard-page .app-sidebar nav a { padding: 8px 9px; font-size: 10px; }
  body.page-template-dashboard-page .app-content { padding: 14px; }
  body.page-template-dashboard-page .dashboard-header { display: block; min-height: 0; padding: 22px 18px; }
  body.page-template-dashboard-page .dashboard-header .racha { display: inline-flex; margin-top: 14px; }
  body.page-template-dashboard-page .roles-section-header { align-items: start; flex-direction: column; }
  body.page-template-dashboard-page .roles-grid-dashboard { grid-template-columns: minmax(0, 1fr); }
  body.page-template-dashboard-page .top-widgets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.page-template-dashboard-page .widget-card { padding: 12px; }
  body.page-template-dashboard-page .misiones-hoy-header { display: block; }
  body.page-template-dashboard-page .misiones-hoy-controles { margin-top: 14px; }
  body.page-template-dashboard-page .mision-dia { align-items: start; flex-direction: column; }
}


/* =========================================================
   V7 — Ajustes de estructura y composición del mockup
   ========================================================= */
body.page-template-dashboard-page .app-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}
body.page-template-dashboard-page .dashboard-header {
  min-height: 138px;
  margin-bottom: 22px;
  padding: 24px 28px;
  background-image: radial-gradient(ellipse at 82% 18%, rgba(66, 111, 170, .36), transparent 34%), linear-gradient(115deg, #0b192e 0%, #122744 58%, #1b3556 100%);
}
body.page-template-dashboard-page .roles-section {
  order: 1;
  margin: 0 0 20px;
}
body.page-template-dashboard-page .roles-section-header {
  margin-bottom: 12px;
}
body.page-template-dashboard-page .roles-grid-dashboard {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
body.page-template-dashboard-page .rol-card-dashboard {
  padding: 13px;
  border-radius: 12px;
}
body.page-template-dashboard-page .rol-identidad-ideal {
  margin-top: 11px;
  margin-bottom: 9px;
}
body.page-template-dashboard-page .dashboard-lower-grid {
  order: 2;
  grid-template-columns: minmax(0, 1.25fr) minmax(250px, .85fr);
  gap: 14px;
  margin-top: 0;
}
body.page-template-dashboard-page .dashboard-lower-grid > .top-widgets {
  grid-column: 2;
  grid-row: 1;
  align-content: start;
}
body.page-template-dashboard-page .dashboard-lower-grid > .misiones-hoy-header {
  grid-column: 1;
  grid-row: 1;
}
/* Los elementos de misiones que siguen al encabezado permanecen en la columna izquierda. */
body.page-template-dashboard-page .dashboard-lower-grid > #mensaje-regenerar-misiones,
body.page-template-dashboard-page .dashboard-lower-grid > .mision-dia,
body.page-template-dashboard-page .dashboard-lower-grid > .misiones-hoy-vacio {
  grid-column: 1;
}
body.page-template-dashboard-page .top-widgets .widget-card {
  padding: 14px;
}
body.page-template-dashboard-page .widget-card h3 {
  margin-bottom: 9px;
}
body.page-template-dashboard-page .widget-big {
  font-size: clamp(21px, 1.7vw, 27px);
}
body.page-template-dashboard-page .misiones-hoy-header {
  padding: 14px;
}
body.page-template-dashboard-page .misiones-hoy-controles {
  max-width: 100%;
}
body.page-template-dashboard-page .btn-crear-rol,
body.page-template-dashboard-page .btn-regenerar-misiones,
body.page-template-dashboard-page .btn-rutina-hoy,
body.page-template-dashboard-page .mision-btn {
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
@media (max-width: 1100px) {
  body.page-template-dashboard-page .roles-grid-dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.page-template-dashboard-page .dashboard-lower-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  body.page-template-dashboard-page .dashboard-lower-grid > .top-widgets,
  body.page-template-dashboard-page .dashboard-lower-grid > .misiones-hoy-header,
  body.page-template-dashboard-page .dashboard-lower-grid > #mensaje-regenerar-misiones,
  body.page-template-dashboard-page .dashboard-lower-grid > .mision-dia,
  body.page-template-dashboard-page .dashboard-lower-grid > .misiones-hoy-vacio {
    grid-column: 1;
    grid-row: auto;
  }
}
@media (max-width: 700px) {
  body.page-template-dashboard-page .dashboard-header {
    padding: 20px 17px;
  }
  body.page-template-dashboard-page .roles-grid-dashboard {
    grid-template-columns: minmax(0, 1fr);
  }
  body.page-template-dashboard-page .dashboard-lower-grid {
    gap: 14px;
  }
}


/* =========================================================
   V8 — Panel único de misiones: evita huecos entre elementos
   ========================================================= */
body.page-template-dashboard-page .dashboard-lower-grid {
  grid-template-columns: minmax(0, 1.25fr) minmax(270px, .85fr);
  align-items: start;
}
body.page-template-dashboard-page .dashboard-lower-grid > .dashboard-missions-panel {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--dash-border, #243954);
  border-radius: 14px;
  background: #0d1b31;
}
body.page-template-dashboard-page .dashboard-missions-panel .misiones-hoy-header {
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--dash-border, #243954);
}
body.page-template-dashboard-page .dashboard-missions-panel #mensaje-regenerar-misiones {
  box-sizing: border-box;
  min-height: 0;
  margin: 0;
}
body.page-template-dashboard-page .dashboard-missions-panel #mensaje-regenerar-misiones:empty {
  display: none;
}
body.page-template-dashboard-page .dashboard-missions-panel .mision-dia {
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--dash-border, #243954);
  box-shadow: none;
}
body.page-template-dashboard-page .dashboard-missions-panel .mision-dia:last-of-type {
  border-bottom: 0;
  border-radius: 0;
}
body.page-template-dashboard-page .dashboard-missions-panel .misiones-hoy-vacio {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body.page-template-dashboard-page .dashboard-lower-grid > .top-widgets {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
}
@media (max-width: 1100px) {
  body.page-template-dashboard-page .dashboard-lower-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  body.page-template-dashboard-page .dashboard-lower-grid > .dashboard-missions-panel,
  body.page-template-dashboard-page .dashboard-lower-grid > .top-widgets {
    grid-column: 1;
    grid-row: auto;
  }
}


/* ===== Dashboard mockup v10: hero panorámico y roles con imagen fija ===== */
.dashboard-header {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 148px; padding: 28px 30px; border-radius: 18px;
  background-color: #0b2440;
  background-image: linear-gradient(90deg, rgba(5,20,39,.97) 0%, rgba(5,20,39,.82) 38%, rgba(5,20,39,.12) 78%), url("assets/images/dashboard-hero.jpg");
  background-size: cover; background-position: center 54%;
  border: 1px solid rgba(74,144,226,.26);
}
.dashboard-header h1, .dashboard-header p, .dashboard-header .dashboard-eyebrow, .dashboard-header .racha { position: relative; z-index: 1; }
.roles-grid-dashboard { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.rol-card-dashboard {
  position: relative; isolation: isolate; overflow: hidden; min-height: 164px;
  display:flex; flex-direction:column; justify-content:flex-end; gap:8px;
  padding: 16px; border:1px solid color-mix(in srgb,var(--rol-color,#3b82f6) 65%, transparent);
  border-radius:15px; background-color:#10213a;
  background-image: linear-gradient(180deg,rgba(5,16,34,.06) 0%,rgba(5,16,34,.30) 36%,rgba(5,16,34,.96) 100%), var(--rol-image,linear-gradient(135deg,#12395c,#10182e));
  background-size:cover; background-position:center; box-shadow:0 8px 22px rgba(0,0,0,.16);
}
.rol-card-dashboard::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(110deg,color-mix(in srgb,var(--rol-color,#3b82f6) 18%,transparent),transparent 70%); pointer-events:none; }
.rol-card-dashboard > * { position:relative; z-index:1; }
.rol-card-dashboard .rol-card-top { align-items:flex-start; gap:10px; }
.rol-card-dashboard .rol-card-icon { flex:0 0 auto; background:var(--rol-color,#3b82f6); box-shadow:0 3px 16px color-mix(in srgb,var(--rol-color,#3b82f6) 38%,transparent); }
.rol-card-dashboard .rol-card-title h4 { color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.65); }
.rol-card-dashboard .rol-card-title span, .rol-card-dashboard .rol-identidad-ideal, .rol-card-dashboard .rol-estados, .rol-card-dashboard .rol-progreso, .rol-card-dashboard .rol-card-link { color:#e4efff; }
.rol-card-dashboard .rol-identidad-ideal, .rol-card-dashboard .rol-estado-item { background:rgba(4,17,36,.56); border:1px solid rgba(173,204,255,.12); border-radius:8px; padding:8px; backdrop-filter:blur(5px); }
.rol-card-dashboard .rol-progress-track { background:rgba(203,220,255,.22); }
.rol-card-dashboard .rol-progress-fill { background:var(--rol-color,#3b82f6); }
.rol-card-dashboard .rol-badge { background:rgba(4,17,36,.72); border:1px solid color-mix(in srgb,var(--rol-color,#3b82f6) 70%,transparent); color:#fff; }
.rol-card-dashboard .rol-card-link { font-weight:600; }
.dashboard-lower-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr); gap:16px; align-items:stretch; }
@media(max-width:1050px){ .roles-grid-dashboard{grid-template-columns:repeat(2,minmax(0,1fr));} .dashboard-lower-grid{grid-template-columns:1fr;} }
@media(max-width:640px){ .roles-grid-dashboard{grid-template-columns:1fr;} .dashboard-header{padding:22px 18px;min-height:150px;background-position:62% center;} .rol-card-dashboard{min-height:170px;} }


/* ==========================================================
   V11 — Corrección estructural de ancho y cuadrícula
   ========================================================== */
body.page-template-dashboard-page .app-dashboard {
  display:flex !important;
  align-items:stretch;
  width:100%;
  min-width:0;
  min-height:100vh;
  overflow-x:clip;
}
body.page-template-dashboard-page .app-sidebar {
  flex:0 0 220px;
  width:220px;
  min-width:220px;
}
body.page-template-dashboard-page .app-content {
  flex:1 1 auto;
  width:calc(100% - 220px);
  max-width:none;
  min-width:0;
  box-sizing:border-box;
  padding:24px;
  overflow:visible;
}
body.page-template-dashboard-page .dashboard-header,
body.page-template-dashboard-page .roles-section,
body.page-template-dashboard-page .dashboard-lower-grid {
  width:100%;
  max-width:none;
  min-width:0;
  box-sizing:border-box;
}
body.page-template-dashboard-page .dashboard-header {
  min-height:160px;
  background-position:center 52%;
  background-size:cover;
}
body.page-template-dashboard-page .roles-section { margin-top:18px; }
body.page-template-dashboard-page .roles-grid-dashboard {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  width:100%;
}
body.page-template-dashboard-page .rol-card-dashboard {
  width:auto;
  min-width:0;
  box-sizing:border-box;
  overflow:hidden;
  overflow-wrap:anywhere;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-card-title,
body.page-template-dashboard-page .rol-card-dashboard .rol-identidad-ideal,
body.page-template-dashboard-page .rol-card-dashboard .rol-estado-item { min-width:0; }
body.page-template-dashboard-page .rol-card-dashboard p,
body.page-template-dashboard-page .rol-card-dashboard h4 { overflow-wrap:anywhere; }
body.page-template-dashboard-page .dashboard-lower-grid {
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(280px,.9fr);
  align-items:start;
  gap:16px;
  margin-top:18px;
}
body.page-template-dashboard-page .dashboard-missions-panel {
  grid-column:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:0;
  align-self:start;
  overflow:hidden;
  border:1px solid var(--dash-border,#243954);
  border-radius:16px;
  background:#0d1b31;
}
body.page-template-dashboard-page .dashboard-missions-panel > .misiones-hoy-header,
body.page-template-dashboard-page .dashboard-missions-panel > .mision-dia,
body.page-template-dashboard-page .dashboard-missions-panel > .misiones-hoy-vacio {
  width:100%;
  min-width:0;
  box-sizing:border-box;
  margin:0;
  border-radius:0;
}
body.page-template-dashboard-page .dashboard-missions-panel > .misiones-hoy-header {
  border:0;
  border-bottom:1px solid var(--dash-border,#243954);
}
body.page-template-dashboard-page .dashboard-missions-panel > .mision-dia {
  border:0;
  border-bottom:1px solid var(--dash-border,#243954);
  box-shadow:none;
}
body.page-template-dashboard-page .dashboard-missions-panel > .mision-dia:last-of-type { border-bottom:0; }
body.page-template-dashboard-page .dashboard-missions-panel > .mensaje-regenerar-misiones:empty { display:none; }
body.page-template-dashboard-page .dashboard-lower-grid > .top-widgets {
  grid-column:2;
  min-width:0;
  align-self:start;
}
body.page-template-dashboard-page .top-widgets { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:1100px) {
  body.page-template-dashboard-page .app-sidebar { flex-basis:190px; width:190px; min-width:190px; }
  body.page-template-dashboard-page .app-content { width:calc(100% - 190px); padding:18px; }
  body.page-template-dashboard-page .roles-grid-dashboard { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.page-template-dashboard-page .dashboard-lower-grid { grid-template-columns:minmax(0,1fr); }
  body.page-template-dashboard-page .dashboard-lower-grid > .top-widgets { grid-column:1; }
}
@media (max-width:700px) {
  body.page-template-dashboard-page .app-sidebar { flex-basis:68px; width:68px; min-width:68px; }
  body.page-template-dashboard-page .app-content { width:calc(100% - 68px); padding:12px; }
  body.page-template-dashboard-page .roles-grid-dashboard,
  body.page-template-dashboard-page .top-widgets { grid-template-columns:minmax(0,1fr); }
  body.page-template-dashboard-page .dashboard-header { min-height:150px; padding:20px 16px; }
}

/* V12 — Corrección de maquetación basada en la captura real */
body.page-template-dashboard-page,
body.page-template-dashboard-page #page,
body.page-template-dashboard-page #content,
body.page-template-dashboard-page .site-content,
body.page-template-dashboard-page .ast-container {
  background: #071426 !important;
  color: #edf4ff;
}
body.page-template-dashboard-page #content,
body.page-template-dashboard-page .site-content,
body.page-template-dashboard-page .ast-container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.page-template-dashboard-page .app-dashboard {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 100vh;
  margin: 0 !important;
  overflow-x: clip !important;
  background: #071426 !important;
}
body.page-template-dashboard-page .app-sidebar {
  flex: 0 0 220px !important;
  width: 220px !important;
  min-width: 220px !important;
}
/* Clave: los hijos del main deben apilarse verticalmente; no formar tres columnas */
body.page-template-dashboard-page .app-content {
  display: block !important;
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 22px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: #071426 !important;
}
body.page-template-dashboard-page .dashboard-header,
body.page-template-dashboard-page .roles-section,
body.page-template-dashboard-page .dashboard-lower-grid {
  display: block;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}
body.page-template-dashboard-page .dashboard-header {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  min-height: 165px;
  margin-bottom: 18px !important;
  background-size: cover !important;
  background-position: center 52% !important;
}
body.page-template-dashboard-page .roles-section {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
}
body.page-template-dashboard-page .roles-grid-dashboard {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 14px !important;
  width: 100% !important;
  min-width: 0 !important;
}
body.page-template-dashboard-page .rol-card-dashboard {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 245px;
  box-sizing: border-box !important;
  overflow: hidden !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
body.page-template-dashboard-page .rol-card-dashboard h1,
body.page-template-dashboard-page .rol-card-dashboard h2,
body.page-template-dashboard-page .rol-card-dashboard h3,
body.page-template-dashboard-page .rol-card-dashboard h4,
body.page-template-dashboard-page .rol-card-dashboard p,
body.page-template-dashboard-page .rol-card-dashboard a,
body.page-template-dashboard-page .rol-card-dashboard span {
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: auto;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-card-title {
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
}
body.page-template-dashboard-page .dashboard-lower-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .9fr) !important;
  align-items: start !important;
  gap: 16px !important;
  margin-top: 0 !important;
}
body.page-template-dashboard-page .dashboard-lower-grid > .dashboard-missions-panel,
body.page-template-dashboard-page .dashboard-lower-grid > .top-widgets {
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
  grid-row: auto !important;
  box-sizing: border-box !important;
}
body.page-template-dashboard-page .dashboard-lower-grid > .dashboard-missions-panel { grid-column: 1 !important; }
body.page-template-dashboard-page .dashboard-lower-grid > .top-widgets { grid-column: 2 !important; }
body.page-template-dashboard-page .top-widgets {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
body.page-template-dashboard-page .app-content::after { content: none !important; }
@media (max-width: 1350px) {
  body.page-template-dashboard-page .roles-grid-dashboard { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 1050px) {
  body.page-template-dashboard-page .app-sidebar { flex-basis: 190px !important; width: 190px !important; min-width: 190px !important; }
  body.page-template-dashboard-page .roles-grid-dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.page-template-dashboard-page .dashboard-lower-grid { grid-template-columns: minmax(0, 1fr) !important; }
  body.page-template-dashboard-page .dashboard-lower-grid > .dashboard-missions-panel,
  body.page-template-dashboard-page .dashboard-lower-grid > .top-widgets { grid-column: 1 !important; }
}
@media (max-width: 700px) {
  body.page-template-dashboard-page .app-sidebar { flex-basis: 68px !important; width: 68px !important; min-width: 68px !important; }
  body.page-template-dashboard-page .app-content { padding: 12px !important; }
  body.page-template-dashboard-page .roles-grid-dashboard,
  body.page-template-dashboard-page .top-widgets { grid-template-columns: minmax(0, 1fr) !important; }
  body.page-template-dashboard-page .dashboard-header { min-height: 145px; padding: 18px 14px !important; }
}


/* ===== V13: estructura y tarjetas corregidas ===== */
body.page-template-dashboard-page,
body.page-template-dashboard-page #page,
body.page-template-dashboard-page .site,
body.page-template-dashboard-page .site-content,
body.page-template-dashboard-page #primary,
body.page-template-dashboard-page .ast-container {
  background: #071426 !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.page-template-dashboard-page .app-dashboard {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  min-height: 100vh !important;
  overflow-x: clip !important;
  background: #071426 !important;
}
body.page-template-dashboard-page .app-sidebar {
  flex: 0 0 220px !important;
  width: 220px !important;
  min-width: 220px !important;
}
body.page-template-dashboard-page .app-content {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 22px !important;
  gap: 20px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  background: #071426 !important;
}
body.page-template-dashboard-page .dashboard-header {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  background-image: linear-gradient(90deg,rgba(5,20,39,.93) 0%,rgba(5,20,39,.58) 48%,rgba(5,20,39,.10) 100%), url("assets/images/dashboard-hero.jpg") !important;
  background-size: cover !important;
  background-position: center 48% !important;
  background-repeat: no-repeat !important;
}
body.page-template-dashboard-page .roles-section {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
body.page-template-dashboard-page .roles-section-header {
  display: flex !important;
  align-items: end !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}
body.page-template-dashboard-page .roles-grid-dashboard {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
  min-width: 0 !important;
}
body.page-template-dashboard-page .rol-card-dashboard {
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 250px !important;
  padding: 18px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  background-color: #14243b !important;
  background-image: linear-gradient(180deg,rgba(5,16,34,.08) 0%,rgba(5,16,34,.45) 35%,rgba(5,16,34,.96) 100%), var(--rol-image, linear-gradient(135deg,#17395d,#10182e)) !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
body.page-template-dashboard-page .rol-card-dashboard h4,
body.page-template-dashboard-page .rol-card-dashboard p,
body.page-template-dashboard-page .rol-card-dashboard span,
body.page-template-dashboard-page .rol-card-dashboard a {
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
}
body.page-template-dashboard-page .rol-card-top { display:flex !important; align-items:center !important; gap:10px !important; min-width:0 !important; }
body.page-template-dashboard-page .rol-card-title { flex:1 1 auto !important; min-width:0 !important; }
body.page-template-dashboard-page .rol-card-title h4 { font-size:16px !important; line-height:1.25 !important; }
body.page-template-dashboard-page .dashboard-lower-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .9fr) !important;
  align-items: stretch !important;
  gap: 16px !important;
  width: 100% !important;
  min-width: 0 !important;
}
body.page-template-dashboard-page .dashboard-lower-grid > * { min-width:0 !important; max-width:100% !important; }
@media (max-width: 1100px) {
  body.page-template-dashboard-page .app-sidebar { flex-basis:190px !important; width:190px !important; min-width:190px !important; }
  body.page-template-dashboard-page .roles-grid-dashboard { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  body.page-template-dashboard-page .dashboard-lower-grid { grid-template-columns:minmax(0,1fr) !important; }
}
@media (max-width: 640px) {
  body.page-template-dashboard-page .app-sidebar { flex-basis:68px !important; width:68px !important; min-width:68px !important; }
  body.page-template-dashboard-page .app-content { padding:12px !important; gap:14px !important; }
  body.page-template-dashboard-page .roles-grid-dashboard { grid-template-columns:minmax(0,1fr) !important; }
  body.page-template-dashboard-page .dashboard-header { background-position:62% center !important; }
}

/* ==========================================================
   DASHBOARD V14 — corrección estructural definitiva
   Mantiene las reglas anteriores para otras páginas, pero
   normaliza el layout SOLO en la plantilla Dashboard.
   ========================================================== */
body.page-template-dashboard-page,
body.page-template-dashboard-page html,
body.page-template-dashboard-page #page,
body.page-template-dashboard-page #content,
body.page-template-dashboard-page .site,
body.page-template-dashboard-page .site-content,
body.page-template-dashboard-page .ast-container,
body.page-template-dashboard-page #primary,
body.page-template-dashboard-page .content-area {
  background: #071426 !important;
  color: #edf4ff !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
body.page-template-dashboard-page,
body.page-template-dashboard-page * {
  box-sizing: border-box;
}
body.page-template-dashboard-page {
  overflow-x: hidden !important;
}
body.page-template-dashboard-page .app-dashboard {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: clip !important;
}
body.page-template-dashboard-page .app-sidebar {
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  flex: 0 0 220px !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  height: 100vh !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 22px 14px !important;
  overflow-y: auto !important;
  z-index: 20 !important;
  background: #071426 !important;
  border-right: 1px solid #20334d !important;
}
body.page-template-dashboard-page .app-sidebar h2 {
  margin: 0 0 24px !important;
  font-size: 19px !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
}
body.page-template-dashboard-page .app-sidebar nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
body.page-template-dashboard-page .app-sidebar nav a {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
  padding: 11px 10px !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
}
body.page-template-dashboard-page .app-content {
  position: relative !important;
  display: flex !important;
  flex: 1 1 0% !important;
  flex-direction: column !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 24px !important;
  gap: 0 !important;
  overflow: visible !important;
  background: #071426 !important;
}
body.page-template-dashboard-page .dashboard-header,
body.page-template-dashboard-page .roles-section,
body.page-template-dashboard-page .dashboard-lower-grid {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  float: none !important;
  clear: both !important;
}
body.page-template-dashboard-page .dashboard-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  min-height: 160px !important;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  padding: 26px 30px !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  background-color: #102844 !important;
  background-image: linear-gradient(90deg,rgba(5,20,39,.94) 0%,rgba(5,20,39,.72) 42%,rgba(5,20,39,.08) 100%), url("assets/images/dashboard-hero.jpg") !important;
  background-size: cover !important;
  background-position: center 52% !important;
}
body.page-template-dashboard-page .dashboard-header > div {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 70% !important;
}
body.page-template-dashboard-page .dashboard-header .dashboard-eyebrow {
  display: block !important;
  margin-bottom: 8px !important;
  color: #d7e7ff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
}
body.page-template-dashboard-page .dashboard-header h1 {
  margin: 0 0 7px !important;
  color: #fff !important;
  font-size: clamp(24px,2.2vw,36px) !important;
  line-height: 1.15 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
body.page-template-dashboard-page .dashboard-header > div > p {
  margin: 0 !important;
  color: #f0f6ff !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}
body.page-template-dashboard-page .dashboard-header .racha {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 11px 14px !important;
  color: #fff !important;
  background: rgba(5,20,39,.86) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  text-shadow: none !important;
}
body.page-template-dashboard-page .dashboard-header .racha::before,
body.page-template-dashboard-page .dashboard-header .racha::after { content: none !important; display: none !important; }
body.page-template-dashboard-page .roles-section { margin-top: 0 !important; margin-bottom: 20px !important; }
body.page-template-dashboard-page .roles-section-header {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin: 0 0 16px !important;
}
body.page-template-dashboard-page .roles-section-header > div { min-width: 0 !important; }
body.page-template-dashboard-page .roles-section-header h3 { word-break: normal !important; overflow-wrap: normal !important; }
body.page-template-dashboard-page .roles-grid-dashboard {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 16px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}
body.page-template-dashboard-page .rol-card-dashboard {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 260px !important;
  margin: 0 !important;
  padding: 16px !important;
  overflow: hidden !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  background-position: center !important;
  background-size: cover !important;
}
body.page-template-dashboard-page .rol-card-dashboard * {
  min-width: 0;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-card-top {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  margin-bottom: 12px !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-card-title { flex: 1 1 auto !important; min-width: 0 !important; }
body.page-template-dashboard-page .rol-card-dashboard .rol-card-title h4 {
  margin: 0 0 4px !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-card-title span { display: block !important; font-size: 11px !important; line-height: 1.35 !important; }
body.page-template-dashboard-page .rol-card-dashboard .rol-badge { flex: 0 0 auto !important; white-space: nowrap !important; }
body.page-template-dashboard-page .rol-card-dashboard .rol-identidad-ideal,
body.page-template-dashboard-page .rol-card-dashboard .rol-estados,
body.page-template-dashboard-page .rol-card-dashboard .rol-progreso,
body.page-template-dashboard-page .rol-card-dashboard .rol-card-link { width: 100% !important; }
body.page-template-dashboard-page .rol-card-dashboard .rol-estados {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 8px !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-estado-item { min-width: 0 !important; }
body.page-template-dashboard-page .rol-card-dashboard .rol-card-link {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: auto !important;
  padding-top: 12px !important;
  white-space: normal !important;
}
body.page-template-dashboard-page .dashboard-lower-grid {
  display: grid !important;
  grid-template-columns: minmax(0,1.35fr) minmax(280px,.9fr) !important;
  align-items: start !important;
  gap: 16px !important;
  margin-top: 0 !important;
}
body.page-template-dashboard-page .dashboard-lower-grid > * { min-width: 0 !important; max-width: 100% !important; }
body.page-template-dashboard-page .dashboard-lower-grid > .top-widgets {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: start !important;
  gap: 12px !important;
  margin: 0 !important;
}
body.page-template-dashboard-page .dashboard-lower-grid > .dashboard-missions-panel { grid-column: 1 !important; grid-row: 1 !important; }
body.page-template-dashboard-page .dashboard-missions-panel,
body.page-template-dashboard-page .dashboard-missions-panel * { min-width: 0 !important; max-width: 100% !important; }
body.page-template-dashboard-page .dashboard-missions-panel { overflow: hidden !important; }
body.page-template-dashboard-page .dashboard-missions-panel p,
body.page-template-dashboard-page .dashboard-missions-panel h2,
body.page-template-dashboard-page .dashboard-missions-panel h3 { overflow-wrap: break-word !important; word-break: normal !important; }
@media (max-width: 1100px) {
  body.page-template-dashboard-page .app-sidebar { flex-basis: 190px !important; width: 190px !important; min-width: 190px !important; max-width: 190px !important; }
  body.page-template-dashboard-page .app-content { padding: 18px !important; }
  body.page-template-dashboard-page .roles-grid-dashboard { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  body.page-template-dashboard-page .dashboard-lower-grid { grid-template-columns: minmax(0,1fr) !important; }
  body.page-template-dashboard-page .dashboard-lower-grid > .dashboard-missions-panel,
  body.page-template-dashboard-page .dashboard-lower-grid > .top-widgets { grid-column: 1 !important; grid-row: auto !important; }
}
@media (max-width: 700px) {
  body.page-template-dashboard-page .app-dashboard { display: block !important; }
  body.page-template-dashboard-page .app-sidebar { position: relative !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 0 !important; padding: 12px !important; }
  body.page-template-dashboard-page .app-sidebar nav { flex-direction: row !important; flex-wrap: wrap !important; }
  body.page-template-dashboard-page .app-content { width: 100% !important; padding: 12px !important; }
  body.page-template-dashboard-page .dashboard-header { align-items: flex-start !important; flex-direction: column !important; padding: 20px !important; }
  body.page-template-dashboard-page .dashboard-header > div { max-width: 100% !important; }
  body.page-template-dashboard-page .roles-section-header { align-items: flex-start !important; flex-direction: column !important; }
  body.page-template-dashboard-page .roles-grid-dashboard,
  body.page-template-dashboard-page .dashboard-lower-grid > .top-widgets { grid-template-columns: minmax(0,1fr) !important; }
}

/* ==========================================================
   DASHBOARD V15 — CONSOLIDATED VISUAL OVERRIDES
   Fix: clean hero image, six compact role cards, balanced lower panels.
   ========================================================== */
body.page-template-dashboard-page {
  background: #071426 !important;
  overflow-x: hidden !important;
}
body.page-template-dashboard-page .app-dashboard {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: clip !important;
}
body.page-template-dashboard-page .app-content {
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  padding: 24px !important;
  gap: 20px !important;
  overflow: hidden !important;
  background: #071426 !important;
}
body.page-template-dashboard-page .dashboard-header {
  min-height: 150px !important;
  height: 150px !important;
  box-sizing: border-box !important;
  background-image: linear-gradient(90deg,rgba(5,20,39,.78) 0%,rgba(5,20,39,.28) 52%,rgba(5,20,39,.02) 100%), url("assets/images/dashboard-hero.jpg") !important;
  background-size: cover !important;
  background-position: center 52% !important;
  padding: 24px 28px !important;
  margin: 0 0 4px !important;
}
body.page-template-dashboard-page .dashboard-header > div { max-width: 72% !important; }
body.page-template-dashboard-page .dashboard-header .racha { position: relative !important; z-index: 2 !important; }
body.page-template-dashboard-page .roles-grid-dashboard {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
}
body.page-template-dashboard-page .rol-card-dashboard {
  position: relative !important;
  isolation: isolate !important;
  min-height: 330px !important;
  height: auto !important;
  padding: 12px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(94,153,218,.28) !important;
  background: #0c1b30 !important;
  background-image: none !important;
  box-sizing: border-box !important;
}
body.page-template-dashboard-page .rol-card-dashboard::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  inset: 0 0 auto 0 !important;
  height: 112px !important;
  border-radius: 14px 14px 0 0 !important;
  background-image: linear-gradient(180deg,rgba(4,15,29,.05) 0%,rgba(4,15,29,.20) 50%,#0c1b30 100%), var(--rol-image) !important;
  background-size: cover !important;
  background-position: center 42% !important;
  background-repeat: no-repeat !important;
}
body.page-template-dashboard-page .rol-card-dashboard::after {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  inset: 95px 0 0 !important;
  background: linear-gradient(180deg,rgba(12,27,48,.08),#0c1b30 42px) !important;
  pointer-events: none !important;
}
body.page-template-dashboard-page .rol-card-dashboard > * { position: relative !important; z-index: 1 !important; }
body.page-template-dashboard-page .rol-card-dashboard .rol-card-top {
  min-height: 72px !important;
  align-items: flex-start !important;
  gap: 7px !important;
  margin-bottom: 10px !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-card-icon {
  flex: 0 0 32px !important;
  width: 32px !important;
  height: 32px !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-card-title h4 {
  font-size: 13px !important;
  line-height: 1.2 !important;
  overflow-wrap: anywhere !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-card-title span { font-size: 10px !important; }
body.page-template-dashboard-page .rol-card-dashboard .rol-badge { font-size: 10px !important; padding: 4px 6px !important; }
body.page-template-dashboard-page .rol-card-dashboard .rol-identidad-ideal {
  padding: 9px !important;
  margin: 0 0 9px !important;
  min-height: 68px !important;
  border-radius: 10px !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-identidad-ideal p,
body.page-template-dashboard-page .rol-card-dashboard .rol-estado-item p {
  font-size: 10px !important;
  line-height: 1.35 !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-estados { gap: 6px !important; }
body.page-template-dashboard-page .rol-card-dashboard .rol-estado-item {
  padding: 8px !important;
  border-radius: 9px !important;
  min-height: 65px !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-estado-item > span { font-size: 9px !important; }
body.page-template-dashboard-page .rol-card-dashboard .rol-progreso { margin-top: auto !important; padding-top: 10px !important; }
body.page-template-dashboard-page .dashboard-lower-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.65fr) minmax(260px, .9fr) !important;
  gap: 16px !important;
  align-items: start !important;
}
body.page-template-dashboard-page .dashboard-lower-grid > .dashboard-missions-panel { grid-column: 1 !important; grid-row: 1 !important; }
body.page-template-dashboard-page .dashboard-lower-grid > .top-widgets {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 12px !important;
}
body.page-template-dashboard-page .app-content,
body.page-template-dashboard-page .app-content * { box-sizing: border-box; }
@media (max-width: 1450px) {
  body.page-template-dashboard-page .app-content { padding: 18px !important; }
  body.page-template-dashboard-page .roles-grid-dashboard { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
  body.page-template-dashboard-page .rol-card-dashboard { min-height: 300px !important; }
}
@media (max-width: 1000px) {
  body.page-template-dashboard-page .roles-grid-dashboard { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  body.page-template-dashboard-page .dashboard-lower-grid { grid-template-columns: minmax(0,1fr) !important; }
  body.page-template-dashboard-page .dashboard-lower-grid > .dashboard-missions-panel,
  body.page-template-dashboard-page .dashboard-lower-grid > .top-widgets { grid-column: 1 !important; grid-row: auto !important; }
}
@media (max-width: 600px) {
  body.page-template-dashboard-page .app-content { padding: 12px !important; }
  body.page-template-dashboard-page .dashboard-header { height: auto !important; min-height: 155px !important; padding: 18px !important; }
  body.page-template-dashboard-page .dashboard-header > div { max-width: 100% !important; }
  body.page-template-dashboard-page .dashboard-header { align-items: flex-start !important; }
  body.page-template-dashboard-page .roles-grid-dashboard { grid-template-columns: minmax(0,1fr) !important; }
  body.page-template-dashboard-page .dashboard-lower-grid > .top-widgets { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}


/* DASHBOARD V16 — clean photo assets, single header, stable layout */
body.page-template-dashboard-page { background:#071426 !important; overflow-x:hidden !important; }
body.page-template-dashboard-page #page,
body.page-template-dashboard-page .site,
body.page-template-dashboard-page .site-content,
body.page-template-dashboard-page .ast-container,
body.page-template-dashboard-page #primary,
body.page-template-dashboard-page .entry-content { background:#071426 !important; max-width:none !important; }
body.page-template-dashboard-page .app-dashboard { display:flex !important; width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; overflow-x:hidden !important; align-items:stretch !important; }
body.page-template-dashboard-page .app-sidebar { flex:0 0 220px !important; width:220px !important; min-width:220px !important; }
body.page-template-dashboard-page .app-content { display:flex !important; flex:1 1 auto !important; width:calc(100% - 220px) !important; max-width:calc(100% - 220px) !important; min-width:0 !important; margin:0 !important; padding:20px !important; gap:18px !important; box-sizing:border-box !important; overflow:visible !important; background:#071426 !important; }
/* Header text is HTML; hero asset is photography only. */
body.page-template-dashboard-page .dashboard-header { position:relative !important; display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:space-between !important; gap:24px !important; width:100% !important; min-width:0 !important; min-height:150px !important; height:auto !important; padding:24px 28px !important; margin:0 !important; overflow:hidden !important; border-radius:16px !important; background-color:#102a49 !important; background-image:linear-gradient(90deg,rgba(5,20,39,.62),rgba(5,20,39,.08)),url('assets/images/dashboard-hero.jpg') !important; background-size:cover !important; background-position:center 52% !important; }
body.page-template-dashboard-page .dashboard-header::before,
body.page-template-dashboard-page .dashboard-header::after,
body.page-template-dashboard-page .dashboard-header .racha::before,
body.page-template-dashboard-page .dashboard-header .racha::after { content:none !important; display:none !important; background-image:none !important; }
body.page-template-dashboard-page .dashboard-header > div { position:relative !important; z-index:2 !important; display:block !important; flex:1 1 auto !important; width:auto !important; max-width:72% !important; min-width:0 !important; transform:none !important; margin:0 !important; }
body.page-template-dashboard-page .dashboard-header h1,
body.page-template-dashboard-page .dashboard-header p,
body.page-template-dashboard-page .dashboard-header .dashboard-eyebrow { position:static !important; transform:none !important; margin-left:0 !important; text-indent:0 !important; }
body.page-template-dashboard-page .dashboard-header .racha { flex:0 0 auto !important; position:relative !important; z-index:3 !important; margin:0 !important; white-space:nowrap !important; }
body.page-template-dashboard-page .roles-section { width:100% !important; min-width:0 !important; margin:0 !important; }
body.page-template-dashboard-page .roles-grid-dashboard { display:grid !important; grid-template-columns:repeat(6,minmax(0,1fr)) !important; gap:12px !important; width:100% !important; min-width:0 !important; }
body.page-template-dashboard-page .rol-card-dashboard { position:relative !important; display:flex !important; flex-direction:column !important; min-width:0 !important; width:auto !important; max-width:none !important; min-height:320px !important; height:auto !important; padding:10px !important; overflow:hidden !important; isolation:isolate !important; border-radius:14px !important; background:#0b1b30 !important; background-image:none !important; }
body.page-template-dashboard-page .rol-card-dashboard::before { content:'' !important; position:absolute !important; z-index:-1 !important; inset:0 0 auto 0 !important; height:96px !important; background-image:linear-gradient(180deg,rgba(4,15,29,.05) 0%,rgba(4,15,29,.20) 55%,#0b1b30 100%),var(--rol-image) !important; background-size:cover !important; background-position:center 45% !important; background-repeat:no-repeat !important; }
body.page-template-dashboard-page .rol-card-dashboard::after { content:'' !important; position:absolute !important; z-index:-1 !important; inset:72px 0 0 !important; background:linear-gradient(180deg,rgba(11,27,48,.05),#0b1b30 42px) !important; pointer-events:none !important; }
body.page-template-dashboard-page .rol-card-dashboard > * { position:relative !important; z-index:1 !important; min-width:0 !important; }
body.page-template-dashboard-page .rol-card-dashboard .rol-card-top { display:flex !important; align-items:flex-start !important; min-height:74px !important; gap:6px !important; margin:0 0 7px !important; }
body.page-template-dashboard-page .rol-card-dashboard .rol-card-icon { display:grid !important; place-items:center !important; flex:0 0 30px !important; width:30px !important; height:30px !important; margin-top:0 !important; }
body.page-template-dashboard-page .rol-card-dashboard .rol-card-title { flex:1 1 auto !important; min-width:0 !important; }
body.page-template-dashboard-page .rol-card-dashboard .rol-card-title h4 { font-size:12px !important; line-height:1.25 !important; white-space:normal !important; overflow-wrap:normal !important; word-break:normal !important; }
body.page-template-dashboard-page .rol-card-dashboard .rol-card-title span { font-size:9px !important; }
body.page-template-dashboard-page .rol-card-dashboard .rol-badge { flex:0 0 auto !important; font-size:9px !important; padding:4px 5px !important; }
body.page-template-dashboard-page .rol-card-dashboard .rol-identidad-ideal { min-height:64px !important; padding:8px !important; margin:0 0 8px !important; }
body.page-template-dashboard-page .rol-card-dashboard .rol-identidad-ideal p,
body.page-template-dashboard-page .rol-card-dashboard .rol-estado-item p { font-size:9px !important; line-height:1.35 !important; overflow-wrap:anywhere !important; }
body.page-template-dashboard-page .rol-card-dashboard .rol-estados { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:5px !important; }
body.page-template-dashboard-page .rol-card-dashboard .rol-estado-item { min-width:0 !important; min-height:58px !important; padding:7px !important; }
body.page-template-dashboard-page .dashboard-lower-grid { display:grid !important; grid-template-columns:minmax(0,1.65fr) minmax(260px,.9fr) !important; gap:16px !important; width:100% !important; min-width:0 !important; align-items:start !important; }
body.page-template-dashboard-page .dashboard-lower-grid > .dashboard-missions-panel { grid-column:1 !important; grid-row:1 !important; min-width:0 !important; }
body.page-template-dashboard-page .dashboard-lower-grid > .top-widgets { grid-column:2 !important; grid-row:1 !important; display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; min-width:0 !important; }
body.page-template-dashboard-page .app-content, body.page-template-dashboard-page .app-content * { box-sizing:border-box !important; }
@media(max-width:1500px){ body.page-template-dashboard-page .roles-grid-dashboard { grid-template-columns:repeat(3,minmax(0,1fr)) !important; } }
@media(max-width:1050px){ body.page-template-dashboard-page .app-sidebar { flex-basis:180px !important; width:180px !important; min-width:180px !important; } body.page-template-dashboard-page .app-content { width:calc(100% - 180px) !important; max-width:calc(100% - 180px) !important; padding:14px !important; } body.page-template-dashboard-page .dashboard-lower-grid { grid-template-columns:minmax(0,1fr) !important; } body.page-template-dashboard-page .dashboard-lower-grid > .dashboard-missions-panel, body.page-template-dashboard-page .dashboard-lower-grid > .top-widgets { grid-column:1 !important; grid-row:auto !important; } }
@media(max-width:650px){ body.page-template-dashboard-page .app-dashboard { display:block !important; } body.page-template-dashboard-page .app-sidebar { width:100% !important; min-width:0 !important; } body.page-template-dashboard-page .app-content { width:100% !important; max-width:100% !important; padding:12px !important; } body.page-template-dashboard-page .dashboard-header { flex-direction:column !important; align-items:flex-start !important; min-height:170px !important; padding:18px !important; } body.page-template-dashboard-page .dashboard-header > div { max-width:100% !important; } body.page-template-dashboard-page .roles-grid-dashboard { grid-template-columns:repeat(2,minmax(0,1fr)) !important; } body.page-template-dashboard-page .dashboard-lower-grid > .top-widgets { grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }



/* V16.2 — tarjetas de Rol compactas inspiradas en el mockup */
body.page-template-dashboard-page .roles-section { width:100%; min-width:0; }
body.page-template-dashboard-page .roles-grid-dashboard {
  display:grid !important;
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:10px !important;
  align-items:stretch !important;
}
body.page-template-dashboard-page .rol-card-dashboard {
  min-height:0 !important;
  height:172px !important;
  padding:10px 9px 8px !important;
  gap:0 !important;
  border:1px solid color-mix(in srgb,var(--rol-color,#3b82f6) 42%,#19314c) !important;
  background-color:#0b1b30 !important;
  border-radius:12px !important;
}
body.page-template-dashboard-page .rol-card-dashboard::before {
  height:100% !important;
  background-image:linear-gradient(180deg,rgba(5,15,30,.12) 0%,rgba(5,15,30,.48) 34%,rgba(7,22,40,.96) 100%),var(--rol-image) !important;
  background-size:cover !important;
  background-position:center center !important;
  opacity:1 !important;
}
body.page-template-dashboard-page .rol-card-dashboard::after { display:none !important; }
body.page-template-dashboard-page .rol-card-dashboard .rol-card-top.rol-card-top-centered {
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-align:center !important;
  position:relative !important;
  min-height:0 !important;
  height:99px !important;
  margin:0 0 7px !important;
  padding:0 !important;
  gap:3px !important;
}
body.page-template-dashboard-page .rol-card-top-centered .rol-card-icon {
  display:grid !important;
  place-items:center !important;
  flex:0 0 28px !important;
  width:28px !important;
  height:28px !important;
  margin:0 auto 1px !important;
  border-radius:50% !important;
  background:var(--rol-color,#3b82f6) !important;
  box-shadow:0 3px 12px rgba(0,0,0,.24) !important;
}
body.page-template-dashboard-page .rol-card-top-centered .rol-card-title {
  width:100% !important;
  min-width:0 !important;
  text-align:center !important;
}
body.page-template-dashboard-page .rol-card-top-centered .rol-card-title h4 {
  margin:0 auto 3px !important;
  color:#fff !important;
  font-size:14px !important;
  font-weight:750 !important;
  line-height:1.18 !important;
  text-align:center !important;
  overflow-wrap:break-word !important;
}
body.page-template-dashboard-page .rol-card-top-centered .rol-card-title .rol-card-subtitle {
  display:block !important;
  color:rgba(239,246,255,.86) !important;
  font-size:9px !important;
  line-height:1.25 !important;
  text-align:center !important;
  min-height:22px !important;
}
body.page-template-dashboard-page .rol-card-top-centered .rol-badge {
  position:absolute !important;
  top:0 !important;
  right:0 !important;
  padding:3px 5px !important;
  font-size:9px !important;
  line-height:1.2 !important;
  border-radius:999px !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-progreso { margin-top:auto !important; padding:0 !important; }
body.page-template-dashboard-page .rol-card-dashboard .rol-progreso-header { display:none !important; }
body.page-template-dashboard-page .rol-card-dashboard .rol-progress-track {
  width:100% !important;
  height:9px !important;
  border-radius:999px !important;
  overflow:hidden !important;
  background:rgba(148,163,184,.22) !important;
  margin:0 0 5px !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-progress-fill {
  height:100% !important;
  border-radius:999px !important;
  background:var(--rol-color,#3b82f6) !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-progreso-puntos {
  display:flex !important;
  justify-content:space-between !important;
  color:#e6f0ff !important;
  font-size:10px !important;
  line-height:1.2 !important;
  margin:0 0 4px !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-card-link {
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  padding:2px 0 0 !important;
  margin-top:2px !important;
  font-size:10px !important;
  line-height:1.2 !important;
}
@media(max-width:1450px) {
 body.page-template-dashboard-page .roles-grid-dashboard { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
}
@media(max-width:700px) {
 body.page-template-dashboard-page .roles-grid-dashboard { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
 body.page-template-dashboard-page .rol-card-dashboard { height:180px !important; }
}
@media(max-width:420px) {
 body.page-template-dashboard-page .roles-grid-dashboard { grid-template-columns:minmax(0,1fr) !important; }
}

/* Formulario Crear Rol con imagen opcional y vista previa */
.crear-rol-page { max-width:760px; margin:36px auto; padding:0 18px; color:#eaf2ff; }
.crear-rol-panel { background:#0b1b30; border:1px solid #203b5c; border-radius:20px; padding:30px; box-shadow:0 20px 55px rgba(0,0,0,.22); }
.crear-rol-eyebrow { color:#8bb8ff; font-size:11px; font-weight:800; letter-spacing:.16em; }
.crear-rol-panel h1 { color:#fff; font-size:clamp(27px,4vw,36px); margin:8px 0; }
.crear-rol-intro,.crear-rol-help { color:#a8bdd8; }
.crear-rol-form label { display:block; color:#e6efff; font-weight:700; margin:16px 0 7px; }
.crear-rol-form input[type=text],.crear-rol-form input[type=number] { width:100%; min-height:46px; background:#071426; border:1px solid #294363; color:#fff; border-radius:10px; padding:10px 12px; }
.crear-rol-image-field { margin:22px 0; }
.crear-rol-image-field > label { font-size:16px; }
.crear-rol-image-field > label span { color:#93a8c3; font-weight:400; }
.crear-rol-upload { display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:150px; padding:20px; border:1px dashed #5277a4; border-radius:14px; background:#10243d; cursor:pointer; text-align:center; }
.crear-rol-upload-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#243f68; color:#fff; font-size:25px; }
.crear-rol-upload input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.crear-rol-upload #crear-rol-filename { color:#a9bed8; font-size:12px; font-weight:400; overflow-wrap:anywhere; }
.crear-rol-preview { margin-top:14px; }
.crear-rol-preview img { display:block; width:100%; max-height:260px; object-fit:cover; border-radius:12px; border:1px solid #2d4c70; }
.crear-rol-preview button { margin-top:8px; background:transparent; border:1px solid #476384; color:#dbeafe; border-radius:8px; padding:7px 12px; }
.crear-rol-submit { width:100%; display:flex; justify-content:center; gap:12px; margin-top:18px; padding:14px 18px; border:0; border-radius:11px; color:#fff; font-weight:800; background:linear-gradient(100deg,#4f46e5,#2563eb); cursor:pointer; }
.crear-rol-errors { margin:16px 0; padding:12px 16px; border-radius:10px; border:1px solid #9f3543; background:#421d2b; color:#ffe4e6; }
.crear-rol-errors p { margin:4px 0; }
@media(max-width:600px) { .crear-rol-panel { padding:20px; } }


/* V16.3 — ajustes solicitados: título/subtítulo centrados, fotografía más visible y progreso más grueso */
body.page-template-dashboard-page .rol-card-dashboard {
  height: 172px !important;
  min-height: 172px !important;
  padding: 9px 9px 8px !important;
}
body.page-template-dashboard-page .rol-card-dashboard::before {
  inset: 0 !important;
  height: 100% !important;
  /* Mantener la fotografía reconocible en la mitad superior y oscurecer gradualmente abajo */
  background-image: linear-gradient(180deg, rgba(5,15,30,.04) 0%, rgba(5,15,30,.16) 30%, rgba(7,22,40,.76) 63%, #0b1b30 100%), var(--rol-image) !important;
  background-size: cover !important;
  background-position: center 30% !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-card-top.rol-card-top-centered {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  width: 100% !important;
  height: 103px !important;
  min-height: 103px !important;
  margin: 0 0 4px !important;
  padding: 0 2px !important;
  gap: 2px !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-card-top.rol-card-top-centered .rol-card-icon {
  flex: 0 0 26px !important;
  width: 26px !important;
  height: 26px !important;
  margin: 0 auto 2px !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-card-top.rol-card-top-centered .rol-card-title {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  text-align: center !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-card-top.rol-card-top-centered .rol-card-title h4 {
  display: block !important;
  width: 100% !important;
  margin: 0 auto 3px !important;
  text-align: center !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
  font-weight: 750 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-wrap: balance;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-card-top.rol-card-top-centered .rol-card-subtitle {
  display: block !important;
  width: 100% !important;
  margin: 0 auto !important;
  text-align: center !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
  min-height: 20px !important;
  color: rgba(239,246,255,.94) !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-card-top.rol-card-top-centered .rol-badge {
  top: 0 !important;
  right: 0 !important;
  z-index: 2 !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-progress-track {
  height: 12px !important;
  min-height: 12px !important;
  border-radius: 999px !important;
  margin: 0 0 5px !important;
  background: rgba(148,163,184,.30) !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-progress-fill {
  height: 100% !important;
  min-height: 12px !important;
  border-radius: 999px !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-progreso-puntos {
  font-size: 9px !important;
  margin-bottom: 3px !important;
}
@media (max-width: 1450px) {
  body.page-template-dashboard-page .roles-grid-dashboard { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}
@media (max-width: 650px) {
  body.page-template-dashboard-page .roles-grid-dashboard { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  body.page-template-dashboard-page .rol-card-dashboard { height: 180px !important; min-height: 180px !important; }
}


/* V16.4 — tarjetas con foto superior nítida y composición como la referencia */
body.page-template-dashboard-page .roles-grid-dashboard {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch !important;
}
body.page-template-dashboard-page .rol-card-dashboard {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  height: 232px !important;
  min-height: 232px !important;
  padding: 0 10px 9px !important;
  gap: 0 !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  background: #0b1b30 !important;
  isolation: isolate !important;
}
/* La foto ocupa solo la franja superior; no se estira sobre toda la tarjeta. */
body.page-template-dashboard-page .rol-card-dashboard::before {
  content: '' !important;
  position: absolute !important;
  z-index: -1 !important;
  inset: 0 0 auto 0 !important;
  height: 82px !important;
  background-image: var(--rol-image) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  filter: none !important;
  opacity: 1 !important;
}
body.page-template-dashboard-page .rol-card-dashboard::after {
  content: '' !important;
  position: absolute !important;
  z-index: -1 !important;
  inset: 58px 0 auto 0 !important;
  height: 42px !important;
  background: linear-gradient(180deg, rgba(11,27,48,0), #0b1b30 92%) !important;
  display: block !important;
  pointer-events: none !important;
}
body.page-template-dashboard-page .rol-card-dashboard > * { position: relative !important; z-index: 1 !important; min-width: 0 !important; }
/* Icono sobre la imagen, centrado */
body.page-template-dashboard-page .rol-card-dashboard .rol-card-top.rol-card-top-centered {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 -10px 7px !important;
  padding: 10px 10px 0 !important;
  gap: 0 !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-card-top.rol-card-top-centered .rol-card-icon {
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 30px !important;
  margin: 0 auto 42px !important;
  border-radius: 50% !important;
  background: var(--rol-color, #3b82f6) !important;
  box-shadow: 0 2px 9px rgba(0,0,0,.28) !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-card-top.rol-card-top-centered .rol-card-title {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  text-align: center !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-card-top.rol-card-top-centered .rol-card-title h4 {
  margin: 0 auto 4px !important;
  width: 100% !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-card-top.rol-card-top-centered .rol-card-subtitle {
  display: block !important;
  width: 100% !important;
  min-height: 30px !important;
  margin: 0 auto !important;
  color: #c4d5eb !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
  text-align: center !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-badge { display: none !important; }
body.page-template-dashboard-page .rol-card-dashboard .rol-progreso {
  margin-top: auto !important;
  padding: 0 !important;
  width: 100% !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-progreso-header {
  display: none !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-progress-row {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  width: 100% !important;
  margin: 0 0 7px !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-progress-track {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  height: 11px !important;
  min-height: 11px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: rgba(148,163,184,.24) !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-progress-fill {
  display: block !important;
  height: 100% !important;
  min-height: 11px !important;
  border-radius: 999px !important;
  background: var(--rol-color, #3b82f6) !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-progress-percent {
  flex: 0 0 auto !important;
  color: #eaf2ff !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-progreso-puntos {
  display: flex !important;
  justify-content: flex-start !important;
  color: #dbeafe !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  margin: 0 0 7px !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-card-link {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: auto !important;
  padding: 5px 0 0 !important;
  border-top: 1px solid rgba(148,163,184,.15) !important;
  color: #7fc5ff !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}
@media (max-width: 1450px) {
  body.page-template-dashboard-page .roles-grid-dashboard { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}
@media (max-width: 700px) {
  body.page-template-dashboard-page .roles-grid-dashboard { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  body.page-template-dashboard-page .rol-card-dashboard { height: 232px !important; min-height: 232px !important; }
}
@media (max-width: 420px) {
  body.page-template-dashboard-page .roles-grid-dashboard { grid-template-columns: minmax(0,1fr) !important; }
}

/* V16.6 — ajuste final: icono a la izquierda del título del Rol.
   Sobrescribe únicamente la composición de la cabecera de las tarjetas. */
body.page-template-dashboard-page .rol-card-dashboard .rol-card-top.rol-card-top-centered {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  box-sizing: border-box !important;
  height: 82px !important;
  min-height: 82px !important;
  margin: 0 -10px 7px !important;
  padding: 10px 10px 8px !important;
  gap: 9px !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-card-top.rol-card-top-centered .rol-card-icon {
  display: grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: var(--rol-color, #3b82f6) !important;
  box-shadow: 0 2px 9px rgba(0,0,0,.28) !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-card-top.rol-card-top-centered .rol-card-title {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  text-align: left !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-card-top.rol-card-top-centered .rol-card-title h4 {
  margin: 0 0 4px !important;
  width: 100% !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  text-align: left !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-card-top.rol-card-top-centered .rol-card-subtitle {
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  color: #c4d5eb !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
  text-align: left !important;
}


/* V16.7 — la imagen queda arriba y TODO el contenido debajo.
   Se conserva el icono a la izquierda del título; la cabecera ya no se superpone a la fotografía. */
body.page-template-dashboard-page .rol-card-dashboard {
  display: flex !important;
  flex-direction: column !important;
  height: 252px !important;
  min-height: 252px !important;
  padding: 0 10px 9px !important;
  overflow: hidden !important;
  background: #0b1b30 !important;
}
body.page-template-dashboard-page .rol-card-dashboard::before {
  inset: 0 0 auto 0 !important;
  height: 70px !important;
  z-index: 0 !important;
  background-size: cover !important;
  background-position: center center !important;
  filter: none !important;
}
body.page-template-dashboard-page .rol-card-dashboard::after {
  inset: 48px 0 auto 0 !important;
  height: 32px !important;
  z-index: 0 !important;
  background: linear-gradient(180deg, rgba(11,27,48,0), #0b1b30 96%) !important;
}
body.page-template-dashboard-page .rol-card-dashboard > * {
  position: relative !important;
  z-index: 1 !important;
  min-width: 0 !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-card-top.rol-card-top-centered {
  order: 1 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  text-align: left !important;
  box-sizing: border-box !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 92px 0 9px !important;
  padding: 0 !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-card-top.rol-card-top-centered .rol-card-icon {
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 30px !important;
  margin: 0 !important;
  border-radius: 50% !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-card-top.rol-card-top-centered .rol-card-title {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  text-align: left !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-card-top.rol-card-top-centered .rol-card-title h4 {
  margin: 0 0 3px !important;
  width: 100% !important;
  font-size: 15px !important;
  line-height: 1.15 !important;
  text-align: left !important;
  overflow-wrap: anywhere !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-card-top.rol-card-top-centered .rol-card-subtitle {
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
  text-align: left !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-progreso {
  order: 2 !important;
  margin: 0 0 5px !important;
  padding: 0 !important;
  width: 100% !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-progress-row {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  width: 100% !important;
  margin: 0 0 5px !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-progress-track {
  flex: 1 1 auto !important;
  width: auto !important;
  height: 11px !important;
  min-height: 11px !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-progress-percent {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-progreso-puntos {
  order: 3 !important;
  margin: 0 0 6px !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
}
body.page-template-dashboard-page .rol-card-dashboard .rol-card-link {
  order: 4 !important;
  margin-top: auto !important;
  padding-top: 5px !important;
}
@media (max-width: 700px) {
  body.page-template-dashboard-page .rol-card-dashboard {
    height: 252px !important;
    min-height: 252px !important;
  }
}