* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
}

body {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    background: #f3f4f6;
    color: #111827;
}

button,
input {
    font-family: inherit;
}

button {
    cursor: pointer;
}

.pantalla-acceso {
    min-height: 100vh;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;

    background: #e8eef5;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 25px;
}

.acceso-box {
    width: 100%;

    background: white;

    border-radius: 24px;

    padding: 32px 24px;

    text-align: center;

    box-shadow:
    0 25px 70px
    rgba(0, 0, 0, 0.28);
}

.acceso-logo {
    font-size: 30px;
    font-weight: bold;

    letter-spacing: 1px;

    color: #111827;
}

.acceso-subtitulo {
    margin-top: 6px;

    color: #6b7280;

    font-size: 14px;
}

.acceso-titulo {
    margin-top: 35px;
    margin-bottom: 18px;

    font-size: 18px;
    font-weight: bold;

    color: #374151;
}

.usuario-button {
    width: 100%;

    border: none;

    padding: 17px;
    margin-top: 12px;

    border-radius: 14px;

    font-size: 17px;
    font-weight: bold;

    color: white;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 5px;

    transition:
        transform 0.15s ease,
        opacity 0.15s ease;
}

.usuario-button span {
    font-size: 12px;
    font-weight: normal;

    opacity: 0.85;
}

.usuario-button:active {
    transform: scale(0.98);
}

.usuario-button:hover {
    opacity: 0.92;
}

.usuario-button.carmen {
    background: #2563eb;
}

.usuario-button.isaias {
    background: #111827;
}

.app {
    width: 100%;
    max-width: 480px;

    min-height: 100vh;

    margin: 0 auto;

    background: #f9fafb;
}

.header {
    background: #111827;

    color: white;

    padding: 22px 20px;
}

.header-top {
    display: flex;

    align-items: center;
    justify-content: space-between;
}

.logo {
    font-size: 22px;
    font-weight: 800;

    letter-spacing: 0.5px;
}

.subtitle {
    margin-top: 4px;

    font-size: 13px;

    color: #d1d5db;
}

.user {
    width: 42px;
    height: 42px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #374151;

    font-size: 21px;
}

.content {
    padding: 20px;
}

.section-title {
    margin-bottom: 12px;

    font-size: 16px;
    font-weight: 700;

    color: #111827;
}

.summary {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 12px;

    margin-bottom: 18px;
}

.card {
    padding: 16px;

    border-radius: 16px;

    background: white;

    border: 1px solid #e5e7eb;

    box-shadow:
        0 4px 12px
        rgba(0, 0, 0, 0.05);
}

.card-label {
    font-size: 12px;

    color: #6b7280;

    margin-bottom: 7px;
}

.card-value {
    font-size: 21px;

    font-weight: 800;

    color: #111827;
}

.card.previous {
    border-left: 4px solid #6b7280;
}

.card.delivery {
    border-left: 4px solid #2563eb;
}

.card.spent {
    border-left: 4px solid #dc2626;
}

.card.available {
    border-left: 4px solid #16a34a;
}

.register-button {
    width: 100%;

    border: none;

    background: #2563eb;

    color: white;

    padding: 15px;

    border-radius: 14px;

    font-size: 15px;
    font-weight: 800;

    margin-bottom: 25px;
}

.register-button:active {
    transform: scale(0.99);
}

.expense-list,
.delivery-list {
    display: flex;

    flex-direction: column;

    gap: 10px;
}

.expense,
.delivery-item {
    background: white;

    border: 1px solid #e5e7eb;

    border-radius: 14px;

    padding: 14px;

    display: flex;

    align-items: center;
    justify-content: space-between;
}

.expense-left,
.delivery-left {
    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 0;
}

.expense-icon,
.delivery-icon {
    width: 40px;
    height: 40px;

    flex-shrink: 0;

    border-radius: 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #f3f4f6;

    font-size: 20px;
}

.expense-name,
.delivery-name {
    font-size: 14px;

    font-weight: 700;

    color: #111827;

    word-break: break-word;
}

