/* Vacaciones en el navegador. Pensado para un movil en la mano, no para un escritorio.

   Los colores van con variables y se resuelven claro/oscuro con prefers-color-scheme: un
   conductor mira esto a las seis de la manana o a las once de la noche, y el movil ya sabe cual
   toca. Son los mismos tonos que usa la app para los estados, para que quien use las dos cosas
   no tenga que aprender dos codigos de color. */

:root {
    --fondo: #F4F6F8;
    --tarjeta: #FFFFFF;
    --borde: #DCE1E7;
    --texto: #16202B;
    --suave: #5D6B7A;
    --acento: #1D6FB8;
    --concedida: #2E7D32;
    --denegada: #C62828;
    --pendiente: #7A8699;
    --bloqueada: #E7EAEE;
}

@media (prefers-color-scheme: dark) {
    :root {
        --fondo: #0F1720;
        --tarjeta: #16202B;
        --borde: #26333F;
        --texto: #E7EDF3;
        --suave: #93A2BC;
        --acento: #4B9BE0;
        --bloqueada: #202C38;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--texto);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.45;
    /* Respeta la muesca del iPhone: sin esto la cabecera queda debajo del notch. */
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
             env(safe-area-inset-bottom) env(safe-area-inset-left);
}

main { max-width: 680px; margin: 0 auto; padding: 14px 14px 40px; }

h1 { font-size: 1.4rem; margin: 0; }

.suave { color: var(--suave); font-size: 0.85rem; margin: 2px 0 0; }
.subtitulo { font-weight: 600; margin: 0 0 8px; }
.aviso { color: var(--acento); font-size: 0.9rem; }
.error {
    color: var(--denegada);
    font-size: 0.9rem;
    background: color-mix(in srgb, var(--denegada) 10%, transparent);
    border-radius: 8px;
    padding: 10px 12px;
}

.tarjeta {
    background: var(--tarjeta);
    border: 1px solid var(--borde);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 14px;
}

.cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.plazo { font-size: 0.85rem; color: var(--suave); margin: 0; }
.contador { font-weight: 600; margin: 6px 0 0; }

/* ---- Acceso ---- */
.acceso { margin-top: 8vh; }
.acceso label { display: block; font-size: 0.8rem; color: var(--suave); margin: 14px 0 4px; }
.acceso input {
    width: 100%;
    /* 16px o mas: por debajo de eso, Safari en iPhone hace zoom al enfocar el campo y deja la
       pagina descuadrada. Es la razon del tamano, no la estetica. */
    font-size: 16px;
    padding: 12px;
    border: 1px solid var(--borde);
    border-radius: 10px;
    background: var(--fondo);
    color: var(--texto);
}
.pie { margin-top: 16px; }

button {
    font-family: inherit;
    font-size: 1rem;
    border: 0;
    border-radius: 10px;
    background: var(--acento);
    color: #fff;
    padding: 13px 18px;
    /* 44px de alto minimo: es lo que hace falta para acertar con el dedo. */
    min-height: 44px;
    cursor: pointer;
}
button.ghost { background: transparent; color: var(--suave); border: 1px solid var(--borde); padding: 8px 14px; min-height: 0; }
.acceso button, .enviar { width: 100%; margin-top: 18px; }

/* ---- Calendario ---- */
.mes { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.nombre-mes { font-weight: 600; text-transform: capitalize; }
.flecha {
    text-decoration: none;
    color: var(--texto);
    font-size: 1.6rem;
    line-height: 1;
    padding: 4px 14px;
}
.flecha.apagada { opacity: 0.25; }

.dias-semana, .dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.dias-semana span { text-align: center; font-size: 0.7rem; color: var(--suave); font-weight: 600; }
.semana { margin-top: 4px; }

/* La semana entera es un solo boton: es la unidad que se pide, y asi no hay que explicar por que
   al tocar un martes se marcan siete dias. */
.fila-semana { margin: 0; }
button.dias {
    width: 100%;
    background: transparent;
    padding: 0;
    border-radius: 8px;
    min-height: 0;
}
button.dias.pulsable:active { transform: scale(0.99); }

.dia {
    text-align: center;
    padding: 9px 0;
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--texto);
    background: transparent;
}
.dia.fuera { opacity: 0.25; }
.dia.nada { opacity: 0.4; }
.dia.libre { background: var(--bloqueada); }
.dia.bloqueada { background: var(--bloqueada); color: var(--denegada); text-decoration: line-through; }
.dia.pendiente { background: var(--pendiente); color: #fff; font-weight: 600; }
.dia.concedida { background: var(--concedida); color: #fff; font-weight: 600; }
.dia.denegada { background: var(--denegada); color: #fff; font-weight: 600; }

.leyenda { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.leyenda li { display: flex; align-items: center; gap: 7px; font-size: 0.78rem; color: var(--suave); }
.m { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.m.libre { background: var(--bloqueada); }
.m.pendiente { background: var(--pendiente); }
.m.concedida { background: var(--concedida); }
.m.denegada { background: var(--denegada); }
.m.bloqueada { background: var(--bloqueada); border: 1px solid var(--denegada); }

/* ---- Mis semanas ---- */
.semanas { list-style: none; padding: 0; margin: 0; }
.semanas li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid var(--borde);
}
.semanas li:last-child { border-bottom: 0; }
.punto { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.punto.concedida { background: var(--concedida); }
.punto.denegada { background: var(--denegada); }
.punto.pendiente { background: var(--pendiente); }
.rango { flex: 1; font-size: 0.9rem; }
.rango small { display: block; color: var(--suave); font-size: 0.75rem; }
.quitar {
    background: transparent;
    color: var(--suave);
    font-size: 1.3rem;
    padding: 0 10px;
    min-height: 40px;
}

/* ---- Instrucciones ---- */
.instrucciones summary { font-weight: 600; cursor: pointer; }
.instrucciones p, .instrucciones li { font-size: 0.88rem; color: var(--suave); }
.instrucciones ul, .instrucciones ol { padding-left: 20px; }