/* ═══════════════════════════════════════════════════════
   Control Impulso — Estilos compartidos portal guardia
   Páginas: agendar, credenciales, boletas, informes
   Referencia: informes.html (header sin logo/icono)
   ═══════════════════════════════════════════════════════ */

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

/* ── Desktop / Mobile toggle ── */
.pg-desktop,
.desktop-informes,
.desktop-boletas,
.desktop-agendar,
.desktop-credenciales { display: block; }

.pg-mobile,
.mobile-informes,
.mobile-boletas,
.mobile-agendar,
.mobile-credenciales { display: none !important; }

@media (max-width: 768px) {
    .pg-desktop,
    .desktop-informes,
    .desktop-boletas,
    .desktop-agendar,
    .desktop-credenciales { display: none !important; }

    .pg-mobile,
    .mobile-informes,
    .mobile-boletas,
    .mobile-agendar,
    .mobile-credenciales { display: block !important; }
}

/* ── Mobile page shell (compensa padding de .main-content) ── */
.pg-mobile,
.mobile-informes,
.mobile-boletas,
.mobile-agendar,
.mobile-credenciales {
    animation: pgFadeUp 0.4s ease both;
    padding-top: 1rem;
    padding-bottom: 2rem;
    margin-left: -1rem;
    margin-right: -1rem;
}

/* ── Mobile header (sin logo / sin icono en título) ── */
.pg-header,
.mi-header,
.mb-header,
.mc-header,
.ma-header {
    padding: 0 1rem 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.pg-header h1,
.mi-header h1,
.mb-header h1,
.mc-header h1,
.ma-header h1 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--navy, #1A2B4A);
    margin: 0;
    line-height: 1.25;
}

.pg-badge,
.mi-badge-header,
.mb-badge-header,
.mc-badge-header,
.ma-badge-header {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: 'Plus Jakarta Sans', sans-serif;
    white-space: nowrap;
    flex-shrink: 0;
}

.pg-badge.activo,
.mi-badge-header.activo,
.mb-badge-header.activo,
.mc-badge-header.activo,
.ma-badge-header.activo {
    background: #E8F5E9;
    color: #2E7D32;
}

