/* ============================================
   Catálogo Talento 360 — estilos página pública
   Tokens y topbar tomados tal cual de /portal/index.php
   ============================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --primary: #0f5cbf;
    --primary-dark: #0a458f;
    --primary-light: #e8f0fe;

    --bg: #f5f7fb;
    --surface: #ffffff;

    --text: #1a1a2e;
    --text-muted: #4a5568;
    --text-light: #94a3b8;

    --border: #e4e7ec;
    --border-light: #eef1f5;

    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;

    --font: 'Quicksand', 'Segoe UI', system-ui, sans-serif;
    --transition: all .18s ease;
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

    --shadow-sm: 0 1px 2px rgba(26,26,46,0.05);
    --shadow: 0 4px 14px rgba(26,26,46,0.07);
    --shadow-lg: 0 10px 30px rgba(26,26,46,0.12);

    --sidebar-w: 240px;
}

:root[data-theme="dark"] {
    --bg: #0a0c10;
    --surface: #14171c;
    --text: #e2e8f0;
    --text-muted: #a0aec0;
    --text-light: #6b7280;
    --border: #2a2f38;
    --border-light: #1a1d24;
    --primary-light: #132a4a;
}

body {
    font-family: var(--font);
    font-size: .9rem;
    font-weight: 500;
    background: var(--bg);
    color: var(--text);
    transition: background-color .2s ease, color .2s ease;
}

a { color: inherit; }

/* ===== Topbar (idéntico al portal) ===== */
.topbar {
    background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 50%, #0369a1 100%);
    padding: 24px 20px 60px;
}

.topbar-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 16px; }

.menu-toggle {
    display: none;
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}
.menu-toggle:hover { background: rgba(255,255,255,0.28); }

.brand-logo {
    background: #fff;
    padding: 8px 12px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

.brand-logo img { height: 40px; width: auto; display: block; }

.brand-titulo {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.4px;
    margin: 0;
}

.brand-tagline {
    color: rgba(255,255,255,0.85);
    font-size: .88rem;
    font-weight: 600;
    margin: 4px 0 0;
}

.topbar-actions { display: flex; align-items: center; gap: 10px; }

.time-widget {
    background: rgba(255,255,255,0.14);
    padding: 8px 16px;
    border-radius: 20px;
    text-align: center;
    color: #fff;
}
.time-widget .fecha { font-size: .66rem; opacity: .85; }
.time-widget .hora { font-size: .78rem; font-weight: 700; }

.btn-tema {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.15);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    transition: transform 160ms var(--ease-out), background var(--transition);
    flex-shrink: 0;
}
.btn-tema:hover { background: rgba(255,255,255,0.28); }
.btn-tema:active { transform: scale(0.92); }

/* ===== Layout: sidebar + contenido ===== */
.layout {
    max-width: 1280px;
    margin: -34px auto 0;
    padding: 0 20px 40px;
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 18px 12px;
    position: sticky;
    top: 20px;
}

.sidebar-header {
    padding: 4px 10px 14px;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    color: var(--text-muted);
}

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

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-muted);
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: var(--font);
    transition: background 140ms ease, color 140ms ease;
}
.sidebar-item:hover { background: var(--bg); color: var(--text); }
.sidebar-item.active { background: var(--primary-light); color: var(--primary-dark); }
.sidebar-item i { width: 18px; text-align: center; font-size: .85rem; }
.sidebar-item .count {
    margin-left: auto;
    background: var(--bg);
    padding: 1px 8px;
    border-radius: 10px;
    font-size: .68rem;
    color: var(--text-light);
}
.sidebar-item.active .count { background: var(--primary); color: #fff; }

.content { flex: 1; min-width: 0; }

/* ===== Buscador ===== */
.buscador-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 22px 26px;
    margin-bottom: 24px;
}

.seccion-titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -.2px;
}
.seccion-titulo::before {
    content: "";
    width: 4px;
    height: 20px;
    background: var(--primary);
    border-radius: 4px;
    display: inline-block;
}

.input-icon { position: relative; }
.input-icon i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
}
.input-icon input {
    width: 100%;
    font-family: var(--font);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: .9rem;
    padding: 13px 16px 13px 42px;
    background: var(--bg);
    color: var(--text);
    transition: var(--transition);
}
.input-icon input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
    background: var(--surface);
}

.site-count { font-size: .78rem; color: var(--text-light); margin: 0 0 14px 2px; display: block; }

/* ===== Tarjetas ===== */
.tarjetas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
}

.site-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out), border-color 180ms var(--ease-out);
    box-shadow: var(--shadow-sm);
    opacity: 0;
    transform: translateY(8px);
    animation: cardIn 320ms var(--ease-out) forwards;
}

@keyframes cardIn {
    to { opacity: 1; transform: translateY(0); }
}

.site-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: var(--primary);
}
.site-card:active { transform: translateY(-1px) scale(0.99); }

.card-image {
    height: 130px;
    background: linear-gradient(135deg, var(--primary-light), var(--border-light));
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}
.card-image .card-icon { font-size: 40px; color: var(--primary); opacity: .75; }

/* Cuando hay imagen referencial, el ícono grande se oculta y aparece como
   insignia pequeña sobre la imagen (no la reemplaza, se conserva visible). */
.card-image.has-image .card-icon { display: none; }
.icon-badge {
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    box-shadow: var(--shadow-sm);
}
:root[data-theme="dark"] .icon-badge { background: rgba(20,23,28,0.85); }

.card-image .card-category {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255,255,255,0.92);
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--primary-dark);
}
:root[data-theme="dark"] .card-image .card-category { background: rgba(20,23,28,0.85); }

