html,
body {
    min-height: 100%;
    background: #f5f8fb;
}

.horarios-system-title {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .5rem 1rem;
    text-align: center;
}

.horarios-system-title h1 {
    margin: 0;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 700;
}

.horarios-page-container {
    min-height: calc(100vh - 305px);
    padding-top: 2rem;
    padding-bottom: 2.5rem;
}

.horarios-page-title,
.horarios-card {
    background: #fff;
    border: 1px solid #d9e2ec;
    border-radius: 8px;
    padding: 1.5rem;
}

.horarios-page-title h1,
.horarios-card h2 {
    color: #003f73;
    font-weight: 700;
}

.horarios-page-title p {
    color: #000;
}

.horarios-card p {
    color: #667085;
}

.horarios-eyebrow {
    display: block;
    margin-bottom: .5rem;
    color: #5d8f22;
    font-weight: 700;
    text-transform: uppercase;
}

.horarios-section {
    padding-top: 1.5rem;
}

.horarios-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.25rem;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 3.5rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: #b32121;
    color: white;
    padding: 1rem;
}

.blazor-error-boundary::after {
    content: "Ha ocurrido un error.";
}

@media (max-width: 768px) {
    .horarios-system-title h1 {
        font-size: 1rem;
    }
}

.horarios-resultados {
    display: grid;
    gap: 1.5rem;
}

.horarios-empty {
    margin: 0;
    padding: 1rem;
    background: #fff;
    border: 1px solid #d9e2ec;
    border-radius: 8px;
    color: #000;
}

.horario-publicacion {
    overflow: hidden;
    background: #fff;
    border: 2px solid #111;
    color: #000;
}

.horario-grid {
    display: grid;
    grid-template-columns: 125px 140px minmax(220px, 1fr) 60px 76px;
    border-bottom: 2px solid #111;
}

.horario-grid > div {
    min-height: 31px;
    padding: .25rem .35rem;
    border-right: 2px solid #111;
    border-bottom: 2px solid #111;
    display: flex;
    align-items: center;
}

.horario-grid > div:nth-child(3),
.horario-grid > div:nth-child(8),
.horario-grid > div:nth-child(11),
.horario-grid > div:nth-child(13),
.horario-grid > div:nth-child(16) {
    border-right: 0;
}

.horario-label {
    font-weight: 400;
}

.horario-label-principal {
    justify-content: center;
    font-weight: 700;
}

.horario-valor {
    font-weight: 700;
}

.horario-span {
    grid-column: span 3;
}

.destacado {
    background: #fff200;
    border-radius: 4px;
    padding: .05rem .25rem;
    width: fit-content;
}

.horario-calendario {
    padding: .35rem;
    border-bottom: 2px solid #111;
}

