/*
ESTRUCTURA DE siframe.css
1) ELEMENTOS COMUNES DEL DOM
1.1) FUENTES
1.2) TAGS BÁSICOS
2) GRID/FLEX SYSTEM
3) SIFRAME ICONS
4) LOGIN
1) ELEMENTOS COMUNES DEL DOM
1.1) FUENTES de Fuentes
En la carpeta fonts están todas las variantes que tienen tanto Open Sans como Roboto Condensed. Sin embargo, sólo se incluyen debajo los font-face de las opciones que se van a utilizar en SiFrame
Si se llegara a utilizar un font-weight que no está definido como font-face, el browser igualmente intentará emular ese peso a partir de las opciones disponibles, aunque la calidad puede no ser la misma.
display=swap mejora el rendimiento de carga evitando el “flash of invisible text” (FOIT).
IMPORTANTE: para mPDF es otra milonga. El setup y la documentación están definidos en la clase Spdf()
*/
/* OPEN SANS */
@font-face{font-family:'Open Sans'; src:url('/fonts/OpenSans-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap;}
@font-face{font-family:'Open Sans'; src:url('/fonts/OpenSans-Italic.ttf') format('truetype'); font-weight:400; font-style:italic; font-display:swap;}
@font-face{font-family:'Open Sans'; src:url('/fonts/OpenSans-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap;}
@font-face{font-family:'Open Sans'; src:url('/fonts/OpenSans-MediumItalic.ttf') format('truetype'); font-weight:500; font-style:italic; font-display:swap;}
@font-face{font-family:'Open Sans'; src:url('/fonts/OpenSans-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap;}
@font-face{font-family:'Open Sans'; src:url('/fonts/OpenSans-SemiBoldItalic.ttf') format('truetype'); font-weight:600; font-style:italic; font-display:swap;}
@font-face{font-family:'Open Sans'; src:url('/fonts/OpenSans-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap;}
@font-face{font-family:'Open Sans'; src:url('/fonts/OpenSans-BoldItalic.ttf') format('truetype'); font-weight:700; font-style:italic; font-display:swap;}
/* ROBOTO CONDENSED */
@font-face{font-family:'Roboto Condensed'; src:url('/fonts/RobotoCondensed-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap;}
@font-face{font-family:'Roboto Condensed'; src:url('/fonts/RobotoCondensed-Italic.ttf') format('truetype'); font-weight:400; font-style:italic; font-display:swap;}
@font-face{font-family:'Roboto Condensed'; src:url('/fonts/RobotoCondensed-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap;}
@font-face{font-family:'Roboto Condensed'; src:url('/fonts/RobotoCondensed-MediumItalic.ttf') format('truetype'); font-weight:500; font-style:italic; font-display:swap;}
@font-face{font-family:'Roboto Condensed'; src:url('/fonts/RobotoCondensed-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap;}
@font-face{font-family:'Roboto Condensed'; src:url('/fonts/RobotoCondensed-SemiBoldItalic.ttf') format('truetype'); font-weight:600; font-style:italic; font-display:swap;}
@font-face{font-family:'Roboto Condensed'; src:url('/fonts/RobotoCondensed-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap;}
@font-face{font-family:'Roboto Condensed'; src:url('/fonts/RobotoCondensed-BoldItalic.ttf') format('truetype'); font-weight:700; font-style:italic; font-display:swap;}
/* ATENTI CON LA SEGOE UI: Si uso los archivos que están en la carpeta fonts, no es exactamente la misma que se levanta del SO, así que la dejo apagada por ahora <- Esto seguramente sirve en WAMP nomás */
/*@font-face {
font-family: 'Segoe UI';
src: url(../fonts/segoeui.ttf);
}*/
/* 1.2) TAGS BÁSICOS */
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* Variables de tema inyectadas desde class.App (header_height, menu_barra_sombra_color, hex_color_1) */
:root {
--app-header-height: 50px;
--menu-barra-sombra-color: #D00;
--app-hex-color-1: #CCCCCC;
}
/* Viewport scaffold: flex column, scroll sólo en .app-main */
.app-layout {
flex-direction: column;
height: 100dvh;
overflow: hidden;
}
/* --- Corrección WebKit: evita zoom y autoescalado en iOS --- */
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
/* Opcional: previene reescalado solo en formularios móviles */
@supports (-webkit-touch-callout: none) {
input[type="hidden"] {
-webkit-appearance: none;
}
}
/* TOOLBAR */
.app-header {
align-items: center;
padding: 0.5rem 1rem;
flex-shrink: 0;
height: var(--app-header-height);
z-index: 92;
}
.device_desktop .app-header {
grid-template-columns:
auto /* logo */
auto /* ícono sección */
1fr /* título expandible */
auto /* alerta remote */
auto /* ícono notificaciones */
auto /* logo licencia */
auto /* menú app */
max-content /* menú sistema */
max-content /* menú usuario */
;
}
.device_mobile .app-header {
grid-template-columns:
auto /* logo */
auto /* ícono sección */
1fr /* título expandible */
auto /* alerta remote */
auto /* ícono notificaciones */
auto /* logo licencia */
auto /* sidebar */
;
}
.logo-licencia {
height: 24px;
}
.app-main {
padding: 1rem;
flex: 1;
min-height: 0;
overflow-y: auto;
}
.app-footer {
flex-shrink: 0;
z-index: 91;
background: white;
}
/* Aviso visible en el header cuando la sesión está apuntando a la DB remota de producción */
.alerta-remote {
color: #FCFF00;
font-size: 16px;
font-weight: 700;
padding-right: 50px;
}
/* Barra del footer — wrapper común a versión mobile y desktop */
.app-footer-bar {
display: flex;
justify-content: space-between;
padding: 5px 10px;
background-color: #eee;
border-top: 1px solid #ddd;
font-size: 12px;
color: #666;
}
.app-footer-branding,
.app-footer-info {
flex: 0 0 50%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.app-footer-branding { color: #999; }
.app-footer-info { text-align: right; cursor: help; }
/* Modal genérico del FW (esqueleto en class.Index): garantiza alto mínimo */
.modal-content-tall {
min-height: 310px;
}
/* Cursor Wait */
html.wait, html.wait * { cursor: wait !important; }
/* Body */
body.device_mobile {
font-family: 'Roboto Condensed', sans-serif;
}
body.device_mobile h1 {
font-size: 18px;
}
body.device_mobile h2 {
font-size: 16px;
}
/*
2) GRID/FLEX SYSTEM
=====================================
SiFrame Custom Grid System (v1.0)
=====================================
Descripción:
Este es el sistema de grilla con layout flexible de SiFrame basado en CSS Grid.
Permite definir estructuras de grilla reutilizables con control total sobre:
- Cantidad dinámica de columnas/filas
- Ancho personalizado de columnas
- Posicionamiento horizontal y vertical dentro de cada grid-box
- Alineación horizontal y vertical del contenido dentro de cada celda del grid
- Espaciado interno y externo entre celdas
- Personalización de gaps horizontales y verticales
*/
/* Contenedor Grid */
.grid-box { display: grid; }
.grid-box > * { min-width: 0; }
/* Altura del Contenedor Grid */
.full-height {
height: 100vh; /* 100% del alto visible del navegador */
}
.fill-parent {
height: 100%; /* 100% del contenedor padre */
}
/* Ejes de Grid */
.grid-flow-row { grid-auto-flow: row; }
.grid-flow-column { grid-auto-flow: column; }
/* Espacio entre filas y columnas */
.gap-1 { gap: 0.0625rem; }
.gap-2 { gap: 0.125rem; }
.gap-3 { gap: 0.1875rem; }
.gap-4 { gap: 0.25rem; }
.gap-5 { gap: 0.3125rem; }
.gap-6 { gap: 0.375rem; }
.gap-7 { gap: 0.4375rem; }
.gap-8 { gap: 0.5rem; }
.gap-9 { gap: 0.5625rem; }
.gap-10 { gap: 0.625rem; }
.gap-11 { gap: 0.6875rem; }
.gap-12 { gap: 0.75rem; }
.gap-13 { gap: 0.8125rem; }
.gap-14 { gap: 0.875rem; }
.gap-15 { gap: 0.9375rem; }
.gap-16 { gap: 1rem; }
.gap-17 { gap: 1.0625rem; }
.gap-18 { gap: 1.125rem; }
.gap-19 { gap: 1.1875rem; }
.gap-20 { gap: 1.25rem; }
.gap-21 { gap: 1.3125rem; }
.gap-22 { gap: 1.375rem; }
.gap-23 { gap: 1.4375rem; }
.gap-24 { gap: 1.5rem; }
.gap-25 { gap: 1.5625rem; }
.gap-26 { gap: 1.625rem; }
.gap-27 { gap: 1.6875rem; }
.gap-28 { gap: 1.75rem; }
.gap-29 { gap: 1.8125rem; }
.gap-30 { gap: 1.875rem; }
.gap-31 { gap: 1.9375rem; }
.gap-32 { gap: 2rem; }
/* Espacio entre columnas */
.col-gap-1 { column-gap: 0.0625rem; }
.col-gap-2 { column-gap: 0.125rem; }
.col-gap-3 { column-gap: 0.1875rem; }
.col-gap-4 { column-gap: 0.25rem; }
.col-gap-5 { column-gap: 0.3125rem; }
.col-gap-6 { column-gap: 0.375rem; }
.col-gap-7 { column-gap: 0.4375rem; }
.col-gap-8 { column-gap: 0.5rem; }
.col-gap-9 { column-gap: 0.5625rem; }
.col-gap-10 { column-gap: 0.625rem; }
.col-gap-11 { column-gap: 0.6875rem; }
.col-gap-12 { column-gap: 0.75rem; }
.col-gap-13 { column-gap: 0.8125rem; }
.col-gap-14 { column-gap: 0.875rem; }
.col-gap-15 { column-gap: 0.9375rem; }
.col-gap-16 { column-gap: 1rem; }
.col-gap-17 { column-gap: 1.0625rem; }
.col-gap-18 { column-gap: 1.125rem; }
.col-gap-19 { column-gap: 1.1875rem; }
.col-gap-20 { column-gap: 1.25rem; }
.col-gap-25 { column-gap: 1.5625rem; }
.col-gap-30 { column-gap: 1.875rem; }
/* Espacio entre filas */
.row-gap-1 { row-gap: 0.0625rem; }
.row-gap-2 { row-gap: 0.125rem; }
.row-gap-3 { row-gap: 0.1875rem; }
.row-gap-4 { row-gap: 0.25rem; }
.row-gap-5 { row-gap: 0.3125rem; }
.row-gap-6 { row-gap: 0.375rem; }
.row-gap-7 { row-gap: 0.4375rem; }
.row-gap-8 { row-gap: 0.5rem; }
.row-gap-9 { row-gap: 0.5625rem; }
.row-gap-10 { row-gap: 0.625rem; }
.row-gap-11 { row-gap: 0.6875rem; }
.row-gap-12 { row-gap: 0.75rem; }
.row-gap-13 { row-gap: 0.8125rem; }
.row-gap-14 { row-gap: 0.875rem; }
.row-gap-15 { row-gap: 0.9375rem; }
.row-gap-16 { row-gap: 1rem; }
.row-gap-17 { row-gap: 1.0625rem; }
.row-gap-18 { row-gap: 1.125rem; }
.row-gap-19 { row-gap: 1.1875rem; }
.row-gap-20 { row-gap: 1.25rem; }
.row-gap-25 { row-gap: 1.5625rem; }
.row-gap-30 { row-gap: 1.875rem; }
/* Grid Template para sistemas con porciones del mismo ancho (1fr)*/
/* Estas porciones, a partir del grid-cols-3, luego se pueden redefinir con span-* */
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
.grid-cols-7 { grid-template-columns: repeat(7, 1fr); }
.grid-cols-8 { grid-template-columns: repeat(8, 1fr); }
.grid-cols-9 { grid-template-columns: repeat(9, 1fr); }
.grid-cols-10 { grid-template-columns: repeat(10, 1fr); }
.grid-cols-11 { grid-template-columns: repeat(11, 1fr); }
.grid-cols-12 { grid-template-columns: repeat(12, 1fr); }
.grid-cols-13 { grid-template-columns: repeat(13, 1fr); }
.grid-cols-14 { grid-template-columns: repeat(14, 1fr); }
.grid-cols-15 { grid-template-columns: repeat(15, 1fr); }
.grid-cols-16 { grid-template-columns: repeat(16, 1fr); }
.grid-cols-17 { grid-template-columns: repeat(17, 1fr); }
.grid-cols-18 { grid-template-columns: repeat(18, 1fr); }
.grid-cols-19 { grid-template-columns: repeat(19, 1fr); }
.grid-cols-20 { grid-template-columns: repeat(20, 1fr); }
.grid-cols-21 { grid-template-columns: repeat(21, 1fr); }
.grid-cols-22 { grid-template-columns: repeat(22, 1fr); }
.grid-cols-23 { grid-template-columns: repeat(23, 1fr); }
.grid-cols-24 { grid-template-columns: repeat(24, 1fr); }
.grid-cols-25 { grid-template-columns: repeat(25, 1fr); }
.grid-cols-26 { grid-template-columns: repeat(26, 1fr); }
.grid-cols-27 { grid-template-columns: repeat(27, 1fr); }
.grid-cols-28 { grid-template-columns: repeat(28, 1fr); }
.grid-cols-29 { grid-template-columns: repeat(29, 1fr); }
.grid-cols-30 { grid-template-columns: repeat(30, 1fr); }
.grid-cols-31 { grid-template-columns: repeat(31, 1fr); }
.grid-cols-32 { grid-template-columns: repeat(32, 1fr); }
.grid-cols-33 { grid-template-columns: repeat(33, 1fr); }
.grid-cols-34 { grid-template-columns: repeat(34, 1fr); }
.grid-cols-35 { grid-template-columns: repeat(35, 1fr); }
.grid-cols-36 { grid-template-columns: repeat(36, 1fr); }
.grid-cols-48 { grid-template-columns: repeat(48, 1fr); }
.grid-cols-60 { grid-template-columns: repeat(60, 1fr); }
/* Caso especial de alta granularidad para situaciones especiales - Ojo, max gap-18 */
.grid-cols-100 { grid-template-columns: repeat(100, minmax(0, 1fr)); }
/* Span de 1 a 100 */
.span-1 { grid-column: span 1; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-9 { grid-column: span 9; }
.span-10 { grid-column: span 10; }
.span-11 { grid-column: span 11; }
.span-12 { grid-column: span 12; }
.span-13 { grid-column: span 13; }
.span-14 { grid-column: span 14; }
.span-15 { grid-column: span 15; }
.span-16 { grid-column: span 16; }
.span-17 { grid-column: span 17; }
.span-18 { grid-column: span 18; }
.span-19 { grid-column: span 19; }
.span-20 { grid-column: span 20; }
.span-21 { grid-column: span 21; }
.span-22 { grid-column: span 22; }
.span-23 { grid-column: span 23; }
.span-24 { grid-column: span 24; }
.span-25 { grid-column: span 25; }
.span-26 { grid-column: span 26; }
.span-27 { grid-column: span 27; }
.span-28 { grid-column: span 28; }
.span-29 { grid-column: span 29; }
.span-30 { grid-column: span 30; }
.span-31 { grid-column: span 31; }
.span-32 { grid-column: span 32; }
.span-33 { grid-column: span 33; }
.span-34 { grid-column: span 34; }
.span-35 { grid-column: span 35; }
.span-36 { grid-column: span 36; }
.span-37 { grid-column: span 37; }
.span-38 { grid-column: span 38; }
.span-39 { grid-column: span 39; }
.span-40 { grid-column: span 40; }
.span-41 { grid-column: span 41; }
.span-42 { grid-column: span 42; }
.span-43 { grid-column: span 43; }
.span-44 { grid-column: span 44; }
.span-45 { grid-column: span 45; }
.span-46 { grid-column: span 46; }
.span-47 { grid-column: span 47; }
.span-48 { grid-column: span 48; }
.span-49 { grid-column: span 49; }
.span-50 { grid-column: span 50; }
.span-51 { grid-column: span 51; }
.span-52 { grid-column: span 52; }
.span-53 { grid-column: span 53; }
.span-54 { grid-column: span 54; }
.span-55 { grid-column: span 55; }
.span-56 { grid-column: span 56; }
.span-57 { grid-column: span 57; }
.span-58 { grid-column: span 58; }
.span-59 { grid-column: span 59; }
.span-60 { grid-column: span 60; }
.span-61 { grid-column: span 61; }
.span-62 { grid-column: span 62; }
.span-63 { grid-column: span 63; }
.span-64 { grid-column: span 64; }
.span-65 { grid-column: span 65; }
.span-66 { grid-column: span 66; }
.span-67 { grid-column: span 67; }
.span-68 { grid-column: span 68; }
.span-69 { grid-column: span 69; }
.span-70 { grid-column: span 70; }
.span-71 { grid-column: span 71; }
.span-72 { grid-column: span 72; }
.span-73 { grid-column: span 73; }
.span-74 { grid-column: span 74; }
.span-75 { grid-column: span 75; }
.span-76 { grid-column: span 76; }
.span-77 { grid-column: span 77; }
.span-78 { grid-column: span 78; }
.span-79 { grid-column: span 79; }
.span-80 { grid-column: span 80; }
.span-81 { grid-column: span 81; }
.span-82 { grid-column: span 82; }
.span-83 { grid-column: span 83; }
.span-84 { grid-column: span 84; }
.span-85 { grid-column: span 85; }
.span-86 { grid-column: span 86; }
.span-87 { grid-column: span 87; }
.span-88 { grid-column: span 88; }
.span-89 { grid-column: span 89; }
.span-90 { grid-column: span 90; }
.span-91 { grid-column: span 91; }
.span-92 { grid-column: span 92; }
.span-93 { grid-column: span 93; }
.span-94 { grid-column: span 94; }
.span-95 { grid-column: span 95; }
.span-96 { grid-column: span 96; }
.span-97 { grid-column: span 97; }
.span-98 { grid-column: span 98; }
.span-99 { grid-column: span 99; }
.span-100 { grid-column: span 100; }
/* Columnas automáticas con celdas de igual proporción y expandibles al 100% */
.grid-fit-25 { grid-template-columns: repeat(auto-fit, minmax(25px, 1fr)); }
.grid-fit-50 { grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); }
.grid-fit-100 { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
.grid-fit-110 { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.grid-fit-120 { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.grid-fit-130 { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.grid-fit-140 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.grid-fit-150 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.grid-fit-160 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.grid-fit-170 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.grid-fit-180 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.grid-fit-190 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.grid-fit-200 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid-fit-220 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid-fit-230 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid-fit-250 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid-fit-275 { grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); }
.grid-fit-280 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-fit-300 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-fit-350 { grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); }
.grid-fit-400 { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }
.grid-fit-450 { grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); }
.grid-fit-500 { grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); }
/* Columnas automáticas con celdas que se adaptan al contenido y expandibles al 100% */
/* FIT-AUTO con WRAP (columnas según contenido, se expanden al 100%) */
.grid-fit-auto {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
/* FIT-MAX-CONTENT con WRAP (columnas según contenido, colapsa espacios) */
.grid-fit-max-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, max-content));
}
/* FIT-AUTO-NOWRAP sin WRAP (una sola fila horizontal, scroll si necesario) */
.grid-fit-auto-nowrap {
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
overflow-x: auto;
}
/* Columnas automáticas con celdas de igual proporción NO expandibles */
.grid-fill-25 { grid-template-columns: repeat(auto-fill, minmax(25px, 1fr)); }
.grid-fill-50 { grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); }
.grid-fill-100 { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
.grid-fill-110 { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.grid-fill-120 { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.grid-fill-130 { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.grid-fill-140 { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.grid-fill-150 { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.grid-fill-160 { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.grid-fill-170 { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.grid-fill-180 { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.grid-fill-190 { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.grid-fill-200 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.grid-fill-220 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.grid-fill-230 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.grid-fill-250 { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.grid-fill-275 { grid-template-columns: repeat(auto-fill, minmax(275px, 1fr)); }
.grid-fill-300 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.grid-fill-350 { grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); }
.grid-fill-400 { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); }
.grid-fill-450 { grid-template-columns: repeat(auto-fill, minmax(450px, 1fr)); }
.grid-fill-500 { grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); }
/* Columnas automáticas con celdas que se adaptan al contenido y NO expandibles */
/* FILL-AUTO con WRAP (mantiene espacios aunque no haya elementos) */
.grid-fill-auto {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(0, max-content));
}
/* FILL-MAX-CONTENT con WRAP (mantiene espacios aunque no haya elementos) */
.grid-fill-max-content {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(0, max-content));
}
/* 2. FILL-AUTO-NOWRAP sin WRAP (una sola fila horizontal, deja espacios fantasmas) */
.grid-fill-auto-nowrap {
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
overflow-x: auto;
}
/* Columnas con celdas de ancho adaptativo */
.grid-auto-1a { grid-template-columns: 1fr auto; }
.grid-auto-a1 { grid-template-columns: auto 1fr; }
.grid-auto-aa { grid-template-columns: auto auto; }
.grid-auto-0a { grid-template-columns: minmax(0, 1fr) auto; }
.grid-auto-0000a00 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 1fr); }
.grid-auto-a1a { grid-template-columns: auto 1fr auto; }
.grid-auto-aaa { grid-template-columns: auto auto auto; }
.grid-auto-aaaa { grid-template-columns: auto auto auto auto; }
.grid-auto-aaaaa { grid-template-columns: auto auto auto auto auto; }
.grid-auto-aaaa1 { grid-template-columns: auto auto auto auto 1fr; }
.grid-auto-aaaaaa { grid-template-columns: auto auto auto auto auto auto; }
.grid-auto-aaaaaaa { grid-template-columns: auto auto auto auto auto auto auto; }
.grid-auto-aaaaaaaa { grid-template-columns: auto auto auto auto auto auto auto auto; }
.grid-auto-aaaaaaaaa { grid-template-columns: auto auto auto auto auto auto auto auto auto; }
.grid-auto-aaaaaaaaaa { grid-template-columns: auto auto auto auto auto auto auto auto auto auto; }
/* Posicionamiento */
.height-fit-auto { height: auto; }
.height-fit-content { height: fit-content; }
.width-fit-auto { width: auto; }
.width-fit-content { width: fit-content; }
/* Ancho Mínimo */
.min-w-0 { min-width: 0; }
.min-w-min-content { min-width: min-content; }
.min-w-max-content { min-width: max-content; }
.min-w-fit-content { min-width: fit-content; }
/* Control de ancho de columnas automáticas en grids */
.grid-cols-auto { grid-auto-columns: auto; } /* por defecto */
.grid-cols-min { grid-auto-columns: min-content; } /* compacto */
.grid-cols-max { grid-auto-columns: max-content; } /* expande según contenido */
.grid-cols-fr { grid-auto-columns: 1fr; } /* columnas iguales en ancho */
.grid-cols-minmax { grid-auto-columns: minmax(40px, auto); } /* límite inferior */
.grid-cols-fit300 { grid-auto-columns: fit-content(300px); } /* límite superior */
/* Control de altura de filas automáticas en grids */
.grid-rows-auto { grid-auto-rows: auto; } /* por defecto */
.grid-rows-min { grid-auto-rows: min-content; } /* compacto */
.grid-rows-max { grid-auto-rows: max-content; } /* expande según contenido */
.grid-rows-fr { grid-auto-rows: 1fr; } /* filas iguales en alto */
.grid-rows-50 { grid-auto-rows: 50px; } /* filas fijas */
.grid-rows-100 { grid-auto-rows: 100px; }
.grid-rows-minmax { grid-auto-rows: minmax(40px, auto); } /* límite inferior */
.grid-rows-fit300 { grid-auto-rows: fit-content(300px); } /* límite superior */
/*
Alineación:
En CSS Grid, la alineación se resuelve en tres niveles:
1) Alineación de todo el grid-box dentro de su contenedor padre (justify-content, align-content) aplicada a los grid-box con clases content-*
2) Alineación de todos los items del grid dentro de sus celdas (justify-items, align-items) aplicada a los grid-box con clases items-*
3) Alineación de un item del grid dentro de su celda (justify-self, align-self) aplicada a un grid item con clases self-*
*/
/* Alineación del grid-box en el eje inline (normalmente el eje horizontal de la fila) */
.content-left { justify-content: start; }
.content-center { justify-content: center; }
.content-right { justify-content: end; }
.content-full-w { justify-content: stretch; }
.content-around-w { justify-content: space-around; }
.content-between-w { justify-content: space-between; }
.content-evenly-w { justify-content: space-evenly; }
/* Alineación del grid-box en el eje block (normalmente el eje vertical de la columna) */
.content-top { align-content: start; }
.content-middle { align-content: center; }
.content-bottom { align-content: end; }
.content-full-h { align-content: stretch; }
.content-around-v { align-content: space-around; }
.content-between-v { align-content: space-between; }
.content-evenly-v { align-content: space-evenly; }
/* Alineación combinada horizontal y vertical de todo el grid-box */
.content-around {
align-content: space-around;
justify-content: space-around;
}
.content-between {
align-content: space-between;
justify-content: space-between;
}
.content-evenly {
align-content: space-evenly;
justify-content: space-evenly;
}
/* Alineación horizontal de los items dentro de las celdas del grid */
.items-left { justify-items: start; }
.items-center { justify-items: center; }
.items-right { justify-items: end; }
.items-stretch-w { justify-items: stretch; }
/* Alineación vertical de los items dentro de las celdas del grid */
.items-top { align-items: start; }
.items-middle { align-items: center; }
.items-bottom { align-items: end; }
.items-stretch-h { align-items: stretch; }
.items-baseline { align-items: baseline; }
/* Alineación combinada horizontal y vertical de los items dentro de las celdas del grid */
.items-stretch {
align-items: stretch;
justify-items: stretch;
}
/* Alineación combinada de los items dentro de las celdas del grid */
.items-top-left {
place-items: start;
/* Es lo mismo que:
align-items: start;
justify-items: start;
*/
}
.items-top-center {
place-items: center start;
}
.items-top-right {
place-items: start end;
}
.items-middle-left {
place-items: center start;
}
.items-middle-center,
.items-center {
place-items: center;
}
.items-middle-right {
place-items: center end;
}
.items-bottom-left {
place-items: end start;
}
.items-bottom-center {
place-items: end center;
}
.items-bottom-right {
place-items: end;
}
/* Alineación interna horizontal de los grid items dentro de su celda del grid */
.self-left { justify-self: start; }
.self-center { justify-self: center; }
.self-right { justify-self: end; }
/* Alineación interna vertical de los grid items dentro de su celda del grid */
.self-top { align-self: start; }
.self-middle { align-self: center; }
.self-bottom { align-self: end; }
/* Alineación interna combinada de los grid items dentro de su celda del grid */
.self-top-left {
align-self: start;
justify-self: start;
}
.self-top-center {
align-self: start;
justify-self: center;
}
.self-top-right {
align-self: start;
justify-self: end;
}
.self-middle-left {
align-self: center;
justify-self: start;
}
.self-middle-center {
align-self: center;
justify-self: center;
}
.self-middle-right {
align-self: center;
justify-self: end;
}
.self-bottom-left {
align-self: end;
justify-self: start;
}
.self-bottom-center {
align-self: end;
justify-self: center;
}
.self-bottom-right {
align-self: end;
justify-self: end;
}
/* AJUSTES RESPONSIVE / MOBILE */
/* A menos que se haya definido keep-cols, forzamos los grid-box hijos a una sola columna */
body.device_mobile .grid-box[class*="grid-cols-"]:not(.keep-cols),
body.device_mobile .grid-box[class*="grid-fit-"]:not(.keep-cols),
body.device_mobile .grid-box[class*="grid-fill-"]:not(.keep-cols),
body.device_mobile .grid-box[class*="grid-auto-"]:not(.keep-cols) {
grid-template-columns: 1fr !important;
}
/* Anidamientos: A menos que se haya definido keep-cols, forzamos los grid-box hijos a una sola columna */
body.device_mobile .grid-box .grid-box[class*="grid-cols-"]:not(.keep-cols),
body.device_mobile .grid-box .grid-box[class*="grid-fit-"]:not(.keep-cols),
body.device_mobile .grid-box .grid-box[class*="grid-fill-"]:not(.keep-cols),
body.device_mobile .grid-box .grid-box[class*="grid-auto-"]:not(.keep-cols) {
grid-template-columns: 1fr !important;
}
/* A menos que se haya definido keep-cols, elimino el gap horizontal */
/*body.device_mobile .grid-box[class*="gap-"]:not(.keep-cols) {
column-gap: 0 !important;
}*/
/* Flex Box */
/* Contenedor Flex */
.flex-box { display: flex; }
.flex-box > * { min-width: 0; }
/* Parámetros flex de base */
/* Disposición fila/columna y sentido */
.flex-row { display: flex; flex-direction: row; }
.flex-row-reverse { display: flex; flex-direction: row-reverse; }
.flex-column { display: flex; flex-direction: column; }
.flex-column-reverse { display: flex; flex-direction: column-reverse; }
/* Imágenes dentro de un flex-box */
.flex-box > img {
flex: 0 0 auto; /* No crecer ni encoger */
width: auto; /* Ancho automático */
height: auto; /* Alto automático */
}
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
/* Alineación combinada usando flex */
.flex-top-left {
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
.flex-top-center {
display: flex;
align-items: flex-start;
justify-content: center;
}
.flex-top-right {
display: flex;
align-items: flex-start;
justify-content: flex-end;
}
.flex-middle-left {
display: flex;
align-items: center;
justify-content: flex-start;
}
.flex-middle-center,
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.flex-middle-right {
display: flex;
align-items: center;
justify-content: flex-end;
}
.flex-bottom-left {
display: flex;
align-items: flex-end;
justify-content: flex-start;
}
.flex-bottom-center {
display: flex;
align-items: flex-end;
justify-content: center;
}
.flex-bottom-right {
display: flex;
align-items: flex-end;
justify-content: flex-end;
}
/*
Utilities de FLEX ITEM
Las siguientes clases controlan el comportamiento de cada hijo de un flex container.
Se pueden aplicar a hijos directos de .flex-box o de cualquier elemento con display:flex.
Algunas son redundantes con BS4 (ej. .flex-grow-0); se mantienen del lado de SiFrame
para garantizar independencia + naming uniforme.
*/
/* Flex shorthand: combina grow + shrink + basis en una sola declaración */
.flex-1 { flex: 1 1 0%; } /* crece y ocupa todo el espacio sobrante */
.flex-auto { flex: 1 1 auto; } /* crece pero respeta el tamaño del contenido */
.flex-initial { flex: 0 1 auto; } /* default: no crece, puede encoger */
.flex-none { flex: none; } /* rígido: ni crece ni encoge (0 0 auto) */
/* Grow / shrink granular (sin tocar el resto del shorthand) */
.flex-grow-0 { flex-grow: 0; }
.flex-grow-1 { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-shrink-1 { flex-shrink: 1; }
/* Basis: tamaño inicial del item antes de aplicar grow/shrink */
.flex-basis-auto { flex-basis: auto; }
.flex-basis-0 { flex-basis: 0; }
.flex-basis-25p { flex-basis: 25%; }
.flex-basis-50p { flex-basis: 50%; }
.flex-basis-75p { flex-basis: 75%; }
.flex-basis-100p { flex-basis: 100%; }
/* Order: cambia el orden visual sin alterar el DOM */
.order-first { order: -1; }
.order-last { order: 999; }
.order-0 { order: 0; }
.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
.order-5 { order: 5; }
.order-6 { order: 6; }
/* Alto mínimo (par natural de .min-w-*). min-h-0 es clave para habilitar
scroll interno en flex items: por default tienen min-height:auto, que les
impide encogerse por debajo de su contenido y bloquea el overflow:auto. */
.min-h-0 { min-height: 0; }
.min-h-min-content { min-height: min-content; }
.min-h-max-content { min-height: max-content; }
.min-h-fit-content { min-height: fit-content; }
/* Ajustes a los select bootstrap ajo grid-box en mobile */
body.device_mobile .grid-box .bootstrap-select.form-control,
body.device_mobile .grid-box .bootstrap-select > .dropdown-toggle {
width: 100% !important;
max-width: 100%;
box-sizing: border-box;
}
body.device_mobile .grid-box .input-group > .bootstrap-select.form-control {
display: flex !important;
flex: 1 1 auto !important;
width: auto !important;
max-width: 100% !important;
min-width: 0; /* evita overflow horizontal */
box-sizing: border-box;
}
/*
3) SIFRAME ICONS
Descripción:
Este módulo genera íconos SVG de las librerías Bootstrap Icons, Google Material Symbols y Font Awesome.
- Se llama con Db->icon('icon_name');
- Se puede definir un size determinado con Db->icon('icon_name', 'size');
- Se puede también definir un color determinado con Db->icon('icon_name', 'size', 'color');
- Se puede generar un stack con Db->icon(['icon_base','icon_top']);
- Se pueden incluir opciones adicionales con Db->icon('icon_name', 'size', 'color', $a_options);
*/
/* Estilo base para todos los íconos */
.icon {
display: inline-block;
align-items: center;
vertical-align: middle;
}
.icon > svg {
display: block;
width: 100%;
height: 100%;
}
.icon-top-cell {
position: absolute;
}
/* Ícono superpuesto */
.icon-top-cell > .icon-top {
z-index: 2;
}
/* Outline del ícono superpuesto */
.icon-top-cell > .icon-top-outline {
stroke: white;
stroke-width: 4;
fill: none;
z-index: 1;
}
/* 4) LOGIN */
/* Login Body */
.login_body {
background-color:#1c1c1c;
overflow: hidden; /* crea BFC: evita margin collapsing del grid hijo hacia afuera del body */
}
/* Grids del Login */
.grid-login {
display: grid;
place-items: center;
margin: 30px;
height: calc(100vh - 60px); /* 100vh - (30px top + 30px bottom) */
}
.device_desktop .grid-login {
grid-template-columns: auto auto;
}
.device_mobile .grid-login {
grid-template-columns: auto;
}
.grid-form {
display: grid;
grid-template-rows: auto auto auto;
}
.app-logo {
display: grid;
}
.login_body.device_mobile .app-logo {
margin-bottom: 35px;
}
.login_body.device_desktop .app-logo img {
width: 400px;
}
.login_body.device_mobile .app-logo img {
width: 300px;
}
.grid-versionado {
display: grid;
color: #CECECE;
}
/* Form Login */
.login_form {
background-color: #333;
border: 2px solid #404040;
margin-top: 10px;
margin-bottom: 10px;
border-radius: 10px;
padding-top: 30px;
padding-right: 80px;
padding-bottom: 30px;
padding-left: 80px;
}
.device_desktop .login_form {
min-width: 650px;
max-width: 650px;
}
.device_mobile .login_form {
min-width: 100%;
max-width: 100%;
padding: 0px;
border: 0;
background-color: transparent;
}
/* Bloque de inputs */
.interfase_td_form_container {
color:#777;
font-size:16px;
font-weight:300;
}
.form_header_container img {
width: 36px;
height: 36px;
}
/* Titulos del Login */
body.device_desktop .login_mensaje_sesion { font-size:18px; font-weight:300; color: #e33; margin-bottom:0px; }
body.device_mobile .login_mensaje_sesion { font-size:24px; font-weight:300; color: #e33; margin-bottom:0px; }
body.device_desktop .login_mensaje_inicio { font-size:18px; font-weight:500; color: #eee; margin-bottom:0px; }
body.device_mobile .login_mensaje_inicio { font-size:24px; font-weight:500; color: #eee; margin-bottom:0px; }
body.device_desktop .texto_gris { font-size:16px; }
body.device_mobile .texto_gris { font-size:14px; }
.login_mensaje_sesion_validado { font-size:18px; font-weight:400; color: #0EC000; }
/* Inputs del Login */
.device_mobile .login_form .input-group-md .form-control,
.device_mobile .login_form .input-group-md .input-group-text {
font-size: 18px;
padding: 10px 10px;
}
.div-usuario img,
.div-password img {
width: 14px;
height: 14px;
}
.device_mobile .div-usuario img,
.device_mobile .div-password img {
width: 16px;
height: 16px;
}
.togglePassword{ cursor: pointer; }
.div-password img.toggleImgPass{
height:20px;
width:20px;
}
.device_mobile .div-password img.toggleImgPass{
height: 16px;
width: 16px;
}
/* Links de Login */
.div-links-login {
font-size: 14px;
font-weight: 500;
}
a.link_login,
a.link_login:visited {
color: #999;
text-decoration: none;
text-align: center;
}
a.link_login:hover,
a.link_login:focus {
color: #ccc;
text-decoration: underline;
}
.device_mobile .div-links-login {
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
}
body.device_mobile div.div-links-login a.link_login,
body.device_mobile div.div-links-login a.link_login:visited,
body.device_mobile div.div-links-login a.link_login:focus,
body.device_mobile div.div-links-login a.link_login:hover {
background-color: #A5A5A5;
color: #1c1c1c;
padding: 5px 10px;
border-radius: 4px;
}
/* ESTE NO SE QUE ONDA */
.eliminar { cursor:pointer; }
/* Botones del Login Responsive */
body.login_body.device_mobile input[type="submit"],
body.login_body.device_mobile input[type="button"],
body.login_body.device_mobile input[type="submit"]:active,
body.login_body.device_mobile input[type="button"]:active {
font-size: 20px;
border-radius: 8px;
border: 0;
padding-top: 6px;
padding-right: 12px;
padding-bottom: 6px;
padding-left: 12px;
border-top-right-radius: 8px !important;
border-bottom-right-radius: 8px !important;
}
body.login_body.device_mobile input[value="Cancelar"] {
margin-left: 10px;
}
.login_form input:last-child {
border-top-right-radius: .2rem !important;
border-bottom-right-radius: .2rem !important;
}
/* Footer del Form de Login */
.app_footer_interfase {
#padding-left:10px;
color:#999;
font-size:18px;
font-weight:300;
}
/* 1.1. Overlay Ajax */
#ajax-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1050;
display: none; /* Oculto por defecto */
}
.btn-descargando {
opacity: 0.7;
pointer-events: none;
}
/* 2. Sticky Top Bar */
header.app-header > div.dropdown {
display: inline;
position: static;
line-height: 10px;
padding-top: 0px;
}
.menu_barra_sombra {
flex-shrink: 0;
height: 3px;
background-color: var(--menu-barra-sombra-color);
box-shadow: 0 1px 2px rgba(10,10,10,0.4);
}
/* 2.1. Título de Vista/Página - Texto destacado */
.titulo_pagina {
color: #C5C5C5;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
o-text-overflow: ellipsis;
}
.titulo_pagina_destacado,
.tpd {
font-weight: 600;
color: #ffffff;
/*text-shadow: 0px 0px 12px #FF0000;*/
}
img.img_titulo {
position: absolute;
top:-10px;
width:20px;
}
.menu-app-label { font-size: 14px; }
/* 2.2. Bootstrap Dropdown */
/* 2.2.1. Botón Principal: Identificación del Usuario Logueado */
.usuario_nombre {
font-size: 12px !important;
}
.usuario_tipo {
padding-top: 2px !important;
font-size: 10px !important;
color:#929292;
}
a.link_usuario {
display: block;
margin-left: 25px;
}
a.link_usuario,
a.link_usuario:visited {
color:#BFBFBF !important;
}
a.link_usuario:hover,
a.link_usuario:active {
color:#FFFFFF !important;
text-decoration: none;
text-shadow: 0px 0px 8px #ffffff;
}
a.link_descargar_archivo {
background-image: url(/img/boton_descargar.png);
}
/* 2.2.2. Definiciones del Dropdown */
.dropdown-toggle::after {
display:none;
}
.dropdown-menu {
margin-top: 7px;
background-color: #f1f1f1;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-submenu > a.dropdown-item {
background-image: url(/img/triangulo_izq.png);
background-repeat: no-repeat;
background-size: 5px 8px;
background-position: 6px 15px;
}
.img_menu_item {
vertical-align:middle;
padding-right: 10px;
height: 20px;
}
div.menu_usuario a.dropdown-item {
padding: 9px 16px;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: -100%;
right: 100%;
margin-top: -6px;
margin-right: 0px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
/* Menú principal de usuario: scroll interno si supera el viewport.
overscroll-behavior-y:contain previene que el scroll se propague al body
cuando el menú llega a su tope/fondo.
Nota: menu_usuario y dropdown-menu son clases del mismo elemento — el selector
correcto es div.dropdown-menu.menu_usuario (NO div.menu_usuario > .dropdown-menu). */
div.dropdown-menu.menu_usuario {
max-height: calc(100vh - 80px);
overflow-y: auto;
overflow-x: visible;
overscroll-behavior-y: contain;
}
.dropdown-submenu>a:after {
display: block;
float: left;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-left: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
/* Ajustes Mobile */
.device_mobile .dropdown-divider {
border-top-color: #C4C4C4;
}
/* 2.3. Botonera */
.botonera_container {
/* width: 1140px; */
}
.img_botonera_item {
text-align: center;
vertical-align: middle;
height: 45px;
width: 45px;
}
.botonera_link {
padding-top:15px;
width: 100px;
background-color: #f1f1f1;
border: hidden;
margin: 5px;
text-decoration: none;
color: #6c757d;
}
.botonera_link:hover {
box-shadow: 0px 4px 14px 0px rgba(0,0,0,0.2);
text-decoration: none;
color: #343a40;
}
.botonera_dummy {
padding-top:15px;
width: 100px;
background-color: #f1f1f1;
border: hidden;
margin: 5px;
text-decoration: none;
color: #6c757d;
display: none; /* NOTA DEL 13/11/2025: LA APAGO */
}
.botonera_texto {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 0px;
padding-right: 0px;
}
.botonera_texto p {
font-size: 12px;
text-align: center;
white-space: pre-wrap;
line-height: 16px;
}
.dropdown-item {
padding: 16px 16px;
font-size: 14px;
}
/* * Nota: 23/05/2026: Deprecated. Se reemplazó por div.dropdown-divider y li.dropdown-divider. */
a.separador {
border-top: #C0C0C0 solid 1px;
}
/* 2.4. Mobile Sidebar */
#sidebar {
min-width: 250px;
max-width: 250px;
height: 100vh;
position: fixed;
top: 0;
/* left: 0; <- Para que aparezca desde la izquierda */
right: 0; /* <- Para que aparezca desde la derecha */
z-index: 9999; /* top layer */
background: #D2D2D2; /* Color de fondo de la Sidebar */
color: #000000;
transition: all 0.3s;
overflow-y: auto !important; /* Habilita el scroll vertical */
max-height: 100vh; /* Para que no se desborde de la pantalla */
-webkit-overflow-scrolling: touch; /* Soporte para el desplazamiento táctil en iOS */
}
#sidebar .sidebar-header {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
background: #BABABA; /* Color de fondo del Siderbar Header */
}
#sidebar ul.components {
padding: 0px;
#border-bottom: 1px solid #757575; /* Delimitador Inferior de la Sidebar */
}
#sidebar ul p {
color: #000000;
padding: 10px;
}
/* * Nota: 23/05/2026: Deprecated. Se reemplazó por div.dropdown-divider y li.dropdown-divider. */
#sidebar ul li.separador {
border-top: 1px dashed #9D9D9D; /* Separador de elementos de la Sidebar */
}
#sidebar ul li a {
padding: 10px;
font-size: 14px; /* Tamaño de letra de los elementos de la Sidebar */
display: block;
color: dimgray;
}
#sidebar ul li a:hover {
color: #4A4A4A;
background: #fff;
}
#sidebar ul li.active > a
/* , a[aria-expanded="true"] */ {
color: #000000;
background: #9D9D9D;
}
#sidebar ul li a img {
position: relative;
top: -1px;
}
#dismiss {
width: 30px;
height: 30px;
position: absolute;
/* top right corner of the sidebar */
top: 13px;
right: 9px;
}
.overlay {
top: 0;
left: 0; /* Comienza en el borde izquierdo */
display: none;
position: fixed;
/* full screen */
width: 100vw;
height: 100vh;
/* transparent black */
background: rgba(0, 0, 0, 0.7);
/* middle layer, i.e. appears below the sidebar */
z-index: 998;
opacity: 0;
/* animate the transition */
transition: all 0.5s ease-in-out;
}
.overlay.active {
display: block;
opacity: 1;
}
a[data-toggle="collapse"] {
position: relative;
}
a, a:hover, a:focus {
/*color: inherit; Lo apagué 24/03/2025 */
text-decoration: none;
transition: all 0.3s;
}
#sidebar ul ul a {
font-size: 12px !important; /* Tamaño de letra de los sub elementos de la Sidebar */
padding-left: 30px !important;
background: #D2D2D2;
}
#sidebar ul ul ul a {
font-size: 10px !important; /* Tamaño de letra de los sub sub elementos de la Sidebar */
padding-left: 50px !important;
background: #D2D2D2;
}
#sidebar ul ul ul ul a {
font-size: 8px !important; /* Tamaño de letra de los sub sub elementos de la Sidebar */
padding-left: 70px !important;
background: #D2D2D2;
}
#sidebar ul ul ul ul ul a {
font-size: 6px !important; /* Tamaño de letra de los sub sub elementos de la Sidebar */
padding-left: 90px !important;
background: #D2D2D2;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
@media (max-width: 768px) {
#sidebar {
/* margin-left: -250px; <- Para que aparezca desde la izquierda */
margin-right: -250px; /* <- Para que aparezca desde la derecha */
}
#sidebar.active {
/* margin-left: 0; <- Para que aparezca desde la izquierda */
margin-right: 0; /* <- Para que aparezca desde la derecha */
}
}
a[data-toggle="collapse"] {
position: relative; /* Necesario para posicionar la imagen */
padding-right: 30px; /* Espacio para la imagen */
}
a[data-toggle="collapse"]::after {
content: "";
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%) rotate(90deg); /* << añadimos rotate */
width: 10px;
height: 8px;
background-image: url(/img/fold_down_mobile.png);
background-size: contain;
background-repeat: no-repeat;
pointer-events: none;
transition: transform 0.3s ease; /* << animación suave */
}
a[data-toggle="collapse"].rotate::after {
transform: translateY(-50%) rotate(0deg);
}
/* Contenido */
body.device_mobile div#contenido {
padding-top: 14px;
}
/* Navegador Siframe */
/* El container del nav y el nav se generan en la clase sesión */
.siframe-nav {
}
.navegacion {
font-size:10px;
color:#444;
margin-bottom:12px;
text-transform:uppercase;
}
.navegacion a:link,
.navegacion a:active,
.navegacion a:visited {
color:#666;
border: 1px solid #ddd;
text-decoration: none;
padding-top: 1px;
padding-right: 5px;
padding-bottom: 1px;
padding-left: 5px;
background-color: #f3f3f3;
border-radius:5px;
-webkit-transition: all 0.15s ease-in-out;
}
.navegacion a:hover {
color:#000;
border: 1px solid #aaa;
text-decoration: none;
background-color: #fff;
}
/* Siframe Header */
.siframe-header {
background-color: #f0f0f0;
padding: 15px;
margin-top: 15px;
margin-bottom: 15px;
}
/* Sticky Footer */
.sticky_footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
z-index: 99;
}
/* Textos Negrita */
.txt_bold { font-weight: 500; }
/* Textos Normal */
.txt_normal { font-weight: 400; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
/* Tamaños de Fuente*/
.fs-10 { font-size: 10px; }
.fs-12 { font-size: 12px; }
.fs-14 { font-size: 14px; }
.fs-16 { font-size: 16px; }
.fs-18 { font-size: 18px; }
.fs-20 { font-size: 20px; }
.fs-05rem { font-size: 0.5rem; }
.fs-06rem { font-size: 0.6rem; }
.fs-07rem { font-size: 0.7rem; }
.fs-075rem { font-size: 0.75rem; }
.fs-08rem { font-size: 0.8rem; }
.fs-09rem { font-size: 0.9rem; }
.fs-1rem { font-size: 1rem; }
.fs-11rem { font-size: 1.1rem; }
.fs-12rem { font-size: 1.2rem; }
/* Definición Ellipsis Estándar */
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis; /* Para navegadores Webkit */
-ms-text-overflow: ellipsis; /* Para Internet Explorer */
-o-text-overflow: ellipsis; /* Para Opera */
}
.ellipsis-2-lineas {
display: -webkit-box; /* necesario para truncado multiline */
-webkit-line-clamp: 2; /* cantidad de líneas visibles */
-webkit-box-orient: vertical; /* orientación vertical obligatoria */
overflow: hidden; /* oculta el contenido extra */
text-overflow: ellipsis; /* muestra los “...” */
line-height: 1.4em; /* controla la altura entre líneas */
max-height: calc(1.4em * 2); /* asegura no exceder 2 líneas */
}
.ellipsis-3-lineas {
display: -webkit-box; /* necesario para truncado multiline */
-webkit-line-clamp: 3; /* cantidad de líneas visibles */
-webkit-box-orient: vertical; /* orientación vertical obligatoria */
overflow: hidden; /* oculta el contenido extra */
text-overflow: ellipsis; /* muestra los “...” */
line-height: 1.4em; /* controla la altura entre líneas */
max-height: calc(1.4em * 3); /* asegura no exceder 3 líneas */
}
/* CURSORES */
.cursor-help {
cursor: help;
}
/* BOTONES */
/*
Nota sobre los links y los botones: Las pseudo clases :link y :visited, sólo aplican para elementos .
La pseudo clase :focus permite controlar mejor el comportamiento tanto de botons como links cuando se hace click sobre ellos. La definición de colores es:
Botones en reposo:
Todos:
color: #000;
border: 2px solid #aaa;
background-color: #eee;
Botones presionados:
Estándar (Negro):
color: #000;
border: 2px solid #000;
background-color: #fff;
Click Ok/Aceptar/Enviar (Verde):
color: #050;
border: 2px solid #090;
background-color: #fff;
Click Cancelar (Rojo):
color: #700;
border: 2px solid #c00;
background-color: #fff;
Click Editar (Azul):
color :#005
border: 2px solid #05b;
background-color: #fff;
Click Cerrar (Negro):
color: #000;
border: 2px solid #000;
background-color: #fff;
Click Otros (Naranja):
color: #f60;
border: 2px solid #f93;
background-color: #fff;
Tanto los Input Submit/Button como los Links estilo Botones pueden o no incluir una imagen, la cual se puede definir por css o se puede agregar dinámicamente vía data-img_back. De igual forma, ambos tipos de elementos también pueden definir su color de hover dinámicamente vía data-color, en base a los colores de arriba.
Ver detalles en /demos/input_submit_button_demo.php
*/
/* INPUTS TYPE SUBMIT/BUTTON */
/* Todos los Input tipo Submit/Button */
input[type="submit"],
input[type="button"],
input[type="submit"]:active,
input[type="button"]:active {
font-size: 16px;
border-radius: 4px;
border: 2px solid #aaa;
background-color: #eee;
padding-top: 5px;
padding-right: 9px;
padding-bottom: 5px;
padding-left: 9px;
background-size: 16px 16px;
background-repeat: no-repeat;
background-position: 7px center;
transition: all .15s ease-in-out;
color: #000;
}
/* Input Submit por Defecto*/
input[type="submit"],
input[type="submit"]:active {
padding-left: 28px;
background-image: url(/img/boton_aceptar.png);
background-position-y: 10px;
}
input[type="submit"]:hover,
input[type="submit"]:focus {
cursor: pointer;
color: #050;
border-color: #090;
background-color: #fff;
outline: 0;
}
/* Input Button por Defecto */
input[type="button"]:hover,
input[type="button"]:focus {
cursor: pointer;
color: #000;
border-color: #000;
background-color: #fff;
outline: 0;
}
/* Input Submit/Button value=Aceptar */
input[value="Aceptar"],
input[value="Aceptar"]:active,
input[value="Enviar"],
input[value="Enviar"]:active {
padding-left: 28px;
background-image: url(/img/boton_aceptar.png);
background-position-y: 10px;
}
input[value="Aceptar"]:hover,
input[value="Aceptar"]:focus,
input[value="Enviar"]:hover,
input[value="Enviar"]:focus {
/*cursor:pointer;*/
color: #050;
border-color: #090;
background-color: #fff;
}
/* Input Submit/Button value=Cancelar */
input[value="Cancelar"],
input[value="Cancelar"]:active,
input[value="Eliminar"],
input[value="Eliminar"]:active {
padding-left: 28px;
background-image: url(/img/boton_cancelar.png);
background-position-y: 10px;
}
input[value="Cancelar"]:hover,
input[value="Cancelar"]:focus,
input[value="Cancelar"]:active,
input[value="Eliminar"]:hover,
input[value="Eliminar"]:focus,
input[value="Eliminar"]:active {
/*cursor:pointer;*/
color: #700;
border-color: #c00;
background-color: #fff;
}
input[value="Cancelar"] {
margin-left: 10px;
}
/* Input Submit/Button value=Regresar */
input[value="Regresar"],
input[value="Regresar"]:active {
padding-left: 28px;
background-image: url(/img/boton_deshacer.png);
background-position-y: 10px;
}
input[value="Regresar"]:hover,
input[value="Regresar"]:focus,
input[value="Regresar"]:active {
/*cursor:pointer;*/
color: #000;
border-color: #000;
background-color: #fff;
}
/* Input Submit/Button Disabled */
input[type="submit"]:disabled,
input[type="button"]:disabled {
cursor: not-allowed;
border-color: #bbbbbb;
background-color: #cccccc;
color: #999;
opacity: 0.35;
}
input[disabled=disabled] {
cursor: not-allowed;
border-color: #bbb;
background-color: #ddd;
color: #999;
}
/* INPUTS TYPE SUBMIT/BUTTON RESPONSIVE */
body.device_mobile input[type="submit"],
body.device_mobile input[type="submit"]:active,
body.device_mobile input[value="Aceptar"],
body.device_mobile input[value="Aceptar"]:active,
body.device_mobile input[value="Enviar"],
body.device_mobile input[value="Enviar"]:active,
body.device_mobile input[value="Cancelar"],
body.device_mobile input[value="Cancelar"]:active,
body.device_mobile input[value="Eliminar"],
body.device_mobile input[value="Eliminar"]:active,
body.device_mobile input[value="Regresar"],
body.device_mobile input[value="Regresar"]:active {
# padding-left: 32px;
# background-position-y: 10px;
background-image: none;
padding: 6px 12px;
border: 0;
color: #fff;
background-color: #007bff;
font-size: 15px;
}
body.device_mobile input[value="Cancelar"] {
margin-left: 0px;
}
.check-agregar-otro-registro {
display: inline-block;
}
.device_mobile .check-agregar-otro-registro {
display: inline-block;
margin-left: 20px;
}
.check-agregar-otro-registro input {
margin-left: 20px;
cursor:pointer;
}
.device_mobile .check-agregar-otro-registro input {
margin-left: 0px;
}
.check-agregar-otro-registro label {
font-size: 15px;
cursor:pointer;
}
.device_mobile .check-agregar-otro-registro label {
font-size: 12px;
vertical-align: text-top;
}
/* Cursor Not Allowed en Selects e Inputs */
select:disabled, input:disabled {
cursor: not-allowed;
}
/* LINKS ESTILO BOTONES */
/*
En SiFrame los Links estilo Botones pueden ser:
- Links tipo Form Button: Son elementos que simulan un botón tipo Input Submit/Button de Formulario. Pueden o no tener una imagen.
- Links tipo Form Button con Imagen sin Texto: Idem anterior pero sin texto y con imagen (cudrados)
- Links tipo Form Control (altura similar a los form-control de Bootstrap). Pueden o no tener una Imagen.
- Links tipo Form control con Imagen sin Texto: Idem anterior pero sin texto y con imagen (cuadrados).
- Links de Registros de DataTables: Links cuadrados con imagen
*/
/* Links tipo Form Button */
a.boton,
a.boton:visited {
font-size: 14px;
display: inline-block;
border-radius: 4px;
border: 2px solid #aaa;
background-color: #eee;
text-decoration: none;
padding-top: 8px;
padding-right: 9px;
padding-bottom: 8px;
padding-left: 9px;
background-size: 16px 16px;
background-repeat: no-repeat;
background-position: 7px center;
transition: all .15s ease-in-out;
color: #000;
}
a.boton:hover,
a.boton:focus {
color: #000;
border-color: #000;
background-color: #fff;
cursor: pointer;
outline: 0;
}
a.boton.boton_disabled,
a.boton.boton_disabled:hover {
cursor: not-allowed;
border-color: #bbbbbb;
background-color: #cccccc;
color: #999;
opacity: 0.5;
}
/* Links tipo Form Button con Imagen sin Texto */
a.boton_img,
a.boton_img:visited {
font-size: 14px;
display: inline-block;
height: 41px;
border-radius: 4px;
border: 2px solid #aaa;
background-color: #eee;
text-decoration: none;
padding-top: 8px;
padding-right: 9px;
padding-bottom: 8px;
padding-left: 9px;
background-size: 22px 22px;
background-repeat: no-repeat;
background-position: 7px center;
transition: all .15s ease-in-out;
color: #000;
}
a.boton_img:hover,
a.boton_img:focus {
color: #000;
border-color: #000;
background-color: #fff;
cursor: pointer;
outline: 0;
}
a.boton.boton_disabled,
a.boton.boton_disabled:hover {
cursor: not-allowed;
border-color: #bbbbbb;
background-color: #cccccc;
color: #999;
opacity: 0.5;
}
/* Links tipo Form Control */
a.boton_control,
a.boton_control:visited {
font-size: 14px;
display: inline-block;
border-radius: 4px;
border: 1px solid #aaa;
background-color: #eee;
text-decoration: none;
padding-top: 3px;
padding-right: 5px;
padding-bottom: 4px;
padding-left: 5px;
background-size: 13px 13px;
background-repeat: no-repeat;
background-position: 4px 50%;
transition: all .15s ease-in-out;
color: #666;
}
a.boton_control:hover,
a.boton_control:focus {
color: #000;
border-color: #000;
background-color: #fff;
cursor: pointer;
outline: 0;
}
a.boton_control.boton_control_disabled,
a.boton_control.boton_control_disabled:hover {
cursor: not-allowed;
border-color: #bbbbbb;
background-color: #cccccc;
color: #999;
opacity: 0.5;
}
/* Links tipo Form control sin Texto (sólo Imagen) | Registros de DataTables */
a.boton_control_img,
a.boton_control_img:visited {
display: inline-block;
height: 31px;
border-radius: 4px;
border: 1px solid #aaa;
background-color: #eee;
text-decoration: none;
padding-top: 3px;
padding-right: 6px;
padding-bottom: 4px;
padding-left: 6px;
background-size: 19px 19px;
background-repeat: no-repeat;
background-position: 4px 48%;
transition: all .15s ease-in-out;
color: #666;
}
a.boton_control_img:hover,
a.boton_control_img:focus {
color: #000;
border-color: #000;
background-color: #fff;
cursor: pointer;
outline: 0;
}
a.boton_control_img.boton_control_img_disabled,
a.boton_control_img.boton_control_img_disabled:hover {
cursor: not-allowed;
border-color: #bbbbbb;
background-color: #cccccc;
color: #999;
opacity: 0.5;
}
/* Links de Registros de DataTables */
a.boton_dt,
a.boton_dt:active,
a.boton_dt:visited {
font-size:16px;
display:inline-block;
border-radius: 4px;
border: 1px solid #aaa;
background-color: #e9e9e9;
text-decoration:none;
width:25px;
height: 25px;
background-size:16px 16px;
background-repeat:no-repeat;
background-position: center center;
transition: all .15s ease-in-out;
color: #000;
}
a.boton_dt:hover,
a.boton_dt:focus {
border-color: #000;
background-color: #fff;
outline: 0;
}
a.a_la_casa:active { pointer-events: none; }
a.boton_dt_mini,
a.boton_dt_mini:active,
a.boton_dt_mini:visited {
font-size:12px;
display:inline-block;
border-radius: 3px;
border: 1px solid #aaa;
background-color: #e9e9e9;
text-decoration:none;
width:20px;
height: 20px;
background-size:13px 13px;
background-repeat:no-repeat;
background-position: center center;
transition: all .15s ease-in-out;
color: #000;
}
a.boton_dt_mini:hover,
a.boton_dt_mini:focus {
border-color: #000;
background-color: #fff;
outline: 0;
}
/* Links de Registros de Datatables - Versión con imagen y texto */
a.boton_txt_dt,
a.boton_txt_dt:active,
a.boton_txt_dt:visited {
font-size:16px;
display:inline-block;
border-radius: 4px;
border: 1px solid #aaa;
background-color: #e9e9e9;
text-decoration:none;
padding-left: 21px;
padding-right: 5px;
/*width:25px;*/
/*height: 25px;*/
background-size:16px 16px;
background-repeat:no-repeat;
background-position: 5px 48%;
/*background-position: center center;*/
transition: all .15s ease-in-out;
color: #000;
}
a.boton_txt_dt:hover,
a.boton_txt_dt:focus {
border-color: #000;
background-color: #fff;
outline: 0;
}
/* Clases para el Hover Color de Botones y Links que definen su color mediante data-color */
.boton_negro {
color: #000 !important;
border-color: #000 !important;
}
.boton_verde {
color: #050 !important;
border-color: #090 !important;
}
.boton_rojo {
color: #700 !important;
border-color: #c00 !important;
}
.boton_azul {
color: #005 !important;
border-color: #05b !important;
}
.boton_naranja {
color: #f60 !important;
border-color: #f93 !important;
}
/* Botones de Paneles */
a.boton_panel, a.link_panel {
font-family: 'Roboto Condensed', sans-serif;
font-weight: normal;
font-size: 12px;
display: inline-block;
border-radius: 4px;
border: 2px solid #bbb;
background-color: #f5f5f5;
text-decoration: none;
padding-top: 4px;
padding-right: 4px;
padding-bottom: 4px;
padding-left: 24px;
background-size: 13px 13px;
background-repeat: no-repeat;
background-position: 6px 48%;
transition: all .15s ease-in-out;
color: #666;
}
a.boton_panel:hover, a.boton_panel:focus { color: #000; border: 2px solid #666; background-color: #fff; }
a.link_panel:hover, a.link_panel:focus { color: #000; border: 2px solid #05b; background-color: #fff; }
a.link_panel_eliminar:hover, a.link_panel_eliminar:focus { color: #990000; border: 2px solid #cc0000; background-color: #fff; }
/* FORMULARIOS Y CONTROLES */
input {
border: 1px solid #ced4da;
}
.device_mobile .form-group-md label {
margin-bottom: 0;
border-bottom: none;
border-left: 1px solid #ddd;
border-top: 1px solid #ddd;
border-right: 1px solid #ddd;
border-radius: 0 !important;
border-top-left-radius: 5px !important;
border-top-right-radius: 5px !important;
padding-left: 6px;
padding-right: 6px;
font-size: 14px;
background-color: #f9f9f9;
}
/*.label_requerido {
font-weight: 500;
}*/
.form_subtitulos {
font-size: 20px;
padding-top: 25px;
}
.label_requerido:before {
color:red;
/*font-weight: 500;*/
content: "*";
padding-right:1px;
}
.no-border {
border: none;
}
input[type="moneda"] {
text-align: right;
}
.align_right {
text-align: right;
}
/* Inputs tipo Hora */
.input_hora, .input_hora:hover, .input_hora:focus {
/* background-color:transparent;
*/ background-image:url(/img/hora_flechas.png);
background-repeat:no-repeat;
background-size:11px;
background-position: 98% 50%;
}
/* Placeholders */
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: #B5B5B5 !important;
opacity: 1 !important; /* Firefox */
}
/* Slider/Carrousel */
.slider-wrapper {
position: relative;
}
.slider-container {
overflow: hidden;
}
.slider-track {
display: flex;
transition: transform 0.4s ease;
cursor: grab;
}
.slider-track.dragging {
cursor: grabbing;
}
.slider-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 18px;
cursor: pointer;
z-index: 2;
}
.slider-arrow-left {
left: 0px;
}
.slider-arrow-right {
right: 0px;
}
.slider-dots {
display: flex;
justify-content: center;
gap: 6px;
margin-top: 5px;
}
.slider-dots .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #bbb;
cursor: pointer;
}
.slider-dots .dot.active {
background-color: #007bff;
}
/* Clases de Scroll Horizontal */
.scroll-x {
min-width: 0;
overflow-x: auto;
white-space: nowrap;
}
/* PERSONALIZACIÓN DEL BOOTSTRAP */
/* SiFrame Grid System */
@import url(/css/siframe-gris-system.css);
/* Grid Personalizado */
/* Nota del 29/07/2025: Como ahora creamos el SiFrame Grid System, esto que funcionaba en conjunto con
las definiciones w-* y w-*p ya no tienen mayor utilidad.
Se mantienen parque seguramente la funcionalidad anterior aún está en uso en algunos escenarios */
.w-row { display: flex; }
.w-row > div[class^="w-"] { flex-grow: 1; }
/* === Anchos en píxeles (w-10p a w-600p) === */
.w-5p { width: 5px !important; }
.w-10p { width: 10px !important; }
.w-15p { width: 15px !important; }
.w-20p { width: 20px !important; }
.w-25p { width: 25px !important; }
.w-30p { width: 30px !important; }
.w-35p { width: 35px !important; }
.w-40p { width: 40px !important; }
.w-45p { width: 45px !important; }
.w-50p { width: 50px !important; }
.w-55p { width: 55px !important; }
.w-60p { width: 60px !important; }
.w-65p { width: 65px !important; }
.w-70p { width: 70px !important; }
.w-75p { width: 75px !important; }
.w-80p { width: 80px !important; }
.w-85p { width: 85px !important; }
.w-90p { width: 90px !important; }
.w-95p { width: 95px !important; }
.w-100p { width: 100px !important; }
.w-105p { width: 105px !important; }
.w-110p { width: 110px !important; }
.w-115p { width: 115px !important; }
.w-120p { width: 120px !important; }
.w-125p { width: 125px !important; }
.w-130p { width: 130px !important; }
.w-135p { width: 135px !important; }
.w-140p { width: 140px !important; }
.w-145p { width: 145px !important; }
.w-150p { width: 150px !important; }
.w-155p { width: 155px !important; }
.w-160p { width: 160px !important; }
.w-165p { width: 165px !important; }
.w-170p { width: 170px !important; }
.w-175p { width: 175px !important; }
.w-180p { width: 180px !important; }
.w-185p { width: 185px !important; }
.w-190p { width: 190px !important; }
.w-195p { width: 195px !important; }
.w-200p { width: 200px !important; }
.w-205p { width: 205px !important; }
.w-210p { width: 210px !important; }
.w-215p { width: 215px !important; }
.w-220p { width: 220px !important; }
.w-225p { width: 225px !important; }
.w-230p { width: 230px !important; }
.w-235p { width: 235px !important; }
.w-240p { width: 240px !important; }
.w-245p { width: 245px !important; }
.w-250p { width: 250px !important; }
.w-255p { width: 255px !important; }
.w-260p { width: 260px !important; }
.w-265p { width: 265px !important; }
.w-270p { width: 270px !important; }
.w-275p { width: 275px !important; }
.w-280p { width: 280px !important; }
.w-285p { width: 285px !important; }
.w-290p { width: 290px !important; }
.w-295p { width: 295px !important; }
.w-300p { width: 300px !important; }
.w-305p { width: 305px !important; }
.w-310p { width: 310px !important; }
.w-315p { width: 315px !important; }
.w-320p { width: 320px !important; }
.w-325p { width: 325px !important; }
.w-330p { width: 330px !important; }
.w-335p { width: 335px !important; }
.w-340p { width: 340px !important; }
.w-345p { width: 345px !important; }
.w-350p { width: 350px !important; }
.w-355p { width: 355px !important; }
.w-360p { width: 360px !important; }
.w-365p { width: 365px !important; }
.w-370p { width: 370px !important; }
.w-375p { width: 375px !important; }
.w-380p { width: 380px !important; }
.w-385p { width: 385px !important; }
.w-390p { width: 390px !important; }
.w-395p { width: 395px !important; }
.w-400p { width: 400px !important; }
.w-405p { width: 405px !important; }
.w-410p { width: 410px !important; }
.w-415p { width: 415px !important; }
.w-420p { width: 420px !important; }
.w-425p { width: 425px !important; }
.w-430p { width: 430px !important; }
.w-435p { width: 435px !important; }
.w-440p { width: 440px !important; }
.w-445p { width: 445px !important; }
.w-450p { width: 450px !important; }
.w-455p { width: 455px !important; }
.w-460p { width: 460px !important; }
.w-465p { width: 465px !important; }
.w-470p { width: 470px !important; }
.w-475p { width: 475px !important; }
.w-480p { width: 480px !important; }
.w-485p { width: 485px !important; }
.w-490p { width: 490px !important; }
.w-495p { width: 495px !important; }
.w-500p { width: 500px !important; }
.w-505p { width: 505px !important; }
.w-510p { width: 510px !important; }
.w-515p { width: 515px !important; }
.w-520p { width: 520px !important; }
.w-525p { width: 525px !important; }
.w-530p { width: 530px !important; }
.w-535p { width: 535px !important; }
.w-540p { width: 540px !important; }
.w-545p { width: 545px !important; }
.w-550p { width: 550px !important; }
.w-555p { width: 555px !important; }
.w-560p { width: 560px !important; }
.w-565p { width: 565px !important; }
.w-570p { width: 570px !important; }
.w-575p { width: 575px !important; }
.w-580p { width: 580px !important; }
.w-585p { width: 585px !important; }
.w-590p { width: 590px !important; }
.w-595p { width: 595px !important; }
.w-600p { width: 600px !important; }
/* === Anchos en porcentaje (w-10 a w-100) === */
.w-1 { width:1% !important; }
.w-2 { width:2% !important; }
.w-3 { width:3% !important; }
.w-4 { width:4% !important; }
.w-5 { width:5% !important; }
.w-6 { width:6% !important; }
.w-7 { width:7% !important; }
.w-8 { width:8% !important; }
.w-9 { width:9% !important; }
.w-10 { width:10% !important; }
.w-11 { width:11% !important; }
.w-12 { width:12% !important; }
.w-13 { width:13% !important; }
.w-14 { width:14% !important; }
.w-15 { width:15% !important; }
.w-16 { width:16% !important; }
.w-17 { width:17% !important; }
.w-18 { width:18% !important; }
.w-19 { width:19% !important; }
.w-20 { width:20% !important; }
.w-21 { width:21% !important; }
.w-22 { width:22% !important; }
.w-23 { width:23% !important; }
.w-24 { width:24% !important; }
.w-25 { width:25% !important; }
.w-26 { width:26% !important; }
.w-27 { width:27% !important; }
.w-28 { width:28% !important; }
.w-29 { width:29% !important; }
.w-30 { width:30% !important; }
.w-31 { width:31% !important; }
.w-32 { width:32% !important; }
.w-33 { width:33% !important; }
.w-34 { width:34% !important; }
.w-35 { width:35% !important; }
.w-36 { width:36% !important; }
.w-37 { width:37% !important; }
.w-38 { width:38% !important; }
.w-39 { width:39% !important; }
.w-40 { width:40% !important; }
.w-41 { width:41% !important; }
.w-42 { width:42% !important; }
.w-43 { width:43% !important; }
.w-44 { width:44% !important; }
.w-45 { width:45% !important; }
.w-46 { width:46% !important; }
.w-47 { width:47% !important; }
.w-48 { width:48% !important; }
.w-49 { width:49% !important; }
.w-50 { width:50% !important; }
.w-51 { width:51% !important; }
.w-52 { width:52% !important; }
.w-53 { width:53% !important; }
.w-54 { width:54% !important; }
.w-55 { width:55% !important; }
.w-56 { width:56% !important; }
.w-57 { width:57% !important; }
.w-58 { width:58% !important; }
.w-59 { width:59% !important; }
.w-60 { width:60% !important; }
.w-61 { width:61% !important; }
.w-62 { width:62% !important; }
.w-63 { width:63% !important; }
.w-64 { width:64% !important; }
.w-65 { width:65% !important; }
.w-66 { width:66% !important; }
.w-67 { width:67% !important; }
.w-68 { width:68% !important; }
.w-69 { width:69% !important; }
.w-70 { width:70% !important; }
.w-71 { width:71% !important; }
.w-72 { width:72% !important; }
.w-73 { width:73% !important; }
.w-74 { width:74% !important; }
.w-75 { width:75% !important; }
.w-76 { width:76% !important; }
.w-77 { width:77% !important; }
.w-78 { width:78% !important; }
.w-79 { width:79% !important; }
.w-80 { width:80% !important; }
.w-81 { width:81% !important; }
.w-82 { width:82% !important; }
.w-83 { width:83% !important; }
.w-84 { width:84% !important; }
.w-85 { width:85% !important; }
.w-86 { width:86% !important; }
.w-87 { width:87% !important; }
.w-88 { width:88% !important; }
.w-89 { width:89% !important; }
.w-90 { width:90% !important; }
.w-91 { width:91% !important; }
.w-92 { width:92% !important; }
.w-93 { width:93% !important; }
.w-94 { width:94% !important; }
.w-95 { width:95% !important; }
.w-96 { width:96% !important; }
.w-97 { width:97% !important; }
.w-98 { width:98% !important; }
.w-99 { width:99% !important; }
.w-100 { width:100% !important; }
/* Forms Avanzados */
form.form-avanzado div.contenedor-encabezado .form-row {
margin-bottom: -8px;
}
form.form-avanzado div.row-encabezado {
padding: 8px;
margin-left: 0px;
margin-right: 0px;
border: 1px solid #ced4da;
background-color: #e9ecef;
font-size: 14px;
font-weight: 500;
}
form.form-avanzado div.contenedor-cuerpo {
padding-left: 0px;
padding-right: 0px;
}
form.form-avanzado div.row-concepto {
padding: 8px;
padding-bottom: 2px;
margin-left: 0px;
margin-right: 0px;
border: 1px solid #ced4da;
border-top: none;
background-color: #F7F7F7;
}
form.form-avanzado .custom-switch-sm {
padding-left: 0px;
}
form.form-avanzado div.row-total {
padding: 8px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 10px;
border: 1px solid #ced4da;
border-top: none;
background-color: #F7F7F7;
}
form.form-avanzado div.contenedor-footer {
margin-bottom: 10px;
}
form.form-avanzado div.form-row .label-textarea {
align-items: baseline;
}
form.form-avanzado a.boton-eliminar {
background-image: url(/img/boton_eliminar.png);
padding-left: 21px;
}
form.form-avanzado a.boton-eliminar:hover {
color: #700 !important;
border-color: #c00 !important;
}
form.form-avanzado a.boton-agregar-concepto {
background-image: url(/img/boton_agregar.png);
padding-left: 21px;
}
form.form-avanzado a.boton-agregar-concepto:hover {
color: #050 !important;
border-color: #090 !important;
}
/* Forms Avanzados Responsive */
body.device_mobile form.form-avanzado div.contenedor-encabezado .form-row {
margin-bottom: 0px;
}
body.device_mobile .form-group,
body.device_mobile .form-row .col,
body.device_mobile .form-row .col-auto,
body.device_mobile .form-row .col-1,
body.device_mobile .form-row .col-2,
body.device_mobile .form-row .col-3,
body.device_mobile .form-row .col-4,
body.device_mobile .form-row .col-5,
body.device_mobile .form-row .col-6 {
flex-basis: 100%;
margin-bottom: 0.5rem;
}
body.device_mobile .col-1,
body.device_mobile .col-2,
body.device_mobile .col-3,
body.device_mobile .col-4,
body.device_mobile .col-5,
body.device_mobile .col-6 {
max-width: 100%;
}
/* Forms con CSS Grid (referencia: App::vista_form_css_grid) */
form.form-css-grid .contenedor-encabezado {
margin-bottom: 10px;
align-items: end;
}
form.form-css-grid .grilla-header {
padding: 8px;
border: 1px solid #ced4da;
background-color: #e9ecef;
font-size: 14px;
font-weight: 500;
align-items: center;
}
form.form-css-grid .grilla-fila {
padding: 8px;
border: 1px solid #ced4da;
border-top: none;
background-color: #F7F7F7;
align-items: center;
}
form.form-css-grid .grilla-total {
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ced4da;
border-top: none;
background-color: #F7F7F7;
align-items: center;
}
/* NOTA DEL 14/11/2025: LO APAGO */
/*body.device_mobile div.input-group {
flex-wrap: wrap;
}*/
/* Botones SiFrame */
.btn-siframe {
border: 1px solid #ced4da;
background-color: #e9ecef;
}
.btn-siframe:hover {
background-color: #d9d9d9;
}
.btn-xs {
padding: .1rem .4rem;
font-size: .7rem;
line-height: 1.5;
border-radius: .2rem;
}
/* Botones Bootstrap en Mobile color Primary */
.device_mobile .btn {
background-color: #007bff;
border-color: #007bff;
color: #fff;
}
/* Le había apagado el background-color a los bootstrap-select en Mobile, pero lo vuelvo a poner porque se me pintan de azul los controles de select */
/* 10/12/2025: El background-color transparente hace que no se vean bien los bootstrap-select. Lo ajusto para que sea blanco */
.bootstrap-select .btn {
background-color: #fff;
border-color: #ced4da;
color: #495057;
}
/* Alineación de Texto */
.align-left { text-align: left !important; }
.align-center { text-align: center !important; }
.align-right { text-align: right !important; }
/* Alineación del texto en labels de los Bootstrap input-groups */
.label_align_right { justify-content: flex-end; }
/* Ajusta el tamaño de los bootstrap-select a sm */
div.input-group-sm button {
padding: .25rem .5rem;
font-size: .875rem;
line-height: 1.5;
border-radius: .2rem;
}
/* Mantiene los input-group de los bootstrap-select en la misma linea */
div.input-group {
flex-wrap: nowrap;
}
/* ELementos append en los Forms CRUD */
.input-group-append.append-crud button {
background-color: #e9ecef;
border: 1px solid #ced4da;
}
.input-group-append.append-crud button:hover {
background-color: #F5F8FB;
border: 1px solid #ced4da;
}
/* Defino un ellipsis a los span dentro de los append-crud */
.input-group-append.append-crud span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
/* PERSONALIZACIÓN DE LOS form-control PARA MOBILE */
.device_mobile .input-group-lg .form-control,
.device_mobile .input-group-lg .input-group-text {
font-size: 2rem;
padding: 2rem 1rem;
}
/* PERSONALIZACIÓN DE LOS input-group-xs Y LOS form-row-xs */
div.form-row-xs {
line-height: normal;
}
div.form-group-xs {
margin-bottom: 12px;
}
div.form-row-xs label.input-group-text,
div.form-row-xs span.input-group-text {
font-size: 0.7rem !important;
padding: 0.0rem 0.3rem !important;
line-height: 1 !important;
height: auto !important;
}
div.input-group-xs button,
div.input-group-xs select,
div.input-group-xs label.input-group-text,
div.input-group-xs label.input-group-text:after,
div.input-group-xs span.input-group-text,
div.input-group-xs input.form-control,
div.input-group-xs textarea.form-control {
padding: 0.25rem 0.4rem !important;
font-size: 0.7rem !important;
/*line-height: 1 !important;*/
border-radius: .2rem;
height: auto !important;
}
/* Definición para botones que funcionan solos sin un input o select al lado */
div.input-group-xs > button {
height: 28px !important;
padding: 0.25rem 0.6rem !important;
}
div.input-group-xs label.input-group-text {
align-items: center !important;
}
div.input-group-textarea label.input-group-text {
align-items: baseline !important;
}
div.input-group-xs div.form-control {
height: auto !important;
}
div.input-group-xs div.form-control button.dropdown-toggle {
height: 28px !important;
}
div.input-group-xs div.form-control button[data-id="mes_dt_detalle"] {
border-bottom-right-radius: .2rem !important;
border-top-right-radius: .2rem !important;
}
div.form-group-xs small {
font-size: 0.7rem !important;
}
/* BS Popovers */
.popover-sm {
font-size: 0.7rem;
max-width: 250px;
}
.popover-sm .popover-header {
font-size: 0.8rem;
}
.popover-xs {
font-size: 0.6rem;
max-width: 250px;
}
.popover-xs .popover-header {
font-size: 0.7rem;
}
/* Adjust image inside the button */
.google-maps-button-icon {
max-width: 1.25rem; /* Ensure it fits within button height */
max-height: 1.25rem; /* Ensure it matches the default input-group-sm height */
object-fit: contain; /* Maintain image aspect ratio */
}
/* Ensure the append button fits perfectly */
.toggle-google-maps-button {
display: flex; /* Flexbox for centering the image */
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
width: auto; /* Allow natural width based on content */
}
/* Bootstrap Modals */
.modal-dialog {
color: #212529;
}
.modal-body {
padding: 25px;
}
.modal-body .modal-title {
font-weight: 500;
font-size: 14pt;
color:#000;
}
div.modal-body .modal-title-red {
font-weight: 500;
font-size: 14pt;
color:#700;
}
.modal-body .modal-subtitle {
font-size: 12pt;
color:#333;
margin-bottom: 15px;
}
.modal-body .modal-text {
font-size: 11pt;
color:#555;
margin-top: 10px;
}
div.modal-footer .boton_cancelar_modal {
background-image: url(/img/boton_cancelar.png);
padding-left: 28px;
}
div.modal-footer .boton_confirmar_modal {
background-image: url(/img/boton_aceptar.png);
padding-left: 28px;
}
div.modal-footer .boton_cerrar_modal {
background-image: url(/img/boton_cancelar.png);
padding-left: 28px;
}
.copiar-al-clipboard {
cursor: pointer;
}
/* FORMS RESPONSIVE */
/*
body.device_mobile .input-group-prepend {
min-width: auto; /* Allow labels to shrink *//*
}
*/
/* CUSTOM SWITCHES */
/*
Los custom switches se presentan con tamaño sm o xs en las siguientes formas:
1) Dentro de un form contenido en un div.form-group con label o span:
2) Dentro de un form o un filtro contenido en un div.form-row con label o span:
2) Dentro de un form o un filtro contenido en un div.form-row sin label o span:
- Esta opción requiere:
- d-flex: display flex para ocupar todo el alto de la fila
- align-items-center: para centrar verticalmente en switch en el medio
3) De forma independiente sin label:
*/
/* AJUSTES GENERALES */
/* CHECKBOXES */
.checkbox-grande {
transform: scale(1.5); /* Aumenta el tamaño en un 50% */
-webkit-transform: scale(1.5); /* Safari/Chrome */
margin-right: 5px; /* opcional, ajusta alineación */
}
/* Contenedor de los switches cuando están dentro de un input-group */
.input-group .custom-switch-label-sino {
background-color: #F6F6F6;
border: 1px solid #ced4da;
padding-left: 1px;
padding-right: 1px;
border-top-right-radius: .2rem;
border-bottom-right-radius: .2rem;
}
/* Input-Group Divs de Controles tipo Custom Switch 07/04/2023: ESTO LO APAGUÉ PORQUE MEPA QUE NO AFECTA MAS */
/*.label_custom_check {
height: 31px; /* aseguro que el alto sea de 31px - Los custom switchs le incrementan el alto */
/*}*/
/* AJUSTES PARA EL TAMAÑO SM */
/* Ajustes de posición y tamaño a los interruptores SM */
.custom-switch-sm .custom-switch-input + .custom-switch-btn:after,
.custom-switch-sm .custom-switch-input + .custom-switch-btn:before {
width: 23px;
height: 23px;
}
.custom-switch-sm .custom-switch-input + .custom-switch-btn:after {
left: 0px;
top: -1px;
}
.custom-switch-sm .custom-switch-input:checked + .custom-switch-btn:after {
left: 31px;
}
/* SWITCHES */
div.custom-switch-sm label.custom-switch-btn {
height: 27px !important;
top: 1px !important;
}
div.custom-switch-sm label.custom-switch-btn:after {
top: -2px;
}
/* Ajusto la altura a los custom switch sm para que queden alineados verticalmente al label */
div.custom-switch-label-sino.custom-switch-sm {
height: 31px;
}
/* Ajustes para el tamaño XS */
/* Ajusto la altura a los custom switch xs para que queden alineados verticalmente al label */
div.custom-switch-xs {
height: 27px;
}
div.custom-switch-xs label.custom-switch-btn,
div.custom-switch-xs label.custom-switch-btn:after {
top: 3px;
}
div.custom-switch-xs label.custom-switch-btn {
top: 1px;
}
/* corrección necesaria en bs4.2 */
div.custom-switch-xs {
padding-left: 0px;
}
/* Custom Switches dentro de form-group-xs */
div.form-group-xs .label_custom_check {
height: 27px; /* aseguro que el alto sea de 31px - Los custom switchs le incrementan el alto */
}
.custom-switch-xs .custom-switch-input + .custom-switch-btn:after {
left: 0px;
top: 0px;
}
/* AJUSTES PARA EL TAMAÑO XXS */
/* Ajustes de posición y tamaño al switch container */
.custom-switch.custom-switch-xxs {
padding-left: 0px;
height: 22px;
}
/* Dimensiones del switch */
.custom-switch.custom-switch-xxs .custom-switch-input + .custom-switch-btn {
height: 22px;
width: 38px;
}
/* Tamaño del círculo y posición horizontal cuando está desactivado */
.custom-switch.custom-switch-xxs .custom-switch-input + .custom-switch-btn:after {
left: 0px;
width: 14px;
height: 14px;
}
/* Posición horizontal del círculo cuando está activado */
.custom-switch.custom-switch-xxs .custom-switch-input:checked + .custom-switch-btn:after {
left: 17px;
}
/* Posición y tamaño del NO. La posición se controla con x y. El tamaño con font-size */
.custom-switch-xxs.custom-switch-label-sino .custom-switch-input + .custom-switch-btn {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='18'%3E%3Ctext x='20' y='15' font-size='10px' font-family='Arial' fill='%23fff'%3ENo%3C/text%3E%3C/svg%3E");
}
/* Posición y tamaño del SI. La posición se controla con x y. El tamaño con font-size */
.custom-switch-xxs.custom-switch-label-sino .custom-switch-input:checked + .custom-switch-btn {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='18'%3E%3Ctext x='7' y='15' font-size='10px' font-family='Arial' fill='%23fff'%3ESi%3C/text%3E%3C/svg%3E");
}
/* BOOTSTRAP INPUT GROUPS XS */
/* Personalización de los form-row-xs */
/*
div.form-row-xs {
line-height: normal;
}
div.form-row-xs label.input-group-text,
div.form-row-xs span.input-group-text {
font-size: 0.7rem !important;
padding: 0.0rem 0.3rem !important;
line-height: 1 !important;
height: auto !important;
}
div.input-group-xs button,
div.input-group-xs input.form-control {
padding: .25rem .5rem;
font-size: .875rem;
line-height: 1.5;
border-radius: .2rem;
}
div.input-group-xs div.form-control {
height: auto !important;
}
div.input-group-xs div.form-control button.dropdown-toggle {
height: 28px !important;
}
div.input-group-xs div.form-control button[data-id="mes_dt_detalle"] {
border-bottom-right-radius: .2rem !important;
border-top-right-radius: .2rem !important;
}
*/
/* ajusto los span "a" en los rangos_de fecha para que no redondee los bordes */
span.span_interno {
border-radius: 0px !important;
}
div.form-row-xs div.input-group-append {
font-size: 0.7rem !important;
line-height: 1 !important;
height: auto !important;
}
div.form-row-xs button {
font-size: 0.7rem !important;
}
div.form-row-xs input.form-control,
div.form-row-xs button.clear_button {
height: 26px !important;
font-size: 0.7rem !important;
line-height: 1 !important;
height: auto !important;
}
div.form-row-xs div.input-group-prepend {
line-height: normal !important;
}
div.form-row-xs a.dropdown-item {
font-size: 11px;
}
/* Personalización de los form-control xs */
.form-control-xs {
height: calc(1.5rem + 2px);
padding: 0.2rem 0.3rem !important;
font-size: 0.7rem;
line-height: 1.5;
border-radius: .2rem;
}
div.form-control-xs button,
div.form-control-xs select,
div.form-control-xs label.input-group-text,
div.form-control-xs label.input-group-text:after,
div.form-control-xs span.input-group-text,
div.form-control-xs input.form-control,
div.form-control-xs textarea.form-control {
padding: 0.25rem 0.4rem !important;
font-size: 0.7rem !important;
line-height: 1.5;
}
.bootstrap-select.form-control-xs {
padding: 0 !important;
top: -2px;
}
/* Modifica el estilo de los bootstrap-select */
button.dropdown-toggle {
background-color: #fff;
border:1px solid #ced4da;
color:#495057 !important;
}
/* Modifico la altura de los selects cuando el tamaño es xs */
div.input-group-xs button.dropdown-toggle {
height: 26.8px !important; /* 👈 altura exacta */
line-height: 1.4 !important;
padding-top: 5px !important;
padding-bottom: 5px !important;
}
/* Asegura que se muestre el caret */
button.dropdown-toggle::after {
display:inline-block;
}
/* Ajusto la posición del caret de los select cuando el tamaño es xs */
div.input-group-xs button.dropdown-toggle::after {
right: 10px;
}
div.dropdown-menu a {
padding: 8px;
}
/* Textareas */
textarea.form-control {
height: 75px !important;
}
textarea.form-control.detalles-log {
height: 300px !important;
}
/* Input-Group Labels */
.input-group-text {
font-weight: 500;
}
/* Bootstrap Autocomplete */
.bs-ac-scroll {
max-height: 250px; /* se ajustará dinámicamente */
overflow-y: auto !important;
}
.bs-ac-scroll::-webkit-scrollbar {
width: 12px;
}
.bs-ac-scroll::-webkit-scrollbar-thumb {
background: #bbb;
border-radius: 8px;
}
/* Bootstrap Input-Groups Disabled */
/* Input-Groups tipo Selectpickers */
button.dropdown-toggle:disabled,
button.dropdown-toggle.disabled {
background-color: #EBEBEB;
border-color: #ced4da !important;
opacity: .65;
cursor: not-allowed;
}
/* Input-Groups tipo Selectpickers - En Forms DETALLE y Cuando haya definido manualmente en el select la clase readonly_fondo_blanco: */
.form-detalle button.dropdown-toggle:disabled,
.form-detalle button.dropdown-toggle.disabled,
div.readonly_fondo_blanco button.dropdown-toggle.disabled{
background-color: #ffffff;
color: #495057;
border-color: #ced4da !important;
opacity: 1;
cursor: not-allowed;
}
input.form-control[readonly] {
background-color: #fff !important;
}
.readonly_fondo_blanco {
background-color: #fff !important;
}
/* FIX INICIO ancho dinámico para bootstrap-select en entorno mobile */
.input-group.input-group-xs {
display: flex;
flex-wrap: nowrap;
align-items: stretch;
}
.input-group.input-group-xs > .input-group-prepend {
flex: 0 0 auto;
}
.input-group.input-group-xs > .bootstrap-select {
flex: 1 1 0;
min-width: 0;
display: block !important;
}
.input-group.input-group-xs > .bootstrap-select > .dropdown-toggle {
width: 100% !important;
box-sizing: border-box !important;
}
/* FIX FIN ancho dinámico para bootstrap-select en entorno mobile */
/* NOTA DEL 18/11/2025: *** INICIO FIX *** PARA QUE LOS SELECTPICKERS NO SE SALGAN DEL PANTALLA EN MOBILE */
/* Limita la anchura del menú desplegable */
.device_mobile .bootstrap-select .dropdown-menu {
max-width: 100vw !important;
width: 100% !important;
}
/* Asegura que el contenedor también se ajuste */
.device_mobile .bootstrap-select {
max-width: 100% !important;
width: 100% !important;
}
/* El botón visible debe adaptarse a mobile */
.device_mobile .bootstrap-select .dropdown-toggle {
max-width: 100% !important;
width: 100% !important;
white-space: normal !important; /* Evita que el texto extienda el botón */
}
/* *** FIN FIX *** */
/* Input-groups tipo file */
/* Con máscara */
.custom-file-input ~ .custom-file-label::after {
content: "Seleccionar...";
cursor:pointer;
}
.custom-file-input,
.custom-file-input::after {
z-index: 0;
}
.custom-file-label-sm,
.custom-file-label-sm:after {
font-size: 0.875rem;
height: auto;
line-height: 1.1rem;
}
.custom-file-sm {
height: 31px;
}
/* Estándar */
input[type="file"].form-control {
cursor: pointer;
line-height: normal;
}
/* AJUSTES BOOTSTRAP INPUT GROUPS XS EN FILTROS DE DATATABLES */
.div_filtros .form-row-xs .input-group-text,
.div_filtros .form-row-xs .dropdown-toggle {
height: 26px !important;
}
/* Link "Mostrar/Ocultar Filtros" — flota arriba a la derecha del bloque de filtros.
Posicionamiento contenido en el wrapper local (no en el viewport) →
no overflowea cuando la ventana se achica. Hidden por defecto y se revela
en :hover del wrapper para no competir con el breadcrumb. */
.dt_filtros_wrapper {
position: relative;
}
.dt_filtros_wrapper > .control_div_filtros {
position: absolute;
top: -23px;
right: 12px;
color: #B8B8B8;
font-size: 12px;
opacity: 0;
visibility: hidden;
/* En fade-out: la opacidad espera 300ms antes de empezar (margen para que el
usuario llegue al link), y luego baja en 150ms. Visibility snap a hidden
a los 450ms — mantiene el link clickable durante todo el fade-out. */
transition: opacity 0.15s ease 0.3s, visibility 0s linear 0.45s;
z-index: 5;
}
/* Desktop: revelar en :hover (fade-in inmediato), o siempre visible cuando los
filtros están ocultos */
.dt_filtros_wrapper:hover > .control_div_filtros,
.dt_filtros_wrapper > .control_div_filtros.fold_up {
opacity: 1;
visibility: visible;
transition: opacity 0.15s ease 0s, visibility 0s linear 0s;
}
/* Mobile: siempre visible (no hay hover) */
body.device_mobile .dt_filtros_wrapper > .control_div_filtros {
opacity: 1;
visibility: visible;
top: -30px;
right: 16px;
}
/* Personalización de los form-control-xxs */
.bootstrap-select.form-control.form-control-xxs,
.bootstrap-select.form-control.form-control-xxs .dropdown-toggle {
padding: 0;
height: 22px;
line-height: 20px;
}
.bootstrap-select.form-control.form-control-xxs .dropdown-toggle .filter-option {
font-size: 11px;
padding: 1px 5px;
}
.bootstrap-select.form-control.form-control-xxs .dropdown-item {
font-size: 11px;
}
.bootstrap-select.form-control.form-control-xxs div.dropdown-menu a {
padding: 4px 8px;
}
/* DATATABLES */
table.dataTable {
font-size: 14px;
margin-top: 0px !important;
}
table.dataTable thead {
position: sticky;
top: 14px;
}
table.dataTable thead td {
background-color: #DFDFDF;
padding-top: 7px !important;
padding-bottom: 7px !important;
}
.dataTable tbody tr:hover {
background-color: #DBDBDB !important;
}
table.dataTable thead .sorting {
background-image: url(/js/images/sort_both_dark.png) !important;
}
.paginate_button { padding: 5px; }
body.device_mobile .dataTable { font-size: 12px !important; }
/* DATATABLE CONTROLES */
body.device_mobile div.dataTables_info,
body.device_mobile div.dataTables_paginate,
body.device_mobile div.dataTables_length {
float: left;
margin-left: 0px;
}
/* DATATABLE FILTROS */
/* Ajustes para mostrar los filtros en el entorno Mobile */
body.device_mobile .div_filtros .form-row .col {
flex: 1 1 100%; /* Full width for each column */
max-width: 100%; /* Ensure no horizontal overflow */
padding-bottom: 5px;
}
body.device_mobile .div_filtros .form-row .col-auto {
flex: 1 1 100%; /* Same for auto-sized columns */
max-width: 100%;
}
/* DATATABLE RESPONSIVE */
/* Padding para que el expand control no se superponga con los datos de la columna */
body.device_mobile table.dataTable tbody td:first-child {
padding-left: 25px !important;
}
/* Alto de las filas de datos */
table.dataTable tbody td { height: 25px; }
/* Selector de cantidad de registros */
div.dataTables_length { width:auto; }
div.dataTables_length select {
margin: 0px 5px;
font-size: 100%;
}
/* Alineación de celdas */
.dt_td_left { text-align:left; }
.dt_td_center { text-align:center; }
.dt_td_right { text-align:right; }
.dt_campo_entidad { font-weight: 700; }
.dt_td_subtotales { font-size: 12pt; font-weight: 500; border-top: 1px solid black !important; height: 24px; }
/* Márgenes de Celdas */
table.dataTable tbody th,
table.dataTable tbody td {
padding: 8px 18px !important;
}
table.dataTable.compact tbody th,
table.dataTable.compact tbody td {
padding: 4px !important;
}
/* Ajusto el cursor a help cuando el span de una td tiene clase ellipsis y title no está vacçio */
table.dataTable td span.ellipsis[title]:not([title=""]) {
cursor: help;
}
/* Invisibilizar Boton Opciones */
.invisible_Y { visibility: hidden; }
/* Prevenir wrap vertical de los botones de la columna Opciones del DataTable.
La columna tiene una restricción semántica (los botones son una grilla
alineada verticalmente entre filas vía placeholders invisible_Y) que
autoWidth de DataTables no conoce y puede romper en viewports angostos. */
.td_opciones_content {
white-space: nowrap;
}
/* Ajuste 1: Alineación derecha de celdas (para sortear el control de sort) */
table.dataTable.compact tbody td.dt_td_right,
table.dataTable.compact tbody td.text-right {
padding-right: 18px !important;
}
/* Ajuste 2: Alineación derecha de celdas con clase no_sort (que no tienen el control de sort en el theader) */
table.dataTable.compact tbody td.dt_td_right.no_sort,
table.dataTable.compact tbody td.text-right.no_sort {
padding-right: 4px !important;
}
/* Funcionalidad Row Details */
table.dataTable tbody td.details-control {
background: url(/img/details_open.png) no-repeat center center;
cursor: pointer;
width: 20px;
}
td.details-control.details {
background: url(/img/details_close.png) no-repeat center center !important;
}
/* DATATABLES CON ROLLUP */
table.dt_rollup tr.rollup_row td {
font-weight: 500;
background-color: #F7F7F7 !important;
border-top: 1px solid #C0C0C0 !important;
border-bottom: 2px solid #C0C0C0 !important;
}
/* Botones Imprimir, Subir (nivel) y Exportar Datos: Formato General - Botones tipo ico + texto */
a.dt_boton_imprimir, a.dt_boton_imprimir:active, a.dt_boton_imprimir:visited,
a.dt_boton_subir, a.dt_boton_subir:active, a.dt_boton_subir:visited,
a.dt_boton_exportar_datos, a.dt_boton_exportar_datos:active, a.dt_boton_exportar_datos:visited {
font-size:12px;
float:right;
border-radius: 4px;
border: 1px solid #aaa;
background-color: #eee;
text-decoration:none;
margin-left: 12px;
padding-top: 4px;
padding-right: 9px;
padding-bottom: 4px;
padding-left: 28px;
background-size:14px 14px;
background-repeat:no-repeat;
background-position: 7px center;
transition: all .15s ease-in-out;
color: #000;
background-image:url(/img/imprimir.png);
}
/* Botones Imprimir, Subir (nivel) y Exportar Datos: Version Mobile */
a.mobile.dt_boton_imprimir, a.mobile.dt_boton_imprimir:active, a.mobile.dt_boton_imprimir:visited,
a.mobile.dt_boton_subir, a.mobile.dt_boton_subir:active, a.mobile.dt_boton_subir:visited,
a.mobile.dt_boton_exportar_datos, a.mobile.dt_boton_exportar_datos:active, a.mobile.dt_boton_exportar_datos:visited {
height: 28px;
margin-left: 6px;
padding-right: 0px;
}
/* Boton Exportar Datos: Formato Hover y Focus */
a.dt_boton_exportar_datos:hover, a.dt_boton_exportar_datos:focus {
color:#070;
border:1px solid #050;
background-color: #fff;
}
/* Boton Subir (nivel): Formato Particular */
a.dt_boton_subir, a.dt_boton_subir:active, a.dt_boton_subir:visited {
float:left;
margin-right: 12px;
margin-left: 0px;
background-image:url(/img/boton_subir.png);
}
/* Boton Exportar Datos: Formato Particular */
a.dt_boton_exportar_datos, a.dt_boton_exportar_datos:active, a.dt_boton_exportar_datos:visited {
background-image:url(/img/boton_excel.png);
}
/* Boton Vista Árbol (parent/child): mismo formato base que Imprimir/Exportar, alineado a izquierda como Subir */
a.dt_boton_arbol, a.dt_boton_arbol:active, a.dt_boton_arbol:visited {
font-size:12px;
float:left;
border-radius: 4px;
border: 1px solid #aaa;
background-color: #eee;
text-decoration:none;
margin-right: 12px;
margin-left: 0px;
padding-top: 4px;
padding-right: 9px;
padding-bottom: 4px;
padding-left: 28px;
background-size:14px 14px;
background-repeat:no-repeat;
background-position: 7px center;
transition: all .15s ease-in-out;
color: #000;
background-image:url(/img/arbol.png);
}
a.dt_boton_arbol:hover, a.dt_boton_arbol:focus {
color:#005;
border:1px solid #05b;
background-color: #fff;
}
/* Botones Ajax Source, Omitir DT Links, DT Reset: Formato General - Botones tipo ico */
a.dt_boton_ajax_source, a.dt_boton_ajax_source:active, a.dt_boton_ajax_source:visited,
a.dt_boton_omitir_dt_links, a.dt_boton_omitir_dt_links:active, a.dt_boton_omitir_dt_links:visited,
a.dt_boton_ssreset, a.dt_boton_ssreset:active, a.dt_boton_ssreset:visited {
font-size:14px;
float:right;
border-radius: 4px;
border: 1px solid #aaa;
background-color: #eee;
text-decoration:none;
margin-left: 12px;
padding-top: 4px;
padding-right: 9px;
padding-bottom: 4px;
padding-left: 28px;
background-size:14px 14px;
background-repeat:no-repeat;
background-position: center;
transition: all .15s ease-in-out;
color: #000;
height: 28px;
background-image:url(/img/soporte.png);
}
/* Botones Ajax Source, Omitir DT Links, DT Reset: Version Mobile */
a.mobile.dt_boton_ajax_source, a.mobile.dt_boton_ajax_source:active, a.mobile.dt_boton_ajax_source:visited,
a.mobile.dt_boton_omitir_dt_links, a.mobile.dt_boton_omitir_dt_links:active, a.mobile.dt_boton_omitir_dt_links:visited,
a.mobile.dt_boton_ssreset, a.mobile.dt_boton_ssreset:active, a.mobile.dt_boton_ssreset:visited {
margin-left: 6px;
padding-right: 0px;
}
a.dt_boton_omitir_dt_links, a.dt_boton_omitir_dt_links:active, a.dt_boton_omitir_dt_links:visited {
background-image:url(/img/ver_gris.png);
}
a.dt_boton_ssreset, a.dt_boton_ssreset:active, a.dt_boton_ssreset:visited {
margin-left: 8px;
padding-right: 5px;
background-image:url(/img/restart.png);
}
/* Botones Imprimir, Subir (nivel), Exportar Datos, Ajax Source, DT Links y DT Reset: Formato Hover y Focus */
a.dt_boton_imprimir:hover, a.dt_boton_imprimir:focus,
a.dt_boton_subir:hover, a.dt_boton_subir:focus,
a.dt_boton_exportar_datos:hover, a.dt_boton_exportar_datos:focus,
a.dt_boton_ajax_source:hover, a.dt_boton_ajax_source:focus,
a.dt_boton_ssreset:hover, a.dt_boton_ssreset:focus,
a.dt_boton_omitir_dt_links:hover, a.dt_boton_omitir_dt_links:focus {
color:#005;
border:1px solid #05b;
background-color: #fff;
}
/* Links tradicionales versión Mobile */
.device_mobile a.text-link {
display: inline-block;
background-color: #83C4EA;
color: #000 !important;
padding: 10px;
border-radius: 4px;
text-align: center !important;
text-decoration: none;
}
/* Total de Registros */
.registros_total {
font-size: 14px;
padding-top: 1px;
padding-right: 4px;
padding-bottom: 1px;
padding-left: 4px;
border-radius:4px;
border-style: dotted;
border-width: 1px;
border-color: red;
color:#a00;
font-weight: 500;
}
.registros_ninguno { color:#b00; vertical-align: middle; }
.texto_verde { color:#090; }
.texto_rojo { color:#c00; }
.texto_gris { color:#aaa; }
.texto_oscuro { color:#888; }
.texto_oscuro_2 { color:#777; }
.dataTable_controls {
font-size: 12px;
background-color: #fff;
position: sticky;
top: -16px;
display: init-block;
height: 100%; /* Ensure full height for alignment */
margin-bottom: 5px;
}
/* Formato base para los indicadores de las datatables */
div.contenedor-indicadores div.indicador {
font-size: 12px;
background-color: #EDEDED;
padding: 4px 8px;
margin-right: 10px;
width: fit-content;
border: 1px solid #B4B4B4;
border-radius: 3px;
box-shadow: 1px 1px 3px #C9C9C9;
}
div.contenedor-indicadores div.indicador i {
font-size: 18px;
margin-right: 8px;
}
div.contenedor-indicadores span.label {
line-height: 12px;
margin-right: 8px;
}
div.contenedor-indicadores span.valor {
font-weight: 700;
font-size: 14px;
}
div.contenedor-indicadores div.indicador img {
margin-right: 6px;
}
/* Paneles de totales en Datatables */
div.contenedor-totales {
display: flex;
margin-top: 10px;
}
div.panel_dt_totales {
background-size: 30px;
background-repeat:no-repeat;
background-position: center 30px;
border: 1px solid #B4B4B4;
border-radius: 3px;
box-shadow: 1px 1px 3px #c9c9c9;
background-color: #EDEDED;
padding: 6px 10px;
font-size: 14px;
margin-right: 10px;
cursor: help;
}
div.panel_dt_totales img {
width: 18px;
margin-right: 6px;
}
div.panel_dt_totales span.label {
line-height: 14px;
margin-right: 8px;
}
div.panel_dt_totales span.valor {
font-weight: 700;
font-size: 16px;
}
/* VISTAS IMPORTAR */
ul.lista_vista_importar li {
padding: 0px 0px;
}
table.tabla_vista_previa_importar {
border-collapse: collapse;
border-radius: 25px;
font-size: 12px;
}
table.tabla_vista_previa_importar,
table.tabla_vista_previa_importar th,
table.tabla_vista_previa_importar td {
border: 1px solid black;
}
table.tabla_vista_previa_importar th {
background-color:#333333;
color: #fff;
font-weight: 400;
text-align: left;
}
table.tabla_vista_previa_importar tr:nth-child(even) {
background-color:#E7E7E7;
}
table.tabla_vista_previa_importar th,
table.tabla_vista_previa_importar td {
padding: 8px;
}
table.tabla_vista_previa_importar td {
font-weight: 600;
}
table.tabla_vista_previa_importar td.celda_nok {
background-color: #FFADAE;
}
table.tabla_vista_previa_importar tr.fila_ok {
color:#008318;
}
table.tabla_vista_previa_importar tr.fila_nok {
color:#AB0002;
}
/* VISTAS IMPRIMIR DT */
.titulo_reporte {
font-size: 28px;
font-weight: 600;
text-transform: uppercase;
}
.subtitulo_reporte {
font-size: 18px;
line-height: 22px;
font-weight: 600;
text-transform: uppercase;
}
.emision_reporte {
}
.pie_pagina {
text-align: center;
font-size: 14px;
z-index: 100;
}
.div_filtros_dt_imprimir {
font-size: 12px;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
background-color: #F1F1F1;
border-top: 1px solid #D5D5D5;
border-bottom: 1px solid #D5D5D5;
}
.filtro_imprimir_label {
font-weight: 600;
}
.filtro_imprimir_value {
}
.filtro_imprimir_label_ano {
padding-left: 15px;
font-weight: 600;
}
.filtro_imprimir_label_mes {
padding-left: 15px;
font-weight: 600;
}
.total_filas_label {
font-size: 12px;
}
.total_filas_value {
font-size: 12px;
font-weight: 600;
}
.dataTable_controls_dt_imprimir {
}
/* ─────────────────────────────────────────────────────────────────────────
Patrón parent/child auto-referencial (EntidadCrud::$parent_child_fk)
───────────────────────────────────────────────────────────────────────── */
/* (Botón "Subir" usa el estilo a.dt_boton_subir definido más arriba — boton_subir.png) */
/* Vista árbol — render recursivo (vista_arbol default de EntidadCrud) */
.parent-child-tree-wrap {
padding: 12px 0;
}
/* Toolbar superior */
.parent-child-tree-toolbar {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 18px;
padding-bottom: 12px;
border-bottom: 1px solid #e9ecef;
}
.parent-child-tree-toolbar a.pc-tree-btn,
.parent-child-tree-toolbar a.pc-tree-btn:visited {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
padding: 5px 11px;
border: 1px solid #ced4da;
border-radius: 4px;
background: #f8f9fa;
color: #495057;
text-decoration: none;
transition: all .15s ease-in-out;
}
.parent-child-tree-toolbar a.pc-tree-btn img {
width: 14px;
height: 14px;
display: inline-block;
}
.parent-child-tree-toolbar a.pc-tree-btn:hover,
.parent-child-tree-toolbar a.pc-tree-btn:focus {
border-color: #495057;
background: #fff;
color: #000;
outline: 0;
}
.parent-child-tree-toolbar a.pc-tree-btn-agregar:hover { border-color: #28a745; color: #155724; }
/*.parent-child-tree-toolbar a.pc-tree-btn-tabla { margin-left: auto; }*/
.parent-child-tree-toolbar .pc-tree-btn-sep {
width: 1px;
height: 20px;
background: #dee2e6;
margin: 0 4px;
}
/* Árbol — listas anidadas con guías visuales */
.parent-child-tree, .parent-child-tree ul {
list-style: none;
padding-left: 26px;
margin: 0;
}
/* Ritmo vertical uniforme: el mismo gap entre cualquier par de nodos consecutivos,
sin importar la profundidad. Padding-top uniforme + márgenes/paddings 0 en los
anidados (que de otro modo agregarían huecos extra entre niveles). */
.parent-child-tree li {
position: relative;
padding: 10px 0 0 0;
line-height: 1.4;
}
.parent-child-tree > li:first-child { padding-top: 0; }
.parent-child-tree li > ul {
padding-top: 0;
padding-bottom: 0;
margin: 0;
}
.parent-child-tree li::before {
content: "";
position: absolute;
left: -16px;
top: 0;
bottom: 0;
border-left: 1px dashed #C7C7C7;
}
.parent-child-tree > li::before { display: none; }
.parent-child-tree li::after {
content: "";
position: absolute;
left: -16px;
top: 20px;
width: 14px;
border-top: 1px dashed #C7C7C7;
}
.parent-child-tree > li::after { display: none; }
.parent-child-tree li:last-child::before {
bottom: auto;
height: 20px;
}
/* Nodo: pill con label + acciones */
.pc-tree-node {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 12px;
border: 1px solid #dee2e6;
border-radius: 5px;
background: #F1F1F1;
font-size: 0.92rem;
transition: all .15s ease-in-out;
}
.pc-tree-node:hover {
border-color: #adb5bd;
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
/* Toggle (expand/collapse) — íconos boton_subir / boton_bajar.
Convención: expandido (children visibles) muestra boton_subir.png (↑) = "click para contraer".
contraído muestra boton_bajar.png (↓) = "click para expandir". */
.pc-tree-toggle {
display: inline-block;
width: 14px;
height: 14px;
cursor: pointer;
background-repeat: no-repeat;
background-position: center;
background-size: 14px 14px;
user-select: none;
}
.parent-child-tree li[data-tiene-hijos="Y"] > .pc-tree-node .pc-tree-toggle {
background-image: url(/img/boton_subir.png);
opacity: 0.4;
}
.parent-child-tree li.pc-tree-collapsed > .pc-tree-node .pc-tree-toggle {
background-image: url(/img/boton_bajar.png);
opacity: 0.4;
}
.parent-child-tree li:not([data-tiene-hijos]) > .pc-tree-node .pc-tree-toggle {
visibility: hidden;
}
/* Label */
.pc-tree-label {
color: #000;
font-weight: 600;
}
/* Acciones (íconos a la derecha de cada nodo) */
.pc-tree-actions {
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: 10px;
padding-left: 10px;
border-left: 1px solid #e9ecef;
}
.pc-tree-actions a.pc-tree-action,
.pc-tree-actions a.pc-tree-action:visited {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 4px;
text-decoration: none;
opacity: 0.6;
transition: all .12s ease-in-out;
}
.pc-tree-actions a.pc-tree-action img {
width: 14px;
height: 14px;
display: block;
}
.pc-tree-actions a.pc-tree-action:hover {
opacity: 1;
background: #f1f3f5;
}
.pc-tree-actions a.pc-tree-action-eliminar:hover { background: #fbebee; }
.pc-tree-actions a.pc-tree-action-agregar:hover { background: #e8f5e9; }
.pc-tree-actions a.pc-tree-action-editar:hover { background: #e7f1fb; }
/* Asistentes SiFrame */
.siframe-overlay-focus {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(4px);
z-index: 1999;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.siframe-overlay-focus {
background: rgba(0, 0, 0, 0.55);
filter: blur(3px);
backdrop-filter: none;
}
.siframe-focus-activo {
position: relative;
z-index: 2001 !important;
border-radius: 10px;
box-shadow:
0 0 0 2px rgba(255, 255, 255, 0.9), /* borde interno sutil */
0 0 0 8px rgba(0, 123, 255, 0.35), /* halo azulado translúcido */
0 8px 20px rgba(0, 0, 0, 0.25); /* sombra ambiental suave */
transition:
box-shadow 0.4s ease,
transform 0.3s ease;
/*transform: scale(1.02); /* leve zoom para destacarlo */*/
animation: siframe-focus-pulse 2s ease-in-out infinite;
}
@keyframes siframe-focus-pulse {
0% { box-shadow: 0 0 0 2px rgba(255,255,255,0.9),
0 0 0 8px rgba(0,123,255,0.35),
0 8px 20px rgba(0,0,0,0.25); }
50% { box-shadow: 0 0 0 3px rgba(255,255,255,1),
0 0 0 10px rgba(0,123,255,0.55),
0 10px 25px rgba(0,0,0,0.3); }
100% { box-shadow: 0 0 0 2px rgba(255,255,255,0.9),
0 0 0 8px rgba(0,123,255,0.35),
0 8px 20px rgba(0,0,0,0.25); }
}
.siframe-tooltip {
position: absolute;
max-width: 320px;
background: #fff;
color: #333;
font-family: inherit;
font-size: 14px;
border-radius: 8px;
padding: 12px 16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
z-index: 2002;
opacity: 0;
transform: scale(0.9);
transition: all 0.3s ease;
}
.siframe-tooltip.show {
opacity: 1;
transform: scale(1);
}
.siframe-tooltip::after {
content: "";
position: absolute;
border: 8px solid transparent;
}
.siframe-tooltip[data-pos="top"]::after {
bottom: -16px; left: calc(50% - 8px);
border-top-color: #fff;
}
.siframe-tooltip[data-pos="bottom"]::after {
top: -16px; left: calc(50% - 8px);
border-bottom-color: #fff;
}
.siframe-tooltip[data-pos="left"]::after {
right: -16px; top: calc(50% - 8px);
border-left-color: #fff;
}
.siframe-tooltip[data-pos="right"]::after {
left: -16px; top: calc(50% - 8px);
border-right-color: #fff;
}
.sf-tooltip-actions {
text-align: right;
margin-top: 12px;
display: flex;
justify-content: flex-end;
gap: 8px;
}
.sf-tooltip-actions button {
font-family: inherit;
font-size: 13px;
border: none;
border-radius: 5px;
padding: 6px 14px;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease;
}
.sf-tooltip-actions .btn-prev {
background: #e0e0e0;
color: #333;
}
.sf-tooltip-actions .btn-prev:hover {
background: #d5d5d5;
}
.sf-tooltip-actions .btn-next {
background: #007bff;
color: #fff;
}
.sf-tooltip-actions .btn-next:hover {
background: #0069d9;
}
.sf-tooltip-actions .btn-end {
background: #28a745;
color: #fff;
}
.sf-tooltip-actions .btn-end:hover {
background: #218838;
}
/* Tooltip Responsive - Autoajuste y soporte PWA */
.device_mobile .siframe-tooltip {
max-width: 90vw;
font-size: 13px;
line-height: 1.4;
padding: 10px 12px;
}
.device_mobile .sf-tooltip-actions {
flex-direction: column;
align-items: stretch;
}
.device_mobile .sf-tooltip-actions button {
width: 100%;
}
/* Prevenir problemas de z-index con PWAs fullscreen */
html, body {
isolation: isolate;
height: 100%;
}
/* =======================================================================
SiFrame — Mobile DataTable Cards
Se activa solo cuando BODY tiene la clase device_mobile
=======================================================================*/
/* Tarjeta base */
body.device_mobile .dt-card {
background: #F7F7F7;
border: 1px solid #DDD;
border-radius: 10px;
padding: 14px 16px;
display: flex;
flex-direction: column;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* =======================================================================
SiFrame — Mobile DataTable Cards — HEADER MODE A
=======================================================================*/
body.device_mobile .dt-card-header {
font-weight: 600;
font-size: 15px;
padding-bottom: 5px;
margin-bottom: 10px;
border-bottom: 1px solid #CCCCCC;
color: #222;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* =======================================================================
SiFrame — Mobile DataTable Cards (Compact Grid Layout)
=======================================================================*/
body.device_mobile .dt-card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 10px 14px;
margin-bottom: 10px;
}
body.device_mobile .dt-field {
display: flex;
flex-direction: row;
align-items: center;
gap: 4px;
min-width: 0; /* permite truncado si es necesario */
}
body.device_mobile .dt-field-label {
font-size: 12px;
font-weight: 400;
color: #8A8A8A;
white-space: nowrap;
}
body.device_mobile .dt-field-value {
font-size: 12px;
color: #222;
font-weight: 500;
white-space: nowrap;
/* Si el valor queda largo, se trunca con "..." */
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
}
body.device_mobile .dt-card-acciones {
padding-top: 8px;
border-top: 1px solid #CCCCCC;
}
body.device_mobile .details-control {
background-image: url(/img/details_open.png);
}
body.device_mobile .details-control.details {
background-image: url(/img/details_close.png);
/*background: url(/img/details_close.png) no-repeat center center !important;*/
}
/* RowDetails (si existe) */
/*body.device_mobile .dt-card-details {
margin-top: 12px;
padding: 10px;
border-radius: 8px;
background: #F8F8F8;
border: 1px solid #E3E3E3;
}*/
/* Texto dentro de Details */
/*body.device_mobile .dt-card-details p,
body.device_mobile .dt-card-details div {
margin-bottom: 6px;
font-size: 13px;
line-height: 1.25;
}*/
/*body.device_mobile .dt-card-details p:last-child,
body.device_mobile .dt-card-details div:last-child {
margin-bottom: 0;
}*/
/* ─────────────────────────────────────────────────────────────────────────────
SF-TABLERO — Sistema de visualización de registros en cards
─────────────────────────────────────────────────────────────────────────── */
/* Utilidad grid-fill: grilla auto-fill de columnas con ancho mínimo variable.
El ancho mínimo y el gap se inyectan inline desde PHP via --gf-min / --gf-gap. */
.grid-fill {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--gf-min, 280px), 1fr));
gap: var(--gf-gap, 16px);
}
/* Contenedor principal del tablero */
.sf-tablero {
width: 100%;
}
/* ── Grupos (agrupar_por) ─────────────────────────────────────────────────── */
.sf-tablero-grupo {
margin-bottom: 18px;
}
.sf-tablero_grupo-titulo {
font-size: 15px;
font-weight: 700;
color: #246199;
margin: 24px 0 10px;
text-transform: uppercase;
letter-spacing: .05em;
}
.sf-tablero_grupo-titulo:first-child {
margin-top: 0;
}
/* ── Filtros ─────────────────────────────────────────────────────────────── */
.sf-tablero_filtros {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin-bottom: 16px;
}
.sf-filtro-item {
display: flex;
align-items: center;
}
/* ── Card item wrapper (transparente al grid, oculto por filtros) ─────────── */
.sf-card-item {
display: contents; /* el .sf-card hijo participa directamente en el grid */
}
.sf-card-item-oculto {
display: none;
}
/* ── Card base ───────────────────────────────────────────────────────────── */
.sf-card {
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
border: 1px solid #cccccc;
border-radius: 8px;
background: #eeeeee;
box-shadow: 0 2px 4px rgba(0,0,0,.10);
transition: box-shadow .15s ease;
min-height: 165px;
padding: 18px 20px;
}
.sf-card:hover {
background: #ffffff;
box-shadow: 0 4px 12px rgba(0,0,0,.14);
}
.sf-card-inactivo {
opacity: .7;
background: #f8f9fa;
}
/* ── Imagen de fondo (ícono decorativo, bottom-right) ───────────────────── */
.sf-card_bg {
position: absolute;
background: no-repeat center/contain;
pointer-events: none;
z-index: 0;
}
/* ── Imagen de cabecera (foto, banner) ──────────────────────────────────── */
.sf-card_img {
width: 100%;
height: 160px;
object-fit: cover;
display: block;
background: #f0f0f0;
flex-shrink: 0;
}
/* ── Header: primeros N items del card en una misma fila ─────────────────── */
.sf-card_header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
position: relative;
z-index: 1;
}
/* nombre dentro del header: ocupa el espacio sobrante */
.sf-card_header .sf-card_nombre {
margin: 0;
flex: 1;
min-width: 0;
}
.sf-card_items-block {
display: flex;
align-items: center;
flex-wrap: wrap;
font-size: 12px;
color: #555;
}
.sf-card_list {
margin-top: 6px;
font-size: 12px;
color: #555;
}
.sf-card_list-more {
display: inline-block;
margin-top: 2px;
font-size: 12px;
color: #246199;
cursor: help;
font-style: italic;
}
.sf-card_badge {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
letter-spacing: .3px;
line-height: 1.6;
}
/* ── Nombre principal (standalone, fuera del header) ─────────────────────── */
.sf-card_nombre {
font-size: 19px;
font-weight: 700;
color: #222;
margin: 8px 0 6px;
line-height: 1.2;
position: relative;
z-index: 1;
}
/* ── Items de texto ──────────────────────────────────────────────────────── */
.sf-card_text {
font-size: 12px;
color: #555;
margin: 2px 0;
line-height: 1.4;
position: relative;
z-index: 1;
}
/* ── Opciones (botones CTA — solo se renderiza si hay links_opciones) ───── */
.sf-card_opciones {
margin-top: auto;
padding-top: 14px;
display: flex;
flex-wrap: wrap;
gap: 4px;
position: relative;
z-index: 1;
}
.sf-card_opciones a.boton_dt,
.sf-card_opciones a.boton_dt:active,
.sf-card_opciones a.boton_dt:visited {
width: 38px;
height: 38px;
background-size: 24px 24px;
background-color: #eeeeee;
border-color: rgba(0,0,0,.20);
}
.sf-card_opciones a.boton_dt:hover,
.sf-card_opciones a.boton_dt:focus {
background-color: #ffffff;
border-color: rgba(0,0,0,.40);
}
/* ── Utilidades extra disponibles para Ruta B ───────────────────────────── */
/* Barra de progreso */
.sf-card_bar {
height: 6px;
border-radius: 3px;
background: #e9ecef;
overflow: hidden;
margin: 6px 12px;
position: relative;
z-index: 1;
}
.sf-card_bar-fill {
height: 100%;
border-radius: 3px;
background: #28a745;
transition: width .3s ease;
}
/* Body con padding para Ruta B */
.sf-card_body {
padding: 8px 12px;
flex: 1;
position: relative;
z-index: 1;
}
.sf-card_subtitle {
font-size: 12px;
color: #888;
margin: 0 0 6px;
}
/* ── Mensaje sin resultados ──────────────────────────────────────────────── */
.sf-tablero_vacio {
display: none;
padding: 24px;
text-align: center;
color: #999;
font-size: 14px;
grid-column: 1 / -1;
}
.sf-tablero_vacio--visible {
display: block;
}
/* FLASH MESSAGES — contenedor del render automático de Sesion::render_flash() */
.sf-flash-container {
margin: 16px 0;
}
.sf-flash-container .alert {
margin-bottom: 8px;
}
.sf-flash-container .alert:last-child {
margin-bottom: 0;
}