/* ==========================================================================
   Estilos propios de DocumentosFiscales

   Se carga DESPUES de style.css, que es el de DreamsPos. Aqui va lo que el
   sistema necesita y la plantilla no trae, para no editar hojas de estilo de
   terceros: un `npm run build` las regenera y se llevaria por delante
   cualquier cambio hecho dentro.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Tarjetas de indicador del panel

   Portadas de la plantilla Nilova (_dashboard_styles.scss:1271). Se trajeron
   SOLO estas reglas, no su hoja entera: Nilova y DreamsPos definen las mismas
   clases con valores distintos y cargar las dos descuadraria el resto de las
   pantallas.

   Los colores NO vienen de Nilova: salen de las variables --primary-rgb,
   --success-rgb… que ya define DreamsPos. Asi las tarjetas quedan en la paleta
   de la aplicacion y siguen al tema si el usuario lo cambia desde Personalizar
   apariencia.

   Diferencia con el original: Nilova mete un <svg> en linea por tarjeta. Aqui
   el icono es un <i class="ti ti-…"> de Tabler, que ya esta cargado en todas
   las pantallas. Cuatro SVG de ~1 KB cada uno en el HTML de una pagina que se
   abre en cada visita no compensan.
   -------------------------------------------------------------------------- */

.tarjeta-indicador {
    z-index: 1;
    overflow: hidden;
    position: relative;
    border-radius: 5px;
    height: 100%;
}

/* El tinte de color. Va en ::before con opacidad baja para que el texto
   encima conserve contraste: un fondo al 7% no compite con nada. */
.tarjeta-indicador::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    opacity: 0.07;
    z-index: -1;
}

/* La textura de ondas del fondo, en escala de grises para que no aporte
   color propio y no pelee con el tinte de la tarjeta. */
.tarjeta-indicador-fondo {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    background-position: left;
    inset-inline-end: -2rem;
    top: 0;
    background-repeat: no-repeat;
    z-index: -1;
    filter: grayscale(1);
}

