/* =====================================================
   Akcadmia — componentes/horario-perfil-publico.css
   Particularidades del horario del perfil público (/p/{slug}).
   La estructura común (tabla, celda de hora, tarjeta, scroll, botón +, horas,
   fondo claro, indicador) vive en componentes/horario.css.
   ===================================================== */

/* El botón "+" de matrícula vive fijo DENTRO de la tarjeta, arriba a la derecha, y
   las dos líneas que quedan a su altura —el nombre de la clase y la hora en 12 h—
   le dejan su hueco y se recortan con puntos suspensivos en vez de pasar por debajo.
   La hora entera sigue a la vista en la línea de 24 h, que ya queda por debajo del
   botón. La reserva va en esas líneas y no en la tarjeta: el armazón la pinta con la
   utilidad .p-1, cuyo !important ganaría a cualquier relleno de la tarjeta.

   Solo mientras el botón se ve: en las clases cerradas a matrícula no se pinta, y
   cuando una clase empieza con la página abierta profesor.js oculta el del alumno con
   .d-none; en los dos casos esas líneas recuperan todo el ancho. */
.edu-horario__grid-tarjeta:has(> .edu-horario-publico__matricular:not(.d-none)) > .edu-horario__grid-tarjeta-scroll > :first-child,
.edu-horario__grid-tarjeta:has(> .edu-horario-publico__matricular:not(.d-none)) .edu-horario__grid-hora12 {
    padding-right: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Texto menudo de la tarjeta: curso · ciclo, monedas, cupos y matriculados.
   Sustituye a los style="font-size:.6rem" que estaban repetidos cinco veces en
   el marcado.

   La lleva también la píldora del precio, que es .edu-monedas--compacta: de ahí sale
   el apriete y de aquí el tamaño, que es lo que hace que el precio pese lo mismo que
   los cupos. El apriete estaba escrito aquí y se fue a sitio.css, con la píldora,
   porque era el mismo en tres componentes. */
.edu-horario-publico__badge {
    font-size: .6rem;
}

/* === Botón de matrícula ("+") ===
   El "+" de cada clase en la que todavía se puede entrar, en el lima de acción de la
   plataforma: el mismo color del botón "Ver horario y matricularme" que trae hasta
   aquí, así que se reconoce como la misma acción. Al alumno con sesión le abre la
   confirmación de matrícula y al visitante lo lleva al registro con la invitación
   del profesor; eso lo decide la parcial, no este estilo.

   Toma la capa del "+" de celda (horario.css), un punto más grande y más pegado a la
   esquina. En reposo es un círculo; al pasar el cursor o al llegar con el teclado se estira
   hacia la izquierda —está anclado a la derecha— y enseña "Matricularme". Nunca
   pasa del ancho de la tarjeta, que además recorta lo que se salga.

   Al cargar la semana late tres veces y se queda quieto: llama la atención sobre las
   clases abiertas sin que una grilla llena se convierta en un tablero que parpadea.
   Al cambiar de semana la grilla se repinta y vuelve a latir.

   La grilla es una isla clara también en tema oscuro (horario.css), así que sus
   colores van fijos y sin contraparte. */
.edu-horario__grid-btnplus.edu-horario-publico__matricular {
    --bs-btn-bg: #84CC16;
    --bs-btn-border-color: #84CC16;
    --bs-btn-color: #1A2E05;
    --bs-btn-hover-bg: #74B513;
    --bs-btn-hover-border-color: #74B513;
    --bs-btn-hover-color: #1A2E05;
    --bs-btn-active-bg: #65A30D;
    --bs-btn-active-border-color: #65A30D;
    --bs-btn-active-color: #1A2E05;
    top: 2px;
    right: 2px;
    width: auto;
    min-width: 22px;
    max-width: calc(100% - 4px);
    height: 22px;
    padding: 0 3px;
    border-radius: 999px;
    font-size: .8rem;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(77, 124, 15, .35);
    transition: background-color .2s ease, box-shadow .2s ease, padding .25s ease;
    animation: edu-horario-publico-llama 1.8s ease-out .8s 3;
}

/* El texto, plegado a ancho cero hasta que el botón se estira. En una tarjeta
   estrecha se corta con puntos suspensivos antes que desbordarla. */
.edu-horario-publico__matricular-texto {
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .01em;
    transition: max-width .25s ease, opacity .2s ease, margin-left .25s ease;
}

.edu-horario__grid-btnplus.edu-horario-publico__matricular:focus-visible {
    padding-right: .45rem;
    outline: 2px solid #4F46E5;
    outline-offset: 1px;
    box-shadow: none;
}

.edu-horario-publico__matricular:focus-visible .edu-horario-publico__matricular-texto {
    max-width: 5.5rem;
    margin-left: .2rem;
    opacity: 1;
}

/* Solo con un puntero que pueda pasar por encima: en pantalla táctil el primer toque
   ya es la acción, y el botón se queda en círculo. Pasar por la tarjeta marca más la
   sombra del "+", para que se vea dónde está la acción de esa clase. */
@media (hover: hover) {
    .edu-horario__grid-btnplus.edu-horario-publico__matricular:hover {
        padding-right: .45rem;
    }

    .edu-horario-publico__matricular:hover .edu-horario-publico__matricular-texto {
        max-width: 5.5rem;
        margin-left: .2rem;
        opacity: 1;
    }

    .edu-horario__grid-tarjeta:hover > .edu-horario-publico__matricular {
        box-shadow: 0 3px 10px rgba(77, 124, 15, .5);
    }
}

@keyframes edu-horario-publico-llama {
    0% {
        box-shadow: 0 2px 6px rgba(77, 124, 15, .35), 0 0 0 0 rgba(132, 204, 22, .7);
    }

    70% {
        box-shadow: 0 2px 6px rgba(77, 124, 15, .35), 0 0 0 7px rgba(132, 204, 22, 0);
    }

    100% {
        box-shadow: 0 2px 6px rgba(77, 124, 15, .35), 0 0 0 0 rgba(132, 204, 22, 0);
    }
}

/* Con movimiento reducido el botón no late y aparece estirado o plegado sin
   deslizarse. */
@media (prefers-reduced-motion: reduce) {
    .edu-horario__grid-btnplus.edu-horario-publico__matricular,
    .edu-horario-publico__matricular-texto {
        animation: none;
        transition: none;
    }
}