.expense-date,
.delivery-date {
    margin-top: 3px;

    font-size: 12px;

    color: #9ca3af;
}

.expense-amount {
    font-size: 14px;

    font-weight: 800;

    color: #dc2626;

    margin-left: 10px;

    white-space: nowrap;
}

.delivery-amount {
    font-size: 14px;

    font-weight: 800;

    color: #16a34a;

    margin-left: 10px;

    white-space: nowrap;
}

.footer {
    padding: 20px;

    text-align: center;

    font-size: 12px;

    color: #9ca3af;
}

.pantalla {
    display: none;

    width: 100%;
    max-width: 480px;

    min-height: 100vh;

    margin: 0 auto;

    background: #f9fafb;
}

.pantalla-header {
    display: flex;

    align-items: center;

    gap: 14px;

    background: #111827;

    color: white;

    padding: 18px 20px;
}

.btn-volver {
    width: 40px;
    height: 40px;

    border: none;

    border-radius: 12px;

    background: #374151;

    color: white;

    font-size: 22px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.pantalla-titulo {
    font-size: 19px;

    font-weight: 800;
}

.pantalla-subtitulo {
    margin-top: 3px;

    font-size: 12px;

    color: #d1d5db;
}

.formulario {
    padding: 20px;
}

.campo {
    margin-bottom: 18px;
}

.campo label {
    display: block;

    margin-bottom: 7px;

    font-size: 13px;

    font-weight: 700;

    color: #374151;
}

.opcional {
    color: #9ca3af;

    font-weight: 400;
}

.campo input {
    width: 100%;

    border: 1px solid #d1d5db;

    border-radius: 12px;

    padding: 13px 14px;

    background: white;

    color: #111827;

    font-size: 15px;

    outline: none;
}

.campo input:focus {
    border-color: #2563eb;

    box-shadow:
        0 0 0 3px
        rgba(37, 99, 235, 0.12);
}

.input-monto {
    display: flex;

    align-items: center;

    background: white;

    border: 1px solid #d1d5db;

    border-radius: 12px;

    overflow: hidden;
}

.input-monto span {
    padding-left: 14px;

    font-size: 16px;

    font-weight: 700;

    color: #6b7280;
}

.input-monto input {
    border: none;

    border-radius: 0;

    box-shadow: none;

    padding-left: 8px;
}

.input-monto input:focus {
    box-shadow: none;
}

.foto-box {
    position: relative;

    min-height: 120px;

    border: 2px dashed #d1d5db;

    border-radius: 14px;

    background: white;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    overflow: hidden;
}

.foto-icon {
    font-size: 30px;

    margin-bottom: 7px;
}

.foto-texto {
    font-size: 13px;

    color: #6b7280;
}

.foto-box input[type="file"] {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;

    cursor: pointer;
}

.guardar-button {
    width: 100%;

    border: none;

    border-radius: 14px;

    background: #16a34a;

    color: white;

    padding: 15px;

    font-size: 15px;

    font-weight: 800;

    margin-top: 5px;
}

.guardar-button:active {
    transform: scale(0.99);
}

.guardar-entrega {
    background: #2563eb;
}

.cancelar-button {
    width: 100%;

    border: none;

    background: #e5e7eb;

    color: #374151;

    padding: 14px;

    border-radius: 14px;

    font-size: 14px;

    font-weight: 700;

    margin-top: 10px;
}

.cancelar-button:active {
    transform: scale(0.99);
}

@media (min-width: 600px) {

    body {
        padding: 30px 0;
    }

    .pantalla-acceso,
    .app,
    .pantalla {
        border-radius: 24px;

        overflow: hidden;

        box-shadow:
            0 10px 40px
            rgba(0, 0, 0, 0.10);
    }

    .pantalla-acceso {
        min-height: calc(100vh - 60px);
    }

}
/* =====================================================
   AJUSTES RESPONSIVE Y FORMULARIOS
===================================================== */

@media (max-width: 380px) {

    .content,
    .formulario {
        padding-left: 15px;
        padding-right: 15px;
    }

    .card {
        padding: 13px;
    }

    .card-value {
        font-size: 18px;
    }

    .register-button,
    .guardar-button,
    .cancelar-button {
        padding: 13px;
    }

    .expense,
    .delivery-item {
        padding: 12px;
    }

    .expense-name,
    .delivery-name {
        font-size: 13px;
    }

    .expense-amount,
    .delivery-amount {
        font-size: 13px;
    }

}


/* =====================================================
   ESTADOS DE LOS BOTONES
===================================================== */

.usuario-button:focus,
.register-button:focus,
.guardar-button:focus,
.cancelar-button:focus,
.btn-volver:focus {
    outline: none;
}

.usuario-button:focus-visible,
.register-button:focus-visible,
.guardar-button:focus-visible,
.cancelar-button:focus-visible,
.btn-volver:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.35);
    outline-offset: 2px;
}