.tarjeta-indicador .icono-indicador {
    width: 3rem;
    height: 3rem;
    display: flex;
    padding: 0.563rem;
    align-items: center;
    border-radius: 50%;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

.tarjeta-indicador .icono-indicador i {
    font-size: 1.5rem;
    line-height: 1;
}

/* Las variantes. Cada una tinta el fondo y pinta el icono con el mismo color,
   tomandolo de las variables del tema. */
.tarjeta-indicador.primary { background-color: rgba(var(--primary-rgb), 0.021); }
.tarjeta-indicador.primary::before { background-color: rgba(var(--primary-rgb), 1); }
.tarjeta-indicador.primary .icono-indicador { background-color: rgba(var(--primary-rgb), 1); }

.tarjeta-indicador.secondary { background-color: rgba(var(--secondary-rgb), 0.0235); }
.tarjeta-indicador.secondary::before { background-color: rgba(var(--secondary-rgb), 1); }
.tarjeta-indicador.secondary .icono-indicador { background-color: rgba(var(--secondary-rgb), 1); }

.tarjeta-indicador.success { background-color: rgba(var(--success-rgb), 0.0235); }
.tarjeta-indicador.success::before { background-color: rgba(var(--success-rgb), 1); }
.tarjeta-indicador.success .icono-indicador { background-color: rgba(var(--success-rgb), 1); }

.tarjeta-indicador.warning { background-color: rgba(var(--warning-rgb), 0.0235); }
.tarjeta-indicador.warning::before { background-color: rgba(var(--warning-rgb), 1); }
.tarjeta-indicador.warning .icono-indicador { background-color: rgba(var(--warning-rgb), 1); }

.tarjeta-indicador.danger { background-color: rgba(var(--danger-rgb), 0.0235); }
.tarjeta-indicador.danger::before { background-color: rgba(var(--danger-rgb), 1); }
.tarjeta-indicador.danger .icono-indicador { background-color: rgba(var(--danger-rgb), 1); }

.tarjeta-indicador.info { background-color: rgba(var(--info-rgb), 0.0235); }
.tarjeta-indicador.info::before { background-color: rgba(var(--info-rgb), 1); }
.tarjeta-indicador.info .icono-indicador { background-color: rgba(var(--info-rgb), 1); }

/* La tarjeta entera es un enlace: el area de pulsacion es la tarjeta, no solo
   el texto. `position: relative` en el contenedor y stretched-link dentro. */
.tarjeta-indicador a.stretched-link::after {
    border-radius: 5px;
}

/* ===========================================================================
   Las pantallas de acceso: fuera el marcador de posicion
   ===========================================================================

   DreamsPos trae `authentication/login-img.jpg` como fondo de todas ellas, y
   ese archivo NO es una foto: es un rectangulo gris con su propio tamano
   escrito encima. Medido: 97.6% de sus pixeles son #CCCCCC, y los siete JPG
   de esa carpeta -login, registro, recuperar, restablecer, verificacion- son
   byte a byte el MISMO archivo. Lo que se veia al entrar era "1392 x 1026"
   en letras gigantes.

   Se sustituye por un fondo hecho con CSS y no por otra imagen: no se puede
   romper, no pesa nada, no hay que mantener un archivo por pantalla y toma el
   color de la marca de la propia plantilla, asi que si algun dia se cambia el
   tema, esto cambia con el.

   Va sobre las CUATRO variantes porque las cuatro apuntaban al mismo gris.
   =========================================================================== */

.login-wrapper.bg-img,
.login-wrapper.bg-img.register-wrap,
.login-wrapper.bg-img.forgot-pass-wrap,
.login-wrapper.bg-img.reset-pass-wrap,
.login-wrapper.bg-img.email-veri-wrap {
    position: relative;
    background-color: #16232f;
    background-image:
        radial-gradient(55rem 38rem at 78% 16%, rgba(var(--primary-rgb), 0.42), transparent 62%),
        radial-gradient(45rem 45rem at 26% 96%, rgba(var(--primary-rgb), 0.16), transparent 60%),
        linear-gradient(135deg, #16232f 0%, #1e3143 55%, #27415b 100%);
    background-repeat: no-repeat;
    background-size: cover;
}

/*
   En pantalla pequena, SIN fondo.

   La plantilla ya lo hace en su propia media query, pero df.css se carga
   despues y con la misma especificidad: la regla de arriba se la comeria y el
   degradado acabaria debajo del formulario, que es translucido. Se repite el
   mismo punto de corte para que los dos cambien a la vez.
*/
@media (max-width: 991.96px) {
    .login-wrapper.bg-img,
    .login-wrapper.bg-img.register-wrap,
    .login-wrapper.bg-img.forgot-pass-wrap,
    .login-wrapper.bg-img.reset-pass-wrap,
    .login-wrapper.bg-img.email-veri-wrap {
        background-image: none;
        background-color: transparent;
    }
}

/* --------------------------------------------------------------------------
   El panel de marca que ocupa el hueco

   El formulario es el 50% izquierdo; esto es el otro 50%. Antes solo habia
   gris. No es decoracion: quien llega aqui desde un correo de invitacion no
   siempre sabe a que sistema esta entrando.
   -------------------------------------------------------------------------- */

.panel-marca {
    width: 50%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 4rem;
    color: #fff;
}

.panel-marca h2 {
    color: #fff;
    font-weight: 700;
    font-size: 2.25rem;
    margin-bottom: .75rem;
}

.panel-marca p {
    color: rgba(255, 255, 255, .78);
    font-size: 1rem;
    max-width: 34rem;
    margin-bottom: 2rem;
}

.panel-marca ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.panel-marca li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    color: rgba(255, 255, 255, .88);
    margin-bottom: 1rem;
}

.panel-marca li i {
    flex: 0 0 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

/*
   Por debajo de 992px la plantilla ya quita el fondo y el formulario ocupa
   todo el ancho: el panel sobraria y empujaria el formulario fuera de la
   pantalla. Se esconde en el MISMO punto de corte que usa la plantilla, para
   que los dos cambien a la vez.
*/
@media (max-width: 991.96px) {
    .panel-marca {
        display: none;
    }
}


/* --------------------------------------------------------------------------
   Lista de resultados del buscador de productos

   select2 la corta a 200px: cinco productos y medio, y los nombres de un
   catalogo real son largos ("AGROMIL PLUS REACTMAXX 250 mL"). Con cientos de
   productos se pasaba mas tiempo desplazando la lista que leyendola.

   Solo en los dos buscadores de productos -conceptos y mercancias de Carta
   Porte-; los demas desplegables del sistema siguen como los trae la
   plantilla. select2 pone a la lista el id "select2-<id del select>-results".
   -------------------------------------------------------------------------- */

#select2-buscador-producto-results,
#select2-buscador-mercancia-results {
    max-height: 22rem;
}


/* --------------------------------------------------------------------------
   El icono de timbrar

   El sistema lo pide como "ti ti-stamp" (menu, detalle de facturas, notas,
   pagos y nomina, el boton Timbrar y su pregunta), pero la version de Tabler
   que trae la plantilla no tiene ese nombre: el icono salia en blanco en
   todas partes y la pregunta de "Timbrar?" mostraba un circulo vacio.

   Se apunta al dibujo de ti-rubber-stamp (el mismo sello, con otro nombre)
   en vez de cambiar las diez vistas: el dia que se actualice Tabler y traiga
   ti-stamp, esta regla sobra y no rompe nada.
   -------------------------------------------------------------------------- */

.ti-stamp:before {
    content: "\f5ab";
}


/* --------------------------------------------------------------------------
   Menu de acciones de los listados (components/acciones)

   Cada accion lleva su icono y su nombre en una linea. Los POST van en un
   <form> dentro del <li>: el form no debe sumar margen ni el boton verse
   distinto de un enlace. Las destructivas (eliminar, cancelar) van al final
   con text-danger y conservan su color al pasar el raton.
   -------------------------------------------------------------------------- */

.acciones-menu {
    min-width: 13rem;
}

.acciones-menu form {
    margin: 0;
}

.acciones-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
}

