/* ÓNIX · Contabilidad Asistida: estilos propios de la página viva.
   Se carga después de servicio-vivo.css. Datos ficticios en todos los visuales. */

/* ── Hero: expediente del mes ─────────────────────────────── */
.ca-exp { position: relative; width: 100%; max-width: 520px; margin-inline: auto; aspect-ratio: 1 / 1.02; container-type: inline-size; }
.ca-exp__back { position: absolute; left: 4%; right: 4%; top: 40%; bottom: 0; border-radius: 6px 22px 22px 22px; background: var(--paper-2); border: 1px solid var(--line); }
.ca-exp__tab { position: absolute; left: -1px; top: -2.1rem; height: 2.15rem; display: inline-flex; align-items: center; padding: 0 1rem; border-radius: 14px 14px 0 0; background: var(--paper-2); border: 1px solid var(--line); border-bottom: 0; font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.ca-exp__peek { position: absolute; left: 7%; right: 7%; top: 1.1rem; display: block; }
.ca-exp__peek i { position: absolute; left: 0; right: 0; height: 64px; border-radius: 10px 10px 0 0; background: #fff; border: 1px solid var(--line); border-bottom: 0; }
.ca-exp__peek i:nth-child(1) { top: 0; left: 6%; right: 10%; transform: rotate(-1.5deg); }
.ca-exp__peek i:nth-child(2) { top: 10px; left: 2%; right: 4%; transform: rotate(1deg); background: #FDFCF8; }
.ca-exp__peek i:nth-child(3) { top: 22px; left: 10%; right: 2%; background: var(--accent-wash); border-color: var(--accent-line); }
.ca-exp__docs { position: absolute; inset: 0; }
.cdoc { position: absolute; left: var(--x); top: var(--y); width: 47%; display: flex; flex-direction: column; gap: .4rem; padding: .7rem .8rem .8rem; border-radius: 12px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sombra); transform: rotate(var(--r)); }
.cdoc__top { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.cdoc__top b { font-size: .8125rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cdoc .ch { width: 22px; height: 22px; border-radius: 6px; } .cdoc .ch svg { width: 12px; height: 12px; }
.cdoc small { font-size: .7rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cdoc > i { display: block; height: 5px; border-radius: 3px; background: var(--line); width: 92%; }
.cdoc > i.s { width: 58%; }
.cdoc__rows { display: flex; flex-direction: column; gap: .3rem; }
.cdoc__rows i { display: flex; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--line) 0 62%, transparent 62% 74%, var(--accent-line) 74%); }
.ca-exp__front { position: absolute; left: 0; right: 0; bottom: 0; top: 52%; z-index: 2; display: flex; flex-direction: column; gap: .6rem; padding: 1rem 1.15rem 1.1rem; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(38,38,44,.04), 0 30px 60px -30px rgba(38,38,44,.3); }
.ca-exp__head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.ca-exp__head strong { font-size: 1rem; font-weight: 600; letter-spacing: -.02em; }
.ca-exp__head span { font-family: var(--mono); font-size: .7rem; color: var(--muted); }
.ca-exp__list { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .75rem; }
.ca-exp__list li { display: flex; align-items: center; gap: .45rem; font-size: .8125rem; color: var(--ink-2); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-exp__list li::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--estado-ok-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C7A5E' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 9px no-repeat; border: 1px solid #D3ECE2; }
.ca-exp__list li.is-miss { color: var(--estado-rev); }
.ca-exp__list li.is-miss::before { background: var(--estado-rev-wash); border: 1.5px dashed var(--estado-rev); }
.ca-exp__bar { height: 8px; border-radius: 999px; background: var(--paper-2); overflow: hidden; margin-top: auto; }
.ca-exp__bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--accent); transform-origin: left; transform: scaleX(.78); }
.ca-exp__foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .8125rem; font-weight: 500; }
.ca-exp__foot span { font-size: .7rem; font-weight: 500; padding: .2rem .55rem; border-radius: 999px; background: var(--accent-wash); color: var(--accent-ink); white-space: nowrap; }
@container (max-width: 400px) {
  .cdoc { padding: .55rem .6rem .6rem; gap: .3rem; }
  .cdoc__top b { font-size: .75rem; }
  .cdoc small { font-size: .65rem; }
  .ca-exp__front { padding: .8rem .85rem .9rem; gap: .45rem; }
  .ca-exp__list li { font-size: .75rem; }
  .ca-exp__foot { font-size: .75rem; }
}
@media (max-width: 900px) { .ca-exp { max-width: 440px; margin-top: 1rem; } }

@media (prefers-reduced-motion: no-preference) {
  .ca-exp .cdoc { animation: ca-file 10.4s var(--ease) infinite both; animation-delay: var(--d); }
  .ca-exp__bar i { animation: ca-fill 10.4s var(--ease) infinite; }
  .ca-exp__list li.is-miss::before { animation: ca-wait 2.4s ease-in-out infinite; }
  @keyframes ca-file {
    0%   { opacity: 0; transform: translate(0, -16px) rotate(var(--r)); }
    8%   { opacity: 1; transform: translate(0, 0) rotate(var(--r)); }
    46%  { opacity: 1; transform: translate(0, -5px) rotate(var(--r)); }
    74%  { opacity: 1; transform: translate(var(--tx), var(--ty)) rotate(0deg) scale(.94); }
    86%  { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(0deg) scale(.94); }
    100% { opacity: 0; transform: translate(0, -16px) rotate(var(--r)); }
  }
  @keyframes ca-fill { 0% { transform: scaleX(.42); } 70% { transform: scaleX(.86); } 100% { transform: scaleX(.86); } }
  @keyframes ca-wait { 50% { opacity: .45; } }
}

/* ── Problema ─────────────────────────────────────────────── */
.ca-who { margin-top: 1.5rem; font-size: .9375rem; line-height: 1.5; color: var(--muted); max-width: 32em; }
.ca-ticket { display: grid; gap: 4px; width: 110px; padding: .55rem .6rem; border-radius: 8px; background: repeating-linear-gradient(0deg, #F4F1E8 0 2px, #FBF9F3 2px 5px); filter: blur(.6px); transform: rotate(-2deg); }
.ca-ticket i { display: block; height: 4px; border-radius: 2px; background: #CFCABB; }
.ca-ticket i:nth-child(2) { width: 70%; } .ca-ticket i:nth-child(4) { width: 45%; justify-self: end; }

/* ── Recorrido: escenas propias ───────────────────────────── */
.ca-dup { opacity: .62; border-style: dashed; }
.ca-dup strong { text-decoration: line-through; text-decoration-color: var(--muted); }
.ca-dup small { color: var(--estado-rev); }

.ca-read { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: .9rem; align-items: start; }
.ca-paper { position: relative; display: flex; flex-direction: column; gap: .5rem; padding: 1rem .9rem; border-radius: 12px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sombra); overflow: hidden; min-height: 210px; }
.ca-paper__h { display: block; height: 12px; width: 55%; border-radius: 4px; background: var(--ink-2); opacity: .75; margin-bottom: .3rem; }
.ca-paper i { display: block; height: 6px; border-radius: 3px; background: var(--line); }
.ca-paper i.s { width: 60%; }
.ca-paper__amt { display: block; margin-top: auto; align-self: flex-end; width: 42%; height: 14px; border-radius: 4px; background: var(--estado-rev-wash); border: 1.5px dashed var(--estado-rev); }
.ca-paper__scan { position: absolute; left: 0; right: 0; top: 0; height: 36px; background: linear-gradient(180deg, rgba(124,58,237,0), rgba(124,58,237,.14) 70%, rgba(124,58,237,.5) 100%); border-bottom: 2px solid var(--accent); opacity: 0; }
.ca-fields { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.ca-fields div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem .75rem; padding: .55rem 0; border-bottom: 1px solid var(--line); align-items: center; }
.ca-fields dt { grid-column: 1; font-size: .68rem; font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ca-fields dd { grid-column: 1; font-size: .875rem; font-weight: 500; }
.ca-fields .conf { grid-column: 2; grid-row: 1 / 3; }
.conf { display: inline-flex; align-items: center; gap: .35rem; font-size: .7rem; font-weight: 600; padding: .2rem .55rem; border-radius: 999px; white-space: nowrap; }
.conf::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.conf--ok { background: var(--estado-ok-wash); color: var(--estado-ok); }
.conf--doubt { background: var(--estado-rev-wash); color: var(--estado-rev); }
.ca-fields .is-doubt dd { color: var(--estado-rev); }
.scene .guard span b { font-weight: 600; }

.ca-rec { display: flex; flex-direction: column; gap: .45rem; }
.ca-rec li { display: grid; grid-template-columns: minmax(0, 1fr) 2.25rem minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .6rem .8rem; border-radius: 12px; border: 1px solid var(--line); background: #fff; font-size: .875rem; font-weight: 500; }
.ca-rec small { display: block; font-size: .72rem; font-weight: 400; color: var(--muted); }
.ca-rec i { height: 2px; border-radius: 2px; background: var(--estado-ok); position: relative; }
.ca-rec i::after { content: ""; position: absolute; right: -2px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--estado-ok); }
.ca-rec li.is-miss { border-color: #F1E1CB; background: var(--estado-rev-wash); }
.ca-rec li.is-miss i { background: repeating-linear-gradient(90deg, var(--estado-rev) 0 4px, transparent 4px 8px); }
.ca-rec li.is-miss i::after { background: transparent; border: 1.5px solid var(--estado-rev); }
.ca-rec li.is-miss > span:nth-of-type(2) { color: var(--estado-rev); }
.tag { justify-self: end; font-size: .7rem; font-weight: 600; padding: .22rem .6rem; border-radius: 999px; white-space: nowrap; }
.tag--ok { background: var(--estado-ok-wash); color: var(--estado-ok); }
.tag--miss, .tag--rev { background: var(--estado-rev-wash); color: var(--estado-rev); border: 1px solid #F1E1CB; }
.tag--wait { background: var(--paper-2); color: var(--muted); }
.ca-note { margin-top: auto; padding: .75rem .85rem; border-radius: 12px; background: var(--ink); color: var(--on-dark); font-size: .8125rem; line-height: 1.45; }

.ca-pack { display: flex; flex-direction: column; }
.ca-pack li { display: grid; grid-template-columns: 22px 1fr; gap: .1rem .65rem; align-items: center; padding: .5rem 0; border-top: 1px solid var(--line); font-size: .875rem; font-weight: 500; }
.ca-pack li small { grid-column: 2; font-size: .75rem; font-weight: 400; color: var(--estado-rev); }
.ca-pack .sig__ok { grid-row: span 2; align-self: start; }
.ca-pack li:not(.is-rev) .sig__ok { grid-row: auto; align-self: center; }
.ca-pack li.is-rev .sig__ok { background: var(--estado-rev-wash); color: var(--estado-rev); }

.ca-cite { display: block; margin-top: .3rem; font-size: .72rem; color: var(--muted); }
.bub--ai.ca-esc { border-color: #F1E1CB; background: var(--estado-rev-wash); }
.scene--5 .bubbles { flex: none; }

@media (prefers-reduced-motion: no-preference) {
  .sv-js .scene--2 .ca-fields > *, .sv-js .scene--3 .ca-rec > *, .sv-js .scene--4 .ca-pack > * { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
  .sv-js .panel[data-step="2"] .scene--2 .ca-fields > *,
  .sv-js .panel[data-step="3"] .scene--3 .ca-rec > *,
  .sv-js .panel[data-step="4"] .scene--4 .ca-pack > *,
  .sv-js .panel[data-step="5"] .scene--5 .bubbles > * { opacity: 1; transform: none; }
  .sv-js .scene--2 .ca-fields > *:nth-child(1), .sv-js .scene--3 .ca-rec > *:nth-child(1), .sv-js .scene--4 .ca-pack > *:nth-child(1) { transition-delay: .35s; }
  .sv-js .scene--2 .ca-fields > *:nth-child(2), .sv-js .scene--3 .ca-rec > *:nth-child(2), .sv-js .scene--4 .ca-pack > *:nth-child(2) { transition-delay: .6s; }
  .sv-js .scene--2 .ca-fields > *:nth-child(3), .sv-js .scene--3 .ca-rec > *:nth-child(3), .sv-js .scene--4 .ca-pack > *:nth-child(3) { transition-delay: .85s; }
  .sv-js .scene--2 .ca-fields > *:nth-child(4), .sv-js .scene--3 .ca-rec > *:nth-child(4), .sv-js .scene--4 .ca-pack > *:nth-child(4) { transition-delay: 1.1s; }
  .sv-js .scene--5 .bubbles > *:nth-child(2) { transition-delay: .4s; }
  .sv-js .scene--5 .bubbles > *:nth-child(3) { transition-delay: .8s; }
  .sv-js .scene--5 .bubbles > *:nth-child(4) { transition-delay: 1.2s; }
  .sv-js .scene--2 > .guard { transition-delay: 1.5s; }
  .sv-js .scene--3 > .ca-note { transition-delay: 1.4s; }
  .sv-js .scene--4 > .guard { transition-delay: 1.4s; }
  .sv-js .scene--5 > .log { transition-delay: 1.1s; }
  .sv-js .panel[data-step="2"] .ca-paper__scan { animation: ca-scan 2.4s var(--ease) .2s infinite; }
  @keyframes ca-scan { 0% { opacity: 0; transform: translateY(-40px); } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(230px); } }
}

@media (max-width: 900px) {
  .ca-read { grid-template-columns: 1fr; }
  .ca-paper { display: none; }
  .ca-rec li { grid-template-columns: minmax(0, 1fr) 1.25rem minmax(0, 1fr) auto; gap: .45rem; padding: .5rem .65rem; font-size: .8125rem; }
  .ca-note { display: none; }
  .scene--4 .guard, .scene--4 .draft__meta { display: none; }
  .ca-pack li { padding: .4rem 0; font-size: .8125rem; }
  .scene--5 .log { display: none; }
  .scene--5 .ca-cite, .scene--5 .bub__who { display: none; }
  .scene--1 .merge span:not(.ch) { font-size: .75rem; }
}
@media (max-width: 420px) {
  .scene--1 .merge .ch { display: none; }
  .scene--4 .draft__head .state { display: none; }
}
@media (max-width: 360px) {
  .ca-pack li small { display: none; }
  .ca-pack .sig__ok { grid-row: auto; align-self: center; }
}

/* ── Pruébalo: paquete del mes ────────────────────────────── */
.pkg { position: relative; border-radius: 20px; border: 1px solid var(--line); background: #fff; box-shadow: 0 40px 80px -48px rgba(38,38,44,.3); overflow: hidden; }
.pkg__bar { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); background: var(--paper); }
.pkg__bar strong { font-size: .9375rem; }
.pkg__bar span { font-size: .8125rem; color: var(--muted); }
.pkg__prog { display: flex; flex-direction: column; gap: .7rem; padding: 1.1rem 1.1rem .9rem; }
.pkg__prog p { font-size: .9375rem; color: var(--ink-2); }
.pkg__prog b { font-weight: 600; color: var(--ink); }
.pkg__slots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .4rem; }
.pkg__slots li { height: 10px; border-radius: 999px; background: var(--paper-2); border: 1px dashed var(--line); transition: background .35s var(--ease), border-color .35s var(--ease); }
.pkg__slots li.on { background: var(--accent); border: 1px solid var(--accent); }
.pkg.is-full .pkg__slots li.on { background: var(--estado-ok); border-color: var(--estado-ok); }
.pkg__body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 0; border-top: 1px solid var(--line); }
.pkg__parts { display: flex; flex-direction: column; padding: .4rem 1.1rem; }
.pkg__parts li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.pkg__parts li:last-child { border-bottom: 0; }
.pkg__parts strong { display: block; font-size: .9rem; font-weight: 600; letter-spacing: -.01em; }
.pkg__parts small { display: block; font-size: .8125rem; color: var(--muted); }
.pkg__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); transition: background .3s var(--ease), box-shadow .3s var(--ease); }
.pkg__parts li.is-ok .pkg__dot { background: var(--estado-ok); box-shadow: 0 0 0 4px var(--estado-ok-wash); }
.pkg__parts li.is-rev .pkg__dot { background: var(--estado-rev); box-shadow: 0 0 0 4px var(--estado-rev-wash); }
.pkg__parts li.is-wait .pkg__dot { background: transparent; border: 1.5px dashed var(--muted); }
.pkg__miss { padding: 1rem 1.1rem; border-left: 1px solid var(--line); background: var(--paper); }
.pkg__miss h4 { font-family: var(--mono); font-size: .7rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .6rem; }
.pkg__miss ul { display: flex; flex-direction: column; gap: .45rem; }
.pkg__miss li { position: relative; padding: .5rem .65rem .5rem 1.6rem; border-radius: 10px; background: var(--estado-rev-wash); border: 1px solid #F1E1CB; color: var(--estado-rev); font-size: .8125rem; line-height: 1.35; }
.pkg__miss li::before { content: ""; position: absolute; left: .6rem; top: .8rem; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; }
.pkg__none { font-size: .875rem; color: var(--estado-ok); }
.pkg__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .85rem 1.1rem; border-top: 1px solid var(--line); font-size: .8125rem; color: var(--muted); }
.pkg__foot [data-pkg-verdict] { color: var(--ink); font-weight: 500; }
.pkg.is-full .pkg__foot [data-pkg-verdict] { color: var(--estado-ok); }
@media (max-width: 700px) {
  .pkg__body { grid-template-columns: 1fr; }
  .pkg__miss { border-left: 0; border-top: 1px solid var(--line); }
  .pkg__parts li { grid-template-columns: 12px minmax(0, 1fr); }
  .pkg__parts .tag { grid-column: 2; justify-self: start; }
}
.no-sv .pkg__slots li { transition: none; }

/* ── Capacidades: micro-visuales propios ──────────────────── */
.v-read { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.v-read__doc { display: flex; flex-direction: column; gap: .4rem; width: 92px; padding: .75rem .7rem; border-radius: 10px; background: #fff; border: 1px solid var(--line); transform: rotate(-3deg); }
.v-read__doc i { display: block; height: 5px; border-radius: 3px; background: var(--line); }
.v-read__doc i.s { width: 60%; background: var(--accent-line); }
.v-read__arrow { color: var(--accent); flex: none; }
.v-read__rows { display: flex; flex-direction: column; gap: .35rem; flex: 1; min-width: 12rem; }
.v-read__rows span { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem .75rem; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-size: .8125rem; font-weight: 500; }
.v-read__rows em { font-style: normal; font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.v-cats { display: flex; flex-wrap: wrap; gap: .4rem; }
.v-cats span { padding: .35rem .7rem; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: .8125rem; color: var(--ink-2); }
.v-cats span.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.v-pair { display: grid; grid-template-columns: auto 1fr auto; gap: .45rem .6rem; align-items: center; font-size: .8125rem; font-weight: 500; }
.v-pair span { padding: .35rem .6rem; border-radius: 8px; background: #fff; border: 1px solid var(--line); text-align: center; }
.v-pair i { height: 2px; background: var(--estado-ok); border-radius: 2px; }
.v-pair i.miss { background: repeating-linear-gradient(90deg, var(--estado-rev) 0 4px, transparent 4px 8px); }
.v-pair span.miss { color: var(--estado-rev); background: var(--estado-rev-wash); border-color: #F1E1CB; }
.v-logline { display: flex; flex-direction: column; gap: .4rem; max-width: 40rem; }
.v-logline span { display: flex; gap: .85rem; align-items: baseline; padding: .5rem .8rem; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-size: .8125rem; color: var(--ink-2); }
.v-logline time { font-family: var(--mono); font-size: .72rem; color: var(--muted); }
.v-logline span.on { border-color: var(--accent-line); background: var(--accent-wash); color: var(--ink); }
@media (max-width: 600px) { .v-read__doc, .v-read__arrow { display: none; } .v-read__rows { min-width: 0; } }