/*==================================================
=            PANTALLAS DEL SISTEMA                 =
==================================================*/

/*==================================
=            RESUMEN               =
==================================*/

.sc-stats{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.sc-stat{
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-md) var(--space-lg);
}

.sc-stat__label{
    display: block;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-text-light);
    margin-bottom: var(--space-xs);
}

.sc-stat__value{
    display: block;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.55rem;
    font-weight: 600;
    line-height: 1.2;
}

.sc-stat__hint{
    display: block;
    font-size: .78rem;
    color: var(--color-text-light);
    margin-top: var(--space-xs);
}

/* La deuda total lleva un borde de color: es el número que se mira
   primero al abrir el sistema en la mañana. */
.sc-stat--deuda{
    border-left: 4px solid var(--color-danger);
}

.sc-stat--favor{
    border-left: 4px solid var(--color-success);
}

/*==================================
=            ACCIONES              =
==================================*/

.sc-acciones{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: var(--space-md);
}

.sc-accion{
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    transition: all var(--transition-fast);
}

.sc-accion:hover{
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    text-decoration: none;
    color: var(--color-text);
    transform: translateY(-1px);
}

.sc-accion i{
    font-size: 1.4rem;
    color: var(--color-secondary);
}

.sc-accion__titulo{
    font-weight: 600;
    font-size: .93rem;
}

.sc-accion__detalle{
    font-size: .8rem;
    color: var(--color-text-light);
}

/* Las acciones que tocan a todos los clientes de una vez van marcadas.
   No es decoracion: es para que nadie las apriete creyendo que hacen
   algo pequeno. */
.sc-accion--masiva{
    border-left: 3px solid var(--color-warning);
}

/*==================================
=            FICHA DEL CLIENTE     =
==================================*/

.sc-ficha{
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-lg);
    align-items: start;
}

.sc-datos{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-md);
}

.sc-dato__label{
    display: block;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-text-light);
}

.sc-dato__valor{
    display: block;
    font-size: .93rem;
}

/* El saldo del cliente es el dato que se viene a buscar. Va grande,
   arriba, y con el color diciendo si debe o esta al dia. */
.sc-saldo-panel{
    text-align: center;
    padding: var(--space-lg);
}

.sc-saldo-panel__label{
    display: block;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-light);
}

.sc-saldo-panel__valor{
    display: block;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.3;
    margin: var(--space-xs) 0;
}

.sc-saldo-panel__nota{
    display: block;
    font-size: .82rem;
    color: var(--color-text-light);
}

/*==================================
=            CARGAS MASIVAS        =
==================================*/

/* Una advertencia grande antes de una accion que toca a toda la
   cartera. El sistema antiguo no avisaba nada. */
.sc-aviso-masivo{
    display: flex;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--color-warning-light);
    border: 1px solid rgba(183,121,31,.3);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
}

.sc-aviso-masivo i{
    font-size: 1.5rem;
    color: var(--color-warning);
    flex-shrink: 0;
}

.sc-aviso-masivo p{
    margin: 0 0 var(--space-xs);
    font-size: .88rem;
}

.sc-aviso-masivo p:last-child{
    margin-bottom: 0;
}

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

.sc-login{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    background: var(--color-primary);
}

.sc-login__card{
    width: 100%;
    max-width: 380px;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-xl);
}

.sc-login__title{
    text-align: center;
    margin-bottom: var(--space-xs);
}

.sc-login__subtitle{
    text-align: center;
    font-size: .85rem;
    color: var(--color-text-light);
    margin-bottom: var(--space-lg);
}

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

@media (max-width: 980px){

    .sc-ficha{
        grid-template-columns: 1fr;
    }

}