/* =====================================================
   ESTADO VACÍO DE LISTAS
===================================================== */

.lista-vacia {
    width: 100%;

    padding: 25px 15px;

    text-align: center;

    background: white;

    border: 1px dashed #d1d5db;

    border-radius: 14px;

    color: #9ca3af;

    font-size: 13px;
}


/* =====================================================
   SCROLL
===================================================== */

.expense-list,
.delivery-list {
    max-height: 420px;

    overflow-y: auto;

    scrollbar-width: thin;

    scrollbar-color: #d1d5db transparent;
}

.expense-list::-webkit-scrollbar,
.delivery-list::-webkit-scrollbar {
    width: 6px;
}

.expense-list::-webkit-scrollbar-track,
.delivery-list::-webkit-scrollbar-track {
    background: transparent;
}

.expense-list::-webkit-scrollbar-thumb,
.delivery-list::-webkit-scrollbar-thumb {
    background: #d1d5db;

    border-radius: 10px;
}


/* =====================================================
   ANIMACIONES
===================================================== */

.card,
.expense,
.delivery-item,
.register-button,
.guardar-button,
.cancelar-button,
.usuario-button {
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        opacity 0.15s ease;
}

.card:hover,
.expense:hover,
.delivery-item:hover {
    box-shadow:
        0 6px 18px
        rgba(0, 0, 0, 0.07);
}

.register-button:hover,
.guardar-button:hover,
.cancelar-button:hover {
    opacity: 0.94;
}


/* =====================================================
   PANTALLA CARMEN
===================================================== */

#pantallaCarmen .summary {
    grid-template-columns: 1fr;
}

#pantallaCarmen .section-title {
    margin-top: 5px;
}

#pantallaCarmen .register-button {
    margin-top: 18px;
}

/* =====================================================
   CARMEN — ENCABEZADO AZUL
===================================================== */

#pantallaCarmen .pantalla-header {
    background: #2563eb;
}

#pantallaCarmen .btn-volver {
    background: #1d4ed8;
}

#pantallaCarmen .btn-volver:hover {
    background: #1e40af;
}
/* =====================================================
   SALIDAS DE CAJA — ENCABEZADO VERDE
===================================================== */

#pantallaSalidasCaja .pantalla-header {
    background: #16a34a;
}

#pantallaSalidasCaja .btn-volver {
    background: #15803d;
}

#pantallaSalidasCaja .btn-volver:hover {
    background: #166534;
}
/* =====================================================
   SALIDAS DE CAJA — SELECTORES
===================================================== */

#pantallaLoginSalidasCaja #usuarioSalidasCaja,
#pantallaSalidasCaja #responsableSalidaCaja {

    width: 100%;

    min-height: 46px;

    padding: 10px 42px 10px 14px;

    border: 1px solid #d1d5db;

    border-radius: 12px;

    background-color: #ffffff;

    color: #111827;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    outline: none;

    box-sizing: border-box;

    appearance: none;

    -webkit-appearance: none;

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            #16a34a 50%
        ),
        linear-gradient(
            135deg,
            #16a34a 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 18px) 20px,
        calc(100% - 12px) 20px;

    background-size:
        6px 6px,
        6px 6px;

    background-repeat: no-repeat;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}


