/* =====================================================================
   TME Online — ajustes de tema (se carga al final, después de style.css)
   Menos azul sólido: encabezados de tarjetas y tablas en tono claro, el azul
   queda para el menú lateral, el botón principal de cada pantalla y los datos.
   ===================================================================== */
:root {
    --tme-tinte: #f3f5fd;        /* fondo de encabezados */
    --tme-tinte-borde: #e2e6f6;
    --tme-titulo: #1d2675;       /* títulos sobre el tinte */
    --tme-tenue: #6b7390;
}

/* Encabezados de tarjetas que eran azul sólido (Inicio, Operaciones, detalle, perfil) */
.card > .card-header.bg-primary,
.modal-header.bg-primary {
    background: var(--tme-tinte) !important;
    border-bottom: 1px solid var(--tme-tinte-borde) !important;
    border-top: 3px solid var(--primary) !important;
}
/* Ícono y título juntos a la izquierda (salvo los que ya piden separarse) */
.card > .card-header.bg-primary.d-flex:not(.justify-content-between) { justify-content: flex-start; gap: .5rem; }
.card > .card-header.bg-primary .text-white,
.card > .card-header.bg-primary h5,
.card > .card-header.bg-primary h6,
.card > .card-header.bg-primary .card-title,
.modal-header.bg-primary .text-white,
.modal-header.bg-primary .modal-title {
    color: var(--tme-titulo) !important;
}
.card > .card-header.bg-primary i,
.card > .card-header.bg-primary .bi,
.card > .card-header.bg-primary .fa,
.card > .card-header.bg-primary .fas {
    color: var(--primary) !important;
}
.modal-header.bg-primary .btn-close { filter: none; }
/* Tarjeta de perfil del detalle: la franja de arriba queda delgada */
#profileCard .card-header.bg-primary { min-height: 56px; }

/* Encabezados de tabla */
.table thead.thead-primary th {
    background: var(--tme-tinte) !important;
    color: var(--tme-tenue) !important;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--tme-tinte-borde) !important;
}
.table thead.thead-primary th:first-child { border-top-left-radius: 8px; }
.table thead.thead-primary th:last-child { border-top-right-radius: 8px; }

/* Accesos rápidos de Inicio: tarjetas blancas con color solo en el borde y el ícono */
#quickaccess a.card {
    background: #fff !important;
    color: var(--tme-titulo) !important;
    border: 1px solid var(--tme-tinte-borde);
    border-left: 4px solid var(--primary);
    transition: background .15s;
}
#quickaccess a.card:hover { background: var(--tme-tinte) !important; }
#quickaccess a.card.bg-success { border-left-color: #2bc155; }
#quickaccess a.card.bg-info { border-left-color: #2b98d6; }
#quickaccess a.card.bg-primary i { color: var(--primary); }
#quickaccess a.card.bg-success i { color: #2bc155; }
#quickaccess a.card.bg-info i { color: #2b98d6; }

/* Selector de idioma discreto (como en tgsi.app): ES / EN en texto */
.lang-switch { display: flex; align-items: center; gap: 2px; }
.lang-switch .lang-opt {
    border: 0; background: transparent; padding: 2px 4px;
    font-size: 13px; font-weight: 600; line-height: 1; color: #a3aac2; cursor: pointer;
}
.lang-switch .lang-opt:hover { color: var(--primary); }
.lang-switch .lang-opt.activo { color: var(--primary); font-weight: 700; cursor: default; }
.lang-switch .lang-sep { color: #ccd1e1; font-size: 12px; }

/* Migas de pan: el título de la pantalla ya está en la barra superior */
.content-body .page-titles, #body-container .page-titles { display: none; }

/* Tabla de movimientos (Depósitos e Inicio usan la misma) */
.dep-tabla td { vertical-align: middle; }
.dep-tabla .fecha { white-space: nowrap; }
.dep-tabla .fecha .hora { font-size: .75rem; color: #8a91aa; }
.dep-tabla .concepto { min-width: 220px; }
.dep-tabla .concepto .quien { font-weight: 600; color: #2c3350; }
.dep-tabla .concepto .como { font-size: .8rem; color: #6b7390; }
.dep-tabla .ref { font-size: .8rem; color: #6b7390; white-space: nowrap; }
.dep-tabla .monto { text-align: right; white-space: nowrap; font-weight: 600; }
.dep-tabla .monto.cargo { color: #e5534b; }
.dep-tabla .monto.abono { color: #1f9d55; }
.dep-tabla td.acc { text-align: right; white-space: nowrap; width: 1%; }
.dep-tabla thead th.text-end { text-align: right !important; }
.dep-ico { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 30px; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; }
.dep-ico.in { background: #e9f7ee; color: #1f9d55; }
.dep-ico.out { background: #fdeceb; color: #e5534b; }
@media (max-width: 767.98px) {
    .dep-tabla thead { display: none; }
    .dep-tabla, .dep-tabla tbody, .dep-tabla tr, .dep-tabla td { display: block; width: 100%; }
    .dep-tabla tr { border: 1px solid #e6e8ef; border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; position: relative; }
    .dep-tabla td { border: 0 !important; padding: 2px 0 !important; text-align: left !important; }
    .dep-tabla td.monto:empty { display: none; }
    .dep-tabla td.monto { position: absolute; top: 10px; right: 12px; width: auto; }
    .dep-tabla td.acc { width: auto; }
    .dep-tabla .concepto { min-width: 0; padding-right: 0 !important; }
    .dep-tabla tr:hover > td { background: transparent !important; box-shadow: none !important; }
}