/* ===================================================================== ACCESO · economax-sac --------------------------------------------------------------------- Pantallas que viven FUERA del panel: ingreso, recuperación de contraseña y activación de cuenta. Reutiliza los tokens --sys-* de sistema.css a propósito: el ingreso es lo primero que ve cualquiera, y si su azul, su amarillo o sus campos no fueran exactamente los del panel, la marca se rompería justo en la primera pantalla. No define ni un color nuevo. Todo va acotado a .acc-cuerpo (la clase del del layout de acceso). Así no alcanza a las vistas legales, que siguen colgando de layouts.home y quedan intactas. ===================================================================== */ .acc-cuerpo { margin: 0; background: var(--sys-superficie); color: var(--sys-tinta); /* Radios propios de estas pantallas. NO se toca --sys-radio-caja: ese lo comparten las 66 vistas del panel y redondearlo acá se las redondearía a todas. El acceso puede permitirse una tarjeta más blanda; una grilla de datos no. */ --acc-radio-tarjeta: 20px; --acc-radio-campo: 10px; } /* ===================================================================== ESTRUCTURA · dos paneles ===================================================================== */ .acc-marco { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 58%); min-height: 100vh; } /* --- Panel de marca (izquierda) -------------------------------------- Es el único bloque de azul saturado de la pantalla. Sostiene la marca para que el formulario no tenga que decorarse: al lado de esto, una tarjeta blanca y sobria se lee como seria, no como vacía. */ .acc-marca { position: relative; background: var(--sys-marca); /* Tres filas: logotipo · mensaje · ilustración. La del medio se queda con el alto sobrante y centra el mensaje dentro, en vez de empujarlo contra la ilustración. */ display: grid; grid-template-rows: auto 1fr auto; justify-items: center; padding: 40px 44px 0; overflow: hidden; } /* Un velo diagonal muy tenue, para que el azul plano no se sienta impreso. Va en ::before y no como imagen: nada que descargar. */ .acc-marca::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 85% 0%, rgba(255,255,255,.14), transparent 62%), radial-gradient(90% 70% at 0% 100%, rgba(0,0,0,.20), transparent 60%); pointer-events: none; } .acc-marca > * { position: relative; } /* Columna de contenido centrada. Sin esto el texto queda pegado al borde izquierdo del panel y, en pantallas anchas, con medio panel vacío a su derecha. El logotipo y el mensaje comparten este eje. */ .acc-logo, .acc-lema { width: 100%; max-width: 440px; } .acc-logo img { height: 34px; width: auto; display: block; } .acc-lema { align-self: center; padding-bottom: 30px; } .acc-lema h1 { margin: 0 0 14px; color: #fff; /* Crece con la pantalla: a 30px fijos el titular se perdía en un panel de 700px de ancho. */ font-size: clamp(30px, 2.5vw, 42px); line-height: 1.15; font-weight: 600; letter-spacing: -.015em; text-wrap: balance; } .acc-lema p { margin: 0; max-width: 38ch; color: rgba(255,255,255,.78); font-size: clamp(14.5px, 1.05vw, 16.5px); line-height: 1.6; } /* Queda fuera de la columna de 440px: se apoya en el borde inferior y se centra en todo el ancho del panel. align-self=end es el eje vertical de la grilla, no el horizontal como en flex. */ .acc-ilustracion { margin-top: 18px; align-self: end; justify-self: center; max-height: 48vh; max-width: 100%; width: auto; object-fit: contain; display: block; } /* --- Panel del formulario (derecha) ---------------------------------- */ .acc-panel { background: var(--sys-lienzo); display: flex; align-items: center; justify-content: center; padding: 40px 32px; } .acc-caja { width: 100%; max-width: 424px; } .acc-titulo { margin: 0 0 4px; font-size: 21px; font-weight: 600; line-height: 1.25; color: var(--sys-tinta); letter-spacing: -.01em; } .acc-bajada { margin: 0 0 22px; font-size: 14px; line-height: 1.5; color: var(--sys-tinta-media); } .acc-tarjeta { background: var(--sys-superficie); border: 1px solid var(--sys-linea); border-radius: var(--acc-radio-tarjeta); box-shadow: var(--sys-sombra); padding: 26px 26px 24px; } /* ===================================================================== CAMPOS · mismos que el panel ===================================================================== */ /* Las vistas ya traen la clase .small-input puesta. Se redefine con dos clases de especificidad para ganarle al tema, igual que en el panel. */ .acc-cuerpo .small-input, .acc-cuerpo input[type="text"], .acc-cuerpo input[type="mail"], .acc-cuerpo input[type="email"], .acc-cuerpo input[type="password"] { width: 100%; display: block; font-size: 14px; line-height: 1.4; padding: 10px 12px; height: auto; margin: 0; border: 1px solid var(--sys-linea-fuerte); border-radius: var(--acc-radio-campo); background-color: var(--sys-superficie); color: var(--sys-tinta); transition: border-color .12s ease, box-shadow .12s ease; } .acc-cuerpo .small-input:focus, .acc-cuerpo input:focus { outline: none; border-color: var(--sys-marca); box-shadow: 0 0 0 3px rgba(0, 56, 227, .14); } .acc-cuerpo input::placeholder { color: var(--sys-tinta-suave); } .acc-campo { margin-bottom: 16px; } .acc-campo:last-of-type { margin-bottom: 0; } .acc-cuerpo .acc-campo label { display: block; margin: 0 0 6px; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--sys-tinta-media); } /* Aviso bajo un campo (formato de correo, contraseñas que no coinciden). Reserva su renglón siempre, así el formulario no salta al aparecer. */ .acc-aviso { margin: 6px 0 0; font-size: 12px; line-height: 1.35; color: var(--sys-rechazado); min-height: 1em; } .acc-aviso.d-none { display: block !important; visibility: hidden; } .acc-obligatorio { color: var(--sys-rechazado); font-weight: 600; } .acc-nota-pie { margin: 14px 0 0; font-size: 12px; color: var(--sys-tinta-suave); } /* ===================================================================== BOTONES · mismos que el panel ===================================================================== */ .acc-cuerpo .mk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 14px; font-weight: 600; line-height: 1.3; padding: 11px 18px; border: 1px solid var(--sys-linea-fuerte); border-radius: var(--acc-radio-campo); background: var(--sys-superficie); color: var(--sys-tinta); text-decoration: none; cursor: pointer; text-transform: none; letter-spacing: 0; transition: background-color .12s ease, border-color .12s ease; } .acc-cuerpo .mk-btn:hover { background: var(--sys-realce); color: var(--sys-tinta); text-decoration: none; } .acc-cuerpo .mk-btn:focus-visible { outline: 2px solid var(--sys-marca); outline-offset: 2px; } /* Deshabilitado de verdad: el ingreso arranca con el botón apagado hasta que el correo, la contraseña y el reCAPTCHA estén, y eso tiene que leerse a simple vista. */ .acc-cuerpo .mk-btn[disabled], .acc-cuerpo .mk-btn:disabled, .acc-cuerpo .mk-btn.disabled { opacity: .45; cursor: not-allowed; box-shadow: none; } .acc-cuerpo .mk-btn-primary { background: var(--sys-accion); border-color: var(--sys-accion); color: var(--sys-tinta); } .acc-cuerpo .mk-btn-primary:hover:not([disabled]) { background: #f0c500; border-color: #f0c500; } .acc-cuerpo .mk-btn-secondary, .acc-cuerpo .mk-btn-warning { background: var(--sys-marca); border-color: var(--sys-marca); color: #fff; } .acc-cuerpo .mk-btn-secondary:hover:not([disabled]), .acc-cuerpo .mk-btn-warning:hover:not([disabled]) { background: var(--sys-marca-oscuro); border-color: var(--sys-marca-oscuro); color: #fff; } .acc-cuerpo .mk-btn-danger { background: var(--sys-superficie); border-color: var(--sys-linea-fuerte); color: var(--sys-tinta-media); } .acc-cuerpo .mk-btn-bloque { width: 100%; } .acc-acciones { display: flex; gap: 10px; margin-top: 20px; } .acc-acciones .mk-btn { flex: 1; } /* --- Enlace secundario ----------------------------------------------- */ .acc-pie { margin-top: 18px; text-align: center; } .acc-cuerpo .acc-enlace { font-size: 13.5px; font-weight: 500; color: var(--sys-marca); text-decoration: none; } .acc-cuerpo .acc-enlace:hover { color: var(--sys-marca-oscuro); text-decoration: underline; } .acc-cuerpo .acc-enlace:focus-visible { outline: 2px solid var(--sys-marca); outline-offset: 3px; border-radius: 3px; } /* ===================================================================== MENSAJES · errores y estado de sesión --------------------------------------------------------------------- Las vistas ya emiten .alert .alert-danger / .alert-success del tema. Se redefinen acá para que no dependan de theme-vendors. ===================================================================== */ .acc-cuerpo .alert { border-radius: var(--acc-radio-campo); border: 1px solid transparent; padding: 11px 13px; margin: 0 0 18px; font-size: 13px; line-height: 1.45; position: relative; } .acc-cuerpo .alert ul { margin: 0; padding: 0; list-style: none; } .acc-cuerpo .alert li { list-style: none; } .acc-cuerpo .alert li + li { margin-top: 4px; } .acc-cuerpo .alert-danger { background: var(--sys-rechazado-bg); border-color: rgba(176, 32, 28, .22); color: var(--sys-rechazado); } .acc-cuerpo .alert-success { background: var(--sys-aprobado-bg); border-color: rgba(20, 113, 61, .22); color: var(--sys-aprobado); } .acc-cuerpo .alert-warning { background: var(--sys-pendiente-bg); border-color: rgba(154, 91, 0, .22); color: var(--sys-pendiente); } .acc-cuerpo .alert .close { position: absolute; top: 6px; right: 8px; background: none; border: 0; font-size: 19px; line-height: 1; color: inherit; opacity: .55; cursor: pointer; padding: 2px 4px; } .acc-cuerpo .alert .close:hover { opacity: 1; } /* ===================================================================== REQUISITOS DE CONTRASEÑA --------------------------------------------------------------------- El JS de recover.blade.php enciende y apaga .active sobre cada .timeline-step. Se conservan esos nombres de clase a propósito: la lista cambia de aspecto sin tocar una línea de ese script. ===================================================================== */ .acc-reglas { margin: 12px 0 18px; padding: 12px 14px; background: var(--sys-realce); border: 1px solid var(--sys-linea); border-radius: var(--acc-radio-campo); } .acc-reglas-titulo { margin: 0 0 9px; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--sys-tinta-suave); } .acc-reglas .timeline-step { display: flex; align-items: center; gap: 9px; margin: 0 0 7px; padding: 0; border: 0; } .acc-reglas .timeline-step:last-child { margin-bottom: 0; } .acc-reglas .timeline-content { display: flex; align-items: center; gap: 9px; margin: 0; padding: 0; border: 0; } /* El círculo es la única señal de cumplido/no cumplido, así que además del color lleva un tilde: quien no distingue verde de gris igual lo ve. */ .acc-reglas .inner-circle { width: 16px; height: 16px; flex-shrink: 0; border-radius: 50%; background: var(--sys-superficie); border: 1.5px solid var(--sys-linea-fuerte); position: relative; transition: background-color .12s ease, border-color .12s ease; } .acc-reglas .inner-circle::after { content: ""; position: absolute; left: 4.4px; top: 2.2px; width: 3.5px; height: 7px; border: solid #fff; border-width: 0 1.9px 1.9px 0; transform: rotate(45deg) scale(0); transition: transform .12s ease; } .acc-reglas .timeline-step.active .inner-circle { background: var(--sys-aprobado); border-color: var(--sys-aprobado); } .acc-reglas .timeline-step.active .inner-circle::after { transform: rotate(45deg) scale(1); } .acc-reglas .label { margin: 0; font-size: 12.5px; line-height: 1.35; font-weight: 400; color: var(--sys-tinta-media); } .acc-reglas .timeline-step.active .label { color: var(--sys-tinta); } /* ===================================================================== CORREO ENMASCARADO · pantalla de confirmación ===================================================================== */ .acc-destacado { margin: 4px 0 18px; padding: 13px 15px; background: var(--sys-marca-suave); border: 1px solid rgba(0, 56, 227, .16); border-radius: var(--acc-radio-campo); text-align: center; font-size: 15px; font-weight: 600; color: var(--sys-marca-oscuro); word-break: break-all; } /* ===================================================================== reCAPTCHA --------------------------------------------------------------------- El widget mide 304px fijos. Se centra, y en pantallas angostas se reduce en vez de desbordar la tarjeta. ===================================================================== */ .acc-captcha { display: flex; justify-content: center; margin: 18px 0 0; } @media (max-width: 400px) { .acc-captcha { transform: scale(.86); transform-origin: center top; height: 68px; } } /* ===================================================================== VENTANA MODAL · pantalla de confirmación ===================================================================== */ .acc-cuerpo .modal-content { border: 1px solid var(--sys-linea); border-radius: var(--acc-radio-tarjeta); box-shadow: 0 10px 34px rgba(20, 22, 26, .16); } .acc-cuerpo .modal-header { border-bottom: 1px solid var(--sys-linea); padding: 15px 18px; align-items: center; } .acc-cuerpo .modal-title { font-size: 15.5px; font-weight: 600; margin: 0; color: var(--sys-tinta); } .acc-cuerpo .modal-body { padding: 18px; } .acc-cuerpo .modal-body p { font-size: 14px; line-height: 1.55; color: var(--sys-tinta-media); margin: 0 0 16px; } /* ===================================================================== RESPONSIVO --------------------------------------------------------------------- Por debajo de 900px el panel de marca no puede seguir ocupando media pantalla: se convierte en una franja con el logotipo y le cede todo el alto al formulario, que es lo que la persona vino a usar. ===================================================================== */ @media (max-width: 900px) { /* grid-template-rows explícito: sin él la grilla reparte el alto sobrante entre las dos filas, la de la marca queda más alta que la franja azul y por debajo asoma el fondo del body. La marca ocupa lo que mide, el formulario se queda con el resto. */ .acc-marco { grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: 100vh; } /* La franja vuelve a ser una fila simple y el logotipo se alinea a la izquierda: la columna centrada de 440px solo tiene sentido cuando el panel ocupa media pantalla. */ .acc-marca { display: flex; flex-direction: row; align-items: center; justify-items: initial; padding: 0 18px; height: 58px; } .acc-logo { width: auto; max-width: none; } .acc-logo img { height: 24px; } .acc-lema, .acc-ilustracion { display: none; } .acc-panel { padding: 26px 18px 44px; align-items: flex-start; } } @media (max-width: 480px) { .acc-panel { padding: 20px 14px 36px; } .acc-tarjeta { padding: 20px 17px 19px; } .acc-titulo { font-size: 19px; } .acc-acciones { flex-direction: column; } } /* Pantallas muy altas: el formulario no debe quedar perdido arriba. */ @media (min-width: 901px) and (max-height: 640px) { .acc-panel { align-items: flex-start; padding-top: 34px; } .acc-ilustracion { max-height: 34vh; } } @media (prefers-reduced-motion: reduce) { .acc-cuerpo *, .acc-reglas .inner-circle, .acc-reglas .inner-circle::after { transition: none !important; } }