/* Nunito & Nunito Sans (Google Fonts) - DEBE estar al inicio del archivo */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800&family=Nunito+Sans:wght@400;600;700&display=swap');

:root{
  --brand-bg:#f5f7fb; --brand-text:#26324b; --primary:#00a7cf;
  --footer-dark:#312e86; --footer-bottom:#252265; --footer-sep:#1f2053;
  --accent-green:#b7d34a; --container: var(--shell-max, 2500px); --step-gap:18px;
}
*{box-sizing:border-box;}
body{
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Nunito Sans", Nunito, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--brand-text);
  background: var(--brand-bg);
}
main{flex:1 0 auto;}
a{color:var(--primary);text-decoration:none;} a:hover{text-decoration:underline;}

/* ===== Boot Splash / Page Fade ===== */
#boot-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(3px);
  opacity: 1;
  transition: opacity .28s ease;
}
#boot-splash.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Tarjeta/loader centrado */
.boot-card {
  display: grid;
  gap: .75rem;
  padding: 1.25rem 1.5rem;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  background: #fff;
  text-align: center;
  min-width: 240px;
}

/* Spinner simple */
.boot-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: bootspin 800ms linear infinite;
  margin: 0 auto;
}

.boot-title { font-weight: 700; color: #29338A; }
.boot-sub   { font-size: .95rem; color: #667085; }

/* Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  #boot-splash { transition: none; }
  .boot-spinner { animation: none; border-right-color: currentColor; }
}

@keyframes bootspin { to { transform: rotate(360deg); } }


/* ---------------------------------------------------*/



/* FADE OUT de toda la página (se dispara al hacer clic en Continuar) */
#page{transition:opacity .35s ease, transform .35s ease;}
#page.leaving{opacity:0; transform:translateY(8px); pointer-events:none;}


/* Overlay viejo eliminado - se usa .app-busy de la sección BUSY/CARGANDO (busy-card) */


.is-disabled { 
  opacity: .6; 
  cursor: not-allowed; 
  filter: grayscale(100%);
}
body.fade-out {
  transition: opacity .2s ease;
  opacity: 0;
}

body.fade-out { opacity: 0; transition: opacity .2s ease; }



/* Fade global para transiciones entre páginas */
body{ transition: opacity .25s ease; }   /* habilita el fade */
body.page-leave{ opacity: 0; }           /* al irse, se desvanece */


/* ===== Tipografías Nunito / Nunito Sans ===== */
:root{
  --font-ui: "Nunito Sans", Nunito, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Helvetica Neue", "Noto Sans", "Liberation Sans", sans-serif;
  --font-title: "Nunito", "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Helvetica Neue", sans-serif;
}

html{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
}

/* Texto base */
body{
  font-family: var(--font-ui) !important;
  font-weight: 400;
}

/* Títulos y headings */
h1, h2, h3, h4,
.login-title,
.card-title,
.hello,
.footer-col h4 {
  font-family: var(--font-title) !important;
  font-weight: 800; /* Nunito ExtraBold */
  letter-spacing: .2px;
}

/* Subtítulos / énfasis medio */
.login-sub,
.label,
.contact-badge,
.contact-label,
#label-ident {
  font-family: var(--font-ui);
  font-weight: 700; /* Nunito Sans Bold */
}

/* Botonería */
.btn, .btn-primary, .btn-ghost, .btn-white, .btn-choice, #header_menu .btn-nav{
  font-family: var(--font-title);
  font-weight: 700 !important;            /* Nunito ExtraBold */
  letter-spacing: .3px;
}

/* Inputs y formularios */
input, select, textarea, label{
  font-family: var(--font-ui);
  font-weight: 400;            /* Regular */
}

/* Footer textos largos */
footer, .footer-brand p, .footer-col a{
  font-family: var(--font-ui);
  font-weight: 400;
}

