/* ========================================================================= simia-custom.css -- el custom nuevo de la etapa 2. E2/F6, 2026-09-15. ⛔ QUE ES Y QUE NO ES Es la UNICA hoja donde se escribe CSS nuevo en esta etapa. Va DESPUES de `global-simia.css` en el (`application/views/front/header.php`), o sea ULTIMA en la cascada del front. ⛔ `global-simia.css` NO SE TOCA, Y NO ES una preferencia de estilo. Es un extracto generado por herramienta, con 126 selectores repetidos y tres tramos concatenados: mover una regla de ahi es la ida y vuelta que esta etapa existe para evitar. TODO LO NUEVO VA ACA. ⛔ REGLA DE LA FASE (`D-C29`): ninguna clase, id ni atributo se borra, se renombra ni se reemplaza. SOLO SE AGREGA. Borrar es F8, al final, con su propia verificacion. ⚠️ EL ORDEN DE LA HOJA SOLO DECIDE ENTRE REGLAS DE IGUAL ESPECIFICIDAD. Estar ultima NO alcanza para ganarle a un selector mas especifico de Bootstrap. Cada bloque de abajo dice CON QUE ESPECIFICIDAD gana. ========================================================================= */ /* ------------------------------------------------------------------------- H-242 -- el cartel de error de jQuery Validate deja de correr el boton ------------------------------------------------------------------------- ⛔ ES UNA REGRESION DE E2/F5a, NO UN DEFECTO HEREDADO. Medido con clicks REALES y conteo de POST el 2026-09-15 en :8099, 1280x900: /login, /site/alta y /site/recuperapass/ CON F5a -> el boton baja 10 px DURANTE el click y los clicks en los primeros 10 px del boton NO producen NINGUN POST. Franja muerta = [0, 10). ABLACION -> (bootstrap.min.css `disabled = true`, misma pagina) los 10 offsets, de 1 a 38 px, producen POST. Franja muerta = NINGUNA. El mecanismo: `jquery.validate` crea un por campo al validarlo. Bootstrap lo define `display:block; margin-top:5px; margin-bottom:10px`; ANTES DE F5a ninguna hoja servida lo definia, asi que era `display:inline` con margenes 0 y ALTURA CERO cuando el span sale vacio. El `mousedown` saca el foco del campo -> corre la validacion -> aparece el span -> el boton baja 10 px -> el `mouseup` cae afuera -> el navegador NO sintetiza el `click`. CERO errores de consola. ⛔ POR QUE LAS TRES PROPIEDADES Y NO SOLO `margin-bottom`. El span sale VACIO en el camino bueno (datos validos), asi que sus dos margenes ADYACENTES se autocolapsan en `max(5, 10) = 10`. Anular solo el `margin-bottom` baja el corrimiento de 20 a 10 px y DEJA LA FRANJA MUERTA VIVA -- porque 10 px es justo la primera altura que envia. ⛔ Y VA SOBRE `.help-block`, NO SOBRE `.help-block-error`. Son dos `errorClass` distintos en el front y uno de ellos NO lleva el sufijo: front/js/custom.js:18 'help-block help-block-error' front/js/vistas/bienvenido_footer.js:76 'help-block help-block-error' front/js/vistas/recuperapass_footer.js:10 'help-block help-block-error' front/js/vistas/login_footer.js:9 'help-block' <- el modal «Olvide mi contraseña» Escribir solo `.help-block-error` dejaba ese modal sin cubrir. Especificidad 0-1-0, la misma que `.help-block` de Bootstrap: gana por ORDEN DE LA HOJA, que es el unico desempate disponible y el que esta garantizado por el . ⛔ NO REVERTIR. Como se comprueba que sigue vivo -- en /login, :8099: 1. llenar mail y clave con datos validos 2. click a 2 px del borde SUPERIOR del boton INGRESAR 3. tiene que salir UN POST. Si no sale ninguno, esta regla se perdio. (Preguntar `elementFromPoint` NO sirve: mide el layout ya asentado y este defecto vive en la transicion. Es la trampa 9 de CONTINUIDAD-AUDITORIA §6.) ------------------------------------------------------------------------- */ .help-block { display: inline; margin-top: 0; margin-bottom: 0; } /* ------------------------------------------------------------------------- H-240 -- el campo de contraseña de «Recuperar clave» vuelve a su ancho ------------------------------------------------------------------------- ⛔ ES CONDICION DE DESPLIEGUE. Es la UNICA pantalla donde un Proveedor Logistico fija su contraseña nueva, y despues de F5a se veia PEOR que antes de la rama: el campo pasaba de 457,50 px a 132,49 px y el placeholder salia cortado («Nueva Passwor...»). La causa es un HUECO, no un choque: `global-simia.css` define `col-md-1`, `2`, `3`, `5`, `6`, `11` y `12` y NO define `col-md-4`, que es la unica `col-md-*` que el front usa sin cubrir -- en `:20` y `:26` de `application/views/front/items/recuperapass.php`, los dos unicos lugares de todo `application/views/front/`. Bootstrap no pisa nada: RELLENA, con `width:33.33%` + `float:left` + `padding:0 15px`. ⛔ NO SE REEMPLAZA `col-md-4` (`D-C29`): se le AGREGO `simia-campo-clave` al lado, en la vista, y la regla vive aca. ⛔ POR QUE SON DOS REGLAS Y NO UNA -- Y ESTA MEDIDO. `form-horizontal` aporta 10 de los 162,5 px, por `margin-left/right:-15px` en el `.form-group`: con el, la fila mide 487,5 px; sin el, 457,5. Una sola regla con `width` o con padding fijo ata el ancho objetivo a que `form-horizontal` siga puesto, y el dia que alguien lo saque «de paso» el campo cambia de ancho solo, sin que nadie toque esta hoja. Con las dos, el campo mide 457,50 px y arranca en x = 167,5 EN LOS DOS CASOS -- que es exactamente el ancho del
, o sea lo que se veia antes de la rama. ⚠️ Y NO TOCA EL TELEFONO. `width:33.33%` de Bootstrap vive dentro de `@media (min-width:992px)`; por debajo `.col-md-4` solo aporta `position:relative` y el padding. Medido a 375 px: identico antes y despues (col-md-4 = 375 px, input = 345 px). ⛔ NO REVERTIR. Como se comprueba -- en /site/recuperapass/, 1280 px: document.querySelector('#js-forget-password').getBoundingClientRect().width tiene que dar 457.5. Si da 132.484, esta regla se perdio. ------------------------------------------------------------------------- */ .simia-campo-clave { float: none; width: auto; padding-left: 0; padding-right: 0; } /* Especificidad 0-2-0: le gana a `.col-md-4` (0-1-0) sin `!important`. Repone los 15 px de canaleta SOLO cuando la fila los compensa con sus margenes negativos, que es lo que hace `form-horizontal`. */ .form-horizontal .simia-campo-clave { padding-left: 15px; padding-right: 15px; } /* ------------------------------------------------------------------------- LISTA 3 -- las trampas de ESPECIFICIDAD que SE VEN ------------------------------------------------------------------------- `global-simia.css` es una copia PODADA de Bootstrap 3: trae las reglas de TAG PELADO --`label`, `input`, `button`-- y NO trae los bloques de componente --`.radio`, `.checkbox`, `.close`, `.control-label`--, que son los de alta especificidad. Apilar el Bootstrap completo abajo repone exactamente esos bloques, y desde abajo LE GANAN a lo propio: la cascada resuelve primero por ESPECIFICIDAD y recien despues por orden de hoja. ⛔ POR ESO ESTAR ULTIMO NO ALCANZA Y LAS REGLAS DE ACA SON MAS ESPECIFICAS QUE LAS QUE PIERDEN. Cada bloque dice contra que selector compite. Medido el 2026-09-15 recorriendo el CSSOM de las tres hojas servidas contra el DOM real de las cinco pantallas: 16 pares vivos, de los cuales 12 SE VEN --o sea, el valor computado difiere del que declara `global-simia`--. ⚠️ Y DOS DE ELLOS GANAN DESDE LA CAPA BASE DE FORMULARIOS, no desde un bloque de componente: `input[type="radio"]` (0-1-1) le gana a `input` (0-0-1). Quien busque solo componentes se pierde esa familia entera. ------------------------------------------------------------------------- */ /* Los radios. Compite contra `input[type="radio"]` (0-1-1) y contra `.radio input[type="radio"]` (0-2-1) de Bootstrap. ANTES de la rama: position static · margin-top 0 · margin-left 0 · line-height 22px. El `position:absolute` de Bootstrap ademas BLOQUIFICA el input --de `inline-block` a `block`--, asi que reponer `position` arregla las dos lineas del volcado con una sola declaracion. */ .radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] { position: static; margin-left: 0; margin-top: 0; line-height: 22px; } /* Compite contra `.radio` / `.checkbox` (0-1-0) de Bootstrap Y contra `.form-horizontal .radio` (0-2-0), que es la que de verdad pone los 7 px. ⛔ MEDIDO: con solo `.radio` la regla NO GANA -- la de Bootstrap es mas especifica y el padding se quedaba en 7 px. Es el mismo error que esta seccion existe para documentar. */ .radio, .checkbox, .form-horizontal .radio, .form-horizontal .checkbox { padding-top: 0; } /* Compite contra `.radio label` (0-1-1), que es la que le gana a `global-simia.css:560 label { margin-bottom: 5px }` (0-0-1). */ .radio label, .radio-inline label, .checkbox label, .checkbox-inline label { margin-bottom: 5px; padding-left: 0; } /* El boton del cartel de error. Compite contra `.close` (0-1-0) y `button.close` (0-1-1). ⛔ OJO: en el volcado este MISMO nodo aparece dos veces --como `button[N]` y como `.close[N]`--, asi que una excepcion escrita contra uno de los dos nombres NO exime al otro. */ .alert .close, .alert button.close { float: none; opacity: 1; color: #777777; font-size: inherit; font-weight: 400; line-height: 22px; padding: 1px 6px; background-color: #efefef; /* ⛔ EL COLOR DEL BORDE VA EXPLICITO. `outset` sin color usa `currentColor`, y como este bloque tambien repone `color: #777`, el borde salia gris cuando antes de la rama era negro -- medido: border-top-color rgb(0,0,0) en el ANTES contra rgb(119,119,119). Un arreglo que introduce su propia diferencia. */ border: 2px outset rgb(0, 0, 0); -webkit-appearance: button; appearance: button; } /* ------------------------------------------------------------------------- LISTA 2 -- los huecos de ELEMENTO ------------------------------------------------------------------------- Un TAG que Bootstrap estila con selector pelado y `global-simia` no. El barrido de clases de F4 no puede verlos: cruza CLASES, y un `
` sin `class` no aparece en ningun inventario de clases. Medido: el front usa 37 tags; Bootstrap define 63 con selector pelado y `global-simia` 18. De ahi salen SEIS con hueco -- y solo `h5` se ve: h5 ⬅️ se ve, y mucho: mueve entre el 6 % y el 10 % de los pixeles de los pasos 2 a 5 del asistente html solo aporta `-webkit-text-size-adjust` y `-webkit-tap-highlight-color`; ninguna sale en el volcado strong `font-weight: 700` vs el default `bolder`, que es RELATIVO al padre: coinciden porque los 11 padres reales computan 400 ul `ul.detalle` de `global-simia` ya pisa las dos declaraciones table `global-simia` ya define 26 propiedades; lo unico que suma Bootstrap son dos `-webkit-border-*-spacing` tr idem, `break-inside` ⛔ ESCRIBIR LOS OTROS CINCO SERIA RUIDO PURO, y esta medido, no supuesto. ------------------------------------------------------------------------- */ /* Compite contra `h5` (0-0-1) de Bootstrap, que le pone `font-size:14px`, `font-weight:500` y margenes de 10px. Los valores de abajo son los del navegador --que es lo que habia antes de la rama-- y por eso van en `em`: medido, 11,62 px a 1280 y 10,79 px a 375, que son 0,83em en cada caso. */ h5 { font-size: 0.83em; font-weight: bold; line-height: inherit; margin-top: 1.67em; margin-bottom: 1.67em; color: inherit; } /* Los enlaces con pinta de boton. Compite contra `.btn` (0-1-0) de Bootstrap, que trae `display:inline-block`; `global-simia` define `.btn` con 126 declaraciones repartidas en 6 reglas y NINGUNA pone `display`, asi que antes de la rama esos `` eran `inline`. Es el grupo mas grande del volcado: 368 lineas entre `a[N]` y `.btn[N]`, todas en *Bienvenido* y sus modales. ⛔ VA ACOTADA A `a.btn`, NO A `.btn` A SECAS, Y ES LA DIFERENCIA ENTRE ARREGLAR Y ROMPER. Un `