/*  Sitio publico de propuestas de reunion.

    Que es esto: UNA pagina que un cliente de fuera abre desde un correo, casi siempre en el
    movil y con prisa, para elegir el rato de su reunion. No es una web de producto: es un
    documento de la casa con una decision dentro.

    Por eso, tres decisiones que no son por comodidad:
      - CSS a mano y CERO peticiones externas. Ni framework ni tipografias de Google: la pagina
        tiene que pintar entera a la primera con mala cobertura, y no puede quedarse a medias
        porque una CDN vaya lenta o este bloqueada en la red del cliente.
      - Una sola familia, una sola tinta de acento (el turquesa de la casa) y UNA sola version:
        clara. La personalidad la pone la estructura y el aire, no un adorno.
      - Lo unico con peso visual es la CIFRA DEL DIA. Es lo que el cliente esta mirando cuando
        abre esto, y lo demas se aparta para dejarla leer. */

:root {
    --papel: #F2F4F4;
    --hoja: #FFFFFF;
    --tinta: #12262B;
    --tinta-media: #48666D;
    --tinta-suave: #6B868C;
    --linea: #E4E9E9;
    --linea-fuerte: #CBD5D6;
    --turquesa: #1E8E9F;
    --turquesa-hondo: #14636F;
    --turquesa-agua: #EDF7F8;
    --ambar-fondo: #FDF6E8;
    --ambar-linea: #DDB86A;
    --sombra: 0 1px 1px rgb(18 38 43 / 4%), 0 10px 30px -12px rgb(18 38 43 / 14%);

    /*  La pagina es clara SIEMPRE, y se declara para que el navegador no pinte los controles ni
        la barra de desplazamiento en oscuro. Es un documento de la casa: su color no depende de
        como tenga el movil el cliente que lo abre, igual que no depende de eso una carta. */
    color-scheme: light;
}

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

body {
    margin: 0;
    min-height: 100vh;
    padding: 3rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    background: var(--papel);
    color: var(--tinta);
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/*  La hoja. El filete turquesa de arriba es el membrete: sitúa de quién es el documento antes
    de leer una palabra, y es lo único decorativo de la página. */
.hoja {
    width: 100%;
    max-width: 40rem;
    background: var(--hoja);
    border: 1px solid var(--linea);
    border-top: 3px solid var(--turquesa);
    border-radius: 2px;
    box-shadow: var(--sombra);
    padding: 2.5rem 2.75rem 2.25rem;
}

.membrete {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--linea);
    margin-bottom: 1.75rem;
}
.membrete img { height: 1.75rem; width: auto; display: block; }

h1 {
    margin: 0 0 .625rem;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.entradilla {
    margin: 0;
    max-width: 34rem;
    color: var(--tinta-media);
}
.entradilla + .entradilla { margin-top: .75rem; }
.entradilla b { color: var(--tinta); font-weight: 600; }

/*  ---------------------------------------------------------------- la agenda
    Un dia por bloque: la fecha en una linea y debajo sus horas. La cifra del dia es lo unico con
    peso visual de la pagina, porque es lo que el cliente esta buscando al abrir esto.

    La misma forma en movil y en escritorio a proposito: dos maquetas distintas para nueve botones
    es complicar por complicar, y la de una columna se lee mejor en los dos sitios. */
.agenda { margin: 2rem 0 0; }

.jornada {
    padding: 1rem 0;
    border-top: 1px solid var(--linea);
}
.jornada:last-child { border-bottom: 1px solid var(--linea); }

.fecha {
    font-size: 1rem;
    font-weight: 400;
    display: flex;
    align-items: baseline;
    gap: .4375rem;
    margin-bottom: .6875rem;
    color: var(--tinta-media);
}
.fecha .dia-numero {
    font-size: 1.75rem;
    font-weight: 300;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    color: var(--turquesa-hondo);
}

/*  Rejilla y no fila flexible: con flex, la ultima hora de un dia impar se estiraba a lo ancho y
    parecia otra cosa. Asi todos los botones miden igual, esten tres o esten siete. */
.horas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr));
    gap: .5rem;
    max-width: 30rem;
}

