/* Overlay base */ .mc-lightbox { position: fixed; inset: 0; z-index: 9999; display: none; } .mc-lightbox.is-open { display: block; } .mc-lightbox__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.9); backdrop-filter: blur(2px); } /* Diálogo centrado */ .mc-lightbox__dialog { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: min(560px, 92vw); background: #fff; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.25); padding: 28px 24px; } /* Título y cierre */ .mc-lightbox__title { margin: 0 0 14px; font-size: 20px; line-height: 1.2; font-weight: 700; } .mc-lightbox__close { position: absolute; top: 5px; right: 0px; border: 0; background: transparent; font-size: 28px; line-height: 1; cursor: pointer; color: #888; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.0) !important; } .mc-lightbox__close:hover { background: transparent;color: #444; } /* Herencia y mínimos por si faltaran tus clases globales */ .mc-form { display: grid; gap: 14px; } .mc-field { display: grid; gap: 6px; } .mc-field--row { display: flex; align-items: center; justify-content: space-between; } .mc-label { font-weight: 600; } .mc-input { width:100%; background-color: #FAFAFA !important; border-color: #E6E6E6 !important; border-radius:0px; padding: .75em; font-size:16px; background:#fff; } .mc-input:focus { outline: none; border-color: #3b82f6; /* azul suave */ box-shadow: 0 0 0 3px rgba(59,130,246,.15); } .mc-check { display: inline-flex; align-items: center; gap: 8px; } .mc-actions { margin-top: 4px; display: flex; gap: 10px; } /* Botones base (si ya los tenéis, esto no molesta) */ .mc-btn { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 0px; padding: 10px 16px; font-weight: 600; cursor: pointer; transition: transform .06s ease, box-shadow .2s ease, opacity .2s ease; text-decoration: none; font-size: 14px; } .mc-btn-primary { background: #E2211C; color: #fff; /* oscuro */ } .mc-btn-primary:hover { background: #B40600; } .mc-btn:active { transform: translateY(1px); } /* Enlaces suaves */ .mc-link { text-decoration: none !important; font-size: 14px; } .mc-link--muted { color: #6b7280; } .mc-link--muted:hover { color: #111827; } .mc-btn-login { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; } .mc-btn__icon { display: inline-flex; align-items: center; } .mc-icon--fa { display: none; } /* por defecto oculto */ .mc-icon--svg { display: inline-flex; } /* Cuando detectemos FA, activamos la clase en y con esto invertimos la visibilidad */ html.has-fa .mc-icon--fa { display: inline-flex; } html.has-fa .mc-icon--svg { display: none; } .mc-icon--fa i { font-size: 14px; line-height: 1; color: inherit; } .mc-icon-user { width: 14px; height: 14px; display: block; } /* Vistas dentro del modal */ .mc-lightbox__views { margin: 0; } .mc-view { display:none; } .mc-view.is-active { display:block; } /* Ayuda bajo campos */ .mc-help { margin: 6px 0 0; font-size: 13px; color: #6b7280; } /* Acciones en recuperar: volver/submit a extremos */ .mc-actions--split { display:flex; justify-content:space-between; gap:10px; } /* Contenedor de vistas */ .mc-lightbox__views { margin:0; } .mc-view { display:none; } .mc-view.is-active { display:block; } /* Textos de ayuda */ .mc-help { margin:6px 0 0; font-size:13px; color:#6b7280; } /* Acciones combinadas */ .mc-actions--split { display:flex; justify-content:space-between; gap:10px; } /* Indicaciones de fuerza/validación opcionales (si las quieres usar más adelante) */ .mc-input.is-invalid { border-color:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.15); } .mc-input.is-valid { border-color:#10b981; box-shadow:0 0 0 3px rgba(16,185,129,.15); } /* --- Toggle de visibilidad de contraseña --- */ .mc-input-wrap { position: relative; } .mc-input-toggle { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); border: 0; background: transparent; cursor: pointer; padding: 6px; line-height: 1; color: #6b7280; border-radius: 0px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.0); } .mc-input-toggle:hover { color: #111827; background: rgba(17,24,39,0.0); } .mc-input-toggle .icon-hide { display: none !important; } .mc-input-toggle[aria-pressed="true"] .icon-show { display: none !important; } .mc-input-toggle[aria-pressed="true"] .icon-hide { display: inline-flex !important; } .mc-icon--fa { display: none; align-items: center; } .mc-icon--svg { display: inline-flex; align-items: center; } html.has-fa .mc-icon--fa { display: inline-flex; } html.has-fa .mc-icon--svg { display: none; } .mc-icon-eye, .mc-icon-eye-off { width: 18px; height: 18px; display: block; } /* Íconos del toggle: el atributo [hidden] domina */ .mc-input-toggle .icon-show, .mc-input-toggle .icon-hide { display: inline-flex; align-items: center; } .mc-input-toggle .icon-show[hidden], .mc-input-toggle .icon-hide[hidden] { display: none; } /* Mantén tus reglas de FA fallback, no interfieren con [hidden] */