/* =====================================================================
   PAC 2.0 - Sistema de diseño
   Inspirado en el nivel de pulido de tableros modernos (cards con
   icono, stats con acento de color, header con gradiente), adaptado
   a identidad propia de PAC. Mobile-first, sin frameworks pesados.
   ===================================================================== */

:root {
    --pac-primary: #0f5c3d;
    --pac-primary-dark: #0a3d29;
    --pac-primary-light: #16804f;
    --pac-accent: #e8a020;
    --pac-accent-dark: #c8860a;
    --pac-bg: #f0f4f2;
    --pac-surface: #ffffff;
    --pac-text: #1a2620;
    --pac-text-muted: #62766c;
    --pac-danger: #cc2200;
    --pac-success: #007744;
    --pac-border: #d7e2dc;
    --pac-radius: 12px;
    --pac-shadow: 0 2px 12px rgba(15, 92, 61, 0.12);
    --pac-shadow-hover: 0 10px 28px rgba(15, 92, 61, 0.18);
    --pac-font-heading: 'Sora', sans-serif;
    --pac-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--pac-font-body);
    background: var(--pac-bg);
    color: var(--pac-text);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--pac-primary); }

h1, h2, h3 { font-family: var(--pac-font-heading); }

/* ---------- Login ---------- */

.pac-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: linear-gradient(135deg, var(--pac-primary) 0%, var(--pac-primary-dark) 60%, #06231a 100%);
}

.pac-login-card {
    width: 100%;
    max-width: 380px;
    background: var(--pac-surface);
    border-radius: var(--pac-radius);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    padding: 36px 28px 28px;
}

.pac-login-card__logo {
    display: block;
    max-width: 160px;
    margin: 0 auto 20px;
}

.pac-login-card__logo-fallback {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pac-primary), var(--pac-primary-light));
    color: #fff;
    align-items: center;
    justify-content: center;
    font-family: var(--pac-font-heading);
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
}

.pac-login-card h1 {
    font-size: 1.4rem;
    font-weight: 800;
    text-align: center;
    margin: 0 0 24px;
    color: var(--pac-text);
}

.pac-field { margin-bottom: 16px; }

.pac-field label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--pac-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.pac-field input, .pac-field select, .pac-field textarea {
    width: 100%;
    padding: 12px 14px;
    font-size: 1rem;
    font-family: var(--pac-font-body);
    border: 1px solid var(--pac-border);
    border-radius: 8px;
    background: #fbfcfb;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.pac-field input:focus, .pac-field select:focus, .pac-field textarea:focus {
    outline: none;
    border-color: var(--pac-primary);
    box-shadow: 0 0 0 3px rgba(15, 92, 61, 0.15);
    background: #fff;
}

.pac-field--password { position: relative; }

.pac-field--password .pac-toggle-password {
    position: absolute;
    right: 10px;
    top: 34px;
    background: none;
    border: none;
    font-size: 0.8rem;
    color: var(--pac-text-muted);
    cursor: pointer;
    padding: 4px 6px;
}

.pac-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px 16px;
    font-size: 0.95rem;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background: var(--pac-primary);
    color: #fff;
    transition: background .15s ease, transform .05s ease;
    text-decoration: none;
    font-family: var(--pac-font-body);
}

.pac-btn:hover { background: var(--pac-primary-dark); }
.pac-btn:active { transform: scale(0.99); }
.pac-btn:disabled, .pac-btn[disabled] { background: var(--pac-text-muted); opacity: .6; cursor: not-allowed; }
.pac-btn:disabled:hover, .pac-btn[disabled]:hover { background: var(--pac-text-muted); }

.pac-btn--ghost { background: transparent; color: var(--pac-text-muted); border: 1px solid var(--pac-border); }
.pac-btn--ghost:hover { background: #eef4f1; color: var(--pac-text); }
.pac-btn--danger { background: var(--pac-danger); }
.pac-btn--danger:hover { background: #a11d13; }
.pac-input-small { padding: 6px 10px; border: 1px solid var(--pac-border); border-radius: 6px; font-size: 0.85rem; max-width: 280px; }
.pac-btn--inline { width: auto; padding: 10px 18px; margin-top: 8px; }
.pac-btn--small { width: auto; padding: 8px 14px; font-size: 0.85rem; }

.pac-alert { padding: 10px 14px; border-radius: 8px; font-size: 0.9rem; margin-bottom: 16px; }
.pac-alert--error { background: #fdecea; color: var(--pac-danger); border: 1px solid #f6c4bd; }
.pac-alert--success { background: #e4f7ee; color: var(--pac-success); border: 1px solid #bfe6cc; }

/* ---------- Header (gradiente + chip de usuario) ---------- */

.pac-topbar {
    background: linear-gradient(135deg, var(--pac-primary) 0%, var(--pac-primary-dark) 70%);
    color: #fff;
    box-shadow: 0 3px 18px rgba(0,0,0,.25);
}

.pac-topbar__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
}

.pac-topbar__title {
    font-family: var(--pac-font-heading);
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: 0.3px;
}

.pac-topbar__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    order: 3;
    width: 100%;
}

.pac-topbar__nav a {
    text-decoration: none;
    color: rgba(255,255,255,0.82);
    font-weight: 600;
    font-size: 0.88rem;
}

.pac-topbar__nav a:hover { color: #fff; }

.pac-topbar__right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pac-user-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.15);
    border-radius: 20px;
    padding: 5px 14px 5px 5px;
}

.pac-user-chip__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--pac-accent);
    color: var(--pac-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--pac-font-heading);
    font-weight: 800;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.pac-user-chip__name { font-size: 0.82rem; font-weight: 700; line-height: 1.1; }
