/*
public/css/app.css — Mafort ERP
Tokens y clases extraídos literalmente de mafort-erp-mockup.html (raíz del proyecto).
Se carga vía app/librerias/librerias.php ($libreriasCABE, Libreria9), después de
Bootstrap para poder sobreescribirlo. No se reinventan estilos por módulo: todas
las vistas reutilizan estas clases (ver CLAUDE.md sección 7).
Nota: en el mockup #login y #app eran dos paneles alternables por JS en una sola
página, solo para la demo. Aquí son cada uno una página real (login.php vs
dashboard), así que se quitó ese toggle (display:none/.active) — cada bloque se
muestra directo en su propia vista.
*/
:root{
--ink:#0F1D33;
--slate:#17304F;
--steel:#3C7B9E;
--amber:#E39A3B;
--paper:#F4F6F8;
--line:#DDE3E9;
--muted:#6C7A89;
--text:#1A2433;
--ok:#3F8F6F;
}
html{overflow-x:hidden;}
body{font-family:'Inter',sans-serif;background:var(--paper);color:var(--text);overflow-x:hidden;}
h1,h2,h3,.display{font-family:'Sora',sans-serif;}
.mono{font-family:'IBM Plex Mono',monospace;}
/* ===== LOGIN ===== */
#login{min-height:100vh;display:flex;align-items:center;justify-content:center;background:
linear-gradient(180deg, var(--ink) 0%, var(--slate) 100%);position:relative;overflow:hidden;}
.rail{position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(180deg,var(--amber),var(--steel));}
.login-grid{display:grid;grid-template-columns:1.1fr 0.9fr;max-width:940px;width:92%;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.35);}
.login-side{background:var(--ink);color:#fff;padding:52px 44px;display:flex;flex-direction:column;justify-content:space-between;position:relative;}
.login-side::before{content:"";position:absolute;top:0;right:0;width:140px;height:140px;background:radial-gradient(circle,var(--amber) 0%,transparent 70%);opacity:.25;}
.brand-mark{font-size:13px;letter-spacing:.14em;color:var(--amber);font-weight:600;text-transform:uppercase;margin-bottom:18px;}
.login-side h1{font-size:30px;line-height:1.25;font-weight:700;max-width:320px;}
.login-side p{color:#9FB1C4;font-size:14px;margin-top:16px;max-width:300px;line-height:1.6;}
.modules-strip{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px;}
.modules-strip span{font-size:11px;font-family:'IBM Plex Mono';color:#B9C6D6;border:1px solid rgba(255,255,255,.15);padding:5px 9px;border-radius:20px;}
.login-form{padding:52px 44px;display:flex;flex-direction:column;justify-content:center;}
.login-form h2{font-size:22px;margin-bottom:6px;}
.login-form .sub{color:var(--muted);font-size:13px;margin-bottom:28px;}
.field{margin-bottom:16px;}
.field label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em;}
.field input,
.field select,
.field textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:8px;font-size:14px;font-family:'Inter';outline:none;transition:.15s;background:#fff;color:var(--text);}
.field input:focus,
.field select:focus,
.field textarea:focus{border-color:var(--steel);box-shadow:0 0 0 3px rgba(60,123,158,.15);}
.field select{appearance:none;-webkit-appearance:none;-moz-appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236C7A89' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;cursor:pointer;}
.field select:disabled{background-color:var(--paper);color:var(--muted);cursor:not-allowed;}
.field textarea{resize:vertical;line-height:1.5;min-height:80px;}
/* "Ojito" para mostrar/ocultar contraseña (public/js/app.js envuelve
cualquier input[type="password"] en tiempo de ejecucion, no hace falta
agregar esta clase a mano en cada vista). */
.campo-clave{position:relative;}
.campo-clave input{padding-right:38px;}
.toggle-clave{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;font-size:15px;line-height:1;padding:4px;cursor:pointer;color:var(--muted);}
.toggle-clave:hover{color:var(--ink);}
/*
Validacion de formularios (pedido por Ytalo, 2026-07-09: "agrega Bootstrap
Validator o algo parecido" -- ese plugin jQuery esta discontinuado hace
anios; se usa en cambio el mecanismo NATIVO de validacion HTML5 que ya
disparan los atributos required/type=email/pattern ya presentes en los
inputs, con el manejo de submit + estas clases en public/js/app.js
(bloque "Validacion de formularios"). Aplica a TODOS los