/*!
 * Facturero App EC — estilos del demo de facturación
 * Depende de facturero.css: reutiliza tokens, botones, nav, pie y CTA.
 */

/* ---------- encabezado ---------- */
.demo-head{
  background:var(--band);color:#fff;position:relative;overflow:hidden;
  padding-block:clamp(2.5rem,6vw,4rem) clamp(2.5rem,5vw,3.5rem);
}
.demo-head::before{
  content:"";position:absolute;inset:-40% -15% auto auto;width:55vw;height:55vw;
  background:radial-gradient(circle,rgba(65,217,251,.26),transparent 62%);pointer-events:none;
}
.demo-head__in{display:grid;gap:clamp(2rem,4vw,3rem);align-items:center;position:relative;z-index:1}
@media(min-width:940px){.demo-head__in{grid-template-columns:1.15fr .85fr}}
.demo-head__in > *{min-width:0}
.demo-head .eyebrow{color:var(--cyan-300)}
.demo-head h1{font-size:clamp(1.75rem,4vw,2.5rem);color:#fff;max-width:20ch}
.demo-head__lede{margin-top:1rem;color:rgba(255,255,255,.86);max-width:58ch;font-size:1.0625rem}

.banner-sim{
  margin-top:1.5rem;display:flex;gap:.7rem;align-items:flex-start;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.26);
  border-radius:var(--radius);padding:.9rem 1.1rem;max-width:66ch;
  font-size:var(--t-sm);color:rgba(255,255,255,.94);
}
.banner-sim svg{flex-shrink:0;margin-top:2px;color:var(--cyan-300)}

.demo-head__facts{
  display:flex;flex-wrap:wrap;gap:0 2.25rem;margin:1.75rem 0 0;
  padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.18);
}
.demo-head__facts div{padding:.3rem 0}
.demo-head__facts dt{font-size:var(--t-label);text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.82);font-weight:700}
.demo-head__facts dd{margin:.2rem 0 0;font-size:1rem;font-weight:700;color:#fff}

/* ---- escenario de Facti en el encabezado ---- */
.demo-stage{position:relative;display:grid;place-items:center;min-height:300px}
.demo-stage__glow{
  position:absolute;width:80%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.2),transparent 65%);
}
.demo-stage__facti{width:min(280px,72%);position:relative;z-index:2}
.chip-demo{
  position:absolute;z-index:3;background:#fff;color:var(--text);
  border-radius:999px;padding:.45rem .85rem;display:inline-flex;align-items:center;gap:.4rem;
  font-size:var(--t-xs);font-weight:600;white-space:nowrap;
  box-shadow:0 12px 30px -12px rgba(2,47,75,.6);
}
.chip-demo b{font-family:var(--font-num);font-weight:600;color:var(--blue-700)}
.chip-demo--a{top:4%;left:-4%;animation:flotar 6s ease-in-out infinite}
.chip-demo--b{bottom:22%;right:-6%;animation:flotar 6.8s ease-in-out .6s infinite}
.chip-demo--c{bottom:2%;left:2%;animation:flotar 7.4s ease-in-out 1.2s infinite}
@media(max-width:520px){
  .chip-demo--a{left:0}
  .chip-demo--b{right:0}
}

/* ---------- rejilla ---------- */
.demo-wrap{background:var(--bg-soft)}
.demo-grid{display:grid;gap:1.5rem;align-items:start}
@media(min-width:1060px){.demo-grid{grid-template-columns:1.35fr .85fr}}
/* sin esto, un hijo de grid no baja de su ancho intrínseco y desborda la página */
.demo-grid > *{min-width:0}
.lado{display:flex;flex-direction:column;gap:1.5rem;min-width:0}

/* ---------- panel ---------- */
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;min-width:0}
.panel--ok{border-color:#9fd9bf;box-shadow:0 18px 40px -22px rgba(15,122,77,.45)}
.panel--info{background:var(--band-soft);border-color:var(--blue-200)}
.panel__head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.25rem;border-bottom:1px solid var(--line);
}
.panel--info .panel__head{border-bottom-color:var(--blue-200)}
.panel__head h2{font-size:1.0625rem}
.panel__body{padding:1.25rem}

.tag-amb,.tag-ok{
  font-size:var(--t-label);font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  padding:.3rem .65rem;border-radius:999px;white-space:nowrap;
}
.tag-amb{background:var(--warn-bg);color:var(--warn-fg)}
.tag-ok{background:var(--ok-bg);color:var(--ok-fg);display:inline-flex;align-items:center;gap:.35rem}

