/* ==========================================================================
   kontrol-mejoras.css — Utilidades INVISIBLES agregadas en la auditoría
   --------------------------------------------------------------------------
   Sitio: kontrolschool.com
   Tanda 4: este archivo se redujo a propósito. En las tandas 1-3 incluía
   ajustes de colores, márgenes y posiciones que cambiaban el diseño original;
   Jorge pidió respetar el aspecto del sitio, así que aquí SOLO queda lo que
   no se ve en el uso normal con ratón:
     1. Enlace "Saltar al contenido" (aparece únicamente al navegar con Tab).
     2. Contorno de foco para teclado (:focus-visible no se activa con clic).
     3. Textos solo para lectores de pantalla (.sr-only-ks).
     4. Campo trampa antispam (fuera de pantalla).
     5. Casilla de autorización de datos (lo único visible nuevo en los
        formularios, exigido por la Ley 1581 de 2012).
     6. Aviso de resultado del envío (solo aparece después de enviar).
     7. reCAPTCHA sin desbordarse en celulares de 320 px.
     8. (Retirado en tanda 4.1) Las animaciones se comportan como el original.
   ========================================================================== */

/* 1. Saltar al contenido: oculto arriba, baja al recibir foco con Tab */
.skip-link {
    position: absolute;
    left: 12px;
    top: -80px;
    z-index: 100000;
    padding: 10px 16px;
    background: #091E3E;
    color: #fff !important;
    border-radius: 6px;
    font-weight: 700;
    text-decoration: none;
}
.skip-link:focus {
    top: 12px;
}

/* 2. Foco visible solo con teclado (WCAG 2.4.7). Con ratón no aparece. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #f5a623 !important;
    outline-offset: 2px !important;
}
/* El <main> recibe foco al usar "Saltar al contenido": sin contorno visible */
main:focus {
    outline: none;
}

/* 3. Solo lectores de pantalla (Bootstrap 5.0.0 no trae .visually-hidden) */
.sr-only-ks {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* 4. Honeypot antispam: invisible y fuera del flujo, sin usar display:none
      (algunos bots lo detectan). Auditoría tanda 5: antes se movía con
      left:-10000px, pero en celulares el navegador seguía contando el ancho
      del campo y aparecía desplazamiento lateral; ahora se recorta en sitio. */
.ks-hp {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}
.ks-hp input,
.ks-hp label {
    width: 1px !important;
    min-width: 0 !important;
}

/* El botón de WhatsApp ahora es <a> en vez de <div>: sin subrayado, igual que antes */
a.whatsapp-button,
a.whatsapp-button:hover {
    text-decoration: none;
}

/* 5. Casilla de autorización de datos: texto pequeño blanco sobre el azul del formulario */
.ks-consentimiento .form-check-label,
.ks-consentimiento .form-check-label a {
    color: #fff;
    font-size: .85rem;
}
.ks-consentimiento .form-check-label a {
    text-decoration: underline;
}

/* 6. Aviso tras enviar (lo muestra js/formularios.js; oculto el resto del tiempo) */
.ks-aviso {
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
    font-weight: 600;
}
.ks-aviso--ok    { background: #e7f6ec; color: #14532d; border: 1px solid #1a7f37; }
.ks-aviso--error { background: #fdecea; color: #7a1a12; border: 1px solid #b42318; }

/* 7. reCAPTCHA mide 304 px fijos: en pantallas muy estrechas se reduce */
@media (max-width: 360px) {
    .g-recaptcha {
        transform: scale(.85);
        transform-origin: 0 0;
    }
}

/* 8. Animaciones: NO se desactivan por la preferencia del sistema operativo.
      Tanda 4.1: aquí había un bloque @media (prefers-reduced-motion: reduce)
      que anulaba todas las animaciones cuando Windows/macOS tienen apagados
      los "efectos de animación". El sitio original (animate.css 3.5.2) sí
      animaba en ese caso, así que el bloque cambiaba el comportamiento
      original y se retiró. Quien necesite quitarlas lo hace con la opción
      "Detener animaciones" del widget de accesibilidad (WCAG 2.2.2). */

/* 9. Multidispositivo (auditoría tanda 5): palabras o enlaces muy largos
      —como "https://app.kontrolschool.com/admin/home" en ayuda.html— no
      cabían en celulares de 320 px y obligaban a desplazar la página de lado.
      break-word solo parte la palabra cuando NO cabe: en pantallas grandes
      el texto se ve exactamente igual que antes. */
body {
    overflow-wrap: break-word;
}

/* 10. Multidispositivo (auditoría tanda 5): los formularios están dentro de
       una caja flex (.d-flex). Un elemento flex no se encoge por debajo del
       contenido más largo de sus hijos, y un <select> mide lo que su opción
       más larga ("¿A quién deseas enviar este correo electrónico?", nombres
       de países largos). En celulares eso ensanchaba la página. min-width:0
       deja que el formulario use el ancho disponible; en escritorio no cambia. */
#form {
    min-width: 0;
    width: 100%;
}
#form .form-select,
#form .form-control {
    min-width: 0;
    max-width: 100%;
}
/* En motores WebKit (Safari, iPhone) el texto largo de la opción elegida en
   un <select> se "sale" de la caja y ensancha la página: se recorta con "…". */
#form select {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 11. Banner CASURID en el pie de página (tanda 7 — opción A aprobada).
       ¿Por qué aquí y no en style.css? Este archivo concentra todo lo agregado
       en la auditoría; style.css sigue siendo el original de la plantilla.
       Diseño: tarjeta azul oscuro del sitio (#1E396C, el del botón "Enviar"),
       texto claro y botón celeste (#59BBEB) con texto azul oscuro.
       Contrastes: blanco sobre #1E396C 11,6:1; #EEF9FF sobre #1E396C 10,9:1;
       #091E3E sobre #59BBEB 8,4:1 (todo supera WCAG AA).
       Distribución:
         - ≥ 992 px: texto a la izquierda y botón a la derecha (flex en fila).
         - < 992 px: en columna, centrado y botón de ancho completo. El corte
           es 992 px y no 768 px porque entre 768 y 991 px el pie pone esta
           tarjeta en una columna angosta (col-md-6) y en fila el texto
           quedaba aplastado (se comprobó en el mockup de tableta). */
.ks-banner {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 24px 28px;
    border-radius: 14px;
    background: #1e396c;
    box-shadow: 0 6px 18px rgba(9, 30, 62, .18);
}
.ks-banner__texto {
    flex: 1 1 auto;
    min-width: 0;                     /* permite que el texto se ajuste dentro del flex */
}
/* Los !important ganan a las reglas de color del pie de style.css
   (footer h3 / p / strong usan tonos oscuros pensados para el fondo celeste). */
.ks-banner__titulo {
    margin: 0 0 6px !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #fff !important;
}
.ks-banner__desc {
    margin: 0 !important;
    font-size: .95rem;
    line-height: 1.5;
    color: #eef9ff !important;
}
.ks-banner__desc strong {
    color: #fff !important;
}
.ks-banner__btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;                 /* objetivo táctil mínimo */
    padding: 12px 26px;
    border-radius: 8px;
    background: #59bbeb;
    color: #091e3e !important;
    font-weight: 800;
    letter-spacing: .04em;
    text-decoration: none !important;
    white-space: nowrap;
}
.ks-banner__btn:hover {
    background: #87cefa;
}
@media (max-width: 991.98px) {
    .ks-banner {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        padding: 20px;
    }
}