.horario-calendario h3 {
    margin: 0 0 .5rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.horario-calendario table {
    width: min(620px, 100%);
    border-collapse: collapse;
}

.horario-calendario th,
.horario-calendario td {
    padding: .25rem 1.5rem .25rem 0;
    text-align: left;
    border: 0;
}

.horario-calendario th {
    font-style: italic;
}

.horario-nota {
    min-height: 27px;
    padding: .2rem .35rem;
    border-bottom: 2px solid #111;
}

@media (max-width: 900px) {
    .horario-publicacion {
        overflow-x: auto;
    }

    .horario-grid {
        min-width: 760px;
    }
}


+/* Presentación responsiva de resultados. */
.resultados-resumen { display:flex; align-items:center; justify-content:space-between; gap:1rem; color:#475467; }
.resultados-cantidad { display:inline-flex; align-items:center; justify-content:center; min-width:2rem; height:2rem; margin-right:.4rem; padding:0 .55rem; border-radius:999px; background:#003f73; color:#fff; font-weight:700; }
.resultados-ayuda { font-size:.9rem; }
.horario-card { overflow:hidden; background:#fff; border:1px solid #d9e2ec; border-radius:12px; box-shadow:0 4px 14px rgba(16,24,40,.07); color:#172b3a; transition:box-shadow .2s ease,transform .2s ease; }
.horario-card:hover { box-shadow:0 8px 24px rgba(16,24,40,.11); transform:translateY(-1px); }
.horario-card-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem; padding:1.4rem 1.5rem; border-bottom:1px solid #e4eaf0; background:linear-gradient(135deg,#f8fbfe 0%,#fff 70%); }
.horario-card-heading { min-width:0; }
.horario-card-heading h2 { margin:.65rem 0 .15rem; color:#003f73; font-size:clamp(1.1rem,2vw,1.35rem); font-weight:700; line-height:1.3; }
.horario-tipo { display:inline-flex; align-items:center; gap:.5rem; padding:.42rem .85rem; border-radius:999px; color:#fff; font-size:.88rem; font-weight:800; letter-spacing:.045em; text-transform:uppercase; box-shadow:0 2px 6px rgba(16,24,40,.16); }
.horario-tipo-tutoria { background:#4f7f1c; }
.horario-tipo-laboratorio { background:#0876a8; }
.horario-codigo { color:#667085; font-size:.9rem; }
.horario-grupo { display:flex; flex-direction:column; align-items:center; flex:0 0 auto; min-width:92px; padding:.7rem 1rem; border:2px solid #005b96; border-radius:10px; background:#eef6fb; box-shadow:0 2px 7px rgba(0,63,115,.12); }
.horario-grupo span { color:#36566d; font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.horario-grupo strong { color:#003f73; font-size:1.55rem; line-height:1.15; }
.horario-datos { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; padding:.5rem 1.5rem; }
.horario-dato { display:flex; align-items:flex-start; gap:.8rem; min-width:0; padding:1rem 0; }
.horario-dato:nth-child(odd) { padding-right:1.5rem; }
.horario-dato-icono { display:inline-flex; align-items:center; justify-content:center; flex:0 0 36px; width:36px; height:36px; border-radius:50%; background:#eaf2f8; color:#005b96; }
.horario-dato-direccionado .horario-dato-icono { background:#edf6e6; color:#4f7f1c; }
.horario-dato-direccionado strong { color:#365c15; }
.horario-dato-responsable { grid-column:1 / -1; }
.horario-dato>div { display:flex; flex-direction:column; min-width:0; }
.horario-dato-label { margin-bottom:.15rem; color:#667085; font-size:.8rem; }
.horario-dato strong { overflow-wrap:anywhere; color:#243746; font-size:.95rem; }
.horario-calendario { margin:0 1.5rem 1.25rem; padding:0; border:1px solid #d7e2eb; border-radius:9px; overflow:hidden; }
.horario-calendario summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 1rem; background:#f4f8fb; color:#003f73; cursor:pointer; font-weight:700; list-style:none; }
.horario-calendario summary::-webkit-details-marker { display:none; }
.horario-calendario summary::after { content:"\f078"; margin-left:auto; font-family:"Font Awesome 6 Free"; font-weight:900; transition:transform .2s ease; }
.horario-calendario[open] summary::after { transform:rotate(180deg); }
.calendario-cantidad { padding:.2rem .55rem; border-radius:999px; background:#dfeaf2; color:#475467; font-size:.75rem; font-weight:600; }
.calendario-lista { margin:0; padding:0; list-style:none; }
.calendario-item { display:grid; grid-template-columns:minmax(270px,.9fr) minmax(200px,1.1fr); align-items:center; gap:1.5rem; padding:.9rem 1rem; border-top:1px solid #e4eaf0; }
.calendario-item:nth-child(even) { background:#fbfcfd; }
.calendario-fechas { display:flex; align-items:center; gap:.8rem; }
.calendario-fechas span { display:flex; flex-direction:column; }
.calendario-fechas small { color:#667085; font-size:.7rem; }
.calendario-fechas strong { color:#243746; font-size:.9rem; }
.calendario-fechas>i { color:#98a2b3; font-size:.75rem; }
.calendario-descripcion { color:#344054; font-size:.92rem; }
.horario-informacion { display:grid; gap:.6rem; padding:0 1.5rem 1.4rem; }
.horario-aviso { display:flex; align-items:flex-start; gap:.65rem; padding:.7rem .85rem; border:1px solid transparent; border-radius:8px; font-size:.88rem; }
.horario-aviso>i { margin-top:.15rem; }
.horario-aviso>div { display:flex; flex-direction:column; gap:.1rem; }
.horario-aviso-contenido { flex:1; min-width:0; }
.horario-aviso-info { border-color:#b8d9ed; background:#eef8fd; color:#175b7d; }
.horario-aviso-asisten { border-color:#cce1bc; background:#f3f9ee; color:#3e651b; }
.horario-aviso-nota { border-color:#f1d58a; background:#fff9e8; color:#76540b; }
.centros-asistentes { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.3rem 1rem; margin:.35rem 0 0; padding:0; list-style:none; }
.centros-asistentes li { display:flex; align-items:baseline; gap:.35rem; min-width:0; }
.centros-asistentes li>strong { flex:0 0 auto; }
.centros-asistentes li>span:last-child { overflow-wrap:anywhere; }
@media (max-width:700px) {
    .resultados-resumen { align-items:flex-start; flex-direction:column; }
    .horario-card-header { padding:1.1rem; }
    .horario-datos { grid-template-columns:1fr; padding:.4rem 1.1rem; }
    .horario-dato { padding:.75rem 0; }
    .horario-dato:nth-child(odd) { padding-right:0; }
    .horario-calendario { margin:0 1.1rem 1.1rem; }
    .calendario-cantidad { display:none; }
    .calendario-item { grid-template-columns:1fr; gap:.55rem; }
    .horario-informacion { padding:0 1.1rem 1.1rem; }
    .centros-asistentes { grid-template-columns:1fr; }
}
@media (max-width:420px) {
    .horario-card-header { gap:.75rem; }
    .horario-grupo { min-width:70px; padding:.55rem .65rem; }
    .calendario-fechas { align-items:flex-start; flex-direction:column; gap:.3rem; }
    .calendario-fechas>i { display:none; }
}

/* Ajustes locales del encabezado para Horarios. */
header .cintillo {
    max-width: none;
    margin: 0;
    padding-left: 1rem;
}

header .cintillo-svg {
    margin-left: 0;
}

header .cintillo-tx {
    margin-left: 6rem;
}

main .row-container.horarios-page-container:first-child {
    padding-top: 6.4rem;
}

.horarios-page-container {
    padding-top: 0;
}

@media (max-width: 768px) {
    header .cintillo {
        padding-left: .75rem;
    }

    header .cintillo-tx {
        margin-left: 5.25rem;
        font-size: .9rem;
    }

    main .row-container.horarios-page-container:first-child {
        padding-top: 6rem;
    }
}
.footer-legal-link,
.footer-legal-link:visited {
    color: #fff;
    text-decoration: underline;
}

.footer-legal-link:hover,
.footer-legal-link:focus-visible {
    color: #fff;
    text-decoration: underline;
}