/* ============================================================ OMIAXvisual — Estilos compartidos del área privada Sustituye al CSS que hoy se repite dentro de cada página. Piloto de unificación (jul 2026): de momento lo usan recuperar.php y restablecer.php; el resto se irá sumando. ============================================================ */ :root{--acento:#c96f4a;--tinta:#1d1d1f;--gris:#6e6e73;--linea:#e5e5ea} *{box-sizing:border-box;margin:0;padding:0} /* ---- Familia "tarjeta centrada" (login, recuperar, restablecer, validar, público) ---- Se activa poniendo en la página. */ body.auth{ font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; background:#f5f5f7;color:var(--tinta); display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px; } .auth .caja{background:#fff;border-radius:18px;padding:40px 34px;max-width:440px;width:100%;box-shadow:0 4px 24px rgba(0,0,0,.06)} .auth .marca{font-weight:700;margin-bottom:22px;text-align:center} .auth h1{font-size:1.3rem;margin-bottom:10px} .auth p{color:var(--gris);line-height:1.6;margin-bottom:16px;font-size:.95rem} .auth label{display:block;font-size:.85rem;color:var(--gris);margin:12px 0 6px} .auth input{width:100%;padding:12px 14px;border:1px solid var(--linea);border-radius:10px;font:inherit} .auth input:focus{outline:none;border-color:var(--acento)} .auth button{width:100%;margin-top:16px;background:var(--acento);color:#fff;border:0;padding:13px;border-radius:99px;font:inherit;font-weight:600;cursor:pointer} .auth a{color:var(--acento);text-decoration:none;font-size:.9rem} .auth .vuelta{text-align:center;margin-top:18px} .auth .mal{background:#fdeceb;color:#b3261e;padding:12px 16px;border-radius:12px;font-size:.9rem;margin-bottom:16px} .auth .icono{font-size:2rem;text-align:center;margin-bottom:10px} /* ---- Sub-variante "tarjeta de mensaje" (validar, público): texto centrado ---- */ .auth .caja.centro{text-align:center;max-width:460px} .auth .caja.centro .icono{font-size:2.2rem;margin-bottom:14px} .auth .caja.centro p{margin-bottom:10px} .auth .boton{display:inline-block;margin-top:24px;background:var(--acento);color:#fff;text-decoration:none;padding:13px 30px;border-radius:99px;font-weight:600;font-size:.95rem} .auth .boton.grande{margin-top:20px;padding:15px 40px;font-weight:700;font-size:1rem;letter-spacing:.04em} .auth .mini{font-size:.82rem;margin-top:18px} /* ---- Campo de código de 6 dígitos (login / 2FA) ---- */ .auth input.codigo{font-size:1.3rem;letter-spacing:.3em;text-align:center;font-family:ui-monospace,Menlo,monospace} /* ---- Sub-variante "login" (index.php): marca con subtítulo y botón oscuro ---- */ body.auth.login{padding:20px} .login .caja{box-shadow:0 10px 40px rgba(0,0,0,.08);padding:36px;max-width:420px} .login .marca{margin-bottom:8px;letter-spacing:.02em;font-size:1.25rem} .login .marca span{font-weight:300;letter-spacing:.35em;font-size:.7em;display:block;color:var(--gris)} .login h1{font-size:1.25rem;text-align:center;margin:14px 0 4px} .login p.sub{color:var(--gris);font-size:.92rem;text-align:center;margin-bottom:22px} .login label{margin:14px 0 6px} .login button{margin-top:22px;border-radius:12px;background:var(--tinta);font-weight:400} .login button:hover{background:#000} .login .aviso{margin-top:16px;padding:12px 14px;border-radius:10px;font-size:.9rem;background:#fdeeec;color:#9c3b22} .login .nota{font-size:.8rem;color:var(--gris);margin-top:16px;text-align:center} .login .olvido{display:block;text-align:center;margin-top:16px;font-size:.88rem;color:var(--acento);text-decoration:none} .login .volver{display:block;text-align:center;margin-top:10px;font-size:.85rem;color:var(--gris);text-decoration:none} /* ============================================================ Familia "panel" (páginas de administración con barra lateral). La barra lateral la aporta _menu.php; aquí va el "cromo" común del cuerpo: cabecera, contenido, títulos, tarjetas, tablas y avisos. Se activa con . ============================================================ */ body.panel{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;background:#f5f5f7;color:var(--tinta)} .panel header{background:#fff;border-bottom:1px solid var(--linea);padding:14px 24px;display:flex;justify-content:space-between;align-items:center} .panel header .marca{font-weight:700} .panel header a{color:var(--acento);text-decoration:none;font-size:.9rem} .panel main{max-width:960px;margin:30px auto;padding:0 20px} .panel main.ancho{max-width:1080px} .panel h1{font-size:1.5rem;margin-bottom:4px} .panel p.sub{color:var(--gris);margin-bottom:24px;font-size:.95rem;line-height:1.6} .panel header nav a{margin-left:18px} .panel .caja{background:#fff;border-radius:16px;padding:22px;box-shadow:0 4px 18px rgba(0,0,0,.05);margin-bottom:24px} .panel table{width:100%;border-collapse:collapse;font-size:.88rem} .panel th,.panel td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--linea)} .panel th{color:var(--gris);font-weight:600} .panel td a{color:var(--acento);text-decoration:none;font-weight:500} .panel .vacio{color:var(--gris);padding:16px 8px;line-height:1.6} .panel .aviso{padding:13px 17px;border-radius:12px;margin-bottom:20px;font-size:.92rem} .panel .ok{background:#e8f5e9;color:#2e6b33} .panel .mal{background:#fdeceb;color:#b3261e} /* Badges de estado (clientes, histórico, ficha…) */ .panel .etiq{display:inline-block;font-size:.78rem;padding:3px 9px;border-radius:99px;white-space:nowrap} .panel .etiq.si,.panel .etiq.act,.panel .etiq.on{background:#e8f5e9;color:#2e6b33} .panel .etiq.no,.panel .etiq.baja,.panel .etiq.off{background:#fdeceb;color:#b3261e} .panel .etiq.pend,.panel .etiq.cad{background:#fff4e0;color:#8a5a12} .panel .etiq.tip{background:#eef1f4;color:#4a5560} /* Caja de aviso amarilla y botón-papelera (enlaces, contenidos, entregables…) */ .panel .nota{background:#fff8e1;border:1px solid #f0e0b0;border-radius:12px;padding:16px;font-size:.9rem;margin-bottom:24px;line-height:1.55} .panel .papelera{display:inline-flex;align-items:center;gap:7px;background:none;border:1px solid #f0d4d1;color:#b3261e;padding:7px 11px;border-radius:10px;font:inherit;font-size:.85rem;cursor:pointer} .panel .papelera:hover{background:#fdeceb} /* Controles de formulario (nuevo cliente, textos de email, ficha…) */ .panel label{display:block;font-size:.85rem;color:var(--gris);margin-bottom:6px} .panel input,.panel textarea,.panel select{width:100%;padding:11px 13px;border:1px solid var(--linea);border-radius:10px;font:inherit;font-size:.95rem;background:#fff} .panel input:focus,.panel textarea:focus,.panel select:focus{outline:none;border-color:var(--acento)} .panel .campo{margin-bottom:16px} .panel .rejilla{display:grid;grid-template-columns:1fr 1fr;gap:16px} .panel .campo.ancho{grid-column:1 / -1} .panel button{background:var(--tinta);color:#fff;border:0;padding:12px 24px;border-radius:99px;font:inherit;font-weight:500;cursor:pointer} .panel button.sec{background:#fff;color:var(--tinta);border:1px solid var(--linea);padding:9px 16px;font-size:.88rem} .panel button.mini{background:none;border:0;color:#b3261e;font-size:.85rem;cursor:pointer;padding:0;border-radius:0;font-weight:400} .panel .cred{background:#fff8e1;border:1px solid #f0e0b0;border-radius:12px;padding:18px;margin-bottom:22px;line-height:1.7} .panel .cred code{background:#fff;padding:3px 8px;border-radius:6px;border:1px solid var(--linea)} .panel .cred a{color:var(--acento)} @media (max-width:640px){.panel .rejilla{grid-template-columns:1fr}}