.pg-badge.inactivo,
.mi-badge-header.inactivo,
.mb-badge-header.inactivo,
.mc-badge-header.inactivo,
.ma-badge-header.inactivo {
    background: var(--gray-100, #F1F3F4);
    color: var(--gray-500, #80868B);
}

/* ── Mobile cards base ── */
.pg-card,
.mi-card,
.mb-card,
.mc-card {
    background: var(--white, #FFFFFF);
    border-radius: 16px;
    padding: 1.25rem;
    margin: 0 1rem 0.75rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-100, #F1F3F4);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.mi-card,
.mb-card {
    cursor: pointer;
}

.pg-card-top,
.mi-card-top,
.mb-card-top,
.mc-card-top {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
}

.pg-card-title,
.mi-card-title,
.mb-card-title,
.mc-card-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--navy, #1A2B4A);
    margin-bottom: 0.35rem;
    line-height: 1.3;
}

.pg-card-meta,
.mi-card-meta,
.mb-card-meta,
.mc-card-meta {
    font-size: 0.8rem;
    color: var(--gray-500, #80868B);
    line-height: 1.5;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.pg-card-meta i,
.mi-card-meta i,
.mb-card-meta i,
.mc-card-meta i {
    font-size: 0.75rem;
    margin-right: 0.3rem;
    color: var(--gray-400, #9AA0A6);
    width: 14px;
    text-align: center;
    display: inline-block;
}

.pg-card-arrow,
.mi-card-arrow,
.mb-card-arrow,
.mc-card-arrow {
    color: var(--gray-300, #DADCE0);
    font-size: 1rem;
    align-self: center;
    margin-left: 0.25rem;
}

.pg-card-icon,
.mi-card-icon,
.mb-card-icon,
.mc-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--white);
    flex-shrink: 0;
}

/* Left accent bar on cards */
.pg-card::before,
.mi-card::before,
.mb-card::before,
.mc-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 4px 0 0 4px;
}

.pg-card.psicologica::before,
.mi-card.psicologica::before,
.mb-card.psicologica::before { background: linear-gradient(180deg, var(--coral, #FF6B6B), var(--coral-dark, #E85A5A)); }
.pg-card.medica::before,
.mi-card.medica::before,
.mb-card.medica::before { background: linear-gradient(180deg, var(--turquoise, #4ECDC4), var(--turquoise-dark, #3DBDB5)); }
.pg-card.coral::before,
.mc-card.coral::before { background: linear-gradient(180deg, var(--coral, #FF6B6B), var(--coral-dark, #E85A5A)); }

.pg-card.psicologica .pg-card-icon,
.mi-card.psicologica .mi-card-icon,
.mb-card.psicologica .mb-card-icon { background: linear-gradient(135deg, var(--coral, #FF6B6B), var(--coral-dark, #E85A5A)); }
.pg-card.medica .pg-card-icon,
.mi-card.medica .mi-card-icon,
.mb-card.medica .mb-card-icon { background: linear-gradient(135deg, var(--turquoise, #4ECDC4), var(--turquoise-dark, #3DBDB5)); }
.mc-card.coral .mc-card-icon { background: linear-gradient(135deg, var(--coral, #FF6B6B), var(--coral-dark, #E85A5A)); }

.pg-card:active,
.mi-card:active,
.mb-card:active,
.mc-card:active {
    transform: scale(0.98);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
}

/* ── Mobile empty state ── */
.pg-empty,
.mi-empty,
.mb-empty,
.mc-empty {
    text-align: center;
    padding: 3rem 1.5rem;
}

.pg-empty-icon,
.mi-empty-icon,
.mb-empty-icon,
.mc-empty-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--gray-100, #F1F3F4);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.75rem;
    color: var(--gray-300, #DADCE0);
}

.pg-empty-title,
.mi-empty-title,
.mb-empty-title,
.mc-empty-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--navy, #1A2B4A);
    margin-bottom: 0.5rem;
}

.pg-empty-desc,
.mi-empty-desc,
.mb-empty-desc,
.mc-empty-desc {
    font-size: 0.85rem;
    color: var(--gray-500, #80868B);
    margin-bottom: 1.25rem;
    line-height: 1.5;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.pg-empty-btn,
.mi-empty-btn,
.mb-empty-btn,
.mc-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    background: linear-gradient(135deg, var(--coral, #FF6B6B), var(--coral-dark, #E85A5A));
    color: var(--white);
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.pg-section-title,
.mb-section-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gray-500, #80868B);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.5rem 1rem 0.25rem;
    margin-top: 0.5rem;
}

/* ── Desktop header (sin icono) ── */
.topbar,
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.page-title h1,
.page-header h1,
.topbar .page-title h1 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--navy, #1A2B4A);
    margin: 0 0 0.25rem;
    line-height: 1.25;
}

.page-title p,
.page-header p {
    color: var(--gray-500, #737373);
    font-size: 0.9rem;
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ── Desktop cards container ── */
.pg-card-desktop,
.card {
    background: var(--white, #FFFFFF);
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 0 20px 60px rgba(45, 52, 54, 0.08);
    margin-bottom: 1.25rem;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.card-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--navy, #1A2B4A);
    margin: 0;
}

/* ── Desktop buttons ── */
.pg-btn,
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-family: 'Plus Jakarta Sans', sans-serif;
    transition: all 0.2s ease;
}

.pg-btn-primary,
.btn-primary {
    background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}

.pg-btn-primary:hover,
.btn-primary:hover { transform: translateY(-1px); }

.pg-btn-secondary,
.btn-secondary {
    background: white;
    color: var(--navy, #1A2B4A);
    border: 2px solid var(--gray-200, #E5E5E5);
}

.pg-btn-secondary:hover,
.btn-secondary:hover {
    border-color: var(--turquoise, #4ECDC4);
    color: var(--turquoise, #4ECDC4);
}

.btn-sm { padding: 0.375rem 0.75rem; font-size: 0.8rem; }

/* ── Badges ── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.7rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.badge-success { background: #e8f5e9; color: #1b5e20; }
.badge-warning { background: #fff8e1; color: #7c5700; }
.badge-blue    { background: #e3f2fd; color: #0d3c6e; }
.badge-gray    { background: #f0f0f0; color: #636E72; }
.badge-danger  { background: #fce4ec; color: #880e4f; }

/* ── Desktop empty state ── */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--gray-500, #737373);
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.empty-state i {
    font-size: 2.5rem;
    opacity: 0.35;
    display: block;
    margin-bottom: 0.75rem;
}

.empty-state p,
.empty-state h3 {
    margin: 0 0 1.25rem;
    font-size: 0.9rem;
}

.empty-state h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--navy, #1A2B4A);
}

/* ── Agendar: eval cards alineadas con portal ── */
.ma-eval-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0;
}

.ma-eval-card {
    background: var(--white);
    border-radius: 16px;
    padding: 1.25rem;
    margin: 0 1rem 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-100, #F1F3F4);
    text-decoration: none;
    color: inherit;
    display: block;
    position: relative;
    overflow: hidden;
    transition: all 0.25s ease;
}

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

.ma-eval-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 4px 0 0 4px;
}

.ma-eval-card.psico::before { background: linear-gradient(180deg, var(--coral), var(--coral-dark)); }
.ma-eval-card.medica::before { background: linear-gradient(180deg, var(--turquoise, #4ECDC4), #3DBDB5); }

@media (min-width: 769px) {
    .agr-container {
        max-width: 720px;
        margin: 0 auto;
        padding: 0;
    }

    .eval-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    .cred-fab {
        bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 1rem);
    }
    .cred-shell {
        margin-left: -1rem;
        margin-right: -1rem;
    }
}