/*  Grande porque esto se pulsa con el pulgar, y en cifras tabulares para leer la columna de un
    barrido. */
.hora {
    font: inherit;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-height: 2.875rem;
    padding: .625rem .5rem;
    color: var(--turquesa-hondo);
    background: var(--hoja);
    border: 1px solid var(--linea-fuerte);
    border-radius: 2px;
    cursor: pointer;
    transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.hora:hover { background: var(--turquesa-agua); border-color: var(--turquesa); }
.hora:focus-visible { outline: 2px solid var(--turquesa); outline-offset: 2px; }
.hora:active { background: var(--turquesa); border-color: var(--turquesa); color: #FFFFFF; }

.cierre {
    margin: 1.75rem 0 0;
    font-size: .9375rem;
    color: var(--tinta-media);
}

.aviso {
    margin: 0 0 1.75rem;
    padding: .875rem 1.125rem;
    background: var(--ambar-fondo);
    border: 1px solid var(--ambar-linea);
    border-radius: 2px;
    color: var(--tinta);
}

/*  ---------------------------------------------------------------- reservado
    Cuando ya ha elegido, el resguardo. La fecha se pinta con el mismo lenguaje que en la lista
    —cifra grande— para que reconozca lo que acaba de escoger. Sin iconos de visto bueno: la
    propia fecha, grande y sola, ya dice que está hecho. */
.resguardo { border-top: 1px solid var(--linea); padding-top: 2rem; margin-top: 2rem; }
.resguardo .cuando {
    font-size: 2rem;
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    color: var(--turquesa-hondo);
    margin: 0 0 .5rem;
}
.resguardo .apunte { margin: 0; color: var(--tinta-media); }

/*  Las dos salidas del paso de confirmacion. La de reservar pesa y la de volver no: el cliente
    ya ha decidido, y lo unico que hace falta es que no se reserve por un toque sin querer. */
.acciones {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.75rem;
}

.hora.principal {
    min-width: 12rem;
    color: #FFFFFF;
    background: var(--turquesa);
    border-color: var(--turquesa);
}
.hora.principal:hover { background: var(--turquesa-hondo); border-color: var(--turquesa-hondo); }

.volver { color: var(--tinta-media); text-decoration: underline; }
.volver:hover { color: var(--tinta); }
.volver:focus-visible { outline: 2px solid var(--turquesa); outline-offset: 2px; }

/*  ---------------------------------------------------------------- contacto
    La salida cuando no hay nada que elegir: sin enlace, caducado o ya usado. */
.contacto {
    margin-top: 2rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--linea);
}
.contacto p { margin: 0 0 .875rem; color: var(--tinta-media); }

.correo {
    display: inline-block;
    font-weight: 600;
    padding: .75rem 1.25rem;
    min-height: 2.875rem;
    color: var(--turquesa-hondo);
    background: var(--turquesa-agua);
    border: 1px solid var(--turquesa);
    border-radius: 2px;
    text-decoration: none;
    transition: background .14s ease, color .14s ease;
}
.correo:hover { background: var(--turquesa); color: #FFFFFF; }
.correo:focus-visible { outline: 2px solid var(--turquesa); outline-offset: 2px; }

@media (max-width: 36rem) {
    body { padding: 1.25rem .875rem; }
    .hoja { padding: 1.5rem 1.25rem 1.75rem; }
    .membrete { padding-bottom: 1.125rem; margin-bottom: 1.5rem; }
    h1 { font-size: 1.4375rem; }

    .agenda { margin-top: 1.5rem; }
    .jornada { padding: 1.125rem 0; }
    .horas { grid-template-columns: repeat(auto-fill, minmax(4.75rem, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}