/* Base de las páginas públicas: paleta y tipografía.
   La paleta son alias de base/_variables.css (issue #192).
   Páginas fuera del layout de la app (login, registros, 403 y ficha del
   practicante): usan Bootstrap y se cargan con layouts/styles-public.php.
   Antes todo esto era public/assets/styles.css (issue #170). */

/* Paleta: la misma de la app (issue #192). Estas variables son alias de las
   de css/modules/base/_variables.css, que cada página que usa esta hoja carga
   antes. Antes tenían valores propios (los de Tailwind), y el login, el
   registro y la ficha se veían en otro tono que el resto de la app. */
:root {
    --kine-blue: var(--kine-blue-900);
    --kine-blue-dark: var(--kine-blue-950);
    --kine-blue-btn: var(--kine-blue-700);
    --kine-blue-btn-hover: var(--kine-blue-800);
    --kine-red: var(--kine-red-600);
    --kine-gray: var(--text-muted);

    --kine-bg-soft: var(--kine-blue-50);
    --kine-border: var(--border-color);

    --kine-radius: 10px;
    --kine-radius-lg: 18px;

    /* Misma tipografía que el resto de la app (se carga por <link> en cada
       página que usa esta hoja). Bootstrap la toma de esta variable. */
    --bs-body-font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
}

body,
h1, h2, h3, h4, h5, h6,
.btn, .form-control, .form-select {
    font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
}


/* COMPARTIDOS */

.btn-kine {
    background: var(--kine-blue-btn);
    border: none;
    padding: 0.7rem;
    font-weight: 600;
    border-radius: var(--kine-radius);
    color: #fff;
}
.btn-kine:hover {
    background: var(--kine-blue-btn-hover);
    color: #fff;
}

.btn-kine-outline {
    padding: 0.7rem;
    font-weight: 600;
    border-radius: var(--kine-radius);
    border: 1px solid var(--kine-blue-btn);
    color: var(--kine-blue-btn);
    background: transparent;
}
.btn-kine-outline:hover {
    background: var(--kine-blue-btn);
    color: #fff;
}