/* Cierre de caja como asistente de 3 pasos (D-240). Una cosa por pantalla, fundidos (ic-entra / ic-sale, de pin.css)
   y nada que salte: sólo transform y opacity. El detalle contable queda plegado debajo. */
.cc-pagina { display: grid; gap: 1rem; }
.cc-tarjeta, .cc-cajon { width: min(640px, 100%); margin-inline: auto; }
.cc-tarjeta { padding: 1.4rem 1.5rem 1.5rem; overflow: hidden; }
.cc-vacia { display: flex; flex-direction: column; align-items: center; text-align: center; }

/* Avance: tres puntos con nombre, el actual resaltado y los hechos con tilde. */
.cc-avance { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; counter-reset: cc; }
.cc-avance li { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; color: var(--texto-3); font-size: .85rem; font-weight: 600; }
.cc-avance li::after { content: ""; position: absolute; top: 15px; left: calc(50% + 20px); width: calc(100% - 40px + .5rem); height: 2px; border-radius: 2px; background: var(--linea); }
.cc-avance li:last-child::after { display: none; }
.cc-avance li.hecho::after { background: var(--marca); }
.cc-avance i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-style: normal; font-weight: 700;
  background: var(--relleno); color: var(--texto-2); transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); }
.cc-avance li.actual { color: var(--texto); }
.cc-avance li.actual i { background: var(--marca); color: #fff; transform: scale(1.08); box-shadow: 0 0 0 4px var(--marca-suave); }
.cc-avance li.hecho i { background: var(--marca-suave); color: var(--marca); }

/* La escena: el paso actual entra y el anterior se va. */
.cc-escena { position: relative; min-height: 340px; }
.cc-paso { display: flex; flex-direction: column; }
.cc-form { display: flex; flex-direction: column; align-items: stretch; }
.cc-heroe { display: grid; place-items: center; margin: .2rem 0 .5rem; }
.cc-sello { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 20px; background: var(--marca-suave); color: var(--marca); }
.cc-titulo { margin: .2rem 0 0; font-size: 1.35rem; font-weight: 750; letter-spacing: -.01em; text-align: center; }
.cc-sub { margin: .35rem auto 0; max-width: 30rem; color: var(--texto-2); text-align: center; }
.cc-campo { margin-top: 1.1rem; }
.cc-campo > label { font-weight: 650; }
.cc-importe { text-align: center; }
.cc-form .contar-billetes { margin-top: .2rem; }
.cc-error:not(:empty) { margin-top: .8rem; }
.cc-acciones { display: grid; gap: .6rem; margin-top: 1.2rem; }
.cc-acciones-2 { grid-template-columns: auto 1fr; align-items: center; }

/* Paso 2: un renglón grande por medio, con su ícono. */
.cc-medios { display: grid; gap: .6rem; margin-top: 1.1rem; }
.cc-medio { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(7.5rem, 11rem); align-items: center; gap: .8rem;
  padding: .7rem .8rem; border-radius: var(--r-l); background: var(--superficie-2); cursor: text; }
.cc-medio:focus-within { box-shadow: inset 0 0 0 2px var(--marca); }
.cc-medio-txt { display: flex; flex-direction: column; min-width: 0; }
.cc-medio-txt small { color: var(--texto-3); font-size: .85rem; }
.cc-dec { width: 100%; min-height: 44px; text-align: right; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.cc-otro, .cc-mas { margin-top: .8rem; }
.cc-otro > summary, .cc-mas > summary { display: flex; align-items: center; gap: .45rem; min-height: 40px; cursor: pointer; color: var(--texto-2); font-weight: 600; }
.cc-mas-txt { margin-left: auto; color: var(--texto-3); font-weight: 500; font-size: .85rem; text-align: right; overflow-wrap: anywhere; }
.cc-mas-campos { display: grid; gap: .8rem; padding: .4rem 0 .2rem; }
.cc-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }

/* Paso 3: el resultado en grande y la cuenta en palabras. */
.cc-resultado { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem; padding: 1.1rem 1rem 1.2rem; border-radius: var(--r-l);
  background: var(--superficie-2); animation: cc-aparece .4s var(--ease) both; }
.cc-resultado > strong { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cc-resultado > span:not(.cc-sello) { color: inherit; opacity: .85; }
.cc-resultado[data-estado="ok"] { background: var(--ok-suave); color: var(--ok-tinta); }
.cc-resultado[data-estado="sobra"] { background: var(--aviso-suave); color: var(--aviso-tinta); }
.cc-resultado[data-estado="falta"] { background: var(--peligro-suave); color: var(--peligro-tinta); }
.cc-resultado .cc-sello { background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; animation: cc-salta .45s var(--ease) .1s both; }
@keyframes cc-aparece { from { opacity: 0; transform: translateY(6px) scale(.985); } }
@keyframes cc-salta { from { opacity: 0; transform: scale(.6); } }
.cc-explica { margin-top: 1.1rem; }
.cc-explica h3 { margin: 0 0 .4rem; font-size: 1rem; font-weight: 700; }
.cc-cuenta, .cc-posnet { list-style: none; margin: 0; padding: 0; border-radius: var(--r-m); background: var(--superficie-2); }
.cc-cuenta li { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr) auto; gap: .5rem; align-items: baseline; padding: .5rem .8rem; font-variant-numeric: tabular-nums; }
.cc-cuenta li + li { border-top: 1px solid var(--linea); }
.cc-signo { color: var(--texto-3); font-weight: 700; text-align: center; }
.cc-cuenta .cc-total { font-weight: 700; }
.cc-cuenta .cc-contaste { font-weight: 700; background: var(--marca-suave); border-radius: 0 0 var(--r-m) var(--r-m); }
.cc-posnet li { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .55rem .8rem; }
.cc-posnet li + li { border-top: 1px solid var(--linea); }
.cc-posnet li > span { display: flex; flex-direction: column; min-width: 0; }
.cc-posnet small { color: var(--texto-3); font-size: .85rem; }
.cc-nota { display: flex; gap: .4rem; align-items: center; margin-top: .9rem; }
.cc-campo textarea { width: 100%; resize: vertical; }
.cc-listo { display: flex; flex-direction: column; align-items: center; }
.cc-listo .fr-datos { margin-top: .4rem; }
.cc-listo .fr-hecho strong { font-size: 1.5rem; }
.cc-listo .cc-acciones { width: min(340px, 100%); }
.cc-explicacion-dada { font-style: italic; margin-top: .8rem; }
.cc-tarjeta .fr-datos { margin-top: 1rem; }
.cc-reabrir { margin-top: 1.1rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; }
.cc-reabrir .ayuda { margin: 0; flex: 1 1 16rem; }

/* Debajo: sacar o poner plata. */
.cc-cajon { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; padding: .7rem .9rem;
  border-radius: var(--r-l); background: var(--relleno); }
.cc-cajon-txt { display: flex; align-items: center; gap: .5rem; color: var(--texto-2); }

/* El detalle contable, plegado. */
.cc-detalle { border-radius: var(--r-l); background: var(--superficie); box-shadow: var(--sombra-1); }
.cc-detalle > summary { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; min-height: 48px; padding: .6rem 1rem; cursor: pointer; font-weight: 650; }
.cc-detalle > summary small { color: var(--texto-3); font-weight: 500; }
.cc-detalle[open] > summary { border-bottom: 1px solid var(--linea); }
.cc-detalle-cuerpo { padding: 1rem; display: grid; gap: 1rem; animation: cc-aparece .3s var(--ease) both; }
.cc-excel { flex-wrap: wrap; gap: .5rem; }

@media (max-width: 560px) {
  .cc-tarjeta { padding: 1rem 1rem 1.2rem; }
  .cc-escena { min-height: 0; }
  .cc-titulo { font-size: 1.2rem; }
  .cc-sello { width: 48px; height: 48px; border-radius: 16px; }
  .cc-heroe { display: none; }
  .cc-encabezado p { display: none; }
  .cc-medio { grid-template-columns: auto minmax(0, 1fr); }
  .cc-medio .cc-dec { grid-column: 1 / -1; }
  .cc-avance { margin-bottom: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-resultado, .cc-resultado .cc-sello, .cc-detalle-cuerpo { animation: none; }
  .cc-avance i { transition: none; }
}