html {
    /*background: linear-gradient(to bottom, #000428, #004e92);*/
    background-image: url(/src/img/IMG-20260115-WA0053\(2\).jpg);
    background-size: cover;
    background-position: top center;
    min-height: 100vh;
    width: 100%;
}

body {
    font-family: 'Inter', sans-serif;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: transparent !important;
}

body.tv-mode {
    zoom: 0.7;
    overflow: hidden;
}

table { 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

#tablaOTS thead {
  --bs-table-bg: #3882d1c0;
  --bs-table-color: white;
  font-size: 1.1em;
}

#tabla-pedidos-body .cargando-datos {
    font-size: 1.6em;
    --bs-table-striped-bg: white;
}

#tabla-pedidos-body .icono {
    font-size: 1.67em;
    padding: 0;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

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

.fade-out {
    animation: fadeOut 0.5s ease-in;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.pulsing {
    animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.error_actualizando {
    color: red;
}

.table-striped>tbody>tr:nth-of-type(odd)>* {
  --bs-table-color: white;
}

/* Colores para filas */
.fila-ciudad-panama {
    --bs-table-bg: #E0F7FA !important;
}

.fila-ciudad-david {
    --bs-table-bg: #FFF9C4 !important;
}

.fila-asesor-cat {
    --bs-table-bg: #e3edff !important;
}

.fila-asesor-pedro {
    --bs-table-bg: #E8F5E9 !important;
}

/* 1. El "Ancla" (el <td> en sí) */
.fila-icono td:nth-child(3) {
  position: relative; /* ¡Importante! Esto se convierte en el ancla */
}

/* 2. El Icono "Flotante" (el ::after) */
.fila-icono td:nth-child(3)::after {
  content: "👨🏼‍🔧";
  font-size: 1.8em; /* ¡Pon el tamaño que quieras! */

  /* --- ¡La Magia! --- */
  position: absolute;         /* 1. Saca el ícono del flujo */
  top: 50%;                   /* 3. Céntralo verticalmente */
  transform: translateY(-50%);
  
  /* Ya no necesitamos el 'margin' */
}

/* 1. Evitar que el texto se rompa en dos líneas */
#tablaOTS th, 
#tablaOTS td {
    white-space: nowrap;
    vertical-align: middle;
}

/* 2. Ajuste específico para columnas que sabes que son largas */
/* nth-child(3) es Asesores, nth-child(4) es Ciudad */
#tablaOTS td:nth-child(3), 
#tablaOTS td:nth-child(4) {
    min-width: 200px; /* Asegura un espacio mínimo decente */
    max-width: 300px; /* Evita que crezca infinitamente si quieres */
    overflow: hidden; /* Corta el texto si es EXTREMADAMENTE largo */
    text-overflow: ellipsis; /* Pone "..." si se corta */
}

/* ====== CONTENEDOR DE NIEVE ====== */
#snow-container {
    position: fixed;
    inset: 0;                 /* top, right, bottom, left = 0 */
    pointer-events: none;     /* no bloquea clics */
    overflow: hidden;
    z-index: 9999;            /* encima de todo */
}