/* =====================================================================
   Empleo público — plataforma de consulta de oposiciones
   ===================================================================== */

.ep-wrap { max-width: 1280px; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }

/* ---------- Hero ---------- */
.ep-hero { text-align: center; padding: 2.5rem 1rem 2rem; }
.ep-hero .eyebrow { color: #0891b2; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .82rem; }
.ep-hero h1 { font-size: clamp(2rem, 4vw, 2.75rem); margin: .6rem 0 .75rem; font-weight: 800; letter-spacing: -.02em; color: #0f172a; }
.ep-hero p { color: #475569; font-size: 1.05rem; max-width: 760px; margin: 0 auto; line-height: 1.6; }
html.dark .ep-hero h1 { color: #f1f5f9; }
html.dark .ep-hero p { color: #94a3b8; }

/* ---------- Stats ---------- */
.ep-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin: 2rem 0 2.5rem; }
.ep-stat { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.25rem 1.4rem; text-align: center; }
.ep-stat .num { font-size: 1.8rem; font-weight: 800; color: #0891b2; letter-spacing: -.02em; line-height: 1.1; }
.ep-stat .lbl { font-size: .82rem; color: #64748b; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; margin-top: .3rem; }
html.dark .ep-stat { background: #1e293b; border-color: #334155; }
html.dark .ep-stat .num { color: #22d3ee; }
html.dark .ep-stat .lbl { color: #94a3b8; }

/* ---------- Layout 2 columnas ---------- */
.ep-layout { display: grid; grid-template-columns: 260px 1fr; gap: 2rem; margin-top: 1.5rem; }
@media (max-width: 900px) { .ep-layout { grid-template-columns: 1fr; } .ep-sidebar { order: 2; } }

/* ---------- Sidebar ---------- */
.ep-sidebar { position: sticky; top: 5rem; align-self: start; max-height: calc(100vh - 6rem); overflow-y: auto; padding-right: .4rem; }
.ep-sidebar-group { margin-bottom: 1.75rem; }
.ep-sidebar-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #64748b; font-weight: 700; margin: 0 0 .55rem; padding: 0 .5rem; }
.ep-filter-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .12rem; }
.ep-filter-list a {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .5rem .75rem; border-radius: 8px; font-size: .9rem; color: #475569;
    text-decoration: none; transition: background .12s, color .12s;
}
.ep-filter-list a:hover { background: #f1f5f9; color: #0f172a; }
.ep-filter-list a.active { background: #0891b2; color: #fff; }
.ep-filter-list a.active .count { background: rgba(255,255,255,.22); color: #fff; }
.ep-filter-list .count { background: #e2e8f0; color: #475569; padding: .1rem .5rem; border-radius: 999px; font-size: .73rem; font-weight: 600; }
html.dark .ep-sidebar-title { color: #94a3b8; }
html.dark .ep-filter-list a { color: #cbd5e1; }
html.dark .ep-filter-list a:hover { background: #1e293b; color: #f1f5f9; }
html.dark .ep-filter-list .count { background: #334155; color: #cbd5e1; }

/* ---------- Chips ámbito ---------- */
.ep-ambito-chips { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.ep-ambito-chips a { padding: .45rem 1rem; border-radius: 999px; background: #f1f5f9; color: #475569; text-decoration: none; font-size: .9rem; font-weight: 500; transition: all .15s; }
.ep-ambito-chips a:hover { background: #e2e8f0; color: #0f172a; }
.ep-ambito-chips a.active { background: #0891b2; color: #fff; }
html.dark .ep-ambito-chips a { background: #1e293b; color: #94a3b8; }
html.dark .ep-ambito-chips a:hover { background: #334155; color: #e2e8f0; }
html.dark .ep-ambito-chips a.active { background: #06b6d4; color: #0f172a; }

/* ---------- Main content header ---------- */
.ep-main-header { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.ep-main-header h2 { font-size: 1.25rem; color: #0f172a; margin: 0; font-weight: 700; }
.ep-main-header .count-label { color: #64748b; font-size: .9rem; }
html.dark .ep-main-header h2 { color: #f1f5f9; }
html.dark .ep-main-header .count-label { color: #94a3b8; }

/* ---------- Cards ---------- */
.ep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.1rem; }
.ep-card {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden;
    text-decoration: none; color: inherit;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.ep-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(15,23,42,.18); border-color: #94a3b8; }
.ep-card-body { padding: 1.1rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }

.ep-card-badges { display: flex; gap: .35rem; flex-wrap: wrap; }
.ep-badge-sector, .ep-badge-admin, .ep-badge-status, .ep-badge-ambito {
    padding: .18rem .55rem; border-radius: 5px; font-size: .7rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
}
.ep-badge-sector { background: #ecfeff; color: #0891b2; }
.ep-badge-admin  { background: #eff6ff; color: #1d4ed8; }
.ep-badge-ambito { background: #f5f3ff; color: #6d28d9; }

.ep-badge-status[data-status="planificada"]           { background: #f1f5f9; color: #475569; }
.ep-badge-status[data-status="oep-publicada"]         { background: #dbeafe; color: #1e40af; }
.ep-badge-status[data-status="convocada"]             { background: #fef3c7; color: #92400e; }
.ep-badge-status[data-status="inscripcion-abierta"]   { background: #dcfce7; color: #166534; }
.ep-badge-status[data-status="pruebas-en-curso"]      { background: #fce7f3; color: #9d174d; }
.ep-badge-status[data-status="resuelta"]              { background: #e2e8f0; color: #334155; }

.ep-card h3 { font-size: 1.08rem; font-weight: 700; color: #0f172a; line-height: 1.3; margin: 0; }
.ep-card-admin { font-size: .88rem; color: #64748b; font-weight: 500; }

.ep-card-plazas { display: flex; align-items: baseline; gap: .4rem; margin-top: auto; padding-top: .8rem; border-top: 1px solid #f1f5f9; }
.ep-card-plazas .num { font-size: 1.35rem; font-weight: 800; color: #0891b2; letter-spacing: -.01em; }
.ep-card-plazas .lbl { font-size: .78rem; color: #64748b; }

html.dark .ep-card { background: #1e293b; border-color: #334155; }
html.dark .ep-card h3 { color: #f1f5f9; }
html.dark .ep-card-admin { color: #94a3b8; }
html.dark .ep-card-plazas { border-top-color: #334155; }
html.dark .ep-card-plazas .num { color: #22d3ee; }
html.dark .ep-badge-sector { background: #164e63; color: #67e8f9; }
html.dark .ep-badge-admin  { background: #1e3a8a; color: #bfdbfe; }
html.dark .ep-badge-ambito { background: #4c1d95; color: #e9d5ff; }

/* ---------- Empty state ---------- */
.ep-empty { text-align: center; padding: 4rem 1rem; color: #64748b; background: #f8fafc; border-radius: 12px; }
.ep-empty i { font-size: 2.5rem; color: #cbd5e1; margin-bottom: 1rem; }
.ep-empty h3 { color: #0f172a; margin: 0 0 .5rem; }
html.dark .ep-empty { background: #0f172a; }
html.dark .ep-empty h3 { color: #f1f5f9; }

/* ---------- Paginación ---------- */
.ep-pagination { display: flex; justify-content: center; margin-top: 2.5rem; }
.ep-pagination nav { display: flex; gap: .35rem; }
.ep-pagination span, .ep-pagination a { padding: .5rem .9rem; border-radius: 8px; font-size: .9rem; font-weight: 500; text-decoration: none; color: #475569; background: #f1f5f9; }
.ep-pagination a:hover { background: #e2e8f0; }
.ep-pagination .active span, .ep-pagination [aria-current="page"] span { background: #0891b2; color: #fff; }
html.dark .ep-pagination span, html.dark .ep-pagination a { background: #1e293b; color: #cbd5e1; }
html.dark .ep-pagination a:hover { background: #334155; }

/* =====================================================================
   Detail page
   ===================================================================== */
.ep-detail-wrap { max-width: 960px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }

.ep-breadcrumbs { font-size: .85rem; color: #64748b; margin-bottom: 1.5rem; }
.ep-breadcrumbs a { color: #64748b; text-decoration: none; }
.ep-breadcrumbs a:hover { color: #0891b2; }
.ep-breadcrumbs .sep { margin: 0 .4rem; color: #cbd5e1; }

.ep-detail-header { margin-bottom: 2rem; }
.ep-detail-header .badges { display: flex; gap: .45rem; flex-wrap: wrap; margin-bottom: .9rem; }
.ep-detail-header h1 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 800; color: #0f172a; line-height: 1.2; letter-spacing: -.02em; margin: 0 0 .6rem; }
.ep-detail-header .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; font-size: .93rem; color: #64748b; }
.ep-detail-header .meta i { color: #94a3b8; margin-right: .25rem; }
html.dark .ep-detail-header h1 { color: #f1f5f9; }

/* Key panel: plazas + fechas */
.ep-key-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 2rem; }
@media (max-width: 700px) { .ep-key-panel { grid-template-columns: 1fr; } }
.ep-panel { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.3rem 1.4rem; }
.ep-panel h3 { margin: 0 0 .85rem; font-size: .8rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .06em; }
.ep-panel ul { list-style: none; padding: 0; margin: 0; }
.ep-panel li { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 1px dashed #e2e8f0; font-size: .92rem; }
.ep-panel li:last-child { border-bottom: 0; }
.ep-panel li .lbl { color: #64748b; }
.ep-panel li .val { color: #0f172a; font-weight: 600; text-align: right; }
.ep-plazas-big { display: flex; align-items: baseline; gap: .5rem; margin-bottom: 1rem; }
.ep-plazas-big .num { font-size: 2.5rem; font-weight: 800; color: #0891b2; letter-spacing: -.03em; line-height: 1; }
.ep-plazas-big .lbl { font-size: .95rem; color: #475569; }
html.dark .ep-panel { background: #1e293b; border-color: #334155; }
html.dark .ep-panel h3 { color: #94a3b8; }
html.dark .ep-panel li { border-bottom-color: #334155; }
html.dark .ep-panel li .lbl { color: #94a3b8; }
html.dark .ep-panel li .val { color: #f1f5f9; }
html.dark .ep-plazas-big .num { color: #22d3ee; }
html.dark .ep-plazas-big .lbl { color: #cbd5e1; }

.ep-section { margin: 2rem 0; }
.ep-section h2 { font-size: 1.3rem; font-weight: 800; color: #0f172a; margin: 0 0 1rem; letter-spacing: -.01em; }
.ep-section p { color: #334155; line-height: 1.65; margin: 0 0 1rem; }
html.dark .ep-section h2 { color: #f1f5f9; }
html.dark .ep-section p { color: #cbd5e1; }

.ep-reqlist, .ep-phaselist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem; }
.ep-req, .ep-phase { background: #fff; border: 1px solid #e2e8f0; border-left: 4px solid #0891b2; border-radius: 8px; padding: .9rem 1.1rem; }
.ep-req .lbl, .ep-phase .name { font-weight: 700; color: #0f172a; font-size: .92rem; margin-bottom: .2rem; display: block; }
.ep-req .val, .ep-phase .desc { color: #475569; font-size: .92rem; line-height: 1.5; }
.ep-phase .tag { display: inline-block; margin-left: .5rem; font-size: .72rem; padding: .1rem .5rem; border-radius: 5px; background: #fef2f2; color: #991b1b; font-weight: 600; letter-spacing: .03em; }
html.dark .ep-req, html.dark .ep-phase { background: #1e293b; border-color: #334155; border-left-color: #06b6d4; }
html.dark .ep-req .lbl, html.dark .ep-phase .name { color: #f1f5f9; }
html.dark .ep-req .val, html.dark .ep-phase .desc { color: #cbd5e1; }
html.dark .ep-phase .tag { background: #450a0a; color: #fca5a5; }

.ep-sources { display: flex; flex-direction: column; gap: .5rem; }
.ep-sources a {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: .8rem 1.1rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
    color: #0f172a; text-decoration: none; font-size: .92rem; font-weight: 500;
    transition: background .12s;
}
.ep-sources a:hover { background: #f1f5f9; }
.ep-sources a i { color: #0891b2; }
html.dark .ep-sources a { background: #0f172a; border-color: #334155; color: #f1f5f9; }
html.dark .ep-sources a:hover { background: #1e293b; }
html.dark .ep-sources a i { color: #22d3ee; }

/* CTA y related */
.ep-cta { margin: 3rem 0 0; padding: 2rem; background: linear-gradient(135deg, #0891b2, #06b6d4); border-radius: 14px; text-align: center; color: #fff; }
.ep-cta h3 { font-size: 1.35rem; font-weight: 800; margin: 0 0 .5rem; color: #fff; }
.ep-cta p { margin: 0 0 1.25rem; opacity: .92; }
.ep-cta a { display: inline-block; background: #fff; color: #0891b2; padding: .7rem 1.5rem; border-radius: 8px; font-weight: 700; text-decoration: none; }

.ep-related { margin-top: 3.5rem; }
.ep-related h2 { font-size: 1.35rem; font-weight: 800; color: #0f172a; margin: 0 0 1rem; }
html.dark .ep-related h2 { color: #f1f5f9; }

/* =====================================================================
   Hub Nacional + CCAA
   ===================================================================== */
.ep-national-block { margin-bottom: 2.5rem; }
.ep-national-card {
    display: grid; grid-template-columns: 1fr auto; gap: 1.5rem;
    background: linear-gradient(135deg, #0f172a, #1e293b); color: #fff;
    border-radius: 16px; padding: 1.8rem 2rem; align-items: center;
    text-decoration: none; transition: transform .15s;
}
.ep-national-card:hover { transform: translateY(-2px); }
.ep-national-card .eyebrow { color: #67e8f9; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }
.ep-national-card h2 { font-size: 1.6rem; font-weight: 800; margin: .3rem 0 .4rem; color: #fff; }
.ep-national-card p { margin: 0; opacity: .85; font-size: .95rem; max-width: 520px; }
.ep-national-card .num-big { font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: #67e8f9; }
.ep-national-card .num-lbl { font-size: .82rem; color: #cbd5e1; margin-top: .2rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
@media (max-width: 700px) { .ep-national-card { grid-template-columns: 1fr; text-align: center; } }

.ep-ccaa-title { font-size: 1.3rem; font-weight: 800; color: #0f172a; margin: 0 0 1rem; }
html.dark .ep-ccaa-title { color: #f1f5f9; }

.ep-ccaa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.ep-ccaa-card {
    display: flex; flex-direction: column; gap: .3rem;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 1rem 1.1rem;
    text-decoration: none; color: inherit;
    transition: all .15s;
}
.ep-ccaa-card:hover { border-color: #0891b2; transform: translateY(-1px); box-shadow: 0 6px 14px -8px rgba(8,145,178,.35); }
.ep-ccaa-card.empty { opacity: .55; pointer-events: none; }
.ep-ccaa-card h3 { font-size: 1rem; font-weight: 700; color: #0f172a; margin: 0; line-height: 1.3; }
.ep-ccaa-card .meta { display: flex; justify-content: space-between; gap: .5rem; font-size: .82rem; margin-top: .35rem; }
.ep-ccaa-card .meta .plazas { color: #0891b2; font-weight: 700; }
.ep-ccaa-card .meta .count  { color: #64748b; }
html.dark .ep-ccaa-card { background: #1e293b; border-color: #334155; }
html.dark .ep-ccaa-card h3 { color: #f1f5f9; }
html.dark .ep-ccaa-card:hover { border-color: #06b6d4; }
html.dark .ep-ccaa-card .meta .plazas { color: #22d3ee; }
html.dark .ep-ccaa-card .meta .count { color: #94a3b8; }

/* Admin detail: agrupación por sector */
.ep-sector-group { margin-bottom: 2.5rem; }
.ep-sector-group-header {
    display: flex; align-items: baseline; justify-content: space-between;
    padding-bottom: .6rem; margin-bottom: 1rem;
    border-bottom: 2px solid #0891b2;
}
.ep-sector-group-header h2 { font-size: 1.35rem; font-weight: 800; color: #0f172a; margin: 0; }
.ep-sector-group-header .count { color: #64748b; font-size: .9rem; }
html.dark .ep-sector-group-header { border-bottom-color: #06b6d4; }
html.dark .ep-sector-group-header h2 { color: #f1f5f9; }
html.dark .ep-sector-group-header .count { color: #94a3b8; }

/* =====================================================================
   CTA con selector doble (CCAA + Especialidad)
   ===================================================================== */
[x-cloak] { display: none !important; }

.ep-selector-cta {
    margin: 3rem 0 0;
    padding: 2rem 2rem;
    background: linear-gradient(135deg, #0891b2, #06b6d4);
    border-radius: 14px;
    color: #fff;
}
.ep-selector-body h3 {
    font-size: 1.4rem;
    font-weight: 800;
    margin: 0 0 .4rem;
    color: #fff;
    text-align: center;
}
.ep-selector-sub {
    margin: 0 0 1.4rem;
    color: rgba(255,255,255,.92);
    text-align: center;
    font-size: .95rem;
}
.ep-selector-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    max-width: 640px;
    margin: 0 auto 1.3rem;
}
@media (max-width: 640px) { .ep-selector-grid { grid-template-columns: 1fr; } }

.ep-selector-grid label { display: flex; flex-direction: column; gap: .35rem; }
.ep-selector-lbl {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
    color: rgba(255,255,255,.88);
}
.ep-selector-grid select {
    width: 100%;
    padding: .65rem .8rem;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.4);
    background: #fff;
    color: #0f172a;
    font-size: .95rem;
    font-weight: 500;
    cursor: pointer;
}
.ep-selector-grid select:focus {
    outline: none;
    border-color: #0f172a;
    box-shadow: 0 0 0 3px rgba(15,23,42,.2);
}

.ep-selector-state {
    max-width: 640px;
    margin: 0 auto;
    padding: 1rem 1.25rem;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: .9rem;
    align-items: center;
}
.ep-selector-state-inner {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: .95rem;
    line-height: 1.45;
}
.ep-selector-state-inner i { font-size: 1.3rem; flex-shrink: 0; }

.ep-selector-available    { background: rgba(255,255,255,.12); }
.ep-selector-available    i { color: #86efac; }
.ep-selector-unavailable  { background: rgba(0,0,0,.18); }
.ep-selector-unavailable  i { color: #fde68a; }
.ep-selector-not-called   { background: rgba(0,0,0,.12); }
.ep-selector-not-called   i { color: #93c5fd; }
.ep-selector-empty        { color: rgba(255,255,255,.75); font-size: .88rem; }
.ep-selector-empty p      { margin: 0; }

.ep-selector-cta-btn {
    display: inline-block;
    background: #fff;
    color: #0891b2;
    padding: .7rem 1.6rem;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .15s;
}
.ep-selector-cta-btn:hover { transform: translateY(-2px); }

.ep-selector-cta-btn-alt {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,.7);
}
.ep-selector-cta-btn-alt:hover { background: rgba(255,255,255,.12); }