15px por lado
15px mas
15px mas
45px de cada lado antes de que empiece la tarjeta: en un telefono de
360px eso es una cuarta parte de la pantalla gastada en aire. En
escritorio los tres tienen sentido; en movil sobran dos.
------------------------------------------------------------------- */
.container-fluid {
padding-left: 8px !important;
padding-right: 8px !important;
}
/* El container anidado no vuelve a separar: ya lo hizo el de afuera. */
.container-fluid .container-fluid,
section.content > .container-fluid {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Columnas y filas: el canal de Bootstrap baja de 15px a 5px. */
.row {
margin-left: -5px !important;
margin-right: -5px !important;
}
.col, [class^="col-"], [class*=" col-"] {
padding-left: 5px !important;
padding-right: 5px !important;
}
#layoutSidenav_content {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Sitio para la burbuja de Aider IA, que si no tapa el ultimo campo. */
#layoutSidenav_content > main { padding-bottom: 96px !important; }
/* La camara de la firma dejaba franjas negras a los lados. */
.sib-video-frame video,
#video {
width: 100% !important;
height: auto !important;
max-height: 46vh !important;
/* contain tambien aqui (09/09/2026): en movil el recorte era peor, porque
la caja es aun mas apaisada respecto a la camara frontal. */
object-fit: contain !important;
}
.modal-dialog { margin: .5rem !important; }
.modal-body { padding: 12px !important; }
}
/* Telefonos angostos: un apreton mas. */
@media (max-width: 400px) {
.sib-form-card,
.sib-firma-camera-card,
.sib-firma-preview-card { padding: 10px 10px 2px 10px !important; }
.sib-field { margin-bottom: 7px !important; }
.sib-form-title { font-size: 1rem !important; }
}
/* ==========================================================
CLASE BASE V2 -- Icono de alerta en azul corporativo SIB
----------------------------------------------------------
POR QUE EXISTE
.sib-alertboost-icon esta definida TRES veces en este archivo
(lineas ~919, ~1021 y ~4408). Gana la ultima, que pinta el
circulo gris claro (#f1f4f8). Pero el color:#ffffff de la
primera SI sobrevive, asi que el simbolo queda blanco sobre
gris claro: invisible.
No se corrige ninguna de las tres definiciones a proposito.
Cambiar la que gana afectaria TODAS las alertas del sistema y
no hay inventario todavia de cuales dependen del gris. La regla
del estandar CodeHTML v2.0 es congelar lo existente y agregar
una capa nueva encima.
COMO SE USA
Reutilizable en cualquier alerta que necesite el circulo azul
corporativo con el simbolo en blanco.
POR QUE DOS CLASES EN EL SELECTOR
.sib-alertboost-icon.sib-icon-azul tiene mas especificidad que
las definiciones sueltas de una sola clase, asi que gana sin
depender del orden del archivo.
========================================================== */
.sib-alertboost-icon.sib-icon-azul {
background: #00205b;
color: #ffffff;
font-weight: 800;
}
/* ==================== FOOTER AL PIE — ÁREA DEL CANDIDATO ==================== */
/*
|--------------------------------------------------------------------------
| El footer quedaba pegado al final del contenido. En las pantallas del
| candidato, que tienen poca información —la tarjeta de cierre es una sola
| caja—, eso dejaba una franja en blanco debajo y el sistema se veía
| cortado a media pantalla.
|
| La columna de contenido ya venía como flex vertical desde styles.css;
| lo que faltaba era que creciera para ocupar el sobrante. Con eso
| el footer baja solo, y en pantallas largas se comporta igual que antes:
| queda después del contenido, sin flotar ni taparlo.
|
| Va limitado a .sib-perfil-body (header_perfil_c.php) para no mover el
| resto del sistema.
|--------------------------------------------------------------------------
*/
body.sib-perfil-body #layoutSidenav_content {
display: flex !important;
flex-direction: column !important;
min-height: calc(100vh - 56px) !important;
}
body.sib-perfil-body #layoutSidenav_content > main {
flex: 1 0 auto !important;
}
body.sib-perfil-body #layoutSidenav_content > footer,
body.sib-perfil-body #layoutSidenav_content > .sib-autogestion-footer,
body.sib-perfil-body #layoutSidenav_content > .sib-autog-footer-full {
flex: 0 0 auto !important;
margin-top: auto !important;
}
/* ==================== CAMPO CON ICONO ==================== */
/*
* Para inputs que llevan un icono superpuesto a la izquierda
* (position:absolute; left:14px). Reserva el espacio del icono.
*
* POR QUE LLEVA !important
* La regla de movil de mas arriba hace
* @media (max-width:767.98px){ .sib-control{ padding:.4rem .6rem !important } }
* y un !important de hoja de estilos VENCE al style= en linea. Por eso
* el padding-left inline se perdia solo en el celular y el texto del
* placeholder quedaba debajo del icono. En PC se veia bien.
*
* VA AL FINAL DEL ARCHIVO a proposito: misma especificidad que
* .sib-control, asi que gana por orden de aparicion.
*
* USO:
* sin style de padding.
*/
.sib-control-icono { padding-left: 42px !important; }
/* ==========================================================================
CLASES BASE V2 -- agregadas 02/09/2026 (CodeHTML v2.1, seccion 10)
==========================================================================
POR QUE SON GENERICAS Y NO DEL FORMULARIO:
.sib-char* -- contador de caracteres para cualquier textarea con minimo
o maximo. Lo necesita hoy el registro de horario, pero
sirve igual en observaciones, justificaciones y campos de
descripcion de cualquier modulo.
Estas cuatro se venian USANDO en
index_Regristra_ingreso_ubi.php sin estar definidas: el
contador se veia sin ningun color, en negro sobre blanco,
y no se distinguia "faltan caracteres" de "listo".
.sib-camera-* -- vista previa de camara. Se suma a la familia que ya
existe en este archivo (.sib-camera-status-ok /
.sib-camera-status-error). Reemplaza el bloque