.acciones-menu .dropdown-item > i {
    flex: 0 0 1.1rem;
    font-size: 1rem;
    text-align: center;
}

/*
   Enlaces y botones con la misma letra. El menu vive dentro de la tabla, y
   la plantilla le da a ".table tbody tr td a" otro color, tamano y grueso que
   a ".dropdown-item": en el menu de facturas "Ver" o "Descargar PDF" (enlaces)
   salian oscuros y mas grandes, y "Verificar ante el SAT" o "Clonar como
   borrador" (botones) grises y chicos, como si estuvieran deshabilitados. Se
   les da a todos el aspecto de los enlaces de la tabla; el color al pasar el
   raton sigue siendo el de la plantilla. En el tema oscuro igual: ahi la
   plantilla aclara los enlaces y deja los botones en gris.
*/
.acciones-menu .dropdown-item {
    color: #212B36;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

[data-theme=dark] .acciones-menu .dropdown-item {
    color: #D8DFEE;
}

[data-theme=dark] .acciones-menu .dropdown-item:hover,
[data-theme=dark] .acciones-menu .dropdown-item:focus {
    color: #FE9F43;
}

.acciones-menu .dropdown-item.text-danger:hover,
.acciones-menu .dropdown-item.text-danger:focus {
    color: var(--bs-danger) !important;
    background-color: rgba(var(--bs-danger-rgb), .08);
}

.acciones-menu .dropdown-item:disabled,
.acciones-menu .dropdown-item.disabled {
    opacity: .55;
}

/*
   En el telefono la columna de acciones va pegada al borde derecho.

   Los listados estan dentro de .table-responsive y en una pantalla angosta la
   tabla es mas ancha que la pantalla: el boton de los tres puntos -donde
   estan Enviar por correo, PDF, XML...- quedaba al final, fuera de la vista,
   y habia que deslizar la tabla hasta el. Pegado se ve en cada renglon.

   Las celdas ya tienen fondo solido (el de la tabla), asi que las columnas
   que pasan por debajo al deslizar no se transparentan. La sombra marca el
   corte. La celda con el menu abierto sube por encima de las de los
   renglones siguientes, que tambien son sticky y si no taparian el menu.
*/
@media (max-width: 991.98px) {
    .table-responsive td:last-child:has(> .acciones-fila),
    .table-responsive table:has(td:last-child > .acciones-fila) > thead > tr > th:last-child {
        position: sticky;
        right: 0;
        z-index: 1;
    }

    .table-responsive table:has(td:last-child > .acciones-fila) > thead > tr > th:last-child {
        z-index: 2;
    }

    .table-responsive td:last-child:has(> .acciones-fila .show) {
        z-index: 3;
    }

    .table-responsive td:last-child:has(> .acciones-fila)::before,
    .table-responsive table:has(td:last-child > .acciones-fila) > thead > tr > th:last-child::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -8px;
        width: 8px;
        pointer-events: none;
        background: linear-gradient(to left, rgba(0, 0, 0, .08), transparent);
    }
}


