/* ---------- Notificaciones (Toast) ---------- */
.toast-stack {
    position: fixed; top: 20px; right: 20px; z-index: 2000;
    display: flex; flex-direction: column; gap: 10px; width: 360px; max-width: calc(100vw - 40px);
}
.toast-card {
    display: flex; align-items: flex-start; gap: 12px; background: #fff;
    border-left: .3rem solid #858796; border-radius: .35rem; padding: .85rem 1rem;
    box-shadow: 0 .5rem 1.5rem rgba(58, 59, 69, .25);
    opacity: 0; transform: translateX(30px); transition: opacity .25s ease, transform .25s ease;
}
.toast-card.toast-in  { opacity: 1; transform: translateX(0); }
.toast-card.toast-out { opacity: 0; transform: translateX(30px); }
.toast-card .toast-icono { font-size: 1.25rem; line-height: 1.2; font-weight: 700; }
.toast-card .toast-cuerpo { flex: 1; min-width: 0; }
.toast-card .toast-titulo { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.toast-card .toast-texto  { color: #3a3b45; word-wrap: break-word; }
.toast-card .toast-cerrar { background: none; border: 0; font-size: 1.2rem; line-height: 1; color: #b7b9cc; cursor: pointer; padding: 0; }
.toast-card .toast-cerrar:hover { color: #5a5c69; }
.toast-exito  { border-left-color: #1cc88a; } .toast-exito  .toast-icono, .toast-exito  .toast-titulo { color: #1cc88a; }
.toast-error  { border-left-color: #e74a3b; } .toast-error  .toast-icono, .toast-error  .toast-titulo { color: #e74a3b; }
.toast-aviso  { border-left-color: #f6c23e; } .toast-aviso  .toast-icono, .toast-aviso  .toast-titulo { color: #d4a017; }

/* ---------- Ventanas de confirmacion / pregunta ---------- */
.cm-overlay {
    position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 1900;
    display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.cm-box { background: #fff; border-radius: .5rem; padding: 1.5rem; width: 100%; max-width: 420px; box-shadow: 0 1rem 3rem rgba(0, 0, 0, .3); }
.cm-box h5 { margin-bottom: .75rem; color: #3a3b45; }
.cm-box p  { color: #5a5c69; word-wrap: break-word; }
.cm-acciones { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.25rem; }

/* ---------- Varios ---------- */
.invalid-feedback { display: block; }
.form-control:not(.is-invalid) ~ .invalid-feedback:empty,
.input-group .invalid-feedback:empty { display: none; }
td.text-right, th.text-right { white-space: nowrap; }

/* ---------- Select2 con estilo Bootstrap 4 (formulario de cuentas) ---------- */
.select2-container--default .select2-selection--single {
    height: calc(1.5em + .75rem + 2px); border: 1px solid #d1d3e2; border-radius: .35rem;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: calc(1.5em + .75rem); padding-left: .75rem; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: calc(1.5em + .75rem); }
.input-group > .select2-container { flex: 1 1 auto; width: 1% !important; }
.input-group > .select2-container .select2-selection--single { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.is-invalid + .select2-container .select2-selection--single { border-color: #e74a3b; }

/* ---------- Tablas del sistema (.tabla-app) ----------
   Filas alternadas (table-striped), sin lineas internas, solo el borde exterior,
   contenido centrado y con salto de linea para evitar el scroll lateral. */
.tabla-app {
    border: 1px solid #d1d3e2;
    border-radius: .35rem;
    overflow: hidden;
}
.tabla-app th,
.tabla-app td {
    border: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
    white-space: normal;              /* baja de linea solo entre palabras, nunca las corta */
    word-break: normal;
    overflow-wrap: normal;
}
.tabla-app td.una-linea { white-space: nowrap; }   /* ej. el correo: siempre en una sola linea */
.tabla-app thead th { white-space: nowrap; }
.tabla-app.table-striped tbody tr:nth-of-type(odd) { background-color: #f3f4f8; }
.tabla-app tbody tr:hover { background-color: #e8eaf3; }
.tabla-app .btn { white-space: normal; line-height: 1.15; }

/* ---------- Texto base en todo el sistema = estilo "body" de SB Admin 2 (pedido del dueno) ----------
   Nunito, 1rem, peso 400, interlineado 1.5, color #858796. Se aplica tambien a tablas y formularios,
   porque sb-admin-2.min.css trae .table con color #050505 (casi negro). */
:root { --texto: #858796; --tabla-fuente: 1rem; }
.table,
.tabla-app,
.form-control,
.select2-container--default .select2-selection--single .select2-selection__rendered,
.custom-select {
    font-family: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: 400;
    color: var(--texto);
}
.tabla-app { font-size: var(--tabla-fuente); line-height: 1.5; }
.tabla-app .btn, .tabla-app .badge { font-size: var(--tabla-fuente) !important; font-weight: 400; }

/* Botones de estado de la tabla de Cuentas: como tablacuentas.php del sistema actual */
.tabla-app.tabla-cuentas .btn { font-size: 0.80rem !important; font-weight: bold; }

/* Circulo de carga dentro de las tablas */
.tabla-cargando { padding: 2rem 0; text-align: center; color: var(--texto); }
.tabla-cargando .spinner-border { width: 2.5rem; height: 2.5rem; }

/* ---------- Ventas: como tablaventasatender.php del sistema actual ---------- */
.tabla-app.tabla-ventas .btn { font-size: 0.80rem !important; font-weight: bold; }
.tabla-app.tabla-ventas .nomb-client { font-size: 0.95rem !important; }
.btn-principal { background-color: #0078ff; color: #fff; }
.btn-principal:hover { background-color: #005ac2; color: #fff; }
.tabla-ventas .btn-warning, .badge.btn-warning { background-color: #FFA040; border-color: #FFA040; color: #fff; }
.mensaje-plantilla { white-space: pre-wrap; font-family: inherit; }
.item-pedido { border-bottom: 1px dashed #e3e6f0; margin-bottom: .5rem; }

/* Pantalla gris «Guardando...» mientras se envia un formulario (App.Cargando). Debajo de los toasts. */
.cargando-global {
    position: fixed; inset: 0; z-index: 1990; display: none;
    align-items: center; justify-content: center;
    background: rgba(58, 59, 69, .45); cursor: progress;
}
.cargando-global.visible { display: flex; }
.cargando-global-caja {
    background: #fff; border-radius: .5rem; padding: 1.5rem 2.5rem; text-align: center;
    color: var(--texto); box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25);
}
.cargando-global-caja .spinner-border { width: 2.5rem; height: 2.5rem; }

/* Fase 4: modal «Ver correo» y nota en la tabla de correos */
.etiqueta-dato { min-width: 10.5rem; }
.nota-celda { white-space: pre-line; }