/* ==========================================================================
   Pedidos: filtros, cuenta regresiva y acciones
   ==========================================================================
   Esta hoja la cargan LAS DOS pantallas de pedidos (cliente y administrador),
   que usan plantillas distintas. Por eso vive aparte de latam-ui.css, cuyo
   equivalente de utilidades de Tailwind chocaría con el tema del panel.
   ========================================================================== */

.ls-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0 1rem;
}

.ls-filtro {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid #dce4f5;
    border-radius: 3px;
    background: #fff;
    color: #5A6B8C;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.ls-filtro:hover {
    border-color: #b9c8e6;
    color: var(--marca-tinta);
    text-decoration: none;
}

.ls-filtro i {
    font-size: 0.875rem;
}

/* Contador de cuántos pedidos caen en cada filtro. */
.ls-filtro-conteo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.25rem;
    border-radius: 3px;
    background: rgba(0, 0, 0, .07);
    font-size: 0.75rem;
}

/* Cada filtro toma su color sólo cuando está seleccionado, para que la barra
   no parezca un semáforo permanente. */
.ls-filtro.is-activo {
    color: #fff;
    border-color: transparent;
}

/* Oscurecer, no aclarar: con el velo blanco el número quedaba en 3.18 sobre el
   azul del filtro seleccionado, por debajo del mínimo de 4.5. */
.ls-filtro.is-activo .ls-filtro-conteo {
    background: rgba(0, 0, 0, .2);
}

/* Estos tres tonos están elegidos para que el texto blanco encima supere el
   mínimo de contraste (4.5): un ámbar más vivo se veía bien pero dejaba el
   texto en 2.9. */
.ls-filtro--todas.is-activo    { background: var(--marca-azul); }
.ls-filtro--pronto.is-activo   { background: var(--marca-ambar-texto); }
.ls-filtro--vencidas.is-activo { background: var(--marca-rojo-texto); }
.ls-filtro--ok.is-activo       { background: var(--marca-verde-texto); }

/* En reposo el icono sí puede llevar el color vivo: va sobre fondo claro. */
.ls-filtro--pronto i   { color: var(--marca-ambar-texto); }
.ls-filtro--vencidas i { color: var(--marca-rojo-texto); }
.ls-filtro--ok i       { color: var(--marca-verde-texto); }

.ls-filtro.is-activo i { color: inherit; }

/* --- Cuenta regresiva --- */

