/* ============================================================================ P4S — EL BOTON. DEFINICION UNICA PARA TODA LA PLATAFORMA. Lo cargan los DOS layouts modernos: - layoutBase.jsp (login, registro, recuperarPass) - privateLayout.jsp (dashboard y vistas migradas) ------------------------------------------------------------------ POR QUE EXISTE ESTE ARCHIVO El boton primario estaba escrito TRES veces, y las tres salian de los mismos tokens: css/auth/login.css .btn-login / .btn-login.btn-primary 16 reglas css/p4s-app.css .btn-primary 14 reglas private/00-inicio/inicioV2.jsp .btn-action 4 reglas Ya habian divergido: `.btn-action` se rellenaba con `--p4s-accent` --el acento de TEXTO-- mientras las otras dos usaban `--p4s-accent-fill`. En tema oscuro eso daba 3.70:1 con el texto blanco, por debajo de AA. Es la causa 2 de BUG-1.15 (#161): un fallo que existia SOLO porque habia tres copias. Con tres definiciones, el siguiente arreglo de contraste habria que hacerlo tres veces. Ref ENA-1.17 (#163). ------------------------------------------------------------------ POR QUE SE MONTA SOBRE `.btn-primary` Y NO SOBRE UNA CLASE NUEVA Los dos layouts ya cargan `templatev3/bootstrap/css/bootstrap.min.css`, que da la FORMA del boton (padding, radio, tipografia, alineacion, estados disabled). Aqui solo hace falta el COLOR. Inventar `.p4s-btn` obligaria a redefinir la forma entera y a reescribir el marcado existente sin ganar nada. Este archivo se carga DESPUES de bootstrap y de las hojas de Cork, que es donde hay que ganar. ------------------------------------------------------------------ POR QUE `!important` El template Cork trae `.btn-primary { background-color: #1b55e2 !important }` en `assets4/assets/css/main.css`, y `light/main.css` trae otro con `#0c8dca`. Contra un `!important` ajeno la especificidad normal no sirve de nada: la unica defensa es otro `!important`. Esto ya estaba documentado en CLAUDE.md y lo heredamos de las dos definiciones que este archivo sustituye. ------------------------------------------------------------------ REGLA: aqui no se escribe ni un hex. Todo sale de css/p4s-tokens.css. ========================================================================= */ /* ----- Primario: reposo -------------------------------------------------- `--p4s-accent-fill`, NO `--p4s-accent`. Son dos roles opuestos: acento de TEXTO -> se lee SOBRE la tarjeta: cuanto mas claro, mejor acento de RELLENO -> lleva texto ENCIMA: cuanto mas claro, peor En tema claro coinciden; en oscuro no pueden. Ver el bloque 3b de p4s-tokens.css, que trae los contrastes medidos. */ .btn-primary, .btn-primary.btn, body.dark .btn-primary { background-color: var(--p4s-accent-fill) !important; border-color: var(--p4s-accent-fill) !important; color: var(--p4s-on-accent-fill) !important; } .btn-primary:hover, .btn-primary.btn:hover, body.dark .btn-primary:hover { background-color: var(--p4s-accent-fill-hover) !important; border-color: var(--p4s-accent-fill-hover) !important; color: var(--p4s-on-accent-fill) !important; } .btn-primary:active, .btn-primary:not(:disabled):not(.disabled):active, body.dark .btn-primary:active { background-color: var(--p4s-accent-fill-active) !important; border-color: var(--p4s-accent-fill-active) !important; color: var(--p4s-on-accent-fill) !important; } /* El halo de foco de Cork usa su azul; se alinea al acento de marca. */ .btn-primary:focus, .btn-primary.btn:focus { box-shadow: 0 0 0 3px var(--p4s-accent-glow) !important; } /* El anillo que ve de verdad quien navega con teclado. Va con el acento de TEXTO, no con el del relleno, para despegarse del propio boton. */ .btn-primary:focus-visible, .btn:focus-visible, a:focus-visible { outline: 3px solid var(--p4s-accent); outline-offset: 3px; } /* `botonEnProceso()` (script.js) deshabilita el boton mientras corre la llamada DWR, y Bootstrap lo repintaba con su azul generico. */ .btn-primary:disabled, .btn-primary.disabled { background-color: var(--p4s-accent-fill) !important; border-color: transparent !important; color: var(--p4s-on-accent-fill) !important; opacity: 0.65; box-shadow: none; cursor: wait; } /* ----- Destructivo ------------------------------------------------------- Borrar, rechazar, cancelar. Existe porque las vistas legadas ya distinguian la accion destructiva (`button alert` de Foundation) y esa distincion no se puede perder al migrarlas: un boton de borrar que se ve igual que uno de guardar es peor que feo. Usa `--p4s-danger-fill`, NO `--p4s-danger`: mismo motivo que el acento. El rojo de TEXTO (#e7515a en oscuro) con texto blanco encima da 3.67:1 y no llega a AA; el de relleno da 5.04:1. Ref ENA-1.18 (#164) */ .btn-danger, .btn-danger.btn, body.dark .btn-danger { background-color: var(--p4s-danger-fill) !important; border-color: var(--p4s-danger-fill) !important; color: var(--p4s-on-danger-fill) !important; } .btn-danger:hover, .btn-danger.btn:hover, body.dark .btn-danger:hover { /* Un destructivo no se aclara al pasar por encima: se asienta. */ filter: brightness(0.92); color: var(--p4s-on-danger-fill) !important; } .btn-danger:focus, .btn-danger.btn:focus { box-shadow: 0 0 0 3px var(--p4s-danger-ring) !important; } .btn-danger:focus-visible { outline: 3px solid var(--p4s-danger); outline-offset: 3px; } /* ----- Secundario: contorno ---------------------------------------------- */ .btn-outline-primary { border-color: var(--p4s-accent) !important; color: var(--p4s-accent) !important; background-color: transparent !important; } .btn-outline-primary:hover { background-color: var(--p4s-accent-fill) !important; border-color: var(--p4s-accent-fill) !important; color: var(--p4s-on-accent-fill) !important; } /* ----- Modificador: el boton de un formulario de auth --------------------- Lo unico que auth tiene de propio es la DISPOSICION -- ocupa el ancho de la tarjeta y se levanta un poco al pasar por encima. Ni un color: eso lo pone `.btn-primary` de arriba, igual que en el resto de la plataforma. Antes `.btn-login` traia tambien su relleno, su hover y su disabled, es decir una segunda copia entera del boton. */ .btn-login { width: 100%; padding: 12px; font-weight: 600; font-size: 1rem; border-radius: 8px; transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; /* Elevacion neutra (negro, no del color de marca): un resplandor teal se leia como si el boton emitiera luz. */ box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.45); } .btn-login:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(0, 0, 0, 0.5); } .btn-login:not(:disabled):not(.disabled):active { transform: translateY(0); box-shadow: 0 4px 10px -6px rgba(0, 0, 0, 0.4); } .btn-login:disabled, .btn-login.disabled { transform: none; box-shadow: none; } /* ----- Boton en proceso --------------------------------------------------- `botonEnProceso()` marca el boton mientras corre la llamada DWR. En un usado como boton no existe `disabled`, asi que sin esto el clic seguiria disparando la accion una y otra vez mientras la primera esta en curso -- justo en operaciones como vincular o borrar, donde repetir importa. `pointer-events` lo corta de verdad, no solo visualmente. */ .esta-en-proceso { pointer-events: none; opacity: 0.65; } /* El spinner hereda el color del texto del boton, asi que funciona igual sobre el relleno de acento que sobre un boton de contorno, en ambos temas. */ .btn .spinner-border-sm { width: 1em; height: 1em; border-width: 0.15em; vertical-align: -0.125em; }