/* Assets/css/theme-pastel.css  */
/* === Paleta pastel global (sobrescribe variables de Bootstrap) === */
:root {
    /* Base */
    --bs-body-color: #243238;
    --bs-body-bg: #ffffff;

    /* Contextos principales */
    --bs-primary: #429ae6;
    --bs-secondary: #c9ced6;
    --bs-success: #6aebb7;
    --bs-info: #9ed5f5;
    --bs-warning: #ffb35c;
    --bs-danger: #ef4949;
    --bs-light: #f6f7f9;
    --bs-dark: #2e3a46;

    /* RGB (Bootstrap los usa para transparencias, focus, etc.) */
    --bs-primary-rgb: 66,
        154,
        230;
    --bs-secondary-rgb: 201, 206, 214;
    --bs-success-rgb: 106,
        235,
        183;
    --bs-info-rgb: 158, 213, 245;
    --bs-warning-rgb: 255,
        179,
        92;
    --bs-danger-rgb: 239,
        73,
        73;
    --bs-light-rgb: 246, 247, 249;
    --bs-dark-rgb: 46, 58, 70;

    /* Links */
    --bs-link-color: #5a84ff;
    --bs-link-hover-color: #3a68ff;

    /* Focus ring universal */
    --bs-focus-ring-opacity: .35;
    --bs-focus-ring-color: rgba(var(--bs-primary-rgb), var(--bs-focus-ring-opacity));
}

/* ===== Botones sólidos ===== */
.btn-primary {
    color: #fff;
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.btn-primary:hover {
    background-color: #648fff;
    border-color: #648fff;
}

.btn-primary:focus {
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .35);
}

.btn-primary:active,
.btn-primary.active {
    background-color: #4e79ff;
    border-color: #4e79ff;
}

.btn-primary.disabled,
.btn-primary:disabled {
    background-color: rgba(var(--bs-primary-rgb), .55);
    border-color: rgba(var(--bs-primary-rgb), .55);
}

.btn-secondary {
    color: #23303a;
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
}

.btn-secondary:hover {
    background-color: #b9bfc7;
    border-color: #b9bfc7;
}

.btn-secondary:focus {
    box-shadow: 0 0 0 .25rem rgba(var(--bs-secondary-rgb), .45);
}

.btn-success {
    color: #123d2e;
    background-color: var(--bs-success);
    border-color: var(--bs-success);
}

.btn-success:hover {
    background-color: #8cd0b7;
    border-color: #8cd0b7;
}

.btn-success:focus {
    box-shadow: 0 0 0 .25rem rgba(var(--bs-success-rgb), .35);
}

.btn-info {
    color: #113046;
    background-color: var(--bs-info);
    border-color: var(--bs-info);
}

.btn-info:hover {
    background-color: #8bcdf1;
    border-color: #8bcdf1;
}

.btn-info:focus {
    box-shadow: 0 0 0 .25rem rgba(var(--bs-info-rgb), .35);
}

.btn-warning {
    color: #5c3d00;
    background-color: var(--bs-warning);
    border-color: var(--bs-warning);
}

.btn-warning:hover {
    background-color: #ffd083;
    border-color: #ffd083;
}

.btn-warning:focus {
    box-shadow: 0 0 0 .25rem rgba(var(--bs-warning-rgb), .4);
}

.btn-danger {
    color: #5b0000;
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
}

.btn-danger:hover {
    background-color: #f19696;
    border-color: #f19696;
}

.btn-danger:focus {
    box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .35);
}

.btn-light {
    color: #23303a;
    background-color: var(--bs-light);
    border-color: var(--bs-light);
}

.btn-dark {
    color: #fff;
    background-color: var(--bs-dark);
    border-color: var(--bs-dark);
}

.btn-dark:hover {
    background-color: #26323c;
    border-color: #26323c;
}

.btn-dark:focus {
    box-shadow: 0 0 0 .25rem rgba(var(--bs-dark-rgb), .35);
}