/* Fuente base en todo el sitio */
:root{
  --font-ui: "Nunito Sans", Nunito, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Helvetica Neue", sans-serif;
  --font-title: "Nunito", "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Helvetica Neue", sans-serif;
}

/* fuerza la familia en tipografía de texto */
body, p, li, span, small, label, a, strong, em,
input, textarea, select, button, td, th {
  font-family: var(--font-ui) !important;
  font-weight: 400;
}

/* ===== FIN Tipografías Nunito / Nunito Sans ===== */



/* Cards */
.card{
  background:#fff;
  border:1px solid #e6e9f2;
  border-radius: 26px;
  box-shadow: 0 26px 60px rgba(15, 35, 75, 0.08);
}

.login-card{padding:14px 18px;display:flex;flex-direction:column;gap:var(--step-gap);transition:all .3s ease;overflow:hidden;}

.login-title{font-size:24px;margin:0 0 6px;color:#1b2863;}
.login-sub{margin:6px 0 12px;color:#5a6786;}

/* Steps */
.flow{display:flex;flex-direction:column;}
.step{
  border:1px solid #e6e9f2;background:#fff;border-radius:14px;
  padding:12px;max-height:0;opacity:0;transform:translateY(-8px);
  overflow:hidden;pointer-events:none;
  transition:max-height .45s ease,opacity .3s ease,transform .45s ease;
}
.step.open{max-height:900px;opacity:1;transform:translateY(0);pointer-events:auto;}
.step .row{display:flex;flex-direction:column;gap:16px;}
.flow .step + .step { margin-top: 18px; }

/* Inputs + buttons */
label{font-size:14px;color:#44506a;}
input[type=text],input[type=email]{
  width:100%;padding:14px 16px;border:1px solid #d7ddee;
  border-radius:12px;font-size:16px;outline:none;transition:.2s border-color,.2s box-shadow;
}
input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,167,207,.15);}
.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:26px;padding:14px 24px;font-weight:700;cursor:pointer;text-transform:n;}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:#009bc4;}
.btn[disabled]{opacity:.6;cursor:not-allowed;}

/* Radios teléfonos */
.radio-list{display:flex;flex-direction:column;gap:10px;}
.radio-item{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid #e6e9f2;border-radius:12px;}
.radio-item input{accent-color:var(--primary);}

/* DNI/CUIT en negrita */
#label-ident{
  font-weight: 700;
  color: #1b2863;          /* opcional: mismo tono de títulos */
}

/* Bajamos un poco el botón “Recibir clave rápida” */
#step-ident #ident-cta{
  margin-top: 10px;        /* subí/bajá este valor a gusto (8–14px) */
}

/* Token */
#token-pane{margin-top:8px;}
#token-pane label{margin-bottom:8px;font-weight:600;}
#key{
  width:100%;padding:14px 16px;border:1px solid #d7ddee;border-radius:12px;
  font-size:16px;outline:none;transition:.2s border-color,.2s box-shadow;margin-bottom:12px;
}
#key:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,167,207,.15);}
#token-hint{margin-top:8px;}
#countdown{margin-top:4px;}
#token-actions{margin-top:16px;gap:14px;display:flex;flex-wrap:nowrap;}
#step-key label{display:block;margin-bottom:8px;}
#key{margin-bottom:14px;}

