﻿/*
    Capa de usabilidad Progre+
    --------------------------
    Se apoya en la paleta existente (pgs-tokens.css). No redefine colores de
    marca ni tipografías: solo cubre huecos de interacción que la aplicación
    no resolvía.

    Se carga DESPUÉS del resto de hojas para poder corregir reglas heredadas
    que anulan el foco.

    Nota: los estados vacíos de tabla (.row_estilo_sin_resultado) y el
    indicador de carga (#divProceso / #divLoading) ya existen en el proyecto;
    no se duplican aquí.
*/

/* ------------------------------------------------------------------ Foco
   La aplicación anula el contorno de foco en ~70 reglas, lo que deja sin
   referencia visual a quien navega con teclado. :focus-visible solo se
   activa con teclado, así que con el ratón no cambia nada. */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="link"]:focus-visible {
    outline: var(--pgs-foco-grosor) solid var(--pgs-foco) !important;
    outline-offset: 2px !important;
    border-radius: var(--pgs-radio);
}

/* Sobre el azul de marca del login, el azul de foco no contrasta. */
.bg_login a:focus-visible,
.bg_login button:focus-visible,
.bg_login input:focus-visible {
    outline-color: var(--pgs-blanco) !important;
}

/* --------------------------------------------------- Saltar al contenido
   Primer tabulador de la página: evita recorrer todo el menú. */

.pgs-saltar-contenido {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 30002;
    padding: var(--pgs-espacio-2) var(--pgs-espacio-4);
    background: var(--pgs-azul);
    color: var(--pgs-blanco);
    border-radius: 0 0 var(--pgs-radio) 0;
    text-decoration: none;
}

.pgs-saltar-contenido:focus {
    left: 0;
}

/* El destino recibe el foco por programa: no debe mostrar contorno propio. */
#pgs-contenido:focus {
    outline: none;
}

/* --------------------------------------------------------- Interactividad
   Elementos que actúan como botón sin serlo. */

[role="button"] {
    cursor: pointer;
}

[role="button"][aria-disabled="true"],
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    cursor: not-allowed;
    opacity: .6;
}

[aria-busy="true"] {
    cursor: progress;
}

/* ------------------------------------------------------------- Accesible
   Texto para lectores de pantalla, no visible. */