/* ===== Botones outline ===== */
.btn-outline-primary {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.btn-outline-primary:hover {
    color: #fff;
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.btn-outline-secondary {
    color: #515a63;
    border-color: var(--bs-secondary);
}

.btn-outline-secondary:hover {
    color: #23303a;
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
}

.btn-outline-success {
    color: #2b6b54;
    border-color: var(--bs-success);
}

.btn-outline-success:hover {
    color: #123d2e;
    background-color: var(--bs-success);
    border-color: var(--bs-success);
}

.btn-outline-info {
    color: #2d6b8f;
    border-color: var(--bs-info);
}

.btn-outline-info:hover {
    color: #113046;
    background-color: var(--bs-info);
    border-color: var(--bs-info);
}

.btn-outline-warning {
    color: #8a6000;
    border-color: var(--bs-warning);
}

.btn-outline-warning:hover {
    color: #5c3d00;
    background-color: var(--bs-warning);
    border-color: var(--bs-warning);
}

.btn-outline-danger {
    color: #8b1e1e;
    border-color: var(--bs-danger);
}

.btn-outline-danger:hover {
    color: #5b0000;
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
}

.btn-outline-dark {
    color: var(--bs-dark);
    border-color: var(--bs-dark);
}

.btn-outline-dark:hover {
    color: #fff;
    background-color: var(--bs-dark);
    border-color: var(--bs-dark);
}

/* ===== Alerts pastel ===== */
.alert-primary {
    color: #243066;
    background-color: rgba(var(--bs-primary-rgb), .15);
    border-color: rgba(var(--bs-primary-rgb), .35);
}

.alert-secondary {
    color: #2b333b;
    background-color: rgba(var(--bs-secondary-rgb), .15);
    border-color: rgba(var(--bs-secondary-rgb), .35);
}

.alert-success {
    color: #1e5a45;
    background-color: rgba(var(--bs-success-rgb), .18);
    border-color: rgba(var(--bs-success-rgb), .38);
}

.alert-info {
    color: #1d4e6b;
    background-color: rgba(var(--bs-info-rgb), .15);
    border-color: rgba(var(--bs-info-rgb), .35);
}

.alert-warning {
    color: #7a5700;
    background-color: rgba(var(--bs-warning-rgb), .22);
    border-color: rgba(var(--bs-warning-rgb), .45);
}

.alert-danger {
    color: #7a1c1c;
    background-color: rgba(var(--bs-danger-rgb), .18);
    border-color: rgba(var(--bs-danger-rgb), .38);
}

.alert-light {
    color: #3a4956;
    background-color: rgba(var(--bs-light-rgb), .8);
    border-color: rgba(var(--bs-light-rgb), 1);
}

.alert-dark {
    color: #fff;
    background-color: rgba(var(--bs-dark-rgb), .9);
    border-color: rgba(var(--bs-dark-rgb), 1);
}

/* ===== Badges (incluye text-bg-* de BS5.3) ===== */
.badge {
    font-weight: 600;
}

.badge.bg-primary,
.text-bg-primary {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

.badge.bg-secondary,
.text-bg-secondary {
    background-color: var(--bs-secondary) !important;
    color: #23303a !important;
}

.badge.bg-success,
.text-bg-success {
    background-color: var(--bs-success) !important;
    color: #123d2e !important;
}

.badge.bg-info,
.text-bg-info {
    background-color: var(--bs-info) !important;
    color: #113046 !important;
}

.badge.bg-warning,
.text-bg-warning {
    background-color: var(--bs-warning) !important;
    color: #5c3d00 !important;
}

.badge.bg-danger,
.text-bg-danger {
    background-color: var(--bs-danger) !important;
    color: #5b0000 !important;
}

.badge.bg-light,
.text-bg-light {
    background-color: var(--bs-light) !important;
    color: #23303a !important;
}

.badge.bg-dark,
.text-bg-dark {
    background-color: var(--bs-dark) !important;
    color: #fff !important;
}

/* ===== Utilidades de color ===== */
.text-primary {
    color: var(--bs-primary) !important;
}

.text-secondary {
    color: #5d6a77 !important;
}

.text-success {
    color: #2b6b54 !important;
}

.text-info {
    color: #2d6b8f !important;
}

.text-warning {
    color: #8a6000 !important;
}

.text-danger {
    color: #8b1e1e !important;
}

.bg-primary {
    background-color: var(--bs-primary) !important;
}

.bg-secondary {
    background-color: var(--bs-secondary) !important;
}

.bg-success {
    background-color: var(--bs-success) !important;
}

.bg-info {
    background-color: var(--bs-info) !important;
}

.bg-warning {
    background-color: var(--bs-warning) !important;
}

.bg-danger {
    background-color: var(--bs-danger) !important;
}

.bg-light {
    background-color: var(--bs-light) !important;
}

.bg-dark {
    background-color: var(--bs-dark) !important;
}

/* Bordes de utilidades */
.border-primary {
    border-color: var(--bs-primary) !important;
}

.border-secondary {
    border-color: var(--bs-secondary) !important;
}

.border-success {
    border-color: var(--bs-success) !important;
}

.border-info {
    border-color: var(--bs-info) !important;
}

.border-warning {
    border-color: var(--bs-warning) !important;
}

.border-danger {
    border-color: var(--bs-danger) !important;
}

.border-light {
    border-color: var(--bs-light) !important;
}

.border-dark {
    border-color: var(--bs-dark) !important;
}

/* Links */
a {
    color: var(--bs-link-color);
}

a:hover {
    color: var(--bs-link-hover-color);
}

/* Paginación activa + focus */
.page-link:focus {
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .3);
}

.page-item.active .page-link {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

/* Nav pills / tabs activos */
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    background-color: var(--bs-primary);
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
    border-color: rgba(var(--bs-primary-rgb), .4) rgba(var(--bs-primary-rgb), .4) transparent;
}

/* List group activo */
.list-group-item.active {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* Switches / checks */
.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25);
}

.form-range::-webkit-slider-thumb {
    background-color: var(--bs-primary);
}

.form-range::-moz-range-thumb {
    background-color: var(--bs-primary);
}

/* Progress */
.progress-bar {
    background-color: var(--bs-primary);
}

/* Toasts */
.toast-header {
    background-color: rgba(var(--bs-primary-rgb), .07);
}

/* ====== Tiles ====== */
.tile {
    position: relative;
    display: block;
    color: #fff !important;
    /* fuerza color texto fijo */
    text-decoration: none !important;
    border-radius: 1rem;
    padding: 1.25rem 1rem;
    min-height: 110px;
    box-shadow: 0 6px 14px rgba(20, 40, 80, .08);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.tile:hover,
.tile:focus {
    color: #fff !important;
    /* NO adoptar color de link */
    text-decoration: none !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(20, 40, 80, .12);
}

.tile .tile-icon {
    font-size: 26px;
    margin-bottom: .35rem;
    display: inline-block;
    opacity: .95;
}

.tile .tile-text {
    display: block;
    font-weight: 700;
    line-height: 1.2;
}

/* Colores del tile usando paleta pastel */
.tile-primary {
    background: var(--bs-primary);
}

.tile-danger {
    background: var(--bs-danger);
}

/* ====== Estado: en construcción / deshabilitado ====== */
.tile--disabled {
    pointer-events: none;
    /* no clic */
    filter: grayscale(18%);
    /* sutil */
    opacity: .70;
    cursor: not-allowed;
}

.tile--disabled .tile-text,
.tile--disabled .tile-icon {
    color: #fff !important;
}

/* Badge de 'En construcción' (siempre visible) */
.tile .tile-badge {
    position: absolute;
    left: .9rem;
    bottom: .6rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 700;
    font-size: .86rem;
    line-height: 1;
    color: #ffffff;
    background: rgba(0, 0, 0, .22);
    padding: .35rem .55rem;
    border-radius: .6rem;
    backdrop-filter: saturate(140%) blur(2px);
    pointer-events: none;
}

.tile .tile-badge i {
    opacity: .95;
}

/* (opcional) Variante de badge si prefieres etiqueta superior derecha
.tile .tile-ribbon {
  position:absolute; top:.55rem; right:.65rem;
  background:rgba(0,0,0,.22); color:#fff;
  padding:.25rem .5rem; border-radius:.5rem; font-weight:700; font-size:.8rem;
} */