.pac-user-chip__role { font-size: 0.68rem; opacity: 0.75; display: block; }

.pac-topbar__logout button {
    background: rgba(255,255,255,.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 20px;
    padding: 7px 14px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--pac-font-body);
}
.pac-topbar__logout button:hover { background: rgba(255,255,255,.25); }

/* ---------- Contenido ---------- */

.pac-content { max-width: 1200px; margin: 0 auto; padding: 24px 16px 48px; }

.pac-card {
    background: var(--pac-surface);
    border-radius: var(--pac-radius);
    box-shadow: var(--pac-shadow);
    border: 1px solid var(--pac-border);
    padding: 24px;
}

.pac-card--spaced { margin-top: 18px; }
.pac-text-muted { color: var(--pac-text-muted); }
.pac-text-small { font-size: 0.85rem; }

/* Bienvenida con gradiente */
.pac-welcome {
    background: linear-gradient(135deg, var(--pac-primary), var(--pac-primary-light));
    color: #fff;
    border-radius: var(--pac-radius);
    padding: 24px 28px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-shadow: var(--pac-shadow);
    flex-wrap: wrap;
}
.pac-welcome h2 { font-size: 1.6rem; font-weight: 800; margin: 0; }
.pac-welcome p { font-size: 0.85rem; opacity: 0.8; margin: 6px 0 0; }
.pac-welcome__badge {
    background: var(--pac-accent);
    color: var(--pac-primary-dark);
    padding: 8px 18px;
    border-radius: 20px;
    font-family: var(--pac-font-heading);
    font-weight: 800;
    font-size: 0.85rem;
    white-space: nowrap;
}

/* Stats (KPI) */
.pac-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.pac-stat {
    background: var(--pac-surface);
    border-radius: var(--pac-radius);
    padding: 16px 18px;
    box-shadow: var(--pac-shadow);
    border-left: 5px solid var(--pac-border);
    display: flex;
    align-items: center;
    gap: 12px;
}
.pac-stat--accent { border-left-color: var(--pac-accent); }
.pac-stat--success { border-left-color: var(--pac-success); }
.pac-stat--primary { border-left-color: var(--pac-primary-light); }

.pac-stat__num { font-family: var(--pac-font-heading); font-size: 1.7rem; font-weight: 800; line-height: 1; }
.pac-stat__lbl { font-size: 0.7rem; font-weight: 700; color: var(--pac-text-muted); text-transform: uppercase; letter-spacing: 0.3px; }

/* Tarjetas de módulo (grid) */
.pac-sec-title {
    font-family: var(--pac-font-heading);
    font-size: 1rem;
    font-weight: 800;
    color: var(--pac-primary);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 0 0 14px;
}

.pac-modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.pac-module-card {
    background: var(--pac-surface);
    border-radius: var(--pac-radius);
    box-shadow: var(--pac-shadow);
    border: 1px solid var(--pac-border);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform .18s ease, box-shadow .18s ease;
}
.pac-module-card:hover { transform: translateY(-4px); box-shadow: var(--pac-shadow-hover); }

.pac-module-card__top { padding: 20px 18px 14px; display: flex; align-items: center; gap: 12px; }
.pac-module-card__icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 1.4rem;
}
.pac-module-card__title { font-family: var(--pac-font-heading); font-size: 1.05rem; font-weight: 800; color: var(--pac-text); line-height: 1.2; }
.pac-module-card__sub { font-size: 0.72rem; color: var(--pac-text-muted); margin-top: 2px; }
.pac-module-card__body { padding: 0 18px 12px; font-size: 0.82rem; color: var(--pac-text-muted); line-height: 1.5; }
.pac-module-card__footer {
    padding: 10px 18px;
    border-top: 1px solid var(--pac-border);
    display: flex; align-items: center; justify-content: space-between;
    font-size: 0.78rem;
}
.pac-module-card__badge {
    background: #eef4f1;
    color: var(--pac-primary);
    padding: 3px 10px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.72rem;
}

/* Progreso */
.pac-progress { width: 100%; height: 8px; border-radius: 4px; background: var(--pac-border); overflow: hidden; margin: 8px 0; }
.pac-progress__bar { height: 100%; background: var(--pac-primary); transition: width .3s ease; }

/* Listas */
.pac-list { list-style: none; margin: 16px 0 0; padding: 0; }
.pac-list__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--pac-border); }
.pac-list__info { display: flex; flex-direction: column; gap: 4px; }
.pac-list__title { font-weight: 700; }