.pgs-solo-lectores {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------- Movimiento
   Respeta la preferencia del sistema de reducir animaciones. */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ------------------------------------------------------------------ Radios
   La aplicación dibuja sus controles con esquina viva, y varias clases
   declaran border-radius: 0 de forma explícita. Se redondean aquí, en un
   único lugar y por token, para que la esquina sea una decisión de diseño
   ajustable y no un valor repetido por toda la hoja.

   Lleva !important porque esta hoja se carga antes que los bundles y hay
   componentes que fijan el radio en cero. Solo afecta a la esquina: no
   cambia caja, tamaño ni posición de ningún elemento.

   Quedan deliberadamente rectos: las bandas a sangre (cabeceras de página,
   subcabeceras, barra azul de descarga en móvil), las tablas y sus filas,
   los fondos de sección y las utilidades de color. Redondear una banda que
   toca ambos bordes de la pantalla deja dos muescas, no una tarjeta.

   Bootstrap y Material Dashboard ya redondean lo suyo (.btn, .card, .alert,
   .modal-content): no se tocan. */

/* --- Campos de formulario --------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea,
.base_input_text_standard,
.input_text_with_watermark,
.input_text_border_none_with_watermark,
.input_text_border_none_with_watermark_and_icon_search,
.input_txt_fecha_list,
.input__txt__fecha,
.input_txt_autocomplete_cliente,
.txt_autocomplete_filter {
    border-radius: var(--pgs-radio) !important;
}

/* --- Botones ----------------------------------------------------------- */
.btn_standard_verde,
.btn_standard_azul,
.btn_standard_gris,
.btn_standard_table_gris,
.input__btn__plomo,
.input__btn__verde,
.input__btn__azul,
.input__btn__filtrar,
.btn--empty,
.btn-link-despacho,
.btnDetalle,
.div__btn__agregarTxt,
.div__retornar__generico,
.div_adelante,
.div_adelante_pagos,
.div_atras,
.div_btnsiguiente,
.div_btnsiguiente_despacho,
.div_btnpedidosrecurrentes,
.div_go_despachos,
.div_imge__whattsap__btn,
.cnt__btnEECC,
.cnt__btnPedidoProgramarCita__cita,
.cnt__btnPedidoProgramarCita__pedido {
    border-radius: var(--pgs-radio) !important;
}

/* --- Desplegables: disparador y lista --------------------------------- */
.dropdown_seleccion_planta,
.dropdown_seleccion_planta_button,
.dropdown_seleccion_filtro_citas,
.dropdown_seleccion_filtro_citas_button,
.dropdown_seleccion_filtro_mant,
.dropdown_seleccion_filtro_mant_button,
.dropdown_seleccion_filtro_sancion_button,
.dropdown_seleccion_filtro_soporte_button,
.dropdown_seleccion_tipo_infraccion,
.dropdown__item,
.dropdown__item__WebMovilMonedaBanco,
.dropdown__pagosDistribuidor,
.dropdown__chk,
.ddl__listTurnoPlata__default,
.ddl__GEhacerpedido__default,
.fAutoComplete-items,
.select__option,
.select-truck__types__type,
.select-truck__types__type_camion,
.pago__moneda__selector__desactivado {
    border-radius: var(--pgs-radio) !important;
}

/* --- Etiquetas de estado y avisos en bloque --------------------------- */
.turno_etiqueta_azul,
.turno_etiqueta_azul_mobile,
.turno_etiqueta_rojo,
.turno_etiqueta_rojo_mobile,
.div_programacion_cita,
.div_cita_programada,
.div_cita_programada_opcion_anulacion,
.box-blue,
.box-gray,
.box-green,
.box-grey,
.box-red,
.box-yellow,
.generico_nota,
.cambiar_clave_nota,
.credito__lineaCredito__nota {
    border-radius: var(--pgs-radio) !important;
}

/* --- Tarjetas y paneles ------------------------------------------------ */
.container-login,
.container-index,
.container-recuperacioncuenta,
.select-truck__wrap,
.select-truck__wrap_pedidos,
.choose-product__wrap,
.resumen-estado-cuenta,
.resumen-estado-cuenta_gestionar,
.resumen-pedidos,
.div__cabecera__resumen,
.div__turnoActual,
.div_card_distribuidor_verde,
.credito__lineaCredito,
.gridContainerList,
.modal-content-confirmacion,
.modal-content-resumen-despacho,
.modal-content-view-foto {
    border-radius: var(--pgs-radio-grande) !important;
}

/* Regularización de ticket emitido. Solo este diálogo. */
#cnt_GestionarTicket .gestionar_ticket {
    width: min(720px, 92vw);
    height: auto;
    max-height: 90vh;
    overflow: auto;
    background: #fff;
    padding: 20px 24px 16px;
}

.reg-ticket__nota {
    margin: 0 0 16px;
    padding: 10px 12px;
    background: #f4f7fb;
    border-left: 3px solid #003386;
    color: #1d3b6e;
    font-size: 13px;
    line-height: 1.4;
}

.reg-ticket__bloque {
    margin-bottom: 18px;
}

.reg-ticket__titulo {
    margin: 0 0 10px;
    color: #003386;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.reg-ticket__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}

.reg-ticket__campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.reg-ticket__campo > span {
    color: #3d4d66;
    font-size: 12px;
}

.reg-ticket__campo--ancho {
    grid-column: 1 / -1;
}

.reg-ticket__fijo,
.reg-ticket__editable {
    width: 100%;
    height: 38px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid #c5cdd8;
    border-radius: 6px;
    background: #fff;
    color: #1a1a1a;
    font-size: 14px;
}

.reg-ticket__fijo {
    background: #f3f5f8;
    color: #243044;
}

.reg-ticket .dropdown {
    background: #fff;
    border: 1px solid #c5cdd8;
    border-radius: 6px;
}

.reg-ticket .dropdown__item {
    justify-content: space-between;
    min-height: 38px;
    padding: 6px 10px;
}

.reg-ticket .dropdown__item__button {
    width: auto;
    text-align: left;
    cursor: pointer;
}

.reg-ticket .dropdown ul {
    max-height: 220px;
    overflow: auto;
    border: 1px solid #c5cdd8;
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(16, 34, 66, 0.12);
}

.reg-ticket .dropdown ul li {
    height: auto;
    min-height: 36px;
    padding: 8px 12px;
    cursor: pointer;
}

.reg-ticket .dropdown ul li:hover {
    background: #f4f7fb;
}

.reg-ticket__acciones {
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
}

@media (max-width: 640px) {
    .reg-ticket__grid {
        grid-template-columns: 1fr;
    }
}