.ls-cuenta {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.ls-cuenta--ok     { background: rgba(34, 197, 94, .16);  color: #12703C; }
.ls-cuenta--pronto { background: rgba(255, 176, 32, .18); color: var(--marca-ambar-texto); }
.ls-cuenta--hoy    { background: rgba(255, 77, 94, .16);  color: var(--marca-rojo-texto); }
.ls-cuenta--fin    { background: rgba(120, 130, 150, .18); color: #5A6B8C; }

/* Un pedido cerrado se atenúa: sigue en el historial pero ya no da servicio. */
.ls-pedido-cerrado {
    opacity: .62;
}

/* --- Botones de la fila --- */

.ls-boton-codigos,
.ls-boton-renovar {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-radius: 3px;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: filter .15s ease, transform .15s ease, background-color .15s ease;
}

.ls-boton-codigos {
    background: rgba(11, 99, 246, .12);
    color: var(--marca-azul-texto);
}

.ls-boton-codigos:hover {
    background: rgba(11, 99, 246, .2);
    color: var(--marca-azul-texto);
    text-decoration: none;
}

.ls-boton-renovar {
    /* Plano y de un solo color. El degradado con sombra y el salto al pasar
       por encima eran adorno: no informaban de nada. */
    background: var(--marca-verde-texto);
    color: #fff;
}

.ls-boton-renovar:hover {
    background: #12703C;
    color: #fff;
}

/* --- Tema oscuro (sólo aplica en la tienda, que es donde existe) --- */

/* Sólo los filtros en reposo: el seleccionado conserva su color de estado,
   que si no quedaría tapado por este fondo oscuro. */
:root[data-theme="dark"] .ls-filtro:not(.is-activo) {
    background: var(--marca-grafito);
    border-color: #1E2A4A;
    color: #93A2C4;
}

:root[data-theme="dark"] .ls-filtro:not(.is-activo):hover {
    color: var(--marca-humo);
}

/* Sólo los de reposo: sobre el chip seleccionado este velo blanco aclaraba el
   azul y dejaba su número en 4.33. El seleccionado conserva el velo oscuro. */
:root[data-theme="dark"] .ls-filtro:not(.is-activo) .ls-filtro-conteo {
    background: rgba(255, 255, 255, .1);
}

/* Los iconos usan los tonos oscurecidos, pensados para fondo claro; sobre el
   grafito quedaban casi negros. En reposo van al color vivo de la paleta. */
:root[data-theme="dark"] .ls-filtro:not(.is-activo).ls-filtro--pronto i   { color: var(--marca-ambar); }
:root[data-theme="dark"] .ls-filtro:not(.is-activo).ls-filtro--vencidas i { color: var(--marca-rojo); }
:root[data-theme="dark"] .ls-filtro:not(.is-activo).ls-filtro--ok i       { color: var(--marca-verde); }

:root[data-theme="dark"] .ls-cuenta--ok     { color: var(--marca-verde); }
:root[data-theme="dark"] .ls-cuenta--pronto { color: var(--marca-ambar); }
:root[data-theme="dark"] .ls-cuenta--hoy    { color: var(--marca-rojo); }
:root[data-theme="dark"] .ls-cuenta--fin    { color: #93A2C4; }
:root[data-theme="dark"] .ls-boton-codigos  { color: var(--marca-cian); }

/* --- Comprobante ---------------------------------------------------------
   Enlace discreto bajo el número de pedido. Es un documento, no una acción
   principal: no compite con "Obtener códigos" ni con "Renovar". */

.ls-boton-comprobante {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #5A6B8C;
    text-decoration: none;
    white-space: nowrap;
}

.ls-boton-comprobante:hover {
    color: var(--marca-azul-texto);
    text-decoration: underline;
}

:root[data-theme="dark"] .ls-boton-comprobante {
    color: #93A2C4;
}

:root[data-theme="dark"] .ls-boton-comprobante:hover {
    color: var(--marca-cian);
}

/* --- Ordenación -----------------------------------------------------------
   Separada visualmente de los filtros: no reduce la lista, sólo la reordena.
   Con muchos pedidos abiertos y todos con los mismos días restantes, es lo
   que permite encontrar el que se acaba de comprar. */

.ls-orden {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: -0.5rem 0 1rem;
    font-size: 0.8125rem;
}

.ls-orden-rotulo {
    color: #5A6B8C;
    margin-right: 0.25rem;
}

.ls-orden-opcion {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    color: #5A6B8C;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

.ls-orden-opcion:hover {
    background: rgba(11, 99, 246, .08);
    color: var(--marca-azul-texto);
    text-decoration: none;
}

.ls-orden-opcion.is-activo {
    background: rgba(11, 99, 246, .12);
    color: var(--marca-azul-texto);
    font-weight: 600;
}

.ls-orden-opcion i { font-size: 0.75rem; }

:root[data-theme="dark"] .ls-orden-rotulo,
:root[data-theme="dark"] .ls-orden-opcion { color: #93A2C4; }

:root[data-theme="dark"] .ls-orden-opcion:hover,
:root[data-theme="dark"] .ls-orden-opcion.is-activo {
    background: rgba(34, 211, 238, .14);
    color: var(--marca-cian);
}

/* Marca del pedido recién comprado. */
.ls-etiqueta-nuevo {
    display: inline-block;
    margin-left: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    background: var(--marca-verde);
    color: var(--marca-tinta);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: .02em;
    vertical-align: middle;
}

/* --- Datos de la cuenta ---------------------------------------------------
   Cada dato en su línea, con el valor a la vista y un botón para copiarlo.
   En IPTV la dirección no se abre en el navegador: se pega dentro de la
   aplicación, así que tiene que poder leerse y copiarse, no sólo pulsarse. */

.ls-dato {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
}

.ls-dato-rotulo {
    font-weight: 600;
    white-space: nowrap;
}

/* Pedido pagado y todavía sin datos: se dice en una línea tranquila,
   no con una ficha de campos vacíos. */
.ls-dato-preparando {
    display: block;
    max-width: 16rem;
    font-size: 0.8125rem;
    color: var(--ls-muted, #6B7A90);
}

.ls-dato-valor {
    /* Una URL larga tiene que partir, no estirar la columna. */
    overflow-wrap: anywhere;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    -webkit-user-select: all;
    user-select: all;
}

/* Los botones de esta tabla son más pequeños que los del formulario de
   recarga: aquí van varios seguidos en una celda estrecha. */
.ls-dato .ls-copiar {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

.ls-dato .ls-copiar i { font-size: 0.75rem; }

/* Confirmación al copiar: el icono pasa a un tic. El peso 900 es obligatorio:
   el tic sólo existe en la variante sólida de FontAwesome, y con el peso 400
   del icono de copiar saldría la caja de glifo ausente. */
.ls-copiar.is-copiado i::before {
    content: "\f00c";
    font-weight: 600;
}

/* La etiqueta que el comprador le pone a su pedido: dato secundario, en
   gris y bajo el número, sin competir con él. */
.ls-pedido-referencia {
    display: block;
    margin-top: .125rem;
    font-size: var(--t-1, .75rem);
    color: #5B6478;
}

:root[data-theme="dark"] .ls-pedido-referencia { color: #93A2C4; }

.ls-compra-referencia { margin: var(--e-4, 1rem) 0 0; }

.ls-compra-referencia label {
    display: block;
    margin-bottom: .25rem;
    font-size: var(--t-2, .8125rem);
    font-weight: var(--p-medio, 500);
}

.ls-compra-referencia small {
    display: block;
    margin-top: .25rem;
    font-size: var(--t-1, .75rem);
    color: #5B6478;
}

:root[data-theme="dark"] .ls-compra-referencia small { color: #93A2C4; }