.pac-badge { display: inline-block; width: fit-content; padding: 2px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; }
.pac-badge--success { background: #e4f7ee; color: var(--pac-success); }
.pac-badge--pending { background: #fdf3e3; color: #a5680f; }

/* Video */
.pac-video-wrap { position: relative; width: 100%; padding-top: 56.25%; background: #000; border-radius: 8px; overflow: hidden; margin: 16px 0; }
.pac-video-wrap iframe, .pac-video-wrap video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }

/* Cursos animados tipo SCORM (capacitaciones_sst): a diferencia del
   video 16:9, este contenido trae sus propios menús y paneles de
   texto - necesita más alto. Mismo contenedor .pac-video-wrap, solo
   se le sube el padding-top proporcional (equivale a una relación
   4:3 en vez de 16:9). */
.pac-video-wrap--scorm { padding-top: 75%; }
@media (max-width: 600px) { .pac-video-wrap--scorm { padding-top: 130%; } }

/* Bloqueo/desbloqueo de evaluación (animado) */
.pac-unlock-box {
    text-align: center;
    padding: 28px 16px;
    border-radius: var(--pac-radius);
    background: #f7faf8;
    border: 1px dashed var(--pac-border);
    transition: opacity .4s ease;
}
.pac-unlock-box__icon {
    width: 56px; height: 56px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: #eef4f1;
    color: var(--pac-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    animation: pac-pulse 2s infinite;
}
.pac-unlock-box__text { font-size: 0.9rem; color: var(--pac-text-muted); }
.pac-unlock-ready {
    animation: pac-fade-in .5s ease;
}
@keyframes pac-pulse {
    0% { box-shadow: 0 0 0 0 rgba(15,92,61,.25); }
    70% { box-shadow: 0 0 0 12px rgba(15,92,61,0); }
    100% { box-shadow: 0 0 0 0 rgba(15,92,61,0); }
}
@keyframes pac-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Datalist / perfil */
.pac-datalist { margin: 16px 0 0; }
.pac-datalist dt { font-size: 0.75rem; color: var(--pac-text-muted); margin-top: 12px; text-transform: uppercase; letter-spacing: 0.3px; }
.pac-datalist dd { margin: 2px 0 0; font-weight: 700; }

/* Búsqueda / tablas admin */
.pac-search-form { display: flex; gap: 8px; margin: 16px 0; }
.pac-search-form input { flex: 1; padding: 10px 12px; border: 1px solid var(--pac-border); border-radius: 8px; }
.pac-create-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0; }
.pac-form .pac-field { max-width: 480px; }

.pac-breadcrumb {
    font-size: 0.82rem;
    color: var(--pac-text-muted);
    margin-bottom: 16px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.pac-breadcrumb a { color: var(--pac-primary); text-decoration: none; font-weight: 600; }
.pac-breadcrumb a:hover { text-decoration: underline; }

.pac-profile-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    background: var(--pac-surface);
    border-radius: var(--pac-radius);
    box-shadow: var(--pac-shadow);
    border: 1px solid var(--pac-border);
    padding: 22px 24px;
    margin-bottom: 20px;
}
.pac-profile-hero__avatar {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pac-primary), var(--pac-primary-light));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--pac-font-heading);
    font-weight: 800;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.pac-profile-hero h2 { margin: 0; font-size: 1.3rem; font-weight: 800; }
.pac-profile-hero p { margin: 4px 0 0; color: var(--pac-text-muted); font-size: 0.88rem; }

.pac-datalist--grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    margin-top: 12px;
}
.pac-datalist--grid dt { font-size: 0.72rem; color: var(--pac-text-muted); text-transform: uppercase; letter-spacing: 0.3px; margin: 0; }
.pac-datalist--grid dd { margin: 4px 0 0; font-weight: 700; }

.pac-question-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--pac-border);
}
.pac-question-row__title { font-weight: 700; margin: 0 0 8px; }
.pac-question-row__options { margin: 0; padding-left: 18px; font-size: 0.85rem; color: var(--pac-text-muted); }
.pac-question-row__correct { color: var(--pac-success); font-weight: 700; }

/* Banner "Ensayar evaluación" — persistente, NO es un .pac-alert (esos
   se convierten en notificaciones que desaparecen solas). */
/* Aviso permanente cuando el super admin está "viendo como" otra
   persona — color distinto (ámbar) a propósito, para que sea
   imposible confundirlo con el resto del sitio. */
