/*
 * assets/css/directorio.css
 * Estilos del directorio de planteles.
 * Extraído del <style> embebido para permitir caché del browser.
 */

/* ── Variables institucionales ───────────────────────────────── */
:root {
    --primary:       #7a2428;
    --primary-dark:  #5c1a1d;
    --primary-soft:  rgba(122, 36, 40, .08);
    --secondary:     #babcbb;
    --secondary-soft:#ececec;
    --ink:           #3a3a3c;
    --muted:         #75787a;
}

/* ── Base ────────────────────────────────────────────────────── */
body {
    font-family: 'Montserrat', sans-serif;
    background: #f4f4f5;
    color: var(--ink);
}

/* ── Hero / encabezado ───────────────────────────────────────── */
.page-hero {
    background: linear-gradient(135deg, var(--secondary-soft), var(--primary));
    color: var(--ink);
    
    border-radius: 18px;
    padding: 2.4rem 2.2rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(122, 36, 40, .22);
}

/* Círculos decorativos del hero */
.page-hero::after,
.page-hero::before {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(186, 188, 187, .16);
}

.page-hero::after  { width: 230px; height: 230px; right: -70px; top: -70px;    }
.page-hero::before { width: 150px; height: 150px; right:  90px; bottom: -90px; }

.hero-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.2rem;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
}

.page-hero .kicker {
    display: inline-block;
    background: rgba(70, 66, 66, 0.16);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: .32rem .9rem;
    border-radius: 999px;
    margin-bottom: .9rem;
}

.page-hero h1       { font-size: 1.9rem; font-weight: 800; margin: 0 0 .4rem; }
.page-hero p        { margin: 0; font-weight: 300; font-size: .93rem; opacity: .9; max-width: 520px; }

.hero-count         { text-align: center; padding-left: 1.6rem; border-left: 1px solid rgba(186, 188, 187, .4); color: #fff; }
.hero-count strong  { font-size: 1.9rem; font-weight: 800; display: block; line-height: 1; }
.hero-count span    { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }

/* ── Selector de tipo de plantel (tabs) ──────────────────────── */
.tipo-tabs {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.tipo-tab {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .6rem 1.4rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 700;
    text-decoration: none;
    border: 2px solid var(--secondary-soft);
    background: #fff;
    color: var(--muted);
    transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}

.tipo-tab:hover {
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: 0 4px 12px rgba(122, 36, 40, .12);
}

.tipo-tab.activo {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 6px 18px rgba(122, 36, 40, .28);
}

/* ── Buscador ────────────────────────────────────────────────── */
.search-box {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 999px;
    padding: .45rem .45rem .45rem 1.3rem;
    border: 1px solid var(--secondary-soft);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
    transition: border-color .2s, box-shadow .2s;
}

.search-box:focus-within {
    border-color: var(--secondary);
    box-shadow: 0 8px 24px rgba(122, 36, 40, .14);
}

.search-box i     { color: var(--secondary); margin-right: .85rem; }
.search-box input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: .95rem;
    min-width: 0;
}

.search-box button {
    background: var(--primary);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: .7rem 1.7rem;
    font-weight: 700;
    font-size: .85rem;
    white-space: nowrap;
    transition: background .2s;
}

.search-box button:hover { background: var(--primary-dark); }

/* ── Barra de resultados ─────────────────────────────────────── */
.results-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: 1px solid var(--secondary-soft);
    border-radius: 12px;
    padding: .85rem 1.2rem;
    font-size: .85rem;
}

.results-bar .n {
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    border-radius: 8px;
    padding: .15rem .6rem;
    margin-right: .5rem;
}

/* ── Tarjetas de plantel ─────────────────────────────────────── */
.card-plantel {
    background: #fff;
    border-radius: 14px;
    border-left: 5px solid var(--primary);
    padding: 1.4rem 1.5rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
    transition: transform .22s, box-shadow .22s;
}

.card-plantel:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(122, 36, 40, .14);
}

.card-head {
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--secondary-soft);
    margin-bottom: 1rem;
}

.card-head h3 {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--primary);
    margin: 0 0 .5rem;
    line-height: 1.35;
}

.badge-cve {
    display: inline-block;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .05em;
    padding: .28rem .75rem;
    border-radius: 999px;
}

/* ── Lista de info del plantel ───────────────────────────────── */
.p-info                   { list-style: none; margin: 0; padding: 0; }
.p-info li                { display: flex; gap: .75rem; font-size: .83rem; line-height: 1.55; color: var(--muted); margin-bottom: .6rem; }
.p-info li i              { color: var(--primary); opacity: .6; width: 15px; flex-shrink: 0; margin-top: .15rem; text-align: center; }
.p-info strong            { color: var(--ink); font-weight: 600; }
.p-info a                 { color: var(--primary); font-weight: 600; text-decoration: none; border-bottom: 1px dashed var(--secondary); }
.p-info a:hover           { color: var(--primary-dark); border-bottom-style: solid; }

/* ── Pie de tarjeta / botón mapa ─────────────────────────────── */
.card-foot {
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px solid var(--secondary-soft);
    text-align: right;
}

.btn-map {
    display: inline-block;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: .75rem;
    font-weight: 700;
    padding: .45rem 1.05rem;
    border-radius: 999px;
    text-decoration: none;
    transition: background .2s, color .2s;
}

.btn-map:hover { background: var(--primary); color: #fff; }

/* ── Estado vacío ────────────────────────────────────────────── */
.empty-state {
    background: #fff;
    border: 1px dashed var(--secondary);
    border-radius: 16px;
    text-align: center;
    padding: 3.5rem 1.5rem;
}

.empty-state i {
    font-size: 2.6rem;
    color: var(--secondary);
    margin-bottom: 1rem;
    display: block;
}

/* ── Paginación (color institucional vía variables BS5) ──────── */
.pagination {
    --bs-pagination-color:               var(--primary);
    --bs-pagination-hover-color:         var(--primary-dark);
    --bs-pagination-active-bg:           var(--primary);
    --bs-pagination-active-border-color: var(--primary);
    --bs-pagination-focus-box-shadow:    0 0 0 .25rem rgba(122, 36, 40, .15);
    --bs-pagination-border-color:        var(--secondary-soft);
}

/* ── Botón volver arriba ─────────────────────────────────────── */
.go-top {
    position: fixed;
    bottom: 2rem;
    right: 1.4rem;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(122, 36, 40, .35);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s, visibility .25s;
    z-index: 999;
    text-decoration: none;
}

.go-top.show  { opacity: 1; visibility: visible; }
.go-top:hover { background: var(--primary-dark); color: #fff; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 575px) {
    .page-hero        { padding: 1.8rem 1.4rem; }
    .page-hero h1     { font-size: 1.5rem; }
    .hero-count       { border-left: 0; padding-left: 0; }
    .tipo-tabs        { justify-content: center; }
}
.txt-mayus {
    text-transform: uppercase;
}