/* ---------- emisor ---------- */
.emisor{
  display:grid;gap:.85rem 1.5rem;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  background:var(--bg-soft);border-radius:var(--radius-sm);padding:.9rem 1rem;margin-bottom:1.5rem;
}
.emisor strong{display:block;font-size:var(--t-sm);font-weight:700;margin-top:.15rem}
.lbl{font-size:var(--t-label);text-transform:uppercase;letter-spacing:.11em;color:var(--text-3);font-weight:700}

/* ---------- campos ---------- */
/* min-width:0 es imprescindible: un <fieldset> trae min-width intrínseco
   y sin esto la tabla de detalle desborda la página en móvil */
.grupo{border:0;padding:0;margin:0 0 1.5rem;min-width:0}
.grupo legend{
  font-size:var(--t-label);text-transform:uppercase;letter-spacing:.12em;
  font-weight:700;color:var(--cyan-700);padding:0;margin-bottom:.85rem;
}
.campos{display:grid;gap:.9rem}
@media(min-width:560px){.campos{grid-template-columns:repeat(2,1fr)}}
.campo{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.campo > span{font-size:var(--t-xs);font-weight:600;color:var(--text-2)}

.in{
  width:100%;padding:.6rem .7rem;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  background:#fff;color:var(--text);font-family:var(--font);font-size:var(--t-sm);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.in:focus{outline:0;border-color:var(--action);box-shadow:0 0 0 3px rgba(4,119,191,.16)}
.in:disabled{background:var(--ink-100);color:var(--text-3)}
select.in{cursor:pointer}
input.num,td .num{font-family:var(--font-num);font-variant-numeric:tabular-nums}

.aviso{font-size:var(--t-xs);min-height:1.1em;font-weight:600}
.aviso--ok{color:var(--ok-fg)}
.aviso--mal{color:var(--bad-fg)}

/* ---------- tabla de detalle ---------- */
/* position:relative confina los .sr posicionados en absoluto de las cabeceras:
   sin esto escapan del contenedor con scroll y estiran el documento */
.tabla-wrap{position:relative;overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:.85rem}
table.detalle{width:100%;border-collapse:collapse;min-width:600px;font-size:var(--t-sm)}
table.detalle th{
  text-align:left;font-size:var(--t-label);text-transform:uppercase;letter-spacing:.1em;
  color:var(--text-3);font-weight:700;padding:.6rem .5rem;background:var(--bg-soft);
  border-bottom:1px solid var(--line);white-space:nowrap;
}
table.detalle td{padding:.4rem .45rem;border-bottom:1px solid var(--ink-100);vertical-align:middle}
table.detalle tr:last-child td{border-bottom:0}
table.detalle .r{text-align:right}
table.detalle th:nth-child(1){width:38%}
.in--n{max-width:88px;text-align:right}
.in--iva{max-width:82px}
.in--desc{min-width:150px}
/* ink-600 y no ink-400: el gris claro daba 2,49:1 sobre blanco.
   26x26 cumple el tamaño mínimo de objetivo (WCAG 2.2 · 2.5.8). */
.quitar{
  border:0;background:transparent;color:var(--ink-600);font-size:1.25rem;line-height:1;
  cursor:pointer;border-radius:6px;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:26px;min-height:26px;padding:0;
}
.quitar:hover{color:var(--bad-fg);background:var(--bad-bg)}
.btn--sm{padding:.5rem 1rem;font-size:var(--t-xs)}

/* ---------- totales ---------- */
.totales{
  background:var(--bg-soft);border-radius:var(--radius-sm);padding:1rem 1.1rem;
  display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.25rem;
}
.totales div{display:flex;justify-content:space-between;gap:1rem;font-size:var(--t-sm);color:var(--text-2)}
.totales .num{color:var(--text);font-weight:600}
.totales__grand{
  border-top:1px solid var(--line);padding-top:.7rem;margin-top:.3rem;
  font-size:1.125rem !important;font-weight:800;color:var(--text) !important;
}
.totales__grand .num{font-size:1.25rem;font-weight:600}

/* ---------- pasos del proceso ---------- */
.pasos{display:flex;flex-direction:column;gap:.2rem;counter-reset:p}
.pasos li{
  display:flex;align-items:flex-start;gap:.7rem;padding:.65rem .25rem;
  font-size:var(--t-sm);font-weight:600;color:var(--text-3);
  border-bottom:1px solid var(--ink-100);flex-wrap:wrap;
}
.pasos li:last-child{border-bottom:0}
.pasos li small{width:100%;padding-left:2rem;font-weight:400;font-size:var(--t-xs);color:var(--ink-400)}
.pasos__ico{
  width:22px;height:22px;border-radius:50%;border:2px solid var(--ink-200);
  flex-shrink:0;position:relative;transition:border-color .2s ease,background-color .2s ease;
}
.pasos li.is-doing{color:var(--action-hover)}
.pasos li.is-doing .pasos__ico{border-color:var(--action);border-top-color:transparent;animation:girar .7s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
.pasos li.is-done{color:var(--text)}
.pasos li.is-done .pasos__ico{background:var(--ok-fg);border-color:var(--ok-fg);animation:none}
.pasos li.is-done .pasos__ico::after{
  content:"";position:absolute;left:6px;top:2.5px;width:5px;height:10px;
  border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg);
}
/* paso que falla: la devolución del SRI ocurre en el último, el de autorización.
   La aspa, además del color, para no dejar el estado solo en el rojo. */
.pasos li.is-mal{color:var(--bad-fg)}
.pasos li.is-mal .pasos__ico{background:var(--bad-fg);border-color:var(--bad-fg);animation:none}
.pasos li.is-mal .pasos__ico::after,
.pasos li.is-mal .pasos__ico::before{
  content:"";position:absolute;left:8px;top:3.5px;width:2px;height:11px;
  background:#fff;border-radius:1px;
}
.pasos li.is-mal .pasos__ico::after{transform:rotate(45deg)}
.pasos li.is-mal .pasos__ico::before{transform:rotate(-45deg)}

/* ---------- resultado ---------- */
.res{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.25rem}
.res div{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;flex-wrap:wrap}
.res dt{font-size:var(--t-xs);color:var(--text-3);font-weight:600}
.res dd{margin:0;font-size:var(--t-sm);font-weight:600;text-align:right;word-break:break-word}
.res__total{font-size:1.125rem !important;color:var(--ok-fg)}

.clave{margin-bottom:1.1rem}
.clave code{
  display:block;margin-top:.4rem;background:var(--ink-950);color:var(--cyan-300);
  padding:.75rem .85rem;border-radius:var(--radius-sm);font-size:.75rem;
  line-height:1.6;word-break:break-all;letter-spacing:.02em;
}
.clave__pie{margin-top:.4rem;font-size:var(--t-xs);color:var(--text-3)}
.clave__pie strong{color:var(--text)}
.res__nota{
  font-size:var(--t-xs);color:var(--text-3);background:var(--bg-soft);
  padding:.7rem .85rem;border-radius:var(--radius-sm);
}

/* ---------- devolución ---------- */
.panel--mal{border-color:#f0b3ae;box-shadow:0 18px 40px -22px rgba(179,38,30,.4)}
.tag-mal{
  font-size:var(--t-label);font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  padding:.3rem .65rem;border-radius:999px;white-space:nowrap;
  background:var(--bad-bg);color:var(--bad-fg);   /* 5,74:1 */
}
/* el mensaje del SRI llega en mayúsculas y sin acentos, tal cual lo devuelve:
   por eso no va en la caja oscura de las claves, que es para dígitos */
.clave--mal code{
  background:var(--bad-bg);color:var(--bad-fg);font-weight:700;letter-spacing:.06em;
  word-break:normal;
}

/* ---------- respuesta a simular ---------- */
.respuesta-sim{
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  margin:1.25rem 0 .9rem;padding:.75rem .9rem;
  background:var(--bg-soft);border-radius:var(--radius-sm);
}
.respuesta-sim label{font-size:var(--t-xs);font-weight:700;color:var(--text-2)}
.respuesta-sim select{flex:1;min-width:190px}

/* ---------- panel informativo ---------- */
.info-lede{font-size:var(--t-sm);color:var(--text-2);margin-bottom:1rem}
.mapa{display:flex;flex-direction:column;gap:.3rem;margin-bottom:1rem}
.mapa li{display:flex;align-items:baseline;gap:.7rem;font-size:var(--t-xs);color:var(--text-2)}
.mapa b{
  flex-shrink:0;min-width:30px;text-align:center;background:#fff;border:1px solid var(--blue-200);
  color:var(--blue-700);border-radius:6px;padding:.15rem 0;font-weight:600;font-size:var(--t-xs);
}
.mapa em{font-style:normal;color:var(--text-3)}
.mapa--dv b{background:var(--action);border-color:var(--action);color:#fff}
.info-pie{font-size:var(--t-xs);color:var(--text-3);border-top:1px solid var(--blue-200);padding-top:.85rem}

@media (prefers-reduced-motion:reduce){
  .pasos li.is-doing .pasos__ico{animation:none}
}