/* Acceso al CRM (maqueta aprobada por Eduardo, 23/10/2026). Colores de crm.css; Poppins servida por el propio CRM. */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/poppins-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/poppins-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/poppins-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/poppins-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/poppins-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/poppins-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/poppins-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/poppins-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{--navy:#163259;--brand:#5b35ed;--bg:#f3f4fb;--ink:#242638;--line:#e4e5f0;--violet:#5b35ed;--soft:#6b6f8c;--field:#d9dcea;--error:#c0392b;--error-text:#a8321f;--next:linear-gradient(110deg,#ad65cf,var(--brand) 48%,#4c23e8)}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;min-height:100vh;overflow-x:hidden;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:var(--bg);color:var(--ink);font-family:Poppins,-apple-system,'Segoe UI',Arial,sans-serif}
a{color:var(--violet)}a:hover{color:#4c23e8}
button,input{font:inherit}
input:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid #2aaabb;outline-offset:3px}
.login-side{background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:48px}
.login-card{width:380px;max-width:100%;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 28px rgba(22,50,89,.08);padding:32px;display:flex;flex-direction:column;gap:18px}
.login-head{display:flex;flex-direction:column;gap:6px;text-align:center}
.login-head p{margin:0;font-size:14px;line-height:1.5;color:var(--soft)}
.env-pill{align-self:center;font-size:12px;letter-spacing:.06em;color:var(--navy);background:#dff5f8;border-radius:999px;padding:3px 12px;font-weight:500}
h1{margin:4px 0 0;font-size:20px;font-weight:600;color:var(--navy)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12px;font-weight:500;color:var(--navy)}
.field input{height:44px;border:1px solid var(--field);border-radius:8px;padding:0 14px;font-size:14px;color:var(--ink);background:#fff}
.field input[aria-invalid=true]{border:1.5px solid var(--error)}
.field-error{font-size:12px;color:var(--error-text)}
.field-note{font-size:12px;color:var(--soft)}
.login-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.remember{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}
.remember input{width:16px;height:16px;margin:0;accent-color:var(--violet)}
.login-row a,.login-back{font-size:14px;font-weight:500;text-decoration:none}
.login-back{align-self:center}
.login-submit{height:48px;border:0;border-radius:8px;color:#fff;font-size:14px;font-weight:600;background:var(--next);box-shadow:0 3px 12px rgba(115,85,223,.25);cursor:pointer}
.login-submit:disabled{opacity:.7;cursor:progress}
.login-done{margin:0;font-size:14px;line-height:1.5;color:var(--navy);background:#dff5f8;border-radius:8px;padding:10px 12px}
.login-foot{margin:0;font-size:12px;color:var(--soft);text-align:center}
/* Borde en burbuja como la web (Eduardo, 23/10/2026): la onda se sale 90 px hacia la columna del formulario. */
.login-brand{position:relative;color:#fff;display:flex;flex-direction:column;justify-content:center;gap:28px;padding:64px 64px 64px 104px}
.login-brand>*{position:relative}
.login-brand>.brand-wave{position:absolute;top:0;left:-90px;width:calc(100% + 90px);height:100%;display:block}
/* CiRi: los puntos de las «i» en cian (sobre «ı» sin punto). */
.ciri-i{position:relative;display:inline-block}
.ciri-i::after{content:"";position:absolute;left:50%;top:.16em;width:.26em;height:.26em;margin-left:-.13em;border-radius:50%;background:#2fd3e3}
.login-brand img{width:220px;height:auto;display:block}
/* Etiqueta «CiRi» bajo el logo, centrada, con el mismo estilo que la del menú del CRM. */
.brand-mark{display:inline-flex;flex-direction:column;align-items:center;gap:12px;align-self:flex-start}
.ciri-tag{font:600 14px/20px Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:#fff;background:var(--navy);border:1px solid rgba(127,211,224,.45);border-radius:12px;padding:6px 12px;white-space:nowrap}
.ciri-tag .ciri-i::after{top:1px;width:5px;height:5px;margin-left:-2.5px;background:#7fd3e0}
.brand-copy{display:flex;flex-direction:column;gap:14px}
.brand-copy h2{margin:0;font-size:40px;line-height:1.15;font-weight:700}
.brand-copy p{margin:0;font-size:16px;line-height:1.6;color:#c2d2e6}
.brand-sample{border-radius:12px;padding:2px;background:linear-gradient(105deg,#ddbee3,#a999ff 55%,#8bdfce)}
.sample-inner{background:#fff;border-radius:10px;padding:14px 16px;display:flex;align-items:center;gap:14px;color:var(--ink)}
.sample-icon{width:40px;height:40px;border-radius:8px;background:#edf0ff;display:grid;place-items:center;flex-shrink:0}
.sample-text{display:flex;flex-direction:column;gap:2px;flex-grow:1;min-width:0}
.sample-text strong{font-size:14px;font-weight:600}
.sample-text span{font-size:12px;color:var(--soft)}
.sample-button{border-radius:7px;color:#fff;background:var(--next);padding:10px 16px;font-size:14px;font-weight:600;white-space:nowrap}
/* Pantallas grandes (tarea 93, Eduardo 05/11/2026: en 24" el acceso «salía como cortado»). Solo por encima de 1440 px: el panel
   azul deja un margen igual a cada lado y su contenido tiene un ancho máximo de 560 px, centrado en su mitad; el logo y «CiRi» van
   alineados con el texto. A 1440 px o menos, todo como estaba. */
@media (min-width:1441px){
 .login-brand{padding:64px}
 .brand-copy,.brand-sample{width:100%;max-width:560px;margin-left:auto;margin-right:auto}
 .brand-mark{margin-left:max(0px,calc((100% - 560px) / 2))}
}
/* Pantalla estrecha: la franja azul va arriba, solo con el logo, y la tarjeta ocupa el ancho. */
@media (max-width:820px){
 body{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
 .login-brand{order:-1;padding:18px 16px;align-items:center;gap:0;background:var(--navy)}
 .login-brand>.brand-wave{display:none}
 .login-brand img{width:150px}
 .brand-mark{align-self:center}
 .brand-copy,.brand-sample{display:none}
 .login-side{justify-content:flex-start;padding:24px 16px}
 .login-card{width:100%;padding:24px 20px}
}