/* =====================================================
   SELECTOR AL ENFOCAR
===================================================== */

#pantallaLoginSalidasCaja #usuarioSalidasCaja:focus,
#pantallaSalidasCaja #responsableSalidaCaja:focus {

    border-color: #16a34a;

    box-shadow:
        0 0 0 3px
        rgba(
            22,
            163,
            74,
            0.15
        );
}


/* =====================================================
   SELECTOR AL PASAR EL MOUSE
===================================================== */

#pantallaLoginSalidasCaja #usuarioSalidasCaja:hover,
#pantallaSalidasCaja #responsableSalidaCaja:hover {

    border-color: #86efac;
}
/* =====================================================
   PANTALLA NUEVA ENTREGA
===================================================== */

#pantallaNuevaEntrega .formulario {
    padding-top: 24px;
}


/* =====================================================
   PANTALLA NUEVO GASTO
===================================================== */

#pantallaNuevoGasto .formulario {
    padding-top: 24px;
}


/* =====================================================
   CAMPOS DE FECHA
===================================================== */

input[type="date"] {
    min-height: 46px;

    appearance: none;
    -webkit-appearance: none;
}


/* =====================================================
   INPUT NUMBER
===================================================== */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    margin: 0;
}

input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}


/* =====================================================
   MEJORAS PARA CELULAR
===================================================== */

@media (max-width: 600px) {

    .pantalla-acceso {
        max-width: none;

        border-radius: 0;

        padding: 20px;
    }

    .app,
    .pantalla {
        max-width: none;

        border-radius: 0;
    }

    .header {
        padding-top: 18px;
        padding-bottom: 18px;
    }

    .pantalla-header {
        padding-top: 16px;
        padding-bottom: 16px;
    }

}


/* =====================================================
   EVITAR SELECCIÓN ACCIDENTAL
===================================================== */

.btn-volver,
.usuario-button,
.register-button,
.guardar-button,
.cancelar-button {
    -webkit-tap-highlight-color: transparent;

    user-select: none;
}


/* =====================================================
   ACCESIBILIDAD
===================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

}
/* =====================================================
   MEJORAS VISUALES FINALES
===================================================== */

.header,
.pantalla-header {
    position: relative;
}

.content {
    width: 100%;
}

.summary .card {
    min-width: 0;
}

.card-value {
    overflow-wrap: anywhere;
}


/* =====================================================
   BOTÓN PRINCIPAL
===================================================== */

.register-button {
    min-height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
}

.guardar-button,
.cancelar-button {
    min-height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
}


/* =====================================================
   LISTAS
===================================================== */

.expense,
.delivery-item {
    min-height: 68px;
}

.expense-left,
.delivery-left {
    flex: 1;

    overflow: hidden;
}

.expense-left > div:last-child,
.delivery-left > div:last-child {
    min-width: 0;
}


/* =====================================================
   FORMULARIOS
===================================================== */

.formulario {
    width: 100%;
}

.campo {
    width: 100%;
}

.campo input {
    min-height: 46px;
}


/* =====================================================
   COMPROBANTE
===================================================== */

.foto-box {
    min-height: 135px;

    transition:
        border-color 0.15s ease,
        background 0.15s ease;
}

.foto-box:hover {
    border-color: #2563eb;

    background: #f8fafc;
}


/* =====================================================
   CARMEN — REPORTE
===================================================== */

#btnReporte {
    margin-top: 18px;
}

#listaGastosCarmen {
    margin-top: 10px;
}


/* =====================================================
   COLORES DE ESTADO
===================================================== */

.estado-pendiente {
    color: #d97706;

    font-weight: 700;
}

.estado-revisado {
    color: #16a34a;

    font-weight: 700;
}

.estado-rechazado {
    color: #dc2626;

    font-weight: 700;
}


