/* ============================================================
   CSS Moderno - Cooperativa Digital
   ============================================================ */


/* ── Variables globales ───────────────────────────────────── */
:root {
    --primary-color: #482882 ;
    --primary-hover: #2b184e;
    --gray-100:      #f8f9fa;
    --gray-200:      #e9ecef;
    --gray-600:      #6c757d;
    --gray-700:      #495057;
    --gray-800:      #343a40;
    --shadow-sm:     0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --shadow-md:     0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --border-radius: 0.375rem;
    --transition:    all 0.3s ease;
}


/* ── Cards ────────────────────────────────────────────────── */
.modern-card {
    background:    #fff;
    border:        none;
    border-radius: var(--border-radius);
    box-shadow:    var(--shadow-sm);
    transition:    var(--transition);
    margin-bottom: 1.5rem;
}

.modern-card:hover {
    box-shadow: var(--shadow-md);
}

.modern-card-header {
    background:    linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
    color:         #fff;
    padding:       1rem 1.5rem;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    font-size:     1.29rem;
    font-weight:   600;
}

.modern-card-body {
    padding: 1.5rem;
    font-size: 1.19rem;
}


/* ── Stat items (filas de información) ────────────────────── */
.stat-item {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         0.75rem 0;
    border-bottom:   1px solid var(--gray-200);
    transition:      var(--transition);
}

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

.stat-item:hover {
    background-color: var(--gray-100);
    padding-left:     0.5rem;
    padding-right:    0.5rem;
    border-radius:    var(--border-radius);
}

/* Etiquetas: "Liquidado", "Lib. Fact. Emitidas", etc. */
.stat-label {
    color:       var(--gray-600);
    font-size:   1.44rem;
    font-weight: 500;
}

/* Valores numéricos / importes */
.stat-value {
    font-size:   1.69rem;
    font-weight: 700;
    color:       var(--gray-800);
}

.stat-actions {
    display: inline-flex;
    gap:     0.5rem;
}


/* ── Botones ──────────────────────────────────────────────── */
.modern-btn {
    padding:         0.625rem 1.5rem;
    border-radius:   var(--border-radius);
    font-weight:     500;
    font-size:       1.19rem;
    transition:      var(--transition);
    border:          none;
    cursor:          pointer;
    text-decoration: none;
}

.modern-btn:hover {
    transform:       translateY(-1px);
    box-shadow:      var(--shadow-sm);
    text-decoration: none;
}

.modern-btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
    color:      #fff;
}

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

.modern-btn-outline {
    background-color: transparent;
    border:           2px solid var(--primary-color);
    color:            var(--primary-color);
}

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

.modern-btn-sm {
    padding:   0.375rem 0.75rem;
    font-size: 1.06rem;
}


/* ── Tablas ───────────────────────────────────────────────── */
.modern-table-wrapper {
    background:    #fff;
    border-radius: var(--border-radius);
    box-shadow:    var(--shadow-sm);
    overflow:      hidden;
    margin-bottom: 1.5rem;
}

.modern-table {
    width:         100%;
    margin-bottom: 0;
    font-size:     1.19rem;   /* antes 1rem, aumentado 3pt */
}

.modern-table thead {
    background: linear-gradient(135deg, var(--gray-700) 0%, var(--gray-800) 100%);
    color:      #fff;
}

.modern-table thead th {
    padding:        1rem;
    font-weight:    600;
    text-transform: uppercase;
    font-size:      1.09rem; /* antes 0.9rem, aumentado 3pt */
    letter-spacing: 0.5px;
    border:         none;
}

.modern-table tbody tr {
    transition:       var(--transition);
    background-color: #fff;
}

.modern-table tbody tr:hover {
    background-color: var(--gray-100);
}

.modern-table tbody td {
    padding:        0.875rem 1rem;
    border-bottom:  1px solid var(--gray-200);
    vertical-align: middle;
}

