/* Eco Valores: lo común a todas las pantallas del alta de empresas, de la cuenta FAL, de quien firma y del panel de
   referentes (rediseño del 2026-10-02). Es el mundo de las páginas FAL publicadas (https://www.ecovalores.com.ar/fal-pymes/):
   Inter, la banda verde con el logo blanco y la «e» grande, texto pizarra. Lector de más de 60 años: cuerpo de 19 px,
   nada para tocar de menos de 44 px, nada que se entienda sólo por el color.
   Contraste AAA (WCAG 2.2, 7:1 en texto corriente; 2026-10-06): el verde de la banda y del botón principal sigue siendo
   el de la marca (4,9:1 con blanco), así que el texto que va sobre él es grande y negrita (19 px / 700, lo que la norma
   cuenta como texto grande); el texto verde sobre blanco usa --campo-texto (8,7:1); el gris de las ayudas y los rótulos,
   --gris (8,6:1); las tintas de los estados pasan de 7:1 sobre su fondo.
   Después de este archivo, cada pantalla carga el suyo: panel.css (quien completa y el panel) o invitado.css (quien firma). */

@font-face{font-family:"Inter";src:url("fuentes/inter-latin.woff2") format("woff2");font-weight:100 900;font-display:swap}

:root{
  --campo:#0F7F74;   --campo-2:#0A665D;  --campo-claro:#E4F1EF; --campo-ln:#9FCFC8;   /* banda y acción principal */
  --campo-texto:#09554D;                                                               /* verde para TEXTO: enlaces, solapa activa (8,7:1) */
  --e:#159F91;                                                                         /* el verde del logo, sólo marca */
  --tinta:#2F3A4D;   --tinta-2:#3E4A5F;  --gris:#414D5D;                               /* texto; --gris 8,6:1 en blanco, 7,9:1 en --fondo-2 */
  --linea:#DCE3EA;   --borde:#848FA0;                                                  /* separadores · borde de campos (3:1) */
  --fondo:#FFFFFF;   --fondo-2:#F3F6F8;
  --ok:#0F5339;   --ok-bg:#E3F2EC;   --ok-ln:#A9D3C1;                                  /* tintas de estado: ≥ 7:1 sobre su fondo */
  --warn:#663D00; --warn-bg:#FCEFD8; --warn-ln:#E6C68A;
  --crit:#8A1F14; --crit-bg:#FBE5E1; --crit-ln:#E8B2A9;
  --info:#24496F; --info-bg:#E8EFF7; --info-ln:#BACBDF;
  --nt:#3F4959;   --nt-bg:#ECEFF3;   --nt-ln:#CDD4DD;
  --r:10px;
  --sombra:0 1px 2px rgba(47,58,77,.06),0 6px 18px -8px rgba(47,58,77,.18);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}   /* un botón oculto por JavaScript no vuelve a verse por su display */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-color:var(--borde) transparent}
body{margin:0;background:var(--fondo);color:var(--tinta);
     font:400 19px/1.55 "Inter",-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
     font-feature-settings:"cv11" 1;-webkit-font-smoothing:antialiased}