/* =====================================================
   TARJETAS DE CARMEN
===================================================== */

#pantallaCarmen .card {
    width: 100%;
}

#pantallaCarmen .card-value {
    font-size: 23px;
}


/* =====================================================
   ESPACIADO
===================================================== */

#pantallaAcceso {
    min-height: 100vh;
}

#pantallaInicio {
    min-height: 100vh;
}

#pantallaNuevoGasto,
#pantallaNuevaEntrega,
#pantallaCarmen {
    min-height: 100vh;
}


/* =====================================================
   PANTALLA DE ACCESO — CELULAR
===================================================== */

@media (max-width: 600px) {

    .acceso-box {
        padding: 30px 20px;
    }

    .acceso-logo {
        font-size: 28px;
    }

    .acceso-titulo {
        margin-top: 30px;
    }

    .usuario-button {
        padding: 16px;
    }

}


/* =====================================================
   PANTALLA DE ACCESO — ESCRITORIO
===================================================== */

@media (min-width: 601px) {

    .pantalla-acceso {
        min-height: calc(100vh - 60px);
    }

}


/* =====================================================
   IMPRESIÓN
===================================================== */

@media print {

    body {
        background: white;
    }

    .pantalla-acceso,
    .header,
    .pantalla-header,
    .register-button,
    .guardar-button,
    .cancelar-button,
    .footer {
        display: none !important;
    }

    .app,
    .pantalla {
        display: block !important;

        max-width: none;

        box-shadow: none;

        border-radius: 0;
    }

}

/* =====================================================
   ACCESO ADMINISTRADOR — COLOR NARANJA
===================================================== */

.usuario-button.administrador,
#btnAdministrador {
    background: #ea580c;
    color: white;
}

.usuario-button.administrador:hover,
#btnAdministrador:hover {
    background: #c2410c;
    opacity: 1;
}

.usuario-button.administrador:active,
#btnAdministrador:active {
    background: #9a3412;
    transform: scale(0.98);
}


/* =====================================================
   LOGIN ADMINISTRADOR
===================================================== */

#pantallaLoginAdministrador .pantalla-header {
    background: #ea580c;
}

#pantallaLoginAdministrador .btn-volver {
    background: #c2410c;
}

#pantallaLoginAdministrador .btn-volver:hover {
    background: #9a3412;
}

#pantallaLoginAdministrador .guardar-button,
#pantallaLoginAdministrador .register-button {
    background: #ea580c;
}

#pantallaLoginAdministrador .guardar-button:hover,
#pantallaLoginAdministrador .register-button:hover {
    background: #c2410c;
}


/* =====================================================
   ENFOQUE ADMINISTRADOR
===================================================== */

#pantallaLoginAdministrador input:focus {
    border-color: #ea580c;

    box-shadow:
        0 0 0 3px
        rgba(234, 88, 12, 0.15);
}

/* =====================================================
   ADMINISTRADOR — USUARIOS Y ACCESOS
===================================================== */

.usuarios-admin-card {
    padding: 0;
    overflow: hidden;
}


.usuario-admin-item {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    padding: 15px 16px;

    border-bottom: 1px solid #e5e7eb;

    background: white;
}


.usuario-admin-item:last-child {
    border-bottom: none;
}


.usuario-admin-info {
    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 0;
}


.usuario-admin-icon {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    border-radius: 12px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #f3f4f6;

    font-size: 21px;
}


.usuario-admin-nombre {
    font-size: 14px;

    font-weight: 800;

    color: #111827;
}


.usuario-admin-detalle {
    margin-top: 3px;

    font-size: 12px;

    color: #9ca3af;
}


.usuario-admin-activo {
    padding: 6px 9px;

    border-radius: 8px;

    background: #dcfce7;

    color: #15803d;

    font-size: 10px;

    font-weight: 800;

    white-space: nowrap;
}


/* =====================================================
   BOTÓN CAMBIAR
===================================================== */