.modern-table tbody tr:last-child td {
    border-bottom: none;
}

/* Alineación de columnas numéricas en tablas */
.modern-table td:nth-child(2),
.modern-table th:nth-child(2) {
    text-align: center !important;
}

/* Paginador del GridView */
.modern-pager td {
    padding: 0.5rem 0.375rem;
}

.modern-pager a,
.modern-pager span {
    display:          inline-block;
    padding:          0.375rem 0.75rem;
    border-radius:    var(--border-radius);
    font-weight:      500;
    text-decoration:  none;
    background-color: var(--gray-100);
    color:            var(--primary-color);
    border:           1px solid var(--gray-200);
    transition:       var(--transition);
}

.modern-pager a:hover {
    background-color: var(--primary-color);
    color:            #fff;
    border-color:     var(--primary-color);
}

/* Página activa */
.modern-pager span {
    background-color: var(--primary-color);
    color:            #fff;
    border-color:     var(--primary-color);
}


/* ── Alertas ──────────────────────────────────────────────── */
.modern-alert {
    padding:       1rem 1.5rem;
    margin-bottom: 1rem;
    border:        none;
    border-radius: var(--border-radius);
    border-left:   4px solid;
}

.modern-alert-danger {
    background-color:  #f8d7da;
    border-left-color: #d9534f;
    color:             #721c24;
}


/* ── Cabecera de página ───────────────────────────────────── */
.modern-page-header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-bottom:   2rem;
    padding-bottom:  1rem;
    border-bottom:   2px solid var(--gray-200);
}

.modern-page-title {
    font-size:   1.75rem;
    font-weight: 700;
    color:       var(--gray-800);
    margin:      0;
}

.modern-page-subtitle {
    font-size: 1rem;
    color:     var(--gray-600);
    margin:    0.25rem 0 0 0;
}


/* ── Info del usuario (Nº Socio / Nº Cliente) ─────────────── */
.user-info-section {
    display:     flex;
    gap:         2rem;
    align-items: center;
    flex-wrap:   wrap;
}

.user-info-item {
    display:        flex;
    flex-direction: column;
    gap:            0.25rem;
}

.user-info-label {
    font-size:      1.04rem;
    color:          var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.user-info-value {
    font-size:   1.89rem;
    font-weight: 700;
    color:       var(--primary-color);
}


/* ── Panel de carga ───────────────────────────────────────── */
.modern-loading {
    background:      rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    padding:         2rem;
    border-radius:   var(--border-radius);
    box-shadow:      var(--shadow-md);
}

.modern-spinner {
    width:            50px;
    height:           50px;
    border:           4px solid var(--gray-200);
    border-top-color: var(--primary-color);
    border-radius:    50%;
    animation:        spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}


/* ── Animaciones ──────────────────────────────────────────── */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0);    }
}

.fade-in {
    animation: fadeIn 0.4s ease-out;
}


/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
    .modern-page-header {
        flex-direction: column;
        align-items:    flex-start;
        gap:            1rem;
    }

    .stat-item {
        flex-direction: column;
        align-items:    flex-start;
        gap:            0.5rem;
    }

    .user-info-section {
        flex-direction: column;
        gap:            1rem;
    }
}


/* ── Utilidades ───────────────────────────────────────────── */
.d-flex                  { display: flex !important; }
.align-items-center      { align-items: center !important; }
.justify-content-between { justify-content: space-between !important; }
.gap-2   { gap: 0.5rem; }
.gap-3   { gap: 1rem; }
.mb-3    { margin-bottom: 1rem !important; }
.mb-4    { margin-bottom: 1.5rem !important; }
.mt-3    { margin-top: 1rem !important; }
.fw-bold { font-weight: 700; }
.text-muted { color: var(--gray-600) !important; }
.w-100   { width: 100% !important; }
.modern-table th.col-importe,
.modern-table td.col-importe {
    text-align: right !important;
}