@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');


:root {

    --azul: #0877b9;

    --azul-oscuro: #07527e;

    --rojo: #c52e36;

    --blanco: #ffffff;

    --crema: #f7f9fb;

    --gris: #667085;

    --texto: #172033;

    --borde: #e3e7ec;

}


* {

    box-sizing: border-box;

}


body {

    margin: 0;

    font-family: 'Montserrat', Arial, Helvetica, sans-serif;

    background: var(--crema);

    color: var(--texto);

}


a {

    text-decoration: none;

    color: inherit;

}


/* =========================
   ENCABEZADO
========================= */

.topbar {

    background: var(--blanco);

    border-bottom: 4px solid var(--rojo);

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 10px 5%;

    gap: 20px;

    position: sticky;

    top: 0;

    z-index: 10;

    box-shadow: 0 2px 12px #0000000d;

}


.brand {

    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 0;

}


.logo {

    width: 62px;

    height: 62px;

    object-fit: contain;

    flex-shrink: 0;

}


.brand strong {

    display: block;

    color: var(--azul-oscuro);

    font-size: 17px;

    line-height: 1.25;

}


.brand span {

    display: block;

    color: var(--gris);

    font-size: 12px;

    margin-top: 3px;

}


/* =========================
   MENÚ
========================= */

nav {

    display: flex;

    gap: 6px;

    flex-wrap: wrap;

    justify-content: flex-end;

}


nav a {

    padding: 9px 12px;

    border-radius: 8px;

    font-weight: 700;

    font-size: 13px;

}


nav a:hover,

nav a.active {

    background: #eaf5fb;

    color: var(--azul-oscuro);

}


/* =========================
   PÁGINAS
========================= */

.hero,

.page {

    max-width: 1120px;

    margin: auto;

    padding: 42px 20px;

}


/* =========================
   TARJETA PRINCIPAL
========================= */

.hero-card {

    background: var(--blanco);

    border-radius: 20px;

    overflow: hidden;

    display: grid;

    grid-template-columns: 1fr 260px;

    box-shadow: 0 10px 35px #00000012;

    border: 1px solid var(--borde);

}


.hero-content {

    padding: 48px;

}


.eyebrow {

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.5px;

    color: var(--rojo);

}


h1 {

    font-size: clamp(30px, 5vw, 52px);

    line-height: 1.05;

    margin: 10px 0 14px;

    color: var(--azul-oscuro);

}


h2 {

    margin-top: 0;

    color: var(--azul-oscuro);

}


p {

    line-height: 1.6;

    color: var(--gris);

}


/* =========================
   BOTONES
========================= */

.actions {

    display: flex;

    gap: 12px;

    flex-wrap: wrap;

    margin-top: 25px;

}


.btn {

    border: 0;

    border-radius: 9px;

    padding: 12px 17px;

    font-weight: 700;

    cursor: pointer;

    display: inline-block;

    font-family: inherit;

}


.blue {

    background: var(--azul);

    color: white;

}


.red {

    background: var(--rojo);

    color: white;

}


.danger {

    background: #fff0f1;

    color: var(--rojo);

    border: 1px solid #f0c4c7;

}


.btn:hover {

    filter: brightness(.94);

}


/* =========================
   COLORES DEL POLITÉCNICO
   SOLO AZUL, BLANCO Y ROJO
========================= */

.school-colors {

    display: flex;

    position: relative;

    overflow: hidden;

    min-height: 280px;

}


.stripe {

    flex: 1;

}


.blue-bg {

    background: var(--azul);

}


.white-bg {

    background: var(--blanco);

}


.red-bg {

    background: var(--rojo);

}


/* LOGO */

.logo-box {

    position: absolute;

    inset: 0;

    margin: auto;

    width: 165px;

    height: 165px;

    border-radius: 50%;

    background: white;

    padding: 7px;

    display: grid;

    place-items: center;

    box-shadow: 0 8px 25px #0004;

}


.logo-box img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    border-radius: 50%;

}


/* =========================
   TARJETAS
========================= */

.cards {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 18px;

    margin-top: 25px;

}


.cards article {

    background: white;

    border: 1px solid var(--borde);

    border-radius: 16px;

    padding: 25px;

    box-shadow: 0 5px 18px #00000008;

}


.icon {

    font-size: 30px;

}


.blue-text {

    color: var(--azul);

}


.red-text {

    color: var(--rojo);

}


/* =========================
   PANELES
========================= */

.panel {

    background: white;

    border: 1px solid var(--borde);

    border-radius: 16px;

    padding: 25px;

    box-shadow: 0 5px 18px #00000008;

    margin-bottom: 25px;

}


.page-title {

    margin-bottom: 25px;

}


.page-title h1 {

    font-size: 38px;

    margin-bottom: 5px;

}


/* =========================
   FORMULARIOS
========================= */

.form-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 16px;

}


label {

    font-weight: 700;

    font-size: 14px;

    color: #344054;

}


input,

select,

textarea {

    width: 100%;

    margin-top: 7px;

    padding: 12px;

    border: 1px solid #ccd3db;

    border-radius: 9px;

    font: inherit;

    background: white;

    color: var(--texto);

}


input:focus,

select:focus,

textarea:focus {

    outline: 3px solid #0877b922;

    border-color: var(--azul);

}


textarea {

    min-height: 90px;

    resize: vertical;

}


.full {

    grid-column: 1 / -1;

}


/* =========================
   HORARIO
========================= */

.section-head {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 15px;

    margin-bottom: 15px;

}


.schedule-wrap {

    overflow: auto;

}


.schedule {

    width: 100%;

    border-collapse: collapse;

    min-width: 720px;

}


.schedule th,