.pac-impersonando-banner {
    position: sticky;
    top: 0;
    z-index: 99;
    background: repeating-linear-gradient(135deg, #f5a623, #f5a623 10px, #e8951a 10px, #e8951a 20px);
    color: #1a2620;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font-weight: 700;
    font-size: 0.85rem;
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
.pac-impersonando-banner span { text-shadow: 0 1px 0 rgba(255,255,255,.3); }

.pac-ensayar-banner {
    position: sticky;
    top: 74px;
    z-index: 50;
    background: #e8f0ff;
    color: #3366cc;
    border: 1px solid #c7dbff;
    border-radius: 10px;
    padding: 12px 18px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(51,102,204,.15);
}.pac-question-row__actions { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; white-space: nowrap; }
.pac-link-btn {
    background: none; border: none; padding: 0; color: var(--pac-danger);
    font-size: 0.85rem; cursor: pointer; text-decoration: underline; font-family: var(--pac-font-body);
}

.pac-chart-wrap { position: relative; width: 100%; height: 280px; }
.pac-chart-wrap--small { height: 240px; }
.pac-two-col { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 18px; }
@media (min-width: 800px) {
    .pac-two-col { grid-template-columns: 1fr 1fr; }
}

/* Control tipo interruptor (admin/controles.php) */
.pac-control-row { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.pac-switch { position: relative; display: inline-block; cursor: pointer; }
.pac-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.pac-switch__track {
    display: block; width: 48px; height: 26px;
    background: var(--pac-border); border-radius: 999px;
    transition: background .2s ease; position: relative;
}
.pac-switch__thumb {
    position: absolute; top: 3px; left: 3px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3);
    transition: transform .2s ease;
}
.pac-switch input:checked + .pac-switch__track { background: var(--pac-primary); }
.pac-switch input:checked + .pac-switch__track .pac-switch__thumb { transform: translateX(22px); }

/* ---------- Barra superior fija ---------- */
.pac-topbar--fija {
    position: sticky;
    top: 0;
    z-index: 100;
}
body { padding-top: 0; }

.pac-online-dot {
    position: absolute;
    bottom: -2px; right: -2px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid var(--pac-primary-dark);
    animation: pac-online-pulse 2s infinite;
}
.pac-user-chip__avatar { position: relative; }
@keyframes pac-online-pulse {
    0% { box-shadow: 0 0 0 0 rgba(34,197,94,.6); }
    70% { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* ---------- Botones con ícono (acciones de tabla) ---------- */
.pac-actions-cell { display: flex; gap: 6px; white-space: nowrap; }
.pac-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: 8px;
    border: 1px solid var(--pac-border);
    background: #fff;
    color: var(--pac-text-muted);
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
    font-size: 0.85rem;
}
.pac-icon-btn:hover { background: #f0f4f2; color: var(--pac-primary); }
.pac-icon-btn--danger:hover { background: #fdecea; color: var(--pac-danger); border-color: #f6c4bd; }
.pac-icon-btn--success:hover { background: #e4f7ee; color: var(--pac-success); border-color: #bfe6cc; }

.pac-btn .fa, .pac-btn i.fa-solid, .pac-btn i.fa-brands { margin-right: 6px; }

/* ---------- Notificaciones flotantes (reemplaza los .pac-alert planos) ---------- */
.pac-toast-container {
    position: fixed;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 420px;
    padding: 0 16px;
    pointer-events: none;
}
.pac-toast {
    background: var(--pac-surface);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,.18);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    animation: pac-toast-in .3s ease;
    pointer-events: auto;
    border-left: 4px solid var(--pac-primary);
}
.pac-toast--success { border-left-color: var(--pac-success); color: var(--pac-success); }
.pac-toast--error { border-left-color: var(--pac-danger); color: var(--pac-danger); }
.pac-toast .fa { font-size: 1.1rem; }
@keyframes pac-toast-in {
    from { opacity: 0; transform: translateY(-14px); }
    to { opacity: 1; transform: translateY(0); }
}
.pac-toast--out { animation: pac-toast-out .25s ease forwards; }
@keyframes pac-toast-out {
    to { opacity: 0; transform: translateY(-14px); }
}

/* Toast de guardado automático (matriz de programación), esquina inferior izquierda */
.pac-save-toast {
    position: fixed;
    left: 16px; bottom: 16px;
    z-index: 999;
    background: var(--pac-text);
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    display: flex; align-items: center; gap: 8px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}
.pac-save-toast--visible { opacity: 1; transform: translateY(0); }
.pac-save-toast--success { background: var(--pac-success); }
.pac-save-toast--error { background: var(--pac-danger); }

/* Matriz de programación de capacitaciones */
.pac-matrix-wrap { overflow-x: auto; margin-top: 12px; }
.pac-matrix { white-space: nowrap; }
.pac-matrix th, .pac-matrix td { padding: 8px 10px; }
.pac-matrix__sticky {
    position: sticky; left: 0;
    background: var(--pac-surface);
    text-align: left !important;
    white-space: normal;
    min-width: 200px;
    max-width: 260px;
    box-shadow: 2px 0 4px rgba(0,0,0,.05);
}

/* ---------- Tablero "juego de la oca" (mis-capacitaciones.php) ---------- */

/* AJUSTE (2026-09-08): separado en 2 capas -- antes el fondo estaba
   limitado al mismo ancho que los nodos/camino, y agrandar uno
   agrandaba el otro (perdiendo la gracia del camino angosto).
   .pac-board-fondo es la capa ANCHA (la imagen, "sangrada" hasta el
   borde real de la tarjeta con márgenes negativos -- así llena TODA
   el área sin importar el ancho real de pantalla, sin adivinar un
   número de píxeles fijo). .pac-board (más abajo) vuelve a ser
   angosto, para los nodos en zigzag. */
.pac-board-fondo {
    position: relative;
    margin: 32px -24px 0;
    padding: 40px 0;
    background-image: url('../img/camino-fondo.jpg');
    background-repeat: repeat-y;
    background-position: top center;
    background-size: 100% auto;
}

.pac-board {
    position: relative;
    max-width: 640px;
    margin: 0 auto;
    padding: 0 8px;
    /* AJUSTE (2026-09-08): explícito y por encima de cualquier
       efecto ambiental (.pac-efecto-capa, z-index:0) -- así el
       camino y su brillo NUNCA quedan tapados sin importar en qué
       orden se combinen los efectos. */
    z-index: 2;
}

/* FEATURE (2026-09-08): antes había una sola línea recta detrás de
   todas las paradas (una lista disfrazada de camino). Ahora es un
   <svg> vacío que JS rellena con una curva real calculada a partir
   de dónde terminó cayendo cada parada -- se adapta solo a
   cualquier cantidad de capacitaciones y a cualquier ancho de
   pantalla, sin coordenadas fijas por nivel. */
.pac-board-path {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
    overflow: visible;
}

/* PRUEBA (2026-09-08): la tubería del fondo ilustrado ya sugiere el
   camino, pero el usuario prefirió mantener también la línea
   calculada por JS -- ayuda a leer la secuencia cuando un nodo cae
   lejos de la tubería dibujada (ej. en pantallas anchas). Blanca con
   sombra oscura sutil para que se note tanto sobre las zonas
   plateadas como sobre las azules de la imagen. */
/* FEATURE (2026-09-08): estilo del trazo BASE, configurable por
   grupo (ver admin/fondos_camino.php) -- independiente de los
   efectos animados de encima. "Punteado" es el que ya existía
   (queda como opción por defecto). Este trazo SIEMPRE se ve, sin
   importar qué efecto esté activo -- los efectos se dibujan como
   una capa EXTRA encima, nunca lo reemplazan. */
#pac-board-path-line {
    stroke: rgba(255,255,255,.92);
    stroke-width: 4;
    stroke-dasharray: 2 14;
    stroke-linecap: round;
    filter: drop-shadow(0 0 2px rgba(0,0,0,.55));
}
svg[data-estilo-camino="continuo"] #pac-board-path-line {
    stroke-dasharray: none;
}
svg[data-estilo-camino="guiones"] #pac-board-path-line {
    stroke-width: 5;
    stroke-dasharray: 22 12;
}
svg[data-estilo-camino="puntos-grandes"] #pac-board-path-line {
    stroke-width: 6;
    stroke-dasharray: 1 20;
}
svg[data-estilo-camino="fino"] #pac-board-path-line {
    stroke-width: 2;
    stroke-dasharray: 2 10;
}

