/*
 * Paleta de marca portada de public/css/main.css del proyecto original
 * (bdabamejora2026). Vive en el frontend a propósito: es presentación de
 * ESTE cliente, no lógica de negocio — cuando llegue el panel de
 * personalización de contenido (Fase 6b), estos valores fijos se
 * convierten en variables CSS alimentadas por ese panel, sin tocar las
 * vistas que ya usan estas clases.
 */

:root {
    --c-royal: #660E39;
    --c-wine: #430026;
    --c-honey: #FBB744;
    --c-rustic: #813516;
    --c-moss: #7f7c58;
    --c-rose: #E764A2;
    --c-purple: #c879af;
    --c-pumpkin: #D7803C;
    --c-alabaster: #F4F1EB;
    --c-marble: #dedbd6;
    --c-sky: #D8E6EB;
    --c-glacial: #a8d8f8;
    --c-silver: #a5a5a5;
}

/*
 * Corrección — los enlaces "Cancelar" eran solo texto (`btn btn-link`,
 * gris fijo de Bootstrap), sin ningún peso visual ni relación con la
 * paleta activa, a diferencia de cualquier otro botón del sitio. Mismo
 * tratamiento de "botón secundario" en todas las pantallas de Tutor/
 * Capturista (no toca el panel de Administrador, que conserva su propio
 * estilo de AdminLTE).
 */
.btn-cancel {
    border: 2px solid var(--c-royal);
    color: var(--c-royal) !important;
    background-color: transparent;
    font-weight: 600;
    transition: background-color .15s ease, color .15s ease;
}
.btn-cancel:hover, .btn-cancel:focus {
    background-color: var(--c-royal);
    color: #fff !important;
}

.cbg-royal { background-color: var(--c-royal) !important; }
.cbg-wine { background-color: var(--c-wine) !important; }
.cbg-honey { background-color: var(--c-honey) !important; }
.cbg-rustic { background-color: var(--c-rustic) !important; }
.cbg-moss { background-color: var(--c-moss) !important; }
.cbg-rose { background-color: var(--c-rose) !important; }
.cbg-purple { background-color: var(--c-purple) !important; }
.cbg-pumpkin { background-color: var(--c-pumpkin) !important; }
.cbg-alabaster { background-color: var(--c-alabaster) !important; }
.cbg-marble { background-color: var(--c-marble) !important; }
.cbg-sky { background-color: var(--c-sky) !important; }
.cbg-glacial { background-color: var(--c-glacial) !important; }
.cbg-silver { background-color: var(--c-silver) !important; }

.ctext-royal { color: var(--c-royal) !important; }
.ctext-wine { color: var(--c-wine) !important; }
.ctext-honey { color: var(--c-honey) !important; }
.ctext-rustic { color: var(--c-rustic) !important; }
.ctext-moss { color: var(--c-moss) !important; }
.ctext-rose { color: var(--c-rose) !important; }
.ctext-purple { color: var(--c-purple) !important; }
.ctext-pumpkin { color: var(--c-pumpkin) !important; }
.ctext-alabaster { color: var(--c-alabaster) !important; }
.ctext-silver { color: var(--c-silver) !important; }

/* Botones de marca: mismo criterio que el original (cbg-* + texto claro + rounded-pill) */
.btn-brand {
    background-color: var(--c-royal);
    border-color: var(--c-royal);
    color: #fff;
    border-radius: 50rem;
    font-weight: 600;
}
.btn-brand:hover, .btn-brand:focus {
    background-color: var(--c-wine);
    border-color: var(--c-wine);
    color: #fff;
}

/* Inputs redondeados estilo "formulario público" del original */
.input-formulario,
.preregister-input,
.rounded-pill.form-control,
.rounded-pill.form-select {
    border-radius: 50rem;
    padding-left: 1.1rem;
    padding-right: 1.1rem;
}

.fondo-gris { background-color: #f4f4f4; }

/* Barra superior del panel, con el color primario de marca */
.navbar-brand-royal { background-color: var(--c-royal) !important; }

/*
 * Fase 9n — botones de acción de las tablas de Tutores/Animales: antes
 * texto plano dentro de `btn-outline-*` (Editar, Animales, Vacunas...),
 * ahora cuadrados con esquinas curvas, solo ícono (con su `title` +
 * tooltip de Bootstrap como ayuda) y color sólido. El color de los que
 * no cargan un significado propio (editar, ver, vacunas...) sale
 * directo de los 5 tokens de marca ya usados en todo el sitio
 * (`.cbg-royal`/`.cbg-wine`/`.cbg-honey`/`.cbg-rustic`/`.cbg-moss`) —
 * cambia solo al elegir otra paleta en Personalización (Fase 8h/9i), sin
 * tocar esta hoja de estilos. Los que sí cargan un significado
 * (reportar extraviado, poner en adopción, declarar fallecimiento)
 * conservan sus colores semánticos de Bootstrap (warning/info/danger) —
 * mismo tratamiento de forma, pero ese significado no debería
 * depender de qué paleta esté de moda.
 */
.btn-icon-action {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px !important;
    border: none;
    text-decoration: none;
    line-height: 1;
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn-icon-action:hover,
.btn-icon-action:focus {
    transform: translateY(-2px);
    box-shadow: 0 .35rem .6rem rgba(0, 0, 0, .18);
    filter: brightness(1.08);
}
.btn-icon-action:active { transform: translateY(0); }
.btn-icon-action.cbg-royal,
.btn-icon-action.cbg-wine,
.btn-icon-action.cbg-rustic,
.btn-icon-action.cbg-moss { color: #fff !important; }
.btn-icon-action.cbg-honey { color: var(--c-wine) !important; }
.btn-icon-action i { pointer-events: none; }