.admin-usuario-button {
    border: none;

    border-radius: 9px;

    background: #ea580c;

    color: white;

    padding: 8px 11px;

    font-size: 11px;

    font-weight: 800;

    cursor: pointer;

    white-space: nowrap;

    transition:
        background 0.15s ease,
        transform 0.15s ease,
        opacity 0.15s ease;
}


.admin-usuario-button:hover {
    background: #c2410c;

    opacity: 0.95;
}


.admin-usuario-button:active {
    background: #9a3412;

    transform: scale(0.97);
}


.admin-usuario-button:focus {
    outline: none;
}


.admin-usuario-button:focus-visible {
    outline:
        3px solid
        rgba(
            234,
            88,
            12,
            0.25
        );

    outline-offset: 2px;
}


/* =====================================================
   ADMINISTRADOR — ENCABEZADO
===================================================== */

#pantallaAdministrador .pantalla-header {
    background: #ea580c;
}


#pantallaAdministrador .btn-volver {
    background: #c2410c;
}


#pantallaAdministrador .btn-volver:hover {
    background: #9a3412;
}
/* =====================================================
   CARMEN — ENCABEZADO AZUL
===================================================== */

#pantallaLoginCarmen .pantalla-header {
    background: #2563eb;
}

#pantallaLoginCarmen .btn-volver {
    background: #1d4ed8;
}


/* =====================================================
   CARMEN — PANTALLA PRINCIPAL
===================================================== */

#pantallaCarmen .pantalla-header {
    background: #2563eb;
}

#pantallaCarmen .btn-volver {
    background: #1d4ed8;
}


/* =====================================================
   SALIDAS DE CAJA — ENCABEZADO VERDE
===================================================== */

#pantallaLoginSalidasCaja .pantalla-header {
    background: #16a34a;
}

#pantallaLoginSalidasCaja .btn-volver {
    background: #15803d;
}


#pantallaSalidasCaja .pantalla-header {
    background: #16a34a;
}

#pantallaSalidasCaja .btn-volver {
    background: #15803d;
}
/* =====================================================
   CARMEN — BOTÓN ENTRAR AZUL
===================================================== */

#pantallaLoginCarmen .guardar-button {
    background: #2563eb;
    color: #ffffff;
}

#pantallaLoginCarmen .guardar-button:hover {
    background: #1d4ed8;
}
/* =====================================================
   ADMINISTRADOR — TARJETAS
===================================================== */

#pantallaAdministrador .card.delivery {
    border-left-color: #ea580c;
}


#pantallaAdministrador .card.spent {
    border-left-color: #dc2626;
}


#pantallaAdministrador .card.available {
    border-left-color: #16a34a;
}


/* =====================================================
   RESPONSIVE USUARIOS
===================================================== */

@media (max-width: 380px) {

    .usuario-admin-item {
        padding: 13px 12px;
    }


    .usuario-admin-icon {
        width: 38px;
        height: 38px;

        font-size: 19px;
    }


    .usuario-admin-nombre {
        font-size: 13px;
    }


    .usuario-admin-detalle {
        font-size: 11px;
    }


    .admin-usuario-button {
        padding: 7px 9px;

        font-size: 10px;
    }

}

/* =====================================================
   BOTÓN VOLVER — FLECHA MÁS GRUESA
===================================================== */

.btn-volver {
    width: 50px;
    height: 50px;

    border: none;
    border-radius: 14px;

    background: #374151;
    color: #ffffff;

    font-family: Arial, sans-serif;

    font-size: 32px;
    font-weight: 900;

    line-height: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    padding: 0;

    text-shadow:
        1px 0 0 #ffffff,
        -1px 0 0 #ffffff;

    transition:
        background 0.18s ease,
        transform 0.15s ease,
        box-shadow 0.18s ease;
}


/* =====================================================
   EFECTO AL PASAR EL CURSOR
===================================================== */

.btn-volver:hover {

    background: #4b5563;

    box-shadow:
        0 5px 16px
        rgba(0, 0, 0, 0.22);

    transform: translateX(-2px);

}