/* El trazo de brillo/efecto: invisible por defecto -- solo el CSS
   de efectos-camino.css lo activa (ver [data-efecto-camino*=...]).
   Vive SIEMPRE en el HTML (no se crea ni se clona por JavaScript),
   y su forma (atributo "d") se actualiza en el mismo lugar y al
   mismo tiempo que el trazo base -- nunca puede desincronizarse. */
#pac-board-path-glow {
    fill: none;
    opacity: 0;
}

.pac-board-stop {
    position: relative;
    display: flex;
    margin-bottom: 34px;
    z-index: 1;
}

/* Zigzag real: el NODO en sí se desplaza a lo ancho del camino
   (antes solo el texto cambiaba de lado, el círculo siempre quedaba
   en el centro -- por eso se sentía lineal). */
.pac-board-stop--izq    { justify-content: flex-start; }
.pac-board-stop--centro { justify-content: center; }
.pac-board-stop--der    { justify-content: flex-end; }

/* El nombre y el estado de cada parada ya no ocupan espacio fijo al
   lado del nodo (eso es lo que impedía que el nodo se moviera de
   verdad) -- ahora viven en un tooltip que aparece al pasar el
   mouse o, en táctil, al tocar la parada. */
.pac-board-stop__tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--pac-text);
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 3;
}
.pac-board-stop__tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--pac-text);
}
.pac-board-stop__nombre { font-weight: 700; }
.pac-board-stop:hover .pac-board-stop__tooltip,
.pac-board-stop--tooltip-abierto .pac-board-stop__tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* "Estás aquí": marca la próxima parada pendiente, para que el
   usuario no tenga que adivinar dónde va -- igual que el marcador
   de posición en un mapa de videojuego. */
.pac-board-node__aqui {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--pac-primary);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 20px;
    white-space: nowrap;
    animation: pac-pop .4s ease, pac-flotar 1.6s ease-in-out infinite .4s;
    z-index: 2;
}
@keyframes pac-flotar {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(-4px); }
}
.pac-board-stop--actual .pac-board-node { animation: pac-pulse 2s infinite; }

.pac-board-node {
    width: 56px; height: 56px;
    min-width: 56px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    text-decoration: none;
    background: var(--pac-surface);
    border: 3px solid var(--pac-border);
    box-shadow: var(--pac-shadow);
    transition: transform .15s ease;
    font-size: 1.3rem;
}
.pac-board-node:hover { transform: scale(1.08); }

.pac-board-node__num {
    position: absolute;
    top: -6px; left: -6px;
    background: var(--pac-text-muted);
    color: #fff;
    width: 20px; height: 20px;
    border-radius: 50%;
    font-size: 0.65rem;
    font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}