/* --------------------------------------------------------------------------
   El <select> que Select2 esconde, dentro de una tabla desplazable

   Select2 deja el <select> original de 1px con position:absolute y sin left,
   asi que se queda donde estaba la celda. En los conceptos de la factura (y de
   la nota de credito, el pago, la nomina...) esa celda esta a la derecha de
   una .table-responsive: el select se posiciona respecto a la tarjeta, no a
   la tabla, la tabla no lo recorta y la PAGINA entera pasaba a medir 781px.
   En el telefono se veia todo alejado y con la cabecera cortada en cuanto
   habia un concepto. Con left:0 se queda en el borde de su contenedor; sigue
   invisible.
   -------------------------------------------------------------------------- */

.select2-hidden-accessible {
    left: 0;
}

/*
   Los botones del encabezado de una pantalla bajan de linea si no caben. El
   detalle de una cotizacion lleva cinco (PDF, Enviar, Editar, Clonar, Volver)
   y en el telefono "Volver" se salia por la derecha.
*/
.page-header .page-btn {
    flex-wrap: wrap;
    max-width: 100%;
}


/* --------------------------------------------------------------------------
   Selector de RFC (layout/partials/selector-rfc)

   Con muchas empresas -el operador entra a todas- la lista pasaba del alto
   de la pantalla y las ultimas quedaban fuera, sin forma de llegar a ellas.
   Se desplaza dentro del menu. El ancho maximo evita que una razon social
   larga lo saque por la derecha en pantallas angostas.
   -------------------------------------------------------------------------- */

.selector-rfc-menu {
    max-height: calc(100vh - 7rem);
    max-width: calc(100vw - 2rem);
    overflow-y: auto;
}


/* --------------------------------------------------------------------------
   Menu del usuario en el telefono (layout/partials/topbar, .mobile-user-menu)

   Ahora lleva tambien la lista para cambiar de empresa. Cabe en una pantalla
   de 360px y, si el usuario tiene muchas empresas, la lista se desplaza
   dentro del menu en vez de empujar "Cerrar sesion" fuera de la pantalla.
   -------------------------------------------------------------------------- */

.mobile-user-menu .menu-movil {
    min-width: 16rem;
    max-width: calc(100vw - 1rem);
    line-height: 1.4;
}

.mobile-user-menu .menu-movil-rfc {
    max-height: 45vh;
    overflow-y: auto;
}

.mobile-user-menu .menu-movil-rfc .dropdown-item {
    white-space: normal;
}