/* =====================================================
   EFECTO AL PRESIONAR
===================================================== */

.btn-volver:active {

    transform: scale(0.93);

}
/* =====================================================
   ACCESO GENERAL — ICA GASTOS
===================================================== */

.acceso-general {
    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #111827 0%,
            #1f2937 50%,
            #111827 100%
        );

    z-index: 99999;

    padding: 20px;

    box-sizing: border-box;
}


.acceso-general-contenedor {

    width: 100%;

    max-width: 420px;

    background: #ffffff;

    border-radius: 18px;

    padding: 36px 32px;

    box-sizing: border-box;

    box-shadow:
        0 20px 50px rgba(
            0,
            0,
            0,
            0.30
        );

    text-align: center;
}


/* =====================================================
   LOGO
===================================================== */

.acceso-general-logo {

    width: 72px;

    height: 72px;

    margin:
        0 auto 18px auto;

    border-radius: 16px;

    background: #111827;

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 25px;

    font-weight: 800;

    letter-spacing: 1px;

    box-shadow:
        0 8px 20px rgba(
            0,
            0,
            0,
            0.18
        );

}


/* =====================================================
   TITULO
===================================================== */

.acceso-general-titulo {

    font-size: 27px;

    font-weight: 800;

    color: #111827;

    margin-bottom: 10px;

}


.acceso-general-subtitulo {

    font-size: 15px;

    line-height: 1.5;

    color: #4b5563;

    max-width: 330px;

    margin:
        0 auto 8px auto;

}


.acceso-general-identificate {

    font-size: 14px;

    font-weight: 600;

    color: #111827;

    margin-bottom: 26px;

}


/* =====================================================
   CAMPOS
===================================================== */

.acceso-general-campo {

    text-align: left;

    margin-bottom: 17px;

}


.acceso-general-campo label {

    display: block;

    font-size: 13px;

    font-weight: 700;

    color: #374151;

    margin-bottom: 7px;

}


.acceso-general-campo input {

    width: 100%;

    height: 48px;

    padding:
        0 14px;

    box-sizing: border-box;

    border:
        1px solid #d1d5db;

    border-radius: 10px;

    background: #f9fafb;

    color: #111827;

    font-size: 15px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;

}


.acceso-general-campo input:focus {

    border-color: #111827;

    background: #ffffff;

    box-shadow:
        0 0 0 3px
        rgba(
            17,
            24,
            39,
            0.10
        );

}


/* =====================================================
   ERROR
===================================================== */

.error-acceso-general {

    min-height: 20px;

    margin:
        2px 0 10px 0;

    color: #dc2626;

    font-size: 13px;

    font-weight: 600;

}


/* =====================================================
   BOTÓN
===================================================== */

.btn-acceso-general {

    width: 100%;

    height: 50px;

    border: none;

    border-radius: 10px;

    background: #111827;

    color: #ffffff;

    font-size: 15px;

    font-weight: 800;

    cursor: pointer;

    transition:
        transform 0.15s ease,
        background 0.15s ease,
        box-shadow 0.15s ease;

}


.btn-acceso-general:hover {

    background: #000000;

    box-shadow:
        0 8px 18px
        rgba(
            0,
            0,
            0,
            0.18
        );

}


.btn-acceso-general:active {

    transform:
        translateY(1px);

}


/* =====================================================
   PIE
===================================================== */

.acceso-general-pie {

    margin-top: 24px;

    font-size: 11px;

    color: #9ca3af;

}


/* =====================================================
   CELULAR
===================================================== */

@media (
    max-width: 480px
) {

    .acceso-general {

        padding: 16px;

    }


    .acceso-general-contenedor {

        padding:
            30px 22px;

        border-radius: 16px;

    }


    .acceso-general-titulo {

        font-size: 24px;

    }


    .acceso-general-logo {

        width: 64px;

        height: 64px;

        font-size: 22px;

    }

}
/* =====================================================
   FIN DE ESTILOS
===================================================== */