/* =========================================================================
   Tabla de horarios del sitio.

   Esquinas muy redondeadas, sin marcos y con profundidad blanda: lo que separa
   es el aire y una sombra baja, no una retícula de bordes.

   Los dos colores de la oferta llegan del panel en variables en línea
   (--bkh-desde / --bkh-hasta): cambiar el color de una certificación en el
   panel cambia su tabla sin tocar este archivo ni el tema.
   ========================================================================= */

/* El panel de inscripción entra en la misma declaración y no en una copia
   suya. Vive al final del `body` —tiene que taparlo todo—, así que queda
   fuera de la tabla y no hereda nada de ella. Con una segunda lista de
   colores, cambiar la paleta aquí dejaría el formulario con la anterior, y
   costaría un rato entender por qué. */
.bkh-tabla-bloque,
.bkh-panel {
    --bkh-desde: #2e4663;
    --bkh-hasta: #24374e;
    --bkh-navy:  #2e4663;
    --bkh-tinta: #16232f;
    --bkh-lima:  #d7e02b;
    --bkh-suave: #f4f5f6;
    --bkh-borde: rgba(46, 70, 99, .07);

    /* Los cupos. Van aquí y no sueltos en su regla para que se puedan cambiar
       en un sitio, y para que se vea de un vistazo que son cuatro estados de
       una misma escala y no cuatro colores cualesquiera.

       Cada pareja está comprobada sobre su propio fondo: 6.94, 5.97 y 6.57
       para las tres primeras, y 5.23 el gris de la vista previa. El morado de
       «agotado» es el mismo `--bkh-completa` con el que se pinta una fecha sin
       cupo marcada a mano: es el mismo estado, lo cuente la tienda o lo
       escriba una persona. */
    --bkh-cupo-fondo:    #e3f1e6;
    --bkh-cupo-tinta:    #1d5b30;
    --bkh-pocos-fondo:   #fdeedb;
    --bkh-pocos-tinta:   #8a4b00;
    --bkh-completa:      #7b4bb7;
    --bkh-futuro-tinta:  #5f6e7e;
    --bkh-futuro-borde:  #b9c3cc;

    background: #fff;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(46, 70, 99, .04), 0 10px 32px rgba(46, 70, 99, .08);
    margin: 0 0 2.5rem;
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ------------------------------------------------------- Apariencia --- */

/* Dos formas, elegidas en el panel. «Plano» quita el marco para las páginas
   que ya envuelven el bloque en su propia caja: dos tarjetas anidadas se ven
   como un error de maquetación. */
.bkh-estilo-plano {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.bkh-estilo-plano .bkh-tabla-cabeza { padding-left: 0; padding-right: 0; }
.bkh-estilo-plano .bkh-tabla thead th:first-child,
.bkh-estilo-plano .bkh-tabla tbody td:first-child { padding-left: 0; }
.bkh-estilo-plano .bkh-tabla thead th { background: transparent; border-bottom: 1px solid var(--bkh-borde); }
.bkh-estilo-plano .bkh-tabla thead th:first-child,
.bkh-estilo-plano .bkh-tabla tbody td:first-child { background: transparent; }

/* «Compacta» aprieta las filas para que quepan más fechas sin desplazar la
   página. No toca el tamaño de la letra: encoger el texto de una tabla de
   fechas es lo primero que la vuelve incómoda de leer. */
.bkh-densidad-compacta .bkh-tabla tbody td { padding-top: .45rem; padding-bottom: .45rem; }
.bkh-densidad-compacta .bkh-tabla-cabeza { padding-top: 1.1rem; padding-bottom: .9rem; }
.bkh-densidad-compacta .bkh-icono { width: 34px; height: 34px; border-radius: 11px; }
.bkh-densidad-compacta .bkh-icono svg { width: 17px; height: 17px; }
.bkh-densidad-compacta .bkh-pill { padding-top: .3rem; padding-bottom: .3rem; }
.bkh-densidad-compacta .bkh-boton { padding-top: .38rem; padding-bottom: .38rem; }

.bkh-tabla-cabeza {
    padding: 1.5rem 1.75rem 1.25rem;
}

.bkh-tabla-cabeza h2 {
    margin: 0;
    color: var(--bkh-navy);
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.25;
}

/* La tabla desborda dentro de su propio contenedor: en un móvil se arrastra
   de lado en vez de romper el ancho de la página. */
.bkh-tabla-scroll { overflow-x: auto; }

.bkh-tabla {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .92rem;
    color: var(--bkh-tinta);
}

.bkh-tabla thead th {
    text-align: center;
    padding: .8rem .7rem;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #7c8b9a;
    background: var(--bkh-suave);
    white-space: nowrap;
}

.bkh-tabla thead th:first-child { text-align: left; padding-left: 1.25rem; }
.bkh-tabla thead th:last-child  { padding-right: 1.25rem; }

.bkh-tabla tbody td {
    padding: .85rem .7rem;
    text-align: center;
    border-bottom: 1px solid var(--bkh-borde);
    vertical-align: middle;
}

.bkh-tabla tbody td:first-child { text-align: left; padding-left: 1.25rem; }
.bkh-tabla tbody td:last-child  { padding-right: 1.25rem; }

/* La primera columna se queda fija al desplazar de lado. Una tabla de curso
   son ocho columnas y en una página estrecha no caben; sin esto, al llegar al
   costo ya no se ve de qué nivel era la fila. */
.bkh-tabla thead th:first-child,
.bkh-tabla tbody td:first-child {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 1;
}

.bkh-tabla thead th:first-child { background: var(--bkh-suave); z-index: 2; }
.bkh-tabla tbody tr:hover td:first-child { background: #fbfcfd; }
.bkh-tabla tbody tr:last-child td { border-bottom: 0; }
.bkh-tabla tbody tr:hover td { background: #fbfcfd; }

/* ------------------------------------------------------------ Examen --- */

.bkh-examen {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-width: 8.5rem;
}

/* Pastilla muy redondeada con el icono de la modalidad, teñida con el color
   de la oferta. Es el único sitio donde el color aparece a superficie. */
.bkh-icono {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--bkh-desde) 15%, #fff);
    color: color-mix(in srgb, var(--bkh-desde) 72%, #16232f);
}

.bkh-icono svg { width: 20px; height: 20px; fill: currentColor; }

/* Un icono subido por el panel: se encaja sin recortar ni deformar, sea cual
   sea su proporción. */
.bkh-icono img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.bkh-nombre {
    display: block;
    font-weight: 600;
    line-height: 1.3;
}

/* El aviso en rojo bajo el nombre: es lo primero que hay que leer cuando la
   inscripción no es la normal. */
.bkh-aviso {
    display: block;
    margin-top: .1rem;
    font-size: .76rem;
    color: #d0342c;
    line-height: 1.35;
}

.bkh-localidad { font-weight: 500; color: #55677a; white-space: nowrap; }

/* ----------------------------------------------------------- Fechas --- */

/* Tres pesos, no tres colores inventados: la fecha del examen manda y va
   sólida; el cierre de inscripción es el aviso y va oscuro; las fechas
   derivadas —resultados, certificados— van en tinte suave. Así la jerarquía
   se lee igual en color que en blanco y negro. */
.bkh-pill {
    display: inline-block;
    min-width: 5.25rem;
    padding: .42rem .8rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .84rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.bkh-pill-fecha  { background: var(--bkh-navy); color: #fff; }
.bkh-pill-limite { background: var(--bkh-tinta); color: #fff; }

.bkh-pill-dato {
    background: color-mix(in srgb, var(--bkh-desde) 13%, #fff);
    color: color-mix(in srgb, var(--bkh-desde) 78%, #16232f);
}

/* El nivel, en una pastilla de su color. Más estrecha que las de fecha y sin
   ancho mínimo: un «B1» tiene que quedar redondo, no como una barra con dos
   letras en medio. */
.bkh-pill-nivel {
    min-width: 0;
    padding: .35rem .8rem;
    background: color-mix(in srgb, var(--bkh-desde) 16%, #fff);
    color: color-mix(in srgb, var(--bkh-desde) 75%, #16232f);
    font-weight: 700;
}

/* El color de la fecha del examen dice cómo va la inscripción, y nunca va
   solo: el aviso bajo el nombre lo repite en palabras. */
.bkh-es-recargo  { background: #c0392b; }
.bkh-es-completa { background: var(--bkh-completa); }
.bkh-es-cerrada  { background: #6b7b8c; }

/* --------------------------------------------------------------- Cupos --- */

/* Las plazas que quedan. El número lo dice WooCommerce en el momento de
   pintar, así que esta pastilla cambia sola según se vaya vendiendo.

   El color nunca va solo: cada estado lleva su palabra —«12 plazas»,
   «Agotado»—, y así se lee igual en blanco y negro o con daltonismo. */
.bkh-pill-cupos {
    min-width: 0;
    background: var(--bkh-cupo-fondo);
    color: var(--bkh-cupo-tinta);
}

/* Quedan pocas. Se dice con color y con el número; el número solo, en una
   tabla de veinte filas, no distingue «quedan 2» de «quedan 40». */
.bkh-pill-pocos {
    background: var(--bkh-pocos-fondo);
    color: var(--bkh-pocos-tinta);
}

/* Agotado toma el mismo morado que «Sin cupo» marcado a mano: es el mismo
   estado, lo cuente la tienda o lo escriba una persona, y dos colores para lo
   mismo enseñarían una diferencia que no existe. */
.bkh-pill-agotado {
    min-width: 0;
    background: var(--bkh-completa);
    color: #fff;
}

/* En la vista previa del panel no hay tienda a la que preguntar. El borde
   discontinuo dice que ahí irá un número, sin fingir cuál. */
.bkh-pill-futuro {
    background: transparent;
    border: 1px dashed var(--bkh-futuro-borde);
    /* #6b7b8c se quedaba en 4.34:1 sobre blanco, por debajo de AA. */
    color: var(--bkh-futuro-tinta);
    font-weight: 600;
}

.bkh-hora {
    font-size: .84rem;
    color: #55677a;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* El costo, con su moneda. Va en negrita y con cifras de ancho fijo: es la
   columna que se compara de arriba abajo entre una fecha y otra, y con la
   tipografía proporcional las unidades no caen bajo las unidades.

   El símbolo lo pone el servidor al pintar y no un `::before` de CSS: hay
   valores que no son un número —«Gratis», «Consultar»— y una regla de estilo no
   sabe distinguirlos, así que les habría puesto el símbolo igual. */
.bkh-costo {
    font-weight: 600;
    color: var(--bkh-tinta, #2e4663);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.bkh-vacio { color: #b9c3cc; }

/* --------------------------------------------------------- Inscribirse --- */

.bkh-boton {
    display: inline-block;
    padding: .5rem 1.15rem;
    border-radius: 999px;
    border: 0;
    font-weight: 700;
    font-size: .86rem;
    text-decoration: none;
    color: var(--bkh-tinta);
    background: var(--bkh-lima);
    white-space: nowrap;
    transition: transform .15s, box-shadow .15s;
}

.bkh-boton:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(46, 70, 99, .18);
    color: var(--bkh-tinta);
}

.bkh-boton.is-apagado {
    background: var(--bkh-suave);
    color: #9aa7b4;
    cursor: not-allowed;
}

.bkh-boton.is-apagado:hover { transform: none; box-shadow: none; }

@media (max-width: 640px) {
    .bkh-tabla thead th,
    .bkh-tabla tbody td { padding: .7rem .75rem; }

    .bkh-tabla thead th:first-child,
    .bkh-tabla tbody td:first-child { padding-left: 1rem; }

    .bkh-tabla-cabeza { padding: 1.25rem 1rem 1rem; }
    .bkh-tabla-cabeza h2 { font-size: 1.15rem; }
    .bkh-icono { width: 34px; height: 34px; border-radius: 11px; }
    .bkh-icono svg { width: 17px; height: 17px; }
}