.pac-board-node--hecha { border-color: var(--pac-success); color: var(--pac-success); background: #e4f7ee; }
.pac-board-node--hecha .pac-board-node__num { background: var(--pac-success); }

.pac-board-node--examen { border-color: var(--pac-accent); color: var(--pac-accent-dark); background: #fff4dc; }
.pac-board-node--examen .pac-board-node__num { background: var(--pac-accent-dark); }

.pac-board-node--pendiente { border-color: var(--pac-border); color: var(--pac-text-muted); }

.pac-board-node--meta {
    width: 72px; height: 72px; min-width: 72px;
    font-size: 2rem;
    border-width: 4px;
}
.pac-board-node--meta-lista {
    border-color: var(--pac-accent);
    background: linear-gradient(135deg, #fff4dc, #ffe6a8);
    animation: pac-pop .6s ease, pac-pulse 2.4s infinite 0.6s;
}
.pac-board-node--meta-bloqueada {
    border-color: var(--pac-border);
    color: var(--pac-text-muted);
    background: #f3f3f3;
    cursor: default;
}

/* En pantallas de celular el zigzag se comprime, pero sigue siendo
   zigzag -- solo se reduce el aire lateral para que las paradas de
   los extremos no queden pegadas al borde. */
@media (max-width: 480px) {
    .pac-board { padding: 32px 2px; max-width: 100%; }
    .pac-board-stop__tooltip { font-size: 0.72rem; }
}

/* ---------- Certificado ---------- */

.pac-cert-toolbar {
    max-width: 900px;
    margin: 16px auto;
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
}

.pac-cert-page {
    padding: 0 16px 48px;
    display: flex;
    justify-content: center;
}

.pac-cert {
    width: 100%;
    max-width: 820px;
    background: #fdfaf3;
    border-radius: 6px;
    box-shadow: var(--pac-shadow);
    padding: 14px;
}

/* Marco exterior verde solido + marco interior dorado fino, con
   separacion entre ambos: es el patron clasico de "doble borde" de
   un diploma impreso, en vez de un solo borde con un outline pegado. */
.pac-cert__frame {
    border: 3px solid var(--pac-primary);
    padding: 10px;
    position: relative;
}
.pac-cert__frame-inner {
    border: 1.5px solid var(--pac-accent);
    padding: 44px 40px 36px;
    text-align: center;
    position: relative;
}

/* Adornos de esquina: pequeños rombos dorados, dibujados con CSS
   (un cuadrado rotado 45°), sin ninguna imagen externa. */
.pac-cert__esquina {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--pac-accent);
    transform: rotate(45deg);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.pac-cert__esquina--tl { top: -6px; left: -6px; }
.pac-cert__esquina--tr { top: -6px; right: -6px; }
.pac-cert__esquina--bl { bottom: -6px; left: -6px; }
.pac-cert__esquina--br { bottom: -6px; right: -6px; }

.pac-cert__logo {
    width: 190px;
    max-width: 60%;
    height: auto;
    margin: 0 auto 14px;
    display: block;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.pac-cert__eyebrow {
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--pac-accent-dark);
    font-size: 0.78rem;
    font-weight: 700;
    margin: 0 0 26px;
}

.pac-cert__otorgado { font-size: 0.82rem; color: var(--pac-text-muted); margin: 0; }

.pac-cert__nombre {
    font-family: 'Playfair Display', 'Sora', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 2.6rem;
    color: var(--pac-primary);
    margin: 8px 0 4px;
    line-height: 1.15;
}

/* Filete decorativo bajo el nombre: dos lineas doradas con un rombo
   pequeño en el centro, patron clasico de diploma. */
.pac-cert__filete {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 6px auto 22px;
    max-width: 300px;
}
.pac-cert__filete-linea { flex: 1; height: 1px; background: var(--pac-accent); }
.pac-cert__filete-rombo { width: 6px; height: 6px; background: var(--pac-accent); transform: rotate(45deg); flex-shrink: 0; }

.pac-cert__texto { font-size: 0.95rem; line-height: 1.7; max-width: 560px; margin: 0 auto 26px; color: var(--pac-text); }
.pac-cert__tabla { width: 100%; border-collapse: collapse; margin: 0 auto 30px; max-width: 500px; font-size: 0.85rem; }
.pac-cert__tabla th, .pac-cert__tabla td { border-bottom: 1px solid var(--pac-border); padding: 6px 10px; text-align: left; }
.pac-cert__tabla th { color: var(--pac-text-muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; }

.pac-cert__pie {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin-top: 30px;
    flex-wrap: wrap;
}
.pac-cert__firma { text-align: center; }
.pac-cert__linea { width: 200px; border-top: 1px solid var(--pac-text); margin: 0 auto 6px; }
.pac-cert__firma p { margin: 2px 0; font-size: 0.85rem; }
.pac-cert__firma-cargo { color: var(--pac-text-muted); font-size: 0.78rem; }
.pac-cert__fecha { color: var(--pac-text-muted); font-size: 0.78rem; }

@media print {
    .pac-topbar, .pac-no-print { display: none !important; }
    body { background: #fff; }
    /* Sin esto, la mayoria de navegadores OMITEN los colores de
       fondo/bordes al imprimir salvo que el usuario marque a mano
       "Graficos de fondo" - casi nadie lo hace. Esta es la causa
       real (confirmada en la app ERAS) de por que un diploma se ve
       a color en pantalla pero sale en blanco y negro al imprimir. */
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}

.pac-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 0.88rem; }
.pac-table th, .pac-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--pac-border); }
.pac-table th { color: var(--pac-text-muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.3px; }

/* ---------- Evaluación animada (una pregunta a la vez) ---------- */

.pac-exam-shell { max-width: 640px; margin: 0 auto; }

.pac-exam-progress {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 20px;
}
.pac-exam-progress__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--pac-border);
    transition: background .2s ease, transform .2s ease;
}
.pac-exam-progress__dot--done { background: var(--pac-success); }
.pac-exam-progress__dot--active { background: var(--pac-primary); transform: scale(1.4); }

.pac-exam-question {
    animation: pac-fade-in .35s ease;
}
.pac-exam-question__counter { font-size: 0.75rem; font-weight: 700; color: var(--pac-text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.pac-exam-question__title { font-family: var(--pac-font-heading); font-size: 1.15rem; font-weight: 700; margin-bottom: 18px; line-height: 1.4; }

.pac-exam-option {
    display: block;
    width: 100%;
    text-align: left;
    padding: 14px 16px;
    margin-bottom: 10px;
    border: 1px solid var(--pac-border);
    border-radius: 10px;
    cursor: pointer;
    background: #fff;
    font-family: var(--pac-font-body);
    font-size: 0.92rem;
    transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.pac-exam-option:hover { border-color: var(--pac-primary-light); background: #f7faf8; }
.pac-exam-option--selected {
    border-color: var(--pac-primary);
    background: #eef4f1;
    font-weight: 700;
}

.pac-exam-nav { display: flex; justify-content: space-between; margin-top: 24px; gap: 10px; }

/* ---------- Estilo "Kahoot": pregunta arriba + 4 tarjetas de color ---------- */

.pac-kahoot-stage {
    background: linear-gradient(160deg, #26089c, #46178f);
    border-radius: 16px;
    padding: 24px 18px 28px;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.pac-kahoot-pregunta {
    background: #fff;
    color: var(--pac-text);
    font-family: var(--pac-font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    border-radius: 12px;
    padding: 20px 18px;
    margin: 0 0 18px;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pac-kahoot-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
@media (max-width: 480px) {
    .pac-kahoot-grid { grid-template-columns: 1fr; }
}

.pac-kahoot-op {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    padding: 16px 14px;
    min-height: 64px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    color: #fff;
    font-family: var(--pac-font-body);
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1.3;
    box-shadow: 0 4px 0 rgba(0,0,0,.18);
    transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
}
.pac-kahoot-op:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.18); }
.pac-kahoot-op:hover { filter: brightness(1.08); }

.pac-kahoot-op__forma { font-size: 1.3rem; flex-shrink: 0; line-height: 1; }
.pac-kahoot-op__texto { flex: 1; }

.pac-kahoot-op--rojo     { background: #ff3b3b; }
.pac-kahoot-op--azul     { background: #3b88ff; }
.pac-kahoot-op--amarillo { background: #ffd83b; color: #000; }
.pac-kahoot-op--verde    { background: #3bff3b; color: #000; }

.pac-kahoot-op--selected {
    outline: 4px solid #fff;
    outline-offset: -8px;
    transform: scale(0.98);
}

/* ---------- Resultado estilo Kahoot (aprobado / reprobado) ---------- */

.pac-kahoot-result {
    text-align: center;
    animation: pac-fade-in .5s ease;
    padding: 24px 16px;
    border-radius: 16px;
}
.pac-kahoot-result--ok {
    background: linear-gradient(160deg, #0f5c3d, #16804f);
    color: #fff;
}
.pac-kahoot-result--fail {
    background: #fdecea;
    color: var(--pac-text);
}
.pac-kahoot-result__badge {
    font-size: 3.2rem;
    margin-bottom: 6px;
    animation: pac-pop .5s ease;
}
.pac-kahoot-result__score {
    font-family: var(--pac-font-heading);
    font-size: 2.6rem;
    font-weight: 800;
    margin: 6px 0 4px;
}
.pac-kahoot-result__score span { font-size: 1.4rem; opacity: .8; font-weight: 600; }
.pac-kahoot-result--ok .pac-text-muted { color: rgba(255,255,255,.85); }

/* ---------- Podio ---------- */

.pac-podio {
    background: rgba(255,255,255,.12);
    border-radius: 12px;
    padding: 16px;
    margin: 20px auto;
    max-width: 420px;
    text-align: left;
}
.pac-kahoot-result--fail .pac-podio { background: #fff; border: 1px solid var(--pac-border); }
.pac-podio__titulo {
    font-weight: 700;
    font-size: 0.85rem;
    text-align: center;
    margin: 0 0 12px;
}
.pac-podio__lista { display: flex; flex-direction: column; gap: 6px; }
.pac-podio__fila {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,.1);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.85rem;
}
.pac-kahoot-result--fail .pac-podio__fila { background: var(--pac-bg); }
.pac-podio__fila--top { font-weight: 700; }
.pac-podio__fila--yo { outline: 2px solid var(--pac-accent); }
.pac-podio__medalla { width: 24px; text-align: center; flex-shrink: 0; }
.pac-podio__nombre { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pac-podio__puntaje { flex-shrink: 0; opacity: .9; }
.pac-podio__miposicion { text-align: center; font-size: 0.78rem; margin: 10px 0 0; opacity: .85; }

.pac-exam-result {
    text-align: center;
    animation: pac-fade-in .5s ease;
    padding: 20px 0;
}
.pac-exam-result__badge {
    width: 90px; height: 90px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.4rem;
    animation: pac-pop .5s ease;
}
.pac-exam-result__badge--success { background: #e4f7ee; color: var(--pac-success); }
.pac-exam-result__badge--fail { background: #fdecea; color: var(--pac-danger); }
@keyframes pac-pop {
    0% { transform: scale(0); }
    70% { transform: scale(1.15); }
    100% { transform: scale(1); }
}
.pac-exam-result__score { font-family: var(--pac-font-heading); font-size: 2rem; font-weight: 800; margin: 8px 0 4px; }

.pac-modo-video {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0 4px;
    flex-wrap: wrap;
}
.pac-modo-video a { color: var(--pac-text-muted); text-decoration: underline; }

/* =========================================================
   LOGIN — recreado del sitio actual (index.php / style.css):
   fondo fijo, burbujas flotantes, mundo girando y logo centrado.
   Los keyframes de las burbujas y el globo son los MISMOS valores
   que usa hoy tu sitio (confirmado en pac - copia/style.css).
   ========================================================= */

.pac-login-page {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: 24px;
    background-color: #4e54c8;
    background-image: linear-gradient(135deg, rgba(143,148,251,.85), rgba(78,84,200,.9));
    background-size: cover;
}
/* La imagen de fondo real (sitio.png), cuando exista, se aplica como
   una capa aparte (.pac-login-bg) posicionada detrás de todo — así el
   degradado de arriba sigue sirviendo de respaldo si el archivo falta,
   en vez de depender de <?php ?> dentro de un .css estático (que el
   navegador nunca ejecutaría). */
.pac-login-bg {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 0;
}

.pac-login-area {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.pac-circles {
    position: absolute;
    inset: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}
.pac-circles li {
    position: absolute;
    display: block;
    list-style: none;
    background: rgba(255, 255, 255, 0.18);
    animation: pac-circle-float 25s linear infinite;
    bottom: -150px;
    border-radius: 0;
}
@keyframes pac-circle-float {
    0%   { transform: translateY(0) rotate(0deg); opacity: 1; border-radius: 0; }
    100% { transform: translateY(-1000px) rotate(720deg); opacity: 0; border-radius: 50%; }
}
.pac-circles li:nth-child(1)  { left:25%; width:80px;  height:80px;  animation-delay:0s; }
.pac-circles li:nth-child(2)  { left:10%; width:20px;  height:20px;  animation-delay:2s; animation-duration:12s; }
.pac-circles li:nth-child(3)  { left:70%; width:20px;  height:20px;  animation-delay:4s; }
.pac-circles li:nth-child(4)  { left:40%; width:60px;  height:60px;  animation-delay:0s; animation-duration:18s; }
.pac-circles li:nth-child(5)  { left:65%; width:20px;  height:20px;  animation-delay:0s; }
.pac-circles li:nth-child(6)  { left:75%; width:110px; height:110px; animation-delay:3s; }
.pac-circles li:nth-child(7)  { left:35%; width:150px; height:150px; animation-delay:7s; }
.pac-circles li:nth-child(8)  { left:50%; width:25px;  height:25px;  animation-delay:15s; animation-duration:45s; }
.pac-circles li:nth-child(9)  { left:20%; width:15px;  height:15px;  animation-delay:2s; animation-duration:35s; }
.pac-circles li:nth-child(10) { left:85%; width:150px; height:150px; animation-delay:0s; animation-duration:11s; }

.pac-login-globe {
    position: relative;
    width: 320px;
    height: 320px;
    max-width: 60vw;
    max-height: 60vw;
    z-index: 1;
}
.pac-login-globe img.pac-login-globe-img {
    display: block;
    width: 100%;
    height: 100%;
    animation: pac-globe-rotate 20s linear infinite reverse;
    transform-origin: 50% 50%;
}
@keyframes pac-globe-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
/* El logo va ENCIMA del mundo, centrado y SIN girar (solo el mundo
   gira) — confirmado contra la captura real del sitio actual. */
.pac-login-globe .pac-login-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 62%;
    max-width: none;
    margin: 0;
    z-index: 2;
    animation: none; /* nunca gira, a diferencia del mundo detrás */
}

.pac-login-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 400px;
    background: rgba(255, 255, 255, 0.97);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0,0,0,.35);
    padding: 32px 28px;
    text-align: center;
    animation: pac-login-card-in .5s ease;
}
@keyframes pac-login-card-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pac-login-card h1 { font-size: 1.3rem; margin: 0 0 20px; }
.pac-login-card .pac-field { text-align: left; }

/* ---------- Modales (crear / editar / eliminar) ---------- */
.pac-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 35, 26, 0.55);
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
    opacity: 0;
    animation: pac-modal-overlay-in .18s ease forwards;
}
@keyframes pac-modal-overlay-in { to { opacity: 1; } }

.pac-modal-dialog {
    background: var(--pac-surface);
    border-radius: var(--pac-radius);
    box-shadow: 0 24px 64px rgba(0,0,0,.35);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    transform: translateY(-16px);
    animation: pac-modal-dialog-in .2s ease forwards;
}
@keyframes pac-modal-dialog-in { to { transform: translateY(0); } }

.pac-modal-close {
    position: absolute;
    top: 14px; right: 14px;
    width: 32px; height: 32px;
    border-radius: 50%;
    border: none;
    background: #f0f4f2;
    color: var(--pac-text-muted);
    cursor: pointer;
    font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
}
.pac-modal-close:hover { background: #e2e9e5; color: var(--pac-text); }

.pac-modal-body { position: relative; padding: 28px; }
.pac-modal-loading { padding: 60px 20px; text-align: center; color: var(--pac-text-muted); }
.pac-modal-loading .fa { font-size: 1.6rem; margin-bottom: 10px; display: block; }

/* Modal de confirmación (eliminar) */
.pac-confirm-dialog { max-width: 420px; text-align: center; }
.pac-confirm-icon {
    width: 56px; height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #fdecea;
    color: var(--pac-danger);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
}
.pac-confirm-actions { display: flex; gap: 10px; margin-top: 20px; }
.pac-confirm-actions .pac-btn { width: auto; flex: 1; }

@media (min-width: 640px) {
    .pac-login-card { padding: 44px 40px 32px; }
    .pac-topbar__nav { order: 0; width: auto; }
}