.hint{font-size:13px;color:#5a6786;}
.alert{display:none;border-radius:12px;padding:12px 14px;margin-top:10px;font-size:14px;}
.alert.show{display:block;}
.alert.success{background:#e7f8ef;color:#1a7f43;border:1px solid #bfead1;}
.alert.error{background:#fdecec;color:#a52828;border:1px solid #f3c2c2;}

/* Beneficios */
.benefits{padding:22px;}
.benefits h3{margin:0 0 12px;color:#1b2863;}
.perk{display:flex;gap:12px;padding:14px;border:1px solid #e6e9f2;border-radius:12px;margin-bottom:10px;background:linear-gradient(180deg,#fff,#f9fbff);}
.perk svg{width:20px;height:20px;flex:0 0 20px;color:var(--primary);}

/* CTA */
.cta-band{background:var(--primary);color:#fff}
.cta-inner{max-width:var(--container);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px}
.cta-text{margin:0;line-height:1.5;flex:0 1 auto}
.cta-mail{color:#fff;text-decoration:underline}
.btn-white{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#1b2863;border-radius:24px;padding:10px 16px;font-weight:700;border:0;white-space:nowrap}
.btn-white svg{width:18px;height:18px}


/* Shake anim para errores */
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}
.input-error{
  border-color:#e57373!important;
  box-shadow:0 0 0 3px rgba(229,57,53,.15)!important;
  animation:shake .32s ease both;
}
#ident-error.alert{margin-top:10px;}

:root{
  --btn-minw: 190px;  /* mismo ancho que Validar/Continuar */
  --btn-h: 46px;
}

/* Contenedor de los 2 botones (TELÉFONO/EMAIL) */
#method-choice{
  display: flex;
  align-items: center;
  justify-content: center;   /* <-- centrados */
  gap: 12px;                 /* separación entre ambos */
  flex-wrap: wrap;           /* por si no entra en móviles */
}

/* Botones iguales a los otros y sin crecer por texto */
#method-choice .btn-choice{
  flex: 0 0 auto;                    /* no estirar */
  width: var(--btn-minw) !important; /* ancho fijo */
  height: var(--btn-h) !important;
  padding: 0 20px !important;
  border-radius: 26px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Por si había márgenes heredados que los descentraban */
#method-choice .btn-choice:first-child,
#method-choice .btn-choice:last-child{
  margin: 0 !important;
}

/* En pantallas chicas, que queden uno abajo del otro centrados */
@media (max-width: 420px){
  #method-choice{
    justify-content: center;
    gap: 10px;
  }
  #method-choice .btn-choice{
    width: 100% !important;
    max-width: 320px; /* opcional, limita el ancho */
  }
}


/* Grid de acciones */
.actions{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:28px;
  align-items:stretch;
}
@media (max-width: 900px){ .actions{grid-template-columns: repeat(2,1fr);} }
@media (max-width: 600px){ .actions{grid-template-columns: 1fr;} }

.card-action{
  background:#fff;border:1px solid #e6e9f2;border-radius:22px;
  padding:22px 18px;text-align:center;cursor:pointer;
  box-shadow:0 8px 24px rgba(18,28,87,.06);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  text-decoration:none;color:inherit;outline:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.card-action:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 16px 36px rgba(18,28,87,.15);
  border-color:#b7d34a;
}
.card-action:active{transform:translateY(-2px) scale(0.99)}

.card-icon{
  width:84px;height:84px;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;
}
.card-icon img{max-width:100%;max-height:100%}

.label{line-height:1.2;margin:8px 0 0;color:#2b2f66;font-weight:600}
.label small{display:block;font-weight:500;color:#4a5391;margin-top:2px}



/* === Modal (genérico reutilizable) === */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(15,23,42,.45); /* slate/azul translúcido */
  z-index:980;backdrop-filter:saturate(120%) blur(2px);
}
.modal{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  z-index:1000;padding:20px;
}
.modal-card{
  width:min(560px, 100%);background:#fff;border:1px solid #e6e9f2;border-radius:18px;
  box-shadow:0 20px 60px rgba(18,28,87,.18);overflow:hidden;animation:modalIn .18s ease both;
}
@keyframes modalIn{from{transform:translateY(10px);opacity:0} to{transform:none;opacity:1}}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid #eef1f7}
.modal-header h2{margin:0;color:#1b2863;font-size:20px}
.modal-close{
  background:transparent;border:0;font-size:22px;line-height:1;color:#5a6786;cursor:pointer;border-radius:8px;
  padding:6px 10px;transition:background .15s ease, color .15s ease;
}
.modal-close:hover{background:#f3f6fb;color:#26324b}
.modal-body{padding:16px 18px;color:#44506a}
.modal-footer{padding:12px 18px;border-top:1px solid #eef1f7;display:flex;justify-content:flex-end}

.help-list{margin:10px 0 0;padding-left:18px}
.help-link{color:var(--primary);text-decoration:none}
.help-link:hover{text-decoration:underline}

/* Ocultamiento por atributo [hidden] para interoperar con JS */
[hidden]{display:none !important}

/* util: solo-lectura para lectores de pantalla */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}


/* Ocultar alertas vacías (evita el rectángulo rojo y el espacio) */
.alert:empty { display: none !important; }

/* Contenedor de la elección de método */
#method-choice .choices{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;        /* centrar Teléfono / Email */
}

/* Botones de elección (azules) */
.btn-choice{
  background:#00a7c4;            /* azul como "Enviar token" */
  color:#fff;
  border:none;
  border-radius:9999px;
  padding:10px 18px;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 1px 0 rgba(0,0,0,.12);
}
.btn-choice:hover{ filter:brightness(.95); }
.btn-choice.active{
  background:#008fb0;            /* tono al seleccionar */
  box-shadow:inset 0 2px 0 rgba(0,0,0,.08);
}

/* Enviar/Reenviar token: celeste */
#btn-send-token,
#btn-resend-token{
  background: var(--primary) !important;
  color: #fff !important;
  border: 0 !important;
}
#btn-send-token:hover,
#btn-resend-token:hover{
  filter: brightness(.96);
}

/* ——— Reducir espacio arriba/abajo del bloque DNI/CUIT ——— */
#step-ident .card{
  margin-top: 4px !important;      /* antes suele ser ~24px */
  margin-bottom: 4px !important;
}

/* Reducir el aire interno del step (arriba/abajo) */
#step-ident{
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

/* Evitar que el primer/último hijo agreguen espacio extra por márgenes colapsados */
#step-ident .card > :first-child{ margin-top: 0 !important; }
#step-ident .card > :last-child { margin-bottom: 0 !important; }

/* (Opcional) achicar el espacio del párrafo bajo el título */
.card > h2 + p{ margin-bottom: 4px !important; }

/* --- Compactar el panel de acceso (arriba y abajo) --- */
:root { --step-gap: 8px; }                    /* menos separación entre bloques */
.login-card{ padding: 8px 18px !important; }  /* menos aire dentro de la tarjeta */
.login-sub{ margin: 6px 0 8px !important; }   /* achica espacio entre subtítulo y primer bloque */
.flow .step + .step { margin-top: 8px !important; } /* menos espacio entre steps */


/* Hint compacto para actualizar datos */
.inline-hint{
  margin-top: 8px;
  text-align: center;
  font-size: .95rem;
  color: #6a768f;
}
.inline-hint .link-help{
  border: 0;
  background: none;
  padding: 0;
  margin-left: 6px;
  color: #0b64d8;
  text-decoration: underline;
  font-weight: 700;
  cursor: pointer;
}
.inline-hint .sep{
  opacity: .4; margin: 0 6px;
}
/* Hint debajo del panel de token */
.token-help{
  margin-top: 10px;
  text-align: center;
  font-size: .95rem;
  color: #6a768f;
}
.token-help .link-help{
  border: 0;
  background: none;
  padding: 0;
  margin-left: 6px;
  color: #0b64d8;
  text-decoration: underline;
  font-weight: 700;
  cursor: pointer;
}


/* Evita “saltos” por márgenes colapsados del último bloque del main */
main > :last-child{ margin-bottom: 0; }

/* === OVERRIDES v3 =================================================== */
:root{
  --brand-dark: #252265;          /* azul oscuro del logo */
  --brand-dark-300: #5f659b;      /* seleccionado (más grisado) */
  --btn-minw: 190px;
  --btn-h: 46px;
}

/* 1) CONTINUAR (debajo de DNI/CUIT) → celeste + centrado + tamaño unificado */
#step-ident #ident-cta{
  display:inline-flex !important;
  align-items:center; justify-content:center;
  margin:10px auto 0 !important;
  background:var(--primary) !important; color:#fff !important; border:0 !important;
  min-width:var(--btn-minw) !important; height:var(--btn-h) !important;
  padding:0 20px !important; border-radius:26px !important;
}
#step-ident #ident-cta:hover{ filter:brightness(.96); }

/* 2) Teléfono / Email → azul oscuro; activo más “grisado” */
#method-choice .btn-choice{
  background:var(--brand-dark) !important; color:#fff !important; border:0 !important;
  min-width:var(--btn-minw) !important; height:var(--btn-h) !important;
  padding:0 20px !important; border-radius:26px !important;
  display:inline-flex; align-items:center; justify-content:center;
}
#method-choice .btn-choice:hover{ filter:brightness(.95); }

#method-choice .btn-choice.active,
#method-choice .btn-choice.is-active,
#method-choice .btn-choice.selected,
#method-choice .btn-choice.is-selected,
#method-choice .btn-choice[aria-pressed="true"],
#method-choice .btn-choice[aria-selected="true"],
#method-choice .btn-choice[data-selected="true"],
#method-choice .btn-choice:focus-visible{
  background:var(--brand-dark-300) !important;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.18) !important;
  outline:0 !important;
}