.card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-title { font-size: .98rem; font-weight: 800; color: var(--text); margin: 0; }
.card-description {
    font-size: .8rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-credenciales {
    background: var(--primary-light);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    margin: 2px 0;
    font-size: .74rem;
}
.cred-titulo {
    font-weight: 800;
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.cred-row { color: var(--text-muted); display: flex; gap: 6px; }
.cred-row span { font-weight: 700; color: var(--text); }
.cred-row code {
    font-family: 'Courier New', monospace;
    background: var(--surface);
    padding: 0 5px;
    border-radius: 4px;
    color: var(--primary-dark);
}

.card-accesos { margin-top: auto; padding-top: 10px; }
.btn-acceso {
    width: 100%;
    padding: 9px 14px;
    font-size: .8rem;
    border-radius: var(--radius-sm);
    border: none;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    font-weight: 700;
    font-family: var(--font);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 160ms var(--ease-out), box-shadow 160ms ease;
}
.btn-acceso:hover { box-shadow: 0 6px 16px rgba(15,92,191,.3); }
.btn-acceso:active { transform: scale(0.97); }

.sin-resultados { text-align: center; padding: 40px 20px; color: var(--text-light); font-size: .85rem; }
.sin-resultados i { font-size: 32px; margin-bottom: 12px; opacity: .5; display: block; }

/* ===== FAB de login ===== */
.fab-login {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
    z-index: 150;
}
.fab-login:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(15,92,191,0.35); }
.fab-login:active { transform: scale(0.94); }

/* Panel flotante de login, anclado a la esquina del FAB */
.login-panel-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
}
.login-panel-overlay.active { display: block; }

.login-panel {
    position: fixed;
    right: 24px;
    bottom: 88px;
    width: 100%;
    max-width: 320px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 22px;
    transform-origin: bottom right;
    opacity: 0;
    transform: scale(0.95) translateY(6px);
    transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.login-panel-overlay.active .login-panel {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.login-panel h2 {
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.login-panel h2 i { color: var(--primary); }
.login-panel p.hint { font-size: .76rem; color: var(--text-light); margin-bottom: 16px; }

.form-group { margin-bottom: 14px; }
.form-group label {
    display: block;
    font-size: .74rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 5px;
}
.form-group input {
    width: 100%;
    font-family: var(--font);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: .85rem;
    padding: 10px 12px;
    background: var(--bg);
    color: var(--text);
    transition: var(--transition);
}
.form-group input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
    background: var(--surface);
}

.form-error {
    display: none;
    color: #dc2626;
    font-size: .76rem;
    margin-bottom: 12px;
    padding: 8px 10px;
    background: #fef2f2;
    border-radius: var(--radius-sm);
}
.form-error.visible { display: block; }

.btn {
    padding: 10px 18px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: .85rem;
    font-weight: 700;
    font-family: var(--font);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 160ms var(--ease-out), background 160ms ease, box-shadow 160ms ease;
    width: 100%;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; }
.btn-primary:hover { box-shadow: 0 6px 16px rgba(15,92,191,0.3); }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; }

/* ===== Modal de iframe (embebido) ===== */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10,12,20,0.55);
    z-index: 300;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(4px);
}
.modal-overlay.active { display: flex; }

.modal-iframe-container {
    width: 100%;
    height: 100%;
    max-width: 1200px;
    max-height: 90vh;
    background: var(--surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    position: relative;
    opacity: 0;
    transform: scale(0.97);
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.modal-overlay.active .modal-iframe-container { opacity: 1; transform: scale(1); }

.modal-iframe-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.modal-iframe-title { font-weight: 800; font-size: .95rem; }
.btn-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-muted);
    text-decoration: none;
    transition: transform 140ms var(--ease-out), background 140ms ease;
    font-size: .85rem;
}
.btn-icon:hover { background: var(--bg); color: var(--text); }
.btn-icon:active { transform: scale(0.93); }
.btn-close-modal:hover { background: #fee2e2; color: #dc2626; }

#siteIframe { flex: 1; width: 100%; border: none; }

.iframe-message {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    padding: 40px;
    text-align: center;
    z-index: 10;
}
.iframe-message i { font-size: 42px; color: var(--primary); margin-bottom: 14px; }
.iframe-message p { color: var(--text-muted); margin: 4px 0; }
.iframe-error i { color: #f59e0b; }
.iframe-error-actions { display: flex; gap: 12px; margin-top: 20px; }
.iframe-error-actions .btn { width: auto; }

/* ===== Responsive ===== */
@media (max-width: 900px) {
    .menu-toggle { display: flex; }
    .layout { flex-direction: column; }
    .sidebar {
        position: fixed;
        top: 0; bottom: 0; left: 0;
        width: 260px;
        border-radius: 0;
        transform: translateX(-100%);
        transition: transform 220ms var(--ease-out);
        z-index: 250;
        overflow-y: auto;
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar-overlay {
        display: none;
        position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 240;
    }
    .sidebar-overlay.active { display: block; }
}

@media (max-width: 640px) {
    .topbar { padding: 20px 16px 50px; }
    .brand-titulo { font-size: 1.2rem; }
    .brand-tagline { display: none; }
    .layout { margin-top: -28px; }
    .login-panel { right: 12px; left: 12px; width: auto; bottom: 84px; }
    .fab-login { right: 16px; bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .site-card { animation: none; opacity: 1; transform: none; }
    .site-card, .fab-login, .login-panel, .modal-iframe-container, .btn, .btn-icon, .btn-tema, .btn-acceso {
        transition-duration: 1ms !important;
    }
}