/* archivo css app-theme.css */

:root {
    --app-primary: #23406a;
    --app-primary-hover: #1b3356;
    --app-danger: #9a2f2f;
    --app-danger-hover: #7f2626;
    --app-border: #cfd7e3;
    --app-card: #ffffff;
    --app-text: #223047;
    --app-head: #32435c;
    --app-success: #198754;
    --app-success-soft: #eaf7ef;
    --app-off-border: #ced4da;
    --app-off-text: #6c757d;
}

html,
body {
    font-family: "Roboto", sans-serif;
    background-color: #eef2f6;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.25)),
        url("../imagenes/bdm_fondo.png");
    background-repeat: no-repeat, no-repeat;
    background-position:
        center center,
        center center;
    background-size: cover, cover;
    min-height: 100vh;
    color: var(--app-text);
}

a {
    text-decoration: none;
}

a.btn {
    text-decoration: none !important;
}

.card-shadow {
    border: 1px solid #e3e8ef;
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(26, 43, 72, 0.08);
    background: var(--app-card);
}

.brand-title {
    color: var(--app-primary);
    font-weight: 700;
    letter-spacing: 0.3px;
}

.form-control,
.form-select {
    border-radius: 10px;
    border: 1px solid var(--app-border);
    min-height: 44px;
    box-shadow: none !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 0.12rem rgba(35, 64, 106, 0.12) !important;
}

.input-group .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-password-toggle {
    min-width: 48px;
    border: 1px solid var(--app-border) !important;
    border-left: 0 !important;
    background-color: #ffffff !important;
    color: var(--app-primary) !important;
    box-shadow: none !important;
    outline: none !important;
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
    transition:
        background-color 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease;
}

.btn-password-toggle:hover {
    background-color: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
    color: #ffffff !important;
}

.btn-password-toggle:focus,
.btn-password-toggle:focus-visible {
    box-shadow: none !important;
    outline: none !important;
}

.table th,
.table td {
    vertical-align: middle;
}

.table thead th {
    background-color: #f6f8fb !important;
    color: var(--app-head);
    font-weight: 600;
}

.badge {
    font-weight: 500;
    padding: 7px 10px;
    border-radius: 999px;
}

.badge-flag-on {
    background-color: var(--app-success) !important;
    color: #ffffff !important;
    border: 1px solid var(--app-success) !important;
    min-width: 42px;
    display: inline-block;
    text-align: center;
}

.badge-flag-off {
    background-color: #ffffff !important;
    color: var(--app-off-text) !important;
    border: 1px solid var(--app-off-border) !important;
    min-width: 42px;
    display: inline-block;
    text-align: center;
}

.alert {
    border-radius: 12px;
}

.modal-content {
    border: 0;
    border-radius: 16px;
    box-shadow: 0 18px 45px rgba(28, 40, 66, 0.16);
}

.modal-header {
    border-bottom: 1px solid #edf1f5;
}

.modal-footer {
    border-top: 1px solid #edf1f5;
}

.pagination {
    margin-bottom: 0;
}

.page-link {
    color: var(--app-primary);
    border-radius: 8px !important;
    margin: 0 2px;
}

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

/* =========================================================
   BOTON GENERAL DEL SISTEMA
   ========================================================= */
.btn-sistema,
.btn-sistema:link,
.btn-sistema:visited {
    min-height: 40px;
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px solid var(--app-primary) !important;
    background-color: #d8e5f2 !important;
    color: var(--app-primary) !important;
    font-weight: 500;
    font-size: 0.98rem;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    box-shadow: none !important;
    outline: none !important;
    transition:
        background-color 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease,
        transform 0.04s ease;
}

.btn-sistema:hover,
.btn-sistema:hover:link,
.btn-sistema:hover:visited {
    background-color: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
    color: #ffffff !important;
}

.btn-sistema:hover *,
.btn-sistema:hover span {
    color: #ffffff !important;
}

.btn-sistema:focus,
.btn-sistema:focus-visible {
    box-shadow: none !important;
    outline: none !important;
}

.btn-sistema:active {
    transform: translateY(1px);
}

/* =========================================================
   BOTON GENERAL DE PELIGRO
   ========================================================= */
.btn-sistema-danger,
.btn-sistema-danger:link,
.btn-sistema-danger:visited {
    min-height: 40px;
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px solid var(--app-danger) !important;
    background-color: #d8e5f2 !important;
    color: var(--app-danger) !important;
    font-weight: 500;
    font-size: 0.98rem;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    box-shadow: none !important;
    outline: none !important;
    transition:
        background-color 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease,
        transform 0.04s ease;
}

.btn-sistema-danger:hover,
.btn-sistema-danger:hover:link,
.btn-sistema-danger:hover:visited {
    background-color: var(--app-danger) !important;
    border-color: var(--app-danger) !important;
    color: #ffffff !important;
}

.btn-sistema-danger:hover *,
.btn-sistema-danger:hover span {
    color: #ffffff !important;
}

.btn-sistema-danger:focus,
.btn-sistema-danger:focus-visible {
    box-shadow: none !important;
    outline: none !important;
}