/* 2b) ENVIAR / REENVIAR TOKEN → mismo tamaño que “Validar token” y centrado
   (incluye varias alternativas de selectores para cubrir tu HTML) */
#send-token, #resend-token,
#btn-send-token, #btn-resend-token,
#sendToken, #resendToken,
#step-send .btn-primary, #step-dest .btn-primary, #step-contact .btn-primary,
.flow .step .btn-primary.send-token, .flow .step .btn-send-token,
.flow .step .btn-primary:not(#ident-cta){
  width:auto !important;                      /* quita posibles width:100% */
  min-width:var(--btn-minw) !important;
  height:var(--btn-h) !important;
  padding:0 20px !important;
  display:inline-flex !important;
  align-items:center; justify-content:center;
  border-radius:26px !important;
  margin:0 auto !important;                   /* centrado */
}

/* 3) Acciones de token centradas */
#token-actions{ justify-content:center !important; }

/* 4) “VALIDAR TOKEN” → CELESTE (mismo tamaño) */
#token-actions .btn:first-child{
  background:var(--primary) !important; color:#fff !important; border:0 !important;
  min-width:var(--btn-minw) !important; height:var(--btn-h) !important;
  padding:0 20px !important; border-radius:26px !important;
}

/* 5) “CONTINUAR” (del panel de token) → VERDE (mismo tamaño) */
#token-actions .btn:last-child{
  background:var(--accent-green) !important; color:#1b2863 !important; border:0 !important;
  min-width:var(--btn-minw) !important; height:var(--btn-h) !important;
  padding:0 20px !important; border-radius:26px !important;
}

