/*
 * TAXCOM v4 — sección pública de guías de estudio.
 *
 * Hoja propia y completa: esta sección no carga Bootstrap. Está escrita para el
 * teléfono primero —una columna, nada que pellizcar, botones que se tocan con el
 * pulgar— y las dos consultas de más abajo son las que la ensanchan en tableta y
 * en escritorio.
 *
 * La paleta es la del guinda institucional, la misma de los dibujos del burrito
 * y de las pantallas de error del sistema; no hay colores nuevos.
 */

:root {
    --g-guinda: #7A1737;
    --g-guinda-oscuro: #5C1029;
    --g-guinda-claro: #B05C78;
    --g-ambar: #E8A33D;
    --g-tinta: #2F2A2C;
    --g-suave: #6B6268;
    --g-fondo: #F6F4F5;
    --g-papel: #FFFFFF;
    --g-borde: #E7E1E3;
    --g-sombra: 0 1px 2px rgba(47, 42, 44, .04), 0 10px 24px rgba(47, 42, 44, .06);

    /* Lo que mide el dedo. Ningún control baja de aquí. */
    --g-toque: 2.75rem;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

.g-cuerpo {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--g-fondo);
    color: var(--g-tinta);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    /* Nada se sale de la pantalla en un teléfono angosto. */
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

/* ------------------------------------------------------------- Encabezado */

.g-encabezado {
    background: linear-gradient(135deg, var(--g-guinda), var(--g-guinda-oscuro));
    color: #fff;
    padding: .875rem 1rem;
}

.g-encabezado-caja {
    max-width: 48rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: .75rem;
}

.g-encabezado-burrito {
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    /* El dibujo trae su propio guinda; sobre el guinda se lee mejor en blanco. */
    background: rgba(255, 255, 255, .92);
    border-radius: .75rem;
    padding: .125rem;
}

.g-encabezado-texto {
    min-width: 0;
}

.g-encabezado-titulo {
    margin: 0;
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.2;
}

.g-encabezado-plantel {
    margin: .125rem 0 0;
    font-size: .8125rem;
    color: rgba(255, 255, 255, .82);
    line-height: 1.3;
}

/* -------------------------------------------------------------- Armazón */

.g-principal {
    flex: 1 0 auto;
    width: 100%;
    max-width: 48rem;
    margin: 0 auto;
    padding: 0 1rem 2rem;
}

.g-pantalla {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

/* --------------------------------------------------------------- Buscador */

/*
 * Pegado arriba: en una lista larga el buscador tiene que seguir al alcance sin
 * tener que subir con el pulgar hasta el principio.
 */
.g-buscador {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: .625rem;
    margin: 0 -1rem;
    padding: .75rem 1rem;
    background: var(--g-fondo);
    border-bottom: 1px solid var(--g-borde);
}

.g-campo {
    position: relative;
    display: flex;
    align-items: center;
}

.g-campo-lupa {
    position: absolute;
    left: .75rem;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--g-suave);
    pointer-events: none;
}

.g-campo-texto {
    width: 100%;
    min-height: var(--g-toque);
    padding: .5rem 2.5rem;
    border: 1px solid var(--g-borde);
    border-radius: .875rem;
    background: var(--g-papel);
    color: var(--g-tinta);
    /* 16px o el teléfono acerca la pantalla al enfocar el campo. */
    font-size: 1rem;
    font-family: inherit;
    box-shadow: var(--g-sombra);
    -webkit-appearance: none;
    appearance: none;
}

.g-campo-texto::-webkit-search-cancel-button {
    display: none;
}

.g-campo-texto:focus-visible,
.g-select-campo:focus-visible,
.g-chip:focus-visible,
.g-boton:focus-visible,
.g-mas:focus-visible,
.g-limpiar:focus-visible,
.g-campo-borrar:focus-visible,
.g-palanca-campo:focus-visible + .g-palanca-marco,
.g-observaciones summary:focus-visible {
    outline: 2px solid var(--g-guinda);
    outline-offset: 2px;
}

.g-campo-borrar {
    position: absolute;
    right: .25rem;
    width: var(--g-toque);
    height: var(--g-toque);
    border: 0;
    border-radius: .75rem;
    background: transparent;
    color: var(--g-suave);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

/* ---------------------------------------------------------------- Filtros */

.g-chips {
    display: flex;
    gap: .375rem;
    /* En el teléfono los cuatro turnos no caben: se recorren de lado. */
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: .125rem;
}

.g-chips::-webkit-scrollbar {
    display: none;
}

.g-chip {
    flex: 0 0 auto;
    min-height: 2.25rem;
    padding: .375rem .875rem;
    border: 1px solid var(--g-borde);
    border-radius: 999px;
    background: var(--g-papel);
    color: var(--g-suave);
    font-size: .9375rem;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
}

.g-chip[aria-pressed="true"] {
    background: var(--g-guinda);
    border-color: var(--g-guinda);
    color: #fff;
}

.g-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
}

.g-select {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: .9375rem;
    color: var(--g-suave);
}

.g-select-etiqueta {
    font-weight: 600;
}

.g-select-campo {
    min-height: 2.25rem;
    padding: .25rem 2rem .25rem .625rem;
    border: 1px solid var(--g-borde);
    border-radius: .75rem;
    background: var(--g-papel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5z' fill='%236B6268'/%3E%3C/svg%3E") no-repeat right .375rem center/1.25rem;
    color: var(--g-tinta);
    font-size: .9375rem;
    font-family: inherit;
    font-weight: 600;
    -webkit-appearance: none;
    appearance: none;
}

/* Palanca de «solo obligatorias»: la casilla real sigue ahí, tapada. */
.g-palanca {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 2.25rem;
    font-size: .9375rem;
    color: var(--g-suave);
    font-weight: 600;
    cursor: pointer;
}

.g-palanca-campo {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
}

.g-palanca-marco {
    position: relative;
    width: 2.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    border-radius: 999px;
    background: #D8D1D4;
    transition: background-color .18s ease;
}

.g-palanca-marco::after {
    content: "";
    position: absolute;
    top: .1875rem;
    left: .1875rem;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(47, 42, 44, .25);
    transition: transform .18s ease;
}

.g-palanca-campo:checked + .g-palanca-marco {
    background: var(--g-guinda);
}

.g-palanca-campo:checked + .g-palanca-marco::after {
    transform: translateX(1rem);
}

/* ---------------------------------------------------------------- Resumen */

.g-resumen {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    padding: 0 .125rem;
}

.g-conteo {
    margin: 0;
    font-size: .9375rem;
    font-weight: 700;
    color: var(--g-tinta);
}

.g-conteo-parcial {
    font-weight: 400;
    color: var(--g-suave);
}

.g-limpiar {
    border: 0;
    background: transparent;
    padding: .25rem;
    color: var(--g-guinda);
    font-size: .9375rem;
    font-family: inherit;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

/* Mientras Livewire contesta. Lo enciende wire:loading.flex. */
.g-esperando {
    display: none;
    align-items: center;
    gap: .625rem;
    padding: .625rem .875rem;
    border-radius: .875rem;
    background: var(--g-papel);
    border: 1px solid var(--g-borde);
    color: var(--g-suave);
    font-size: .9375rem;
    font-weight: 600;
}

.g-esperando-burrito {
    width: 2.25rem;
    height: 2.25rem;
}

/* --------------------------------------------------------------- Tarjetas */

.g-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.g-tarjeta {
    padding: .875rem 1rem 1rem;
    background: var(--g-papel);
    border: 1px solid var(--g-borde);
    border-radius: 1rem;
    box-shadow: var(--g-sombra);
}

.g-materia {
    margin: 0 0 .5rem;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--g-guinda);
    /* Un nombre largo del catálogo no empuja la tarjeta a lo ancho. */
    overflow-wrap: break-word;
}

.g-etiquetas {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .3125rem;
    margin: 0 0 .625rem;
    padding: 0;
}

.g-etiqueta {
    padding: .1875rem .5rem;
    border: 1px solid var(--g-borde);
    border-radius: .5rem;
    background: var(--g-fondo);
    color: var(--g-suave);
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.g-etiqueta-clave {
    background: #F3EAEE;
    border-color: #E7D5DC;
    color: var(--g-guinda);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.g-etiqueta-obligatoria {
    background: #FDF4E6;
    border-color: #F3DDB4;
    color: #8A5A12;
}

/* ----------------------------------------------------------- Observaciones */

.g-observaciones {
    margin: 0 0 .625rem;
}

.g-observaciones summary {
    cursor: pointer;
    color: var(--g-suave);
    font-size: .9375rem;
    line-height: 1.45;
}

/*
 * Cerrado, el resumen es el principio de las observaciones; abierto, sale el
 * texto completo debajo y el resumen se cambia por «ocultar» para que no salga
 * dos veces lo mismo.
 */
.g-observaciones-cerrar {
    display: none;
    font-weight: 600;
    color: var(--g-guinda);
}

.g-observaciones[open] .g-observaciones-vista {
    display: none;
}

.g-observaciones[open] .g-observaciones-cerrar {
    display: inline;
}

.g-observaciones-completa {
    margin: 0 0 .625rem;
    color: var(--g-suave);
    font-size: .9375rem;
    overflow-wrap: break-word;
    white-space: pre-line;
}

.g-observaciones .g-observaciones-completa {
    margin-bottom: 0;
}

/* ----------------------------------------------------------- Pie y botón */

.g-pie-tarjeta {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    padding-top: .625rem;
    border-top: 1px solid var(--g-borde);
}

.g-descargas {
    margin: 0;
    font-size: .875rem;
    color: var(--g-suave);
}

.g-descargas-numero {
    font-weight: 700;
    color: var(--g-tinta);
}

.g-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 3rem;
    padding: .625rem 1.25rem;
    border: 0;
    border-radius: .875rem;
    background: var(--g-guinda);
    color: #fff;
    font-size: 1rem;
    font-family: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .16s ease, transform .16s ease;
}

.g-boton:active {
    background: var(--g-guinda-oscuro);
    transform: scale(.985);
}

.g-boton-claro {
    background: var(--g-papel);
    border: 1px solid var(--g-guinda);
    color: var(--g-guinda);
}

.g-boton-icono {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.g-sin-archivo {
    margin: 0;
    padding: .625rem .875rem;
    border: 1px dashed var(--g-borde);
    border-radius: .875rem;
    background: var(--g-fondo);
    color: var(--g-suave);
    font-size: .9375rem;
    font-weight: 600;
    text-align: center;
}

/* ------------------------------------------------- Aviso de la descarga */

/*
 * Tres estados en la tarjeta, puestos por el guion del layout:
 *
 *   reposo       el aviso no existe.
 *   descargando  el burrito trabaja y la barrita recorre.
 *   listo        la barrita se llena y el texto cambia.
 */
.g-aviso {
    display: none;
    align-items: center;
    gap: .625rem;
    margin-top: .625rem;
    padding: .625rem .75rem;
    border-radius: .875rem;
    background: #F9F2F5;
    border: 1px solid #ECD9E1;
}

.g-tarjeta[data-estado="descargando"] .g-aviso,
.g-tarjeta[data-estado="listo"] .g-aviso {
    display: flex;
    animation: g-entra .18s ease-out;
}

.g-tarjeta[data-estado="descargando"] .g-aviso-listo,
.g-tarjeta[data-estado="listo"] .g-aviso-trabajando {
    display: none;
}

.g-aviso-burrito {
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
}

.g-aviso-cuerpo {
    flex: 1 1 auto;
    min-width: 0;
}

.g-aviso-texto {
    margin: 0 0 .375rem;
    font-size: .875rem;
    font-weight: 700;
    color: var(--g-guinda);
}

/*
 * La barrita. Mientras no se sabe cuánto falta —el navegador no lo cuenta—
 * recorre de un lado a otro; cuando llega la señal de que el PDF ya viene, se
 * queda llena. Prometer un porcentaje que nadie midió sería inventarlo.
 */
.g-barrita {
    height: .375rem;
    border-radius: 999px;
    background: #EADCE2;
    overflow: hidden;
}

.g-barrita-avance {
    display: block;
    height: 100%;
    width: 40%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--g-guinda-claro), var(--g-guinda));
}

.g-tarjeta[data-estado="descargando"] .g-barrita-avance {
    animation: g-recorre 1.1s ease-in-out infinite;
}

.g-tarjeta[data-estado="listo"] .g-barrita-avance {
    width: 100%;
    background: var(--g-guinda);
}

/* Y el botón deja de invitar mientras el PDF va en camino. */
.g-tarjeta[data-estado="descargando"] .g-boton {
    background: var(--g-guinda-claro);
}

@keyframes g-recorre {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

@keyframes g-entra {
    from { opacity: 0; transform: translateY(-.25rem); }
    to { opacity: 1; transform: translateY(0); }
}

/* ----------------------------------------------------------------- Vacío */

.g-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 1.75rem 1.25rem 2rem;
    background: var(--g-papel);
    border: 1px solid var(--g-borde);
    border-radius: 1rem;
    text-align: center;
}

.g-vacio-burrito {
    width: 100%;
    max-width: 8.5rem;
    height: auto;
}

.g-vacio-titulo {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--g-guinda);
}

.g-vacio-texto {
    margin: 0 0 .5rem;
    color: var(--g-suave);
    font-size: .9375rem;
    max-width: 24rem;
}

/* --------------------------------------------------------- Ver más y nota */

.g-mas {
    width: 100%;
    min-height: 3rem;
    border: 1px solid var(--g-guinda);
    border-radius: .875rem;
    background: var(--g-papel);
    color: var(--g-guinda);
    font-size: 1rem;
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
}

.g-nota {
    margin: .5rem 0 0;
    text-align: center;
    color: var(--g-suave);
    font-size: .8125rem;
}

/* ------------------------------------------------------------------- Pie */

.g-pie {
    background: var(--g-papel);
    border-top: 1px solid var(--g-borde);
    padding: 1rem;
    text-align: center;
    color: var(--g-suave);
    font-size: .78rem;
}

.g-pie p {
    margin: 0;
}

.g-pie-institucion {
    font-weight: 700;
    color: var(--g-guinda);
}

/* ------------------------------------------------------------- Tableta */

@media (min-width: 640px) {
    .g-encabezado {
        padding: 1.125rem 1.5rem;
    }

    .g-encabezado-burrito {
        width: 3.5rem;
        height: 3.5rem;
    }

    .g-encabezado-titulo {
        font-size: 1.375rem;
    }

    .g-principal {
        padding: 0 1.5rem 2.5rem;
    }

    .g-buscador {
        margin: 0 -1.5rem;
        padding: 1rem 1.5rem;
    }

    .g-lista {
        /* Dos columnas en cuanto caben sin apretar el nombre de la materia. */
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .g-vacio {
        grid-column: 1 / -1;
    }

    /* En la tableta el botón se pone al lado del contador, no debajo. */
    .g-pie-tarjeta {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .g-boton {
        flex-shrink: 0;
    }
}

/* ----------------------------------------------------------- Escritorio */

@media (min-width: 1024px) {
    .g-principal {
        max-width: 60rem;
    }

    .g-lista {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Con tres columnas la tarjeta vuelve a ser angosta: el botón, abajo. */
    .g-pie-tarjeta {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ------------------------------------------------- Quien pide menos movimiento */

@media (prefers-reduced-motion: reduce) {
    .g-aviso,
    .g-barrita-avance,
    .g-palanca-marco,
    .g-palanca-marco::after,
    .g-boton {
        animation: none !important;
        transition: none !important;
    }

    /* La barrita sigue diciendo que algo pasa, quieta y llena a medias. */
    .g-tarjeta[data-estado="descargando"] .g-barrita-avance {
        width: 60%;
    }

    .g-boton:active {
        transform: none;
    }
}