.btn-sistema-danger:active {
    transform: translateY(1px);
}

/* =========================================================
   BOTON DEL GRID
   ========================================================= */
.btn-grid,
.btn-grid:link,
.btn-grid:visited {
    min-height: 30px;
    padding: 4px 12px;
    border-radius: 8px;
    border: 1px solid var(--app-primary) !important;
    background-color: #ffffff !important;
    color: var(--app-primary) !important;
    font-weight: 500;
    font-size: 0.83rem;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    box-shadow: none !important;
    outline: none !important;
    transition:
        background-color 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease,
        transform 0.04s ease;
}

.btn-grid:hover,
.btn-grid:hover:link,
.btn-grid:hover:visited {
    background-color: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
    color: #ffffff !important;
}

.btn-grid:hover *,
.btn-grid:hover span {
    color: #ffffff !important;
}

.btn-grid:focus,
.btn-grid:focus-visible {
    box-shadow: none !important;
    outline: none !important;
}

.btn-grid:active {
    transform: translateY(1px);
}

/* =========================================================
   BOTON DE PELIGRO DEL GRID
   ========================================================= */
.btn-grid-danger,
.btn-grid-danger:link,
.btn-grid-danger:visited {
    min-height: 30px;
    padding: 4px 12px;
    border-radius: 8px;
    border: 1px solid var(--app-danger) !important;
    background-color: #ffffff !important;
    color: var(--app-danger) !important;
    font-weight: 500;
    font-size: 0.83rem;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    box-shadow: none !important;
    outline: none !important;
    transition:
        background-color 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease,
        transform 0.04s ease;
}

.btn-grid-danger:hover,
.btn-grid-danger:hover:link,
.btn-grid-danger:hover:visited {
    background-color: var(--app-danger) !important;
    border-color: var(--app-danger) !important;
    color: #ffffff !important;
}

.btn-grid-danger:hover *,
.btn-grid-danger:hover span {
    color: #ffffff !important;
}

.btn-grid-danger:focus,
.btn-grid-danger:focus-visible {
    box-shadow: none !important;
    outline: none !important;
}

.btn-grid-danger:active {
    transform: translateY(1px);
}

.menu-btn {
    min-width: 280px;
    min-height: 48px;
}

/* Evitar estilos amarillos molestos si el navegador rellena algo */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--app-text);
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset;
    transition: background-color 5000s ease-in-out 0s;
}

/* =========================================================
   ESTADO DE CUENTA
   ========================================================= */
.estado-cuenta-message {
    min-height: 24px;
    margin-top: 8px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.2px;
}

.estado-cuenta-message-error {
    color: #b42318;
}

.estado-cuenta-message-ok {
    color: var(--app-success);
}

.estado-btn {
    min-width: 240px;
    min-height: 52px;
    font-size: 1rem;
    padding: 10px 18px;
}

.btn:disabled,
.btn.disabled {
    opacity: 0.62;
    cursor: not-allowed;
    pointer-events: none;
}

/* =========================================================
   INPUTS DEL SISTEMA
   ========================================================= */
.input-sistema {
    border-radius: 10px !important;
    border: 1px solid var(--app-border) !important;
    min-height: 44px;
    background-color: #ffffff !important;
    color: #000000 !important;
    box-shadow: none !important;
}

.input-sistema:focus {
    border-color: var(--app-primary) !important;
    box-shadow: 0 0 0 0.12rem rgba(35, 64, 106, 0.12) !important;
    background-color: #ffffff !important;
    color: #000000 !important;
}

.input-sistema-disabled,
.input-sistema:disabled,
.input-sistema[disabled] {
    background-color: #e9ecef !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
    border-color: #d6dbe3 !important;
}

.input-sistema-disabled::placeholder,
.input-sistema:disabled::placeholder,
.input-sistema[disabled]::placeholder {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    opacity: 1 !important;
}

/* =========================================================
   ESTADO DE CUENTA
   ========================================================= */
.estado-cuenta-message {
    min-height: 24px;
    margin-top: 8px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.2px;
}

.estado-cuenta-message-error {
    color: #b42318;
}

.estado-cuenta-message-ok {
    color: var(--app-success);
}

.estado-btn {
    min-width: 240px;
    min-height: 52px;
    font-size: 1rem;
    padding: 10px 18px;
}

.btn:disabled,
.btn.disabled {
    opacity: 0.62;
    cursor: not-allowed;
    pointer-events: none;
}

/* =========================================================
   GRID DE USUARIOS
   ========================================================= */
.users-grid-table thead th {
    background-color: #dff4ff !important;
    color: #23406a !important;
    font-weight: 600;
}

.users-grid-table tbody tr:nth-child(odd) td {
    background-color: #ffffff;
}

.users-grid-table tbody tr:nth-child(even) td {
    background-color: #f3f5f7;
}

.users-grid-table tbody tr:hover td {
    background-color: #edf8ff !important;
}

.users-grid-table tbody td {
    transition: background-color 0.15s ease;
}