/* 6) Fallback: unifico tamaño de cualquier .btn dentro del flujo */
.flow .btn, .flow .btn-primary{
  min-width:var(--btn-minw) !important; height:var(--btn-h) !important;
  padding:0 20px !important;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:26px !important;
  width:auto !important;                       /* evita full-width accidentales */
}

/* Igualar altura entre <select> y <input> */
select, .form-select{
  width: 100%;
  height: 46px;
  padding: 0 40px 0 12px;           /* deja espacio para la flecha */
  border: 1px solid #d7ddee;
  border-radius: 12px;
  font-size: 16px;
  background: #fff;
  outline: none;

  /* oculto nativo y uso flecha SVG */
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;

  /* flecha custom (chevron) */
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2326324b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
    <polyline points='6 9 12 15 18 9'/>\
  </svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
}

/* foco igual al de los inputs */
select:focus, .form-select:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,167,207,.15);
}

/* estado deshabilitado coherente */
select:disabled, .form-select:disabled{
  background-color: #f6f8fc;
  color: #8893b0;
  cursor: not-allowed;
  opacity: 1;
}

/* oculta la flecha de IE/Edge antiguo */
select::-ms-expand{ display:none; }

/* Centrado de textos de feedback */
.alert,
.hint,
#token-hint,
#ident-error {
  text-align: center;
}


