/* Portal del Cliente SUMA · estilos comunes (landing, cliente y equipo).
   Lato en todo (portal-web-novazys §1). Colores de marca SUMA: tinta #131E28 y verde #22B573.
   Los colores con significado (ok, alerta, error) no se personalizan. */
:root{
  --tinta:#131E28; --tinta-2:#24324A; --suave:#5D6B63; --tenue:#8A968F;
  --fondo:#F6F9F7; --papel:#FFFFFF; --borde:#E2E9E4; --borde-2:#D5DED8;
  --pri:#1A9A5E; --pri-hover:#157A4B; --sobre-pri:#FFFFFF; --pri-suave:#E3F5EC; --marca:#22B573;
  --cielo:#3B82B6;
  --ok:#1E8E3E; --ok-bg:#E6F4EA; --warn:#9A5B00; --warn-bg:#FFF4E0; --err:#C62828; --err-bg:#FDECEA; --info:#3E6FB0; --info-bg:#E8F0FB;
  --sombra:0 18px 40px rgba(20,35,27,.10),0 2px 6px rgba(20,35,27,.05);
  --sombra-s:0 1px 2px rgba(16,24,20,.06),0 2px 8px rgba(16,24,20,.05);
  --font:'Lato',-apple-system,'Segoe UI',Roboto,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--fondo);color:var(--tinta);font-family:var(--font);font-size:14px;letter-spacing:.1px;-webkit-font-smoothing:antialiased}
input,select,button,textarea,table,svg text{font-family:var(--font)!important}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--pri)}
h1,h2,h3,h4{margin:0;text-wrap:balance}
:focus-visible{outline:3px solid rgba(26,154,94,.35);outline-offset:2px}
[hidden]{display:none!important}
.num{font-variant-numeric:tabular-nums}

/* Avisos y chips */
.aviso{padding:11px 13px;border-radius:10px;font-size:13px;line-height:1.5;margin:10px 0}
.aviso.ok{background:var(--ok-bg);color:var(--ok)}.aviso.err{background:var(--err-bg);color:var(--err)}
.aviso.warn{background:var(--warn-bg);color:var(--warn)}.aviso.info{background:var(--info-bg);color:var(--info)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;border-radius:999px;padding:4px 10px;white-space:nowrap;background:var(--fondo);color:var(--suave)}
.chip i{width:6px;height:6px;border-radius:50%;background:currentColor}
.chip.ok{background:var(--ok-bg);color:var(--ok)}.chip.warn{background:var(--warn-bg);color:var(--warn)}.chip.err{background:var(--err-bg);color:var(--err)}
.chip.info{background:var(--info-bg);color:var(--info)}.chip.neu{background:var(--fondo);color:var(--suave)}

/* Botones */
.b-pri{width:100%;margin-top:6px;padding:13px;border:0;border-radius:12px;background:var(--pri);color:var(--sobre-pri);font-weight:700;font-size:15px;cursor:pointer;transition:background .15s}
.b-pri:hover{background:var(--pri-hover)}
.b-pri:disabled{opacity:.6;cursor:default}
.b-ver{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;background:var(--pri);color:var(--sobre-pri);border-radius:10px;padding:10px 16px;font-weight:700;font-size:13.5px;cursor:pointer;text-decoration:none;white-space:nowrap}
.b-ver:hover{background:var(--pri-hover)}
.b-ver:disabled,.b-sec:disabled,.b-rojo:disabled{opacity:.5;cursor:default}
.b-sec{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--borde-2);background:#fff;color:var(--tinta);border-radius:10px;padding:9px 14px;font-weight:700;font-size:13px;cursor:pointer;text-decoration:none;white-space:nowrap}
.b-sec:hover{border-color:var(--pri);color:var(--pri-hover)}
.b-rojo{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid #F0C4C4;background:#fff;color:var(--err);border-radius:10px;padding:10px 16px;font-weight:700;font-size:13.5px;cursor:pointer}
.b-rojo:hover{background:var(--err-bg)}
.enlace{border:0;background:none;color:var(--cielo);font-weight:700;font-size:13px;cursor:pointer;padding:0;text-decoration:none}
.enlace:hover{text-decoration:underline}

/* Campos */
.campo{margin-bottom:14px;min-width:0}
.campo > label,.campo > .etq{display:block;margin:0 0 6px;font-size:13px;font-weight:700;color:var(--tinta)}
.campo input,.campo select,.campo textarea{width:100%;padding:11px 13px;border:1px solid var(--borde-2);border-radius:11px;font-size:14.5px;background:#FBFCFB;transition:border-color .15s,box-shadow .15s}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 4px rgba(26,154,94,.12);background:#fff}
.campo input[readonly]{background:var(--fondo);color:var(--suave)}
.campo .ayuda{display:block;margin-top:5px;font-size:12px;color:var(--suave);line-height:1.4}
.campo .error{display:block;margin-top:5px;font-size:12px;color:var(--err);font-weight:700}
.campo.con-error input,.campo.con-error select{border-color:var(--err)}
.campo .req{color:var(--err);margin-left:3px}
.clave{position:relative}
.clave input{padding-right:86px}
.clave button{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--pri);font-weight:700;font-size:13px;cursor:pointer;padding:6px 8px}
.seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--borde-2);border-radius:10px;overflow:hidden;background:#fff}
.seg label{margin:0;padding:9px 14px;font-size:13.5px;font-weight:700;cursor:pointer;color:var(--suave);border-left:1px solid var(--borde-2);position:relative}
.seg label:first-child{border-left:0}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label:has(input:checked){background:var(--pri-suave);color:var(--pri-hover)}
.seg label:has(input:focus-visible){outline:3px solid rgba(26,154,94,.35)}
.reglas{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:4px;font-size:12.5px;color:var(--suave)}
.reglas li{display:flex;align-items:center;gap:7px}
.reglas li::before{content:"";width:14px;height:14px;border-radius:50%;border:1.5px solid var(--borde-2);flex:none}
.reglas li.ok{color:var(--ok)}
.reglas li.ok::before{border-color:var(--ok);background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/9px no-repeat}
.mayus{font-size:12px;color:var(--warn);visibility:hidden}.mayus.on{visibility:visible}
.casilla{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.45;color:var(--suave);margin:4px 0 14px}
.casilla input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--pri);flex:none}

.cargando{display:flex;align-items:center;gap:10px;color:var(--suave);padding:40px 0;justify-content:center}
.spin{width:20px;height:20px;border-radius:50%;border:3px solid var(--borde);border-top-color:var(--pri);animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}