::selection{background:#CDE8E4;color:var(--tinta)}
a{color:var(--campo-texto);text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2.5px}
:focus-visible{outline:3px solid var(--campo);outline-offset:3px;border-radius:6px}
b,strong{font-weight:650}
h1{font-size:1.625rem;line-height:1.2;font-weight:720;letter-spacing:-.015em;margin:0 0 .65em;text-wrap:balance}
h2{font-size:1.25rem;line-height:1.3;font-weight:680;letter-spacing:-.01em;margin:0;text-wrap:balance}
p{margin:0 0 1em}
@media (min-width:760px){h1{font-size:1.875rem}}

/* ---------------------------------------------------------------- la banda de Eco */
.eco-top{position:relative;overflow:hidden;background:var(--campo);color:#fff;padding-top:env(safe-area-inset-top)}
.eco-top::after{content:"";position:absolute;right:-26px;top:-34px;width:150px;height:170px;pointer-events:none;
  background:url("marca/e.svg") no-repeat center/contain;opacity:.6}
.eco-top-in{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;
  flex-wrap:wrap;gap:6px 22px;min-height:64px}
.eco-logo{display:block;height:28px;width:auto;flex:none}
/* Sobre el verde de la marca el texto es grande y negrita (19 px / 700): así pasa AAA sin cambiar el color de la banda. */
.eco-ctx{margin:0;font-size:19px;line-height:1.35;font-weight:700;color:#fff}
.eco-ctx b{font-weight:700}
.nw{white-space:nowrap}
.eco-der{margin-left:auto;display:flex;align-items:center;gap:6px 18px;flex-wrap:wrap;font-size:19px;font-weight:700;padding-right:72px}
.eco-der a,.eco-der .lnk{color:#fff}
.eco-top :focus-visible{outline-color:#fff}
@media (max-width:759px){
  .eco-top-in{padding:12px 18px;min-height:0}
  .eco-logo{height:24px}
  .eco-ctx{order:3;flex-basis:100%;padding-right:44px}
  .eco-der{padding-right:56px}
  .eco-top::after{right:-30px;top:-26px;width:96px;height:110px}
  .eco-der:has(.eco-quien){display:contents}
  .eco-der .eco-quien{order:4;flex-basis:100%;padding-right:44px}
  .eco-der:has(.eco-quien) .salir{order:2;margin-left:auto;padding-right:52px}
}

/* ---------------------------------------------------------------- la página */
.eco-cuerpo{max-width:1180px;margin:0 auto;padding:32px 24px 72px}
.eco-hoja{max-width:740px;min-width:0}
@media (min-width:1000px){
  .eco-cuerpo.con-pasos{display:grid;grid-template-columns:250px minmax(0,740px);gap:56px;align-items:start}
}
@media (max-width:759px){.eco-cuerpo{padding:22px 18px 56px}}
.lead{color:var(--tinta-2);margin:0 0 22px;max-width:62ch}
.muted{color:var(--gris)}
.volver{margin:0 0 6px;gap:8px}
.flecha{flex:none}

/* ---------------------------------------------------------------- los pasos: riel en la computadora, tira en el teléfono */
.rail{position:sticky;top:24px;font-size:17px}
.rail ol,.pasos-movil ol{list-style:none;margin:0;padding:0;counter-reset:paso}
.paso-i{position:relative;counter-increment:paso;padding:2px 0 18px 46px;min-height:52px;line-height:1.35}
.paso-i::before{content:counter(paso);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;font-size:16px;font-weight:680;font-variant-numeric:tabular-nums;
  color:var(--gris);background:var(--fondo);border:2px solid var(--borde)}
.paso-i:not(:last-child)::after{content:"";position:absolute;left:15px;top:36px;bottom:2px;width:2px;background:var(--linea)}
.paso-i.hecho::before{content:"";background:var(--campo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center/18px;border-color:var(--campo)}
.paso-i.hecho:not(:last-child)::after{background:var(--campo-ln)}
.paso-i.actual::before{background:var(--campo);border-color:var(--campo);color:#fff}
.paso-i.falta::before{border-color:var(--warn);color:var(--warn)}
.paso-i a,.paso-i span.paso-t{display:inline-block;padding-top:4px;color:var(--tinta);font-weight:560;text-decoration:none}
.paso-i a:hover{text-decoration:underline}
.paso-i.actual .paso-t{font-weight:720}
.paso-i .paso-falta{display:block;font-size:16px;font-weight:650;color:var(--warn)}
.pasos-movil{display:none;margin:0 0 22px;border:1px solid var(--linea);border-radius:var(--r);background:var(--fondo-2)}
.pasos-movil>summary{display:flex;flex-direction:column;gap:8px;padding:12px 44px 12px 16px;cursor:pointer;list-style:none;position:relative;min-height:52px}
.pasos-movil>summary::-webkit-details-marker{display:none}
.pasos-movil>summary::after{content:"";position:absolute;right:18px;top:20px;width:10px;height:10px;
  border-right:2.5px solid var(--campo);border-bottom:2.5px solid var(--campo);transform:rotate(45deg);transition:transform .18s cubic-bezier(.2,.7,.2,1)}
.pasos-movil[open]>summary::after{transform:rotate(225deg);top:25px}
.pasos-n{font-size:17px;font-weight:650;color:var(--tinta)}
.pasos-n .paso-nombre{font-weight:500;color:var(--tinta-2)}
.pasos-barra{display:flex;gap:4px}
.pasos-barra i{flex:1;height:6px;border-radius:3px;background:var(--linea)}
.pasos-barra i.hecho{background:var(--campo-ln)}
.pasos-barra i.actual{background:var(--campo)}
.pasos-barra i.falta{background:var(--warn-ln)}
.pasos-movil ol{padding:6px 16px 4px;border-top:1px solid var(--linea);font-size:17px}
@media (max-width:999px){.rail{display:none}.pasos-movil{display:block}}

/* ---------------------------------------------------------------- campos */
.campos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px 18px}
.campo{min-width:0}
.campo.a-todo{grid-column:span 6}
.campo.a-medio{grid-column:span 3}
.campo.a-tercio{grid-column:span 2}
@media (max-width:640px){.campo.a-medio,.campo.a-tercio{grid-column:span 6}}
fieldset.campo{border:0;margin:0;padding:0;min-width:0}
.etiqueta,fieldset.campo>legend.etiqueta{display:block;padding:0;width:100%;font-size:18px;font-weight:620;line-height:1.35;color:var(--tinta);margin:0 0 8px}
.req{color:var(--crit);font-weight:700}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=number],input[type=password],select,textarea{
  width:100%;min-height:52px;padding:12px 14px;font:inherit;font-size:19px;color:var(--tinta);background:var(--fondo);
  border:1.5px solid var(--borde);border-radius:var(--r);transition:border-color .15s ease-out,box-shadow .15s ease-out}
input:hover,select:hover,textarea:hover{border-color:var(--tinta-2)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;border-color:var(--campo);box-shadow:0 0 0 3px rgba(15,127,116,.28)}
input::placeholder,textarea::placeholder{color:#4F5969;opacity:1}   /* 7,1:1: el ejemplo también es texto */
input[readonly],input:disabled{background:var(--fondo-2);color:var(--tinta-2);border-color:var(--linea)}
select{appearance:none;padding-right:46px;cursor:pointer;
  background:var(--fondo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F3A4D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/20px}
.ayuda{display:block;font-size:17px;line-height:1.45;color:var(--gris);margin:7px 0 0}
fieldset.campo>.ayuda{margin:-2px 0 10px}
.error{display:flex;gap:8px;align-items:flex-start;font-size:17px;line-height:1.4;color:var(--crit);font-weight:600;margin-top:8px}
.error::before{content:"";flex:none;width:18px;height:18px;margin-top:2px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A0281A' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.2'/%3E%3C/svg%3E") no-repeat center/contain}
.con-error input,.con-error select{border-color:var(--crit);box-shadow:inset 0 0 0 1px var(--crit)}

/* opciones (radio y casillas) como filas grandes */
.opciones{display:flex;flex-direction:column;gap:10px}
.opciones.columnas{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.op{display:flex;align-items:flex-start;gap:12px;padding:13px 16px;min-height:54px;border:1.5px solid var(--linea);
  border-radius:var(--r);background:var(--fondo);cursor:pointer;line-height:1.4;transition:border-color .15s ease-out,background-color .15s ease-out}
.op:hover{border-color:var(--borde)}
.op input{margin:2px 0 0;width:22px;height:22px;flex:none;accent-color:var(--campo);cursor:pointer}
.op:has(input:checked){border-color:var(--campo);background:var(--campo-claro);box-shadow:inset 0 0 0 1px var(--campo)}
.op:has(input:focus-visible){outline:3px solid var(--campo);outline-offset:2px}
.op:has(input:disabled){opacity:.6;cursor:default}
.op span{min-width:0}
.op a{overflow-wrap:anywhere}

/* ---------------------------------------------------------------- botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 22px;
  border-radius:var(--r);border:1.5px solid var(--tinta);background:var(--fondo);color:var(--tinta);
  font:inherit;font-size:18px;font-weight:650;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;
  transition:background-color .15s ease-out,border-color .15s ease-out,color .15s ease-out}
.btn:hover{background:var(--fondo-2);color:var(--tinta)}
.btn:active{transform:translateY(1px)}
.btn.pri{background:var(--campo);border-color:var(--campo);color:#fff;font-size:19px;font-weight:700}   /* texto grande sobre el verde de marca */
.btn.pri:hover{background:var(--campo-2);border-color:var(--campo-2);color:#fff}
.btn:disabled,.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed;transform:none}
.btn svg{flex:none}
.lnk{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0;border:0;background:none;color:var(--campo-texto);
  font:inherit;font-size:18px;font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;cursor:pointer}
.lnk:hover{text-decoration-thickness:2.5px}
.lnk svg{flex:none}
/* El cierre de un formulario: siempre en el mismo orden. En el teléfono, a lo ancho; «Cancelar» como enlace. */
.pie{display:flex;align-items:center;gap:12px 14px;flex-wrap:wrap;margin-top:30px}
.pie form{display:contents}
.pie .lnk.cancelar{margin-left:auto}
@media (max-width:640px){
  .pie{flex-direction:column;align-items:stretch}
  .pie .btn{width:100%}
  .pie .lnk{justify-content:center}
  .pie .lnk.cancelar{margin-left:0}
}

/* ---------------------------------------------------------------- estados */
.chip{display:inline-flex;align-items:center;gap:7px;font-size:16px;font-weight:620;line-height:1.3;padding:3px 12px;
  border-radius:999px;border:1px solid;width:max-content;max-width:100%;white-space:nowrap}
.chip::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.t-ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-ln)}
.t-info{background:var(--info-bg);color:var(--info);border-color:var(--info-ln)}
.t-warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-ln)}
.t-crit{background:var(--crit-bg);color:var(--crit);border-color:var(--crit-ln)}
.t-neutral{background:var(--nt-bg);color:var(--nt);border-color:var(--nt-ln)}

.nota,.aviso-form{display:block;margin:0 0 20px;padding:14px 18px;border-radius:var(--r);border:1px solid var(--info-ln);
  background:var(--info-bg);color:var(--tinta);font-size:18px;line-height:1.5}
.nota>p:first-child{margin-top:0}.nota>p:last-child{margin-bottom:0}
.nota-ok{background:var(--ok-bg);border-color:var(--ok-ln);color:var(--ok)}
.nota-warn{background:var(--warn-bg);border-color:var(--warn-ln);color:var(--warn)}
.aviso-form,.nota-crit{background:var(--crit-bg);border-color:var(--crit-ln);color:var(--crit)}

/* Una dirección para copiar: Inter, partida donde haga falta, sobre un gris quieto. */
.enlace-txt{margin:12px 0;padding:12px 16px;border-radius:var(--r);background:var(--fondo-2);border:1px solid var(--linea);
  font-size:18px;line-height:1.45;overflow-wrap:anywhere;color:var(--tinta-2);font-variant-numeric:tabular-nums}

/* La lista «dato: valor» (revisión de la solicitud, lo que firma quien firma, «Revisá antes de guardar»). */
.filas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:10px 24px;margin:14px 0 0}
.filas dt{color:var(--gris);font-size:17px;line-height:1.45}
.filas dd{margin:0;overflow-wrap:anywhere}
@media (max-width:640px){.filas{grid-template-columns:1fr;gap:2px}.filas dd{margin-bottom:12px}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important}
  .btn:active{transform:none}
}