/* === Overlay de procesamiento global para boton CONTINUAR === */
#urgc-busy {
  position: fixed; inset: 0;
  display: none; /* se muestra via .on */
  align-items: center; justify-content: center;
  background: rgba(255,255,255,.38);
  backdrop-filter: blur(1px);
  z-index: 9999;
}
#urgc-busy.on { display:flex; }
#urgc-busy .busy-card{
  min-width: 280px; max-width: 90vw;
  padding: 24px 28px; border-radius: 18px;
  background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.12);
  text-align: center; font-family: inherit;
}
#urgc-busy .busy-title{ font-weight:800; font-size: 1.25rem; color:#223; margin: 0 0 8px; }
#urgc-busy .busy-sub{ color:#445; opacity:.8; font-size:.95rem; margin:0; }
#urgc-busy .spinner{
  width: 42px; height: 42px; margin: 0 auto 14px; border-radius: 50%;
  border: 3px solid #dbe2f0; border-top-color: var(--primary, #00a7cf);
  animation: urgc-spin 0.9s linear infinite;
}
@keyframes urgc-spin { to { transform: rotate(360deg); } }

/* Evitar scroll/interacción detrás */
body.busy { overflow: hidden; }


/* =========================================================
   BUSY / CARGANDO (menú / módulos)
   ========================================================= */

.app-busy{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.38);
  backdrop-filter: blur(1px);
}

.app-busy.show{ display: flex; }

.app-busy .busy-card{
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(15, 34, 80, 0.18);
  padding: 22px 26px;
  min-width: 280px;
  text-align: center;
}

.app-busy .busy-spinner{
  width: 34px;
  height: 34px;
  margin: 0 auto 12px auto;
  border-radius: 50%;
  border: 3px solid rgba(27, 40, 99, 0.18);
  border-top-color: rgba(27, 40, 99, 0.9);
  animation: urgc-spin 0.9s linear infinite;
}

.app-busy .busy-text{
  font-family: var(--font-title, system-ui);
  font-weight: 800;
  font-size: 18px;
  color: #1b2863;
}

@keyframes urgc-spin{
  to{ transform: rotate(360deg); }
}


/* =========================================================
   BOTÓN MODIFICAR — ESTÁNDAR GLOBAL
   ========================================================= */

/* Tarjetas */
.btn-edit{
  background-color: #252265;
  color: #ffffff;
}

/* Modal / formularios */
.sem-save,
.modal-save,
button[data-action="edit"]{
  background-color: #252265;
  color: #ffffff;
}

/* Hover: azul más oscuro (NO cyan) */
.btn-edit:hover,
.sem-save:hover,
.modal-save:hover,
button[data-action="edit"]:hover{
  background-color: #1d1b4f;
  color: #ffffff;
}


/* =========================================================
  terminos y condiciones
   ========================================================= */


.tc-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 1000;
}

.tc-modal{
  position: fixed;
  inset: 6% 12%;
  background: #fff;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  z-index: 1001;

  overflow: hidden;   /* 👈 CLAVE */
}


.tc-head{
  padding: 16px 20px;
  background: #2f2f86;   /* azul arriba */
  color: #fff;
}

.tc-head h2{
  margin: 0;
  color: #fff;
}


.tc-body{
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
}

.tc-actions{
  padding: 12px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  background: #fff;          /* blanco abajo */
  border-top: 1px solid #eee;
}


/* =========================================================
  terminos y condiciones
   ========================================================= */