.schedule td {

    padding: 12px;

    border-bottom: 1px solid var(--borde);

    text-align: left;

}


.schedule th {

    background: #f1f7fa;

    color: var(--azul-oscuro);

}


.delete {

    background: none;

    border: 0;

    color: var(--rojo);

    font-weight: 700;

    cursor: pointer;

}


/* =========================
   MENÚ DE COMIDA
========================= */

.menu-grid {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 12px;

}


.day-card {

    border: 1px solid var(--borde);

    border-radius: 12px;

    overflow: hidden;

    background: white;

}


.day-card h3 {

    margin: 0;

    padding: 13px;

    background: var(--azul);

    color: white;

}


.meal {

    padding: 12px;

    border-bottom: 1px solid var(--borde);

    line-height: 1.5;

}


.meal:last-child {

    border-bottom: 0;

}


.meal strong {

    display: block;

    color: var(--rojo);

    font-size: 12px;

    text-transform: uppercase;

    margin-bottom: 5px;

}


.empty {

    padding: 25px;

    text-align: center;

    color: var(--gris);

    border: 1px dashed #cbd5e1;

    border-radius: 10px;

    grid-column: 1 / -1;

}


/* =========================
   PIE DE PÁGINA
========================= */

footer {

    text-align: center;

    padding: 25px;

    color: var(--gris);

    font-size: 13px;

}


/* =========================
   CELULARES
========================= */

@media (max-width: 800px) {

    .topbar {

        align-items: flex-start;

        flex-direction: column;

    }

    nav {

        justify-content: flex-start;

    }

    .hero-card {

        grid-template-columns: 1fr;

    }

    .school-colors {

        min-height: 220px;

    }

    .cards {

        grid-template-columns: 1fr;

    }

    .menu-grid {

        grid-template-columns: 1fr;

    }

    .form-grid {

        grid-template-columns: 1fr;

    }

    .full {

        grid-column: auto;

    }

    .hero-content {

        padding: 30px;

    }

    .page {

        padding-top: 28px;

    }

    .brand strong {

        font-size: 15px;

    }

}


/* =========================================
ADAPTACIÓN PARA TELÉFONO Y COMPUTADORA
COLORES ORIGINALES:
AZUL + BLANCO + ROJO
Pegar al FINAL del CSS anterior
========================================= */

* {
    box-sizing: border-box;
    }

html,
body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}

img {
max-width: 100%;
height: auto;
}

/* =========================
TABLAS
========================= */

.schedule-wrap,
.tabla-responsive,
.menu-contenedor {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}

.schedule,
.tabla-horario,
.tabla-menu {
min-width: 700px;
}

/* =========================
TABLET
========================= */

@media (max-width: 900px) {

.topbar {
    flex-wrap: wrap;
}
.hero-card {
    grid-template-columns: 1fr;
}
.school-colors {
    min-height: 230px;
}
.cards {
    grid-template-columns: repeat(2, 1fr);
}
.menu-grid {
    grid-template-columns: repeat(2, 1fr);
}
.form-grid {
    grid-template-columns: 1fr;
}
.full {
    grid-column: auto;
}
.hero-content {
    padding: 35px;
}

}

/* =========================
TELÉFONO
========================= */

@media (max-width: 600px) {

.topbar {
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
    gap: 12px;
}
.brand {
    width: 100%;
}
.logo {
    width: 52px;
    height: 52px;
}
.brand strong {
    font-size: 14px;
}
.brand span {
    font-size: 11px;
}
nav {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
nav a {
    text-align: center;
    font-size: 12px;
    padding: 10px 5px;
}
/* Azul para navegación activa */
nav a.active {
    background: #eaf5fb;
    color: #07527e;
}
.hero,
.page {
    width: 100%;
    padding: 22px 12px;
}
.hero-card {
    width: 100%;
    grid-template-columns: 1fr;
    border-radius: 14px;
}
.hero-content {
    padding: 25px 18px;
}
h1 {
    font-size: 32px;
}
.page-title h1 {
    font-size: 30px;
}
.school-colors {
    min-height: 190px;
}
.logo-box {
    width: 125px;
    height: 125px;
}
/* Mantener franjas azul, blanco y rojo */
.blue-bg {
    background: #0877b9;
}
.white-bg {
    background: #ffffff;
}
.red-bg {
    background: #c52e36;
}
.cards {
    grid-template-columns: 1fr;
    gap: 12px;
}
.cards article {
    padding: 20px;
}
.menu-grid {
    grid-template-columns: 1fr;
}
.form-grid {
    grid-template-columns: 1fr;
}
.panel {
    width: 100%;
    padding: 18px 14px;
}
.actions {
    flex-direction: column;
}
.actions .btn {
    width: 100%;
    text-align: center;
}
input,
select,
textarea {
    width: 100%;
    font-size: 16px;
}
.section-head {
    flex-direction: column;
    align-items: flex-start;
}
.section-head .btn {
    width: 100%;
}
/* Tablas desplazables en teléfonos */
.schedule-wrap,
.tabla-responsive,
.menu-contenedor {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.schedule,
.tabla-horario,
.tabla-menu {
    min-width: 700px;
}
footer {
    padding: 20px 12px;
    font-size: 12px;
}

}

/* =========================
TELÉFONOS PEQUEÑOS
========================= */

@media (max-width: 380px) {

nav {
    grid-template-columns: 1fr;
}
.logo {
    width: 46px;
    height: 46px;
}
.brand strong {
    font-size: 13px;
}
.brand span {
    font-size: 10px;
}
h1 {
    font-size: 28px;
}
.page-title h1 {
    font-size: 27px;
}
.hero-content {
    padding: 22px 16px;
}
.logo-box {
    width: 110px;
    height: 110px;
}

}