/* FujiJapón — Reservas de graduación
   Pensado primero para celular: casi todos los graduandos abren el link
   desde WhatsApp. */

/* ------------------------------------------------------------- tipografía
   Las mismas dos fuentes de fujijapon.com, pero servidas desde este mismo
   servidor: no se le pide nada a Google, así que cargan aunque el celular
   tenga mala señal. Son variables: un archivo cubre todos los grosores. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fuentes/inter-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fuentes/plus-jakarta-sans-latin.woff2') format('woff2');
}

:root {
  --tipo-texto:  'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tipo-titulo: 'Plus Jakarta Sans', 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Identidad FujiJapón: rojo, negro y blanco. Contraste fuerte. */
  --negro:      #000000;
  --tinta:      #111111;   /* texto */
  --tinta-sua:  #55585c;
  --tinta-ten:  #8a8d91;
  --linea:      #e3e3e3;
  --linea-sua:  #f0f0f0;
  --fondo:      #f5f5f5;
  --papel:      #ffffff;
  --acento:     #c8102e;   /* rojo de marca, legible sobre blanco */
  --acento-osc: #a00c24;   /* el mismo rojo, para hover */
  --acento-viv: #ff3b4a;   /* rojo claro, para usar sobre negro */
  --acento-sua: #fdeaec;
  --oro:        var(--acento-viv);
  --ok:         #0a6b2e;
  --ok-sua:     #e6f2ea;
  --aviso:      #8a5300;
  --aviso-sua:  #fdf3e2;
  --error:      #9b1c1c;
  --error-sua:  #fdecec;
  --radio:      10px;
  --sombra:     0 1px 2px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.07);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 17px/1.65 var(--tipo-texto);
  -webkit-font-smoothing: antialiased;
}

/* Los títulos van en Plus Jakarta Sans, igual que en fujijapon.com. */
h1, h2, h3, h4, .paquete .valor, .contador .n {
  font-family: var(--tipo-titulo);
  letter-spacing: -.015em;
  text-wrap: balance;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--acento); }

.envoltura { max-width: 60rem; margin: 0 auto; padding: 0 1.1rem; }
.estrecho  { max-width: 40rem; }

/* ---------------------------------------------------------------- cabecera */

.barra {
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
  padding: .85rem 0;
  position: sticky; top: 0; z-index: 20;
}
.barra .envoltura {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
/* La marca es el logo. Se mide por el alto para que no se estire nunca. */
.marca { display: flex; align-items: center; text-decoration: none; color: var(--tinta); }
.marca img { display: block; width: auto; height: clamp(24px, 6.5vw, 32px); }
.marca:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 3px; }
.barra .tel { font-size: .85rem; color: var(--tinta-sua); text-decoration: none; white-space: nowrap; }

/* ------------------------------------------------------------------ portada */

.portada {
  background: linear-gradient(180deg, #000000 0%, #171717 100%);
  color: #fff;
  padding: 3rem 0 3.2rem;
  text-align: center;
}
.portada .kicker {
  text-transform: uppercase; letter-spacing: .18em; font-size: .72rem;
  color: var(--oro); margin: 0 0 .9rem;
}
.portada h1 {
  margin: 0 0 .8rem; font-size: clamp(1.7rem, 5.5vw, 2.6rem);
  line-height: 1.15; font-weight: 700;
}
.portada p { margin: 0 auto; max-width: 34rem; color: #d6d6d6; font-size: 1.02rem; }
.portada .datos {
  margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .5rem;
  justify-content: center; font-size: .85rem;
}
.portada .datos span {
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14);
  padding: .3rem .8rem; border-radius: 999px;
}

/* ------------------------------------------------------------------ bloques */

.bloque { padding: 2.6rem 0; }
.bloque + .bloque { border-top: 1px solid var(--linea); }
/* Los títulos de sección van en el rojo de la marca. Sobre el blanco del
   papel da 5.88:1, de sobra para leerse. */
.bloque h2 {
  font-size: 1.35rem; margin: 0 0 .4rem; letter-spacing: -.01em;
  color: var(--acento);
}
.bloque .intro { color: var(--tinta-sua); margin: 0 0 1.6rem; }

/* ----------------------------------------------------------------- paquetes */

.paquetes { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 46rem) { .paquetes { grid-template-columns: 1fr 1fr; } }

.paquete {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra);
  display: flex; flex-direction: column;
}
.paquete .galeria {
  display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 2px; background: var(--linea); aspect-ratio: 3 / 2;
  border-bottom: 1px solid var(--linea);
}
/* La primera manda: ocupa las dos filas y se ve al doble que las otras. */
.paquete .galeria > :first-child { grid-row: span 2; }
.paquete .galeria img {
  width: 100%; height: 100%; object-fit: cover; background: var(--papel);
}
.paquete .galeria .vacio {
  background: repeating-linear-gradient(45deg, #ededed, #ededed 8px, #e0e0e0 8px, #e0e0e0 16px);
  display: flex; align-items: center; justify-content: center;
  color: var(--tinta-ten); font-size: .7rem; text-align: center; padding: .3rem;
}
.paquete .cuerpo { padding: 1.25rem 1.3rem 1.4rem; flex: 1; display: flex; flex-direction: column; }
.paquete h3 { margin: 0 0 .25rem; font-size: 1.15rem; }
.paquete .resumen { color: var(--tinta-sua); font-size: .92rem; margin: 0 0 1rem; }
.paquete ul { margin: 0 0 1.2rem; padding-left: 1.1rem; font-size: .93rem; }
.paquete li { margin: .28rem 0; }
.paquete .precios { margin-top: auto; border-top: 1px dashed var(--linea); padding-top: .9rem; }
.paquete .valor { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.paquete .desglose { font-size: .87rem; color: var(--tinta-sua); margin-top: .2rem; }

/* ------------------------------------------------------------------- pagos */

.tarjetas-pago { display: grid; gap: .8rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .tarjetas-pago { grid-template-columns: repeat(3, 1fr); } }
.tarjeta-pago {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: .95rem 1.1rem;
}
.tarjeta-pago .etiqueta {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--tinta-sua); margin-bottom: .2rem;
}
.tarjeta-pago .numero { font-size: 1.2rem; font-weight: 700; letter-spacing: .01em; }
.titular {
  margin-top: .9rem; font-size: .92rem; color: var(--tinta-sua);
}
.titular strong { color: var(--tinta); }

/* ---------------------------------------------------------------- formulario */

.formulario {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 1.4rem 1.3rem 1.6rem; box-shadow: var(--sombra);
}
.campo { margin-bottom: 1.15rem; }
.campo > label, .grupo > legend {
  display: block; font-weight: 600; font-size: .92rem; margin-bottom: .35rem;
}
.campo .ayuda { font-size: .82rem; color: var(--tinta-sua); margin: .3rem 0 0; }
.requerido { color: var(--acento); }

input[type=text], input[type=tel], input[type=email], input[type=number],
input[type=password], select, textarea {
  width: 100%; padding: .7rem .8rem; font: inherit; font-size: 1rem;
  color: var(--tinta); background: var(--papel);
  border: 1px solid #c4c4c4; border-radius: 8px;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--acento); outline-offset: 1px; border-color: var(--acento);
}
input[type=file] { width: 100%; font-size: .95rem; }

.grupo { border: 0; padding: 0; margin: 0 0 1.15rem; }

.opciones { display: grid; gap: .7rem; }
.opcion {
  display: flex; gap: .75rem; align-items: flex-start;
  border: 1px solid #c4c4c4; border-radius: 8px; padding: .85rem .9rem;
  cursor: pointer; background: var(--papel);
}
.opcion:has(input:checked) { border-color: var(--acento); background: var(--acento-sua); }
.opcion input { margin-top: .28rem; flex: none; width: 1.05rem; height: 1.05rem; accent-color: var(--acento); }
.opcion .titulo { font-weight: 600; }
.opcion .detalle { font-size: .87rem; color: var(--tinta-sua); }

.acepta { display: flex; gap: .65rem; align-items: flex-start; font-size: .9rem; margin-bottom: .9rem; }
.acepta input { margin-top: .25rem; flex: none; width: 1.05rem; height: 1.05rem; accent-color: var(--acento); }

.resumen-caja {
  background: var(--fondo); border: 1px solid var(--linea);
  border-radius: 8px; padding: .95rem 1.05rem; margin-bottom: 1.15rem;
}
.resumen-caja .fila { display: flex; justify-content: space-between; gap: 1rem; padding: .18rem 0; font-size: .95rem; }
.resumen-caja .fila.total { border-top: 1px solid var(--linea); margin-top: .4rem; padding-top: .5rem; font-weight: 700; }
.resumen-caja .fila.saldo { color: var(--tinta-sua); }

/* trampa para robots: invisible pero no display:none */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------- el formulario, sobre negro
   Corta la página en dos: arriba se lee, aquí se actúa. Los bordes de los
   campos son gris claro a propósito — sobre negro, un gris oscuro los
   volvería invisibles y la gente no sabría dónde escribir. */

#reservar .formulario {
  background: var(--negro); border-color: #262626; color: #fff;
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}
#reservar .formulario > label,
#reservar .formulario .campo > label,
#reservar .formulario .grupo > legend { color: #fff; }
#reservar .formulario .ayuda,
#reservar .formulario .opcion .detalle { color: #b8babd; }
#reservar .formulario .requerido { color: var(--acento-viv); }
#reservar .formulario a { color: var(--acento-viv); }

#reservar .formulario input[type=text],
#reservar .formulario input[type=tel],
#reservar .formulario input[type=email],
#reservar .formulario input[type=number],
#reservar .formulario select,
#reservar .formulario textarea {
  background: #171717; border-color: #6b6b6b; color: #fff;
}
#reservar .formulario ::placeholder { color: #8a8d91; }
#reservar .formulario input:focus,
#reservar .formulario select:focus,
#reservar .formulario textarea:focus {
  outline-color: var(--acento-viv); border-color: var(--acento-viv);
}
#reservar .formulario input[type=file] { color: #d6d6d6; }

#reservar .formulario .opcion {
  background: #141414; border-color: #6b6b6b; color: #fff;
}
#reservar .formulario .opcion:has(input:checked) {
  border-color: var(--acento-viv); background: rgba(255,59,74,.14);
}
#reservar .formulario .opcion input,
#reservar .formulario .acepta input { accent-color: var(--acento-viv); }

#reservar .formulario .resumen-caja {
  background: #141414; border-color: #262626;
}
#reservar .formulario .resumen-caja .fila.total { border-top-color: #333; }
#reservar .formulario .resumen-caja .fila.saldo { color: #b8babd; }

/* El borde vivo despega el botón del fondo negro; el relleno se queda en el
   rojo oscuro, que es el único que aguanta texto blanco encima. */
#reservar .formulario .boton {
  border: 1px solid var(--acento-viv);
}

/* --------------------------------------------------------------------- botón */

.boton {
  display: inline-block; width: 100%; text-align: center;
  background: var(--acento); color: #fff; border: 0; border-radius: 8px;
  padding: .9rem 1.4rem; font: inherit; font-weight: 600; font-size: 1.02rem;
  cursor: pointer; text-decoration: none;
}
.boton:hover { background: var(--acento-osc); }
.boton.secundario {
  background: var(--papel); color: var(--tinta); border: 1px solid #c4c4c4; width: auto;
}
.boton.secundario:hover { background: var(--fondo); }
.boton.pequeno { padding: .45rem .8rem; font-size: .87rem; width: auto; }

/* ------------------------------------------------------------------- avisos */

.aviso, .exito, .error-caja {
  border-radius: 8px; padding: .9rem 1.05rem; margin-bottom: 1.2rem; font-size: .95rem;
}
.aviso     { background: var(--aviso-sua); border: 1px solid #e8c98a; color: var(--aviso); }
.exito     { background: var(--ok-sua);    border: 1px solid #a6d3b8; color: var(--ok); }
.error-caja{ background: var(--error-sua); border: 1px solid #e6a9a9; color: var(--error); }
.error-caja ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.campo .error { color: var(--error); font-size: .85rem; margin-top: .3rem; }
p.error { color: var(--error); font-size: .85rem; margin: .4rem 0 0; }

/* ------------------------------------------------- la reserva del graduando */

/* El seguimiento a quien no abonó. Va en negro para que se note que es
   la parte que le habla a él, sin gritarle con rojo de alarma. */
.seguimiento {
  background: var(--negro); color: #fff; border-radius: var(--radio);
  padding: 1.4rem 1.3rem 1.5rem; margin-top: 2rem;
}
.seguimiento h2 { margin: 0 0 .5rem; font-size: 1.15rem; color: #fff; }
.seguimiento > p { margin: 0 0 1.2rem; color: #d6d6d6; font-size: .93rem; }
.seguimiento .tecla > span {
  background: #1a1a1a; border-color: #333; color: #fff;
}
.seguimiento .tecla input:checked + span {
  background: var(--acento-viv); border-color: var(--acento-viv); color: var(--negro);
}
.seguimiento .campo label { color: #d6d6d6; }
.seguimiento .campo input { background: #1a1a1a; border-color: #333; color: #fff; }
.seguimiento .campo input::placeholder { color: #77797d; }
.seguimiento .boton { margin-top: 1.1rem; background: #fff; color: var(--negro); }
.seguimiento .boton:hover { background: #e6e6e6; }
.botonera-motivos { grid-template-columns: 1fr; }
@media (min-width: 34rem) { .botonera-motivos { grid-template-columns: 1fr 1fr; } }

.bloque-claro {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 1.4rem 1.3rem 1.5rem;
}

.enlace-caja {
  border: 2px dashed var(--acento); border-radius: var(--radio);
  background: var(--acento-sua); padding: 1.1rem 1.2rem 1.2rem; margin: 1.4rem 0 0;
}
.enlace-caja .etiqueta {
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--acento-osc); font-weight: 700;
}
.enlace-caja .ayuda { margin: .35rem 0 .8rem; }
.enlace-caja input {
  width: 100%; padding: .6rem .7rem; font-size: .82rem;
  border: 1px solid var(--linea); border-radius: 8px; background: var(--papel);
  color: var(--tinta); margin-bottom: .7rem;
}

/* ---------------------------------------------------------------- confirmación */

.radicado-caja {
  text-align: center; background: var(--papel); border: 2px solid var(--acento);
  border-radius: var(--radio); padding: 1.6rem 1.2rem; margin: 1.4rem 0;
}
.radicado-caja .etiqueta { font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: var(--tinta-sua); }
.radicado-caja .codigo { font-size: 2.1rem; font-weight: 700; letter-spacing: .04em; margin: .3rem 0 0; }

.pasos { counter-reset: paso; list-style: none; padding: 0; margin: 0; }
.pasos li {
  counter-increment: paso; position: relative; padding-left: 2.4rem; margin-bottom: 1rem;
}
.pasos li::before {
  content: counter(paso); position: absolute; left: 0; top: .05rem;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--acento); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 700;
}

.fechas { list-style: none; padding: 0; margin: 0; }
.fechas li {
  padding: .6rem .9rem; background: var(--papel); border: 1px solid var(--linea);
  border-radius: 8px; margin-bottom: .5rem; font-size: .95rem;
}

/* ----------------------------------------------------------------- pie */

.pie {
  background: var(--negro); color: #c9c9c9; padding: 2rem 0; margin-top: 2.5rem;
  font-size: .87rem; text-align: center;
}
.pie a { color: #ededed; }
.pie .legal { margin-top: .9rem; font-size: .8rem; color: #8f8f8f; }

/* ----------------------------------------------------------------- panel */

.panel-barra { background: var(--negro); color: #fff; padding: .8rem 0; }
.panel-barra .envoltura { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.panel-barra a { color: #d6d6d6; text-decoration: none; font-size: .9rem; margin-left: 1rem; }
.panel-barra a:hover { color: #fff; text-decoration: underline; }

.filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.2rem; align-items: center; }
.filtros a {
  text-decoration: none; font-size: .88rem; padding: .35rem .8rem;
  border: 1px solid var(--linea); border-radius: 999px; background: var(--papel); color: var(--tinta);
}
.filtros a.activo { background: var(--acento); border-color: var(--acento); color: #fff; }

.tabla-envoltura { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel); }
table.datos { border-collapse: collapse; width: 100%; font-size: .88rem; min-width: 54rem; }
table.datos th, table.datos td { padding: .6rem .7rem; text-align: left; border-bottom: 1px solid var(--linea); vertical-align: top; }
table.datos th { background: var(--fondo); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-sua); white-space: nowrap; }
table.datos tr:last-child td { border-bottom: 0; }
table.datos .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.pastilla { display: inline-block; font-size: .75rem; padding: .15rem .55rem; border-radius: 999px; white-space: nowrap; }
.pastilla.pendiente  { background: var(--aviso-sua); color: var(--aviso); border: 1px solid #e8c98a; }
.pastilla.verificado { background: var(--ok-sua);    color: var(--ok);    border: 1px solid #a6d3b8; }
.pastilla.rechazado  { background: var(--error-sua); color: var(--error); border: 1px solid #e6a9a9; }

.contadores { display: grid; gap: .8rem; grid-template-columns: repeat(2, 1fr); margin-bottom: 1.4rem; }
@media (min-width: 42rem) { .contadores { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); } }
.contador { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: .9rem 1rem; }
.contador .n { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; }
.contador .t { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-sua); }

.acceso { max-width: 22rem; margin: 5rem auto; }

@media print {
  .barra, .pie, .boton, .filtros { display: none; }
  body { background: #fff; }
}

.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }

/* ==================================================================
   MÓDULO DE COBRO — se usa de pie, en el celular, con una sola mano.
   Todo es más grande de lo normal a propósito.
   ================================================================== */

body.cobro { background: var(--fondo); }

.cobro-envoltura { max-width: 34rem; margin: 0 auto; padding: 1rem 1rem 3.5rem; }

.cobro-marca {
  text-align: center; font-weight: 700; letter-spacing: .14em;
  font-size: .95rem; margin: 0; color: var(--tinta);
}
.cobro-marca span { color: var(--acento); }

.cobro-barra {
  position: sticky; top: 0; z-index: 30;
  background: var(--negro); color: #fff;
  padding: .7rem 1rem; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem;
}
.cobro-barra .quien { display: block; font-weight: 600; font-size: .95rem; }
.cobro-barra .llevas { display: block; font-size: .82rem; color: #c9c9c9; }
.cobro-barra .llevas strong { color: #fff; }
.cobro-barra nav { display: flex; gap: .9rem; flex: none; }
.cobro-barra nav a { color: #d6d6d6; text-decoration: none; font-size: .85rem; white-space: nowrap; }
.cobro-barra nav a:hover { color: #fff; text-decoration: underline; }

/* Dos campos por fila cuando la pantalla lo permite */
.par { display: grid; gap: 0 .8rem; grid-template-columns: 1fr; }
@media (min-width: 26rem) { .par { grid-template-columns: 1fr 1fr; } }

body.cobro input[type=text], body.cobro input[type=tel],
body.cobro input[type=email], body.cobro input[type=number],
body.cobro input[type=password] {
  font-size: 1.05rem; padding: .8rem .8rem;   /* 16px+ evita el zoom de iOS */
}
body.cobro input.grande { font-size: 1.5rem; font-weight: 700; text-align: right; padding: .7rem .8rem; }

/* Teclas grandes para paquete y forma de pago */
.botonera { display: grid; gap: .55rem; grid-template-columns: 1fr 1fr; }
.botonera-4 { grid-template-columns: 1fr 1fr; }
@media (min-width: 30rem) { .botonera-4 { grid-template-columns: repeat(4, 1fr); } }

.tecla { position: relative; display: block; cursor: pointer; }
.tecla input {
  position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.tecla > span {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .15rem; min-height: 3.4rem; padding: .6rem .5rem; text-align: center;
  border: 2px solid #c4c4c4; border-radius: 10px; background: var(--papel);
  line-height: 1.25;
}
.tecla > span strong { font-size: 1rem; }
.tecla > span small { font-size: .74rem; color: var(--tinta-sua); }
.tecla input:checked + span {
  border-color: var(--acento); background: var(--acento-sua);
  box-shadow: inset 0 0 0 1px var(--acento);
}
.tecla input:checked + span small { color: var(--acento); }
.tecla input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }

/* Las cuentas, a la mano de la cobradora sin que estorben. */
.cuentas { margin-top: .7rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel); }
.cuentas summary {
  cursor: pointer; padding: .7rem .9rem; font-size: .88rem;
  font-weight: 600; color: var(--acento);
}
.cuentas summary:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.cuentas ul { list-style: none; margin: 0; padding: 0 .9rem; }
.cuentas li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .5rem 0; border-top: 1px solid var(--linea-sua);
}
.cuentas li span { color: var(--tinta-sua); font-size: .88rem; }
.cuentas li strong { font-size: 1.05rem; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.cuentas p { margin: 0; padding: .7rem .9rem .9rem; font-size: .84rem; color: var(--tinta-sua); }

.totalizador {
  background: var(--negro); color: #fff; border-radius: 10px;
  padding: .85rem 1rem; margin-bottom: 1.15rem;
}
.totalizador div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.totalizador div + div { margin-top: .3rem; padding-top: .3rem; border-top: 1px solid rgba(255,255,255,.15); }
.totalizador span { font-size: .85rem; color: #c9c9c9; }
.totalizador strong { font-size: 1.15rem; }

/* ------------------------------------------------- aviso de doble cobro */

.alerta-doble {
  border: 1px solid var(--aviso); background: var(--aviso-sua);
  border-radius: var(--radio); padding: .95rem 1.05rem 1.05rem; margin: 0 0 1.15rem;
}
.alerta-doble h3 { margin: 0 0 .5rem; font-size: .98rem; color: var(--aviso); }
.alerta-doble .ficha { font-size: .88rem; line-height: 1.45; }
.alerta-doble .ficha + .ficha { margin-top: .55rem; padding-top: .55rem; border-top: 1px solid rgba(0,0,0,.1); }

/* Cuando ya hubo plata de por medio deja de ser un aviso y pasa a ser
   una alarma: es el caso en que cobrar otra vez es un error real. */
.alerta-doble.grave { border-color: var(--error); border-width: 2px; background: var(--error-sua); }
.alerta-doble.grave h3 { color: var(--error); font-size: 1.05rem; }

.alerta-doble .confirmar {
  display: flex; gap: .6rem; align-items: flex-start; margin-top: .9rem;
  padding-top: .8rem; border-top: 1px solid rgba(0,0,0,.12); font-size: .87rem;
  cursor: pointer;
}
.alerta-doble .confirmar input { margin-top: .2rem; width: 1.15rem; height: 1.15rem; flex: none; }

.boton-grande { padding: 1.1rem 1.4rem; font-size: 1.12rem; }
.boton:disabled { opacity: .6; cursor: wait; }

.exito-grande { font-size: 1.05rem; text-align: center; padding: 1.1rem; }

/* ------------------------------------------------------- mis cobros */

.cierre {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 1.2rem 1.3rem; box-shadow: var(--sombra);
}
.cierre h1 { font-size: 1.1rem; margin: 0 0 .8rem; }
.cierre-total {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; padding-bottom: .7rem; border-bottom: 2px solid var(--tinta);
}
.cierre-total span { color: var(--tinta-sua); font-size: .9rem; }
.cierre-total strong { font-size: 1.85rem; letter-spacing: -.02em; }

.cierre-tabla { width: 100%; border-collapse: collapse; margin-top: .6rem; font-size: .95rem; }
.cierre-tabla td { padding: .42rem 0; border-bottom: 1px solid var(--linea-sua, #f0efeb); }
.cierre-tabla tr:last-child td { border-bottom: 0; }
.cierre-tabla td.n { text-align: right; color: var(--tinta-sua); font-size: .84rem; width: 3rem; }
.cierre-tabla td.v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

.entregar {
  margin: 1rem 0 0; padding: .8rem .9rem; background: var(--aviso-sua);
  border: 1px solid #e8c98a; border-radius: 8px; font-size: .95rem; color: var(--aviso);
}
.entregar strong { font-size: 1.1rem; }

.lista-cobros { list-style: none; padding: 0; margin: 0; }
.lista-cobros li {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: 8px; padding: .75rem .9rem; margin-bottom: .55rem;
}
.lista-cobros .cabeza { display: flex; justify-content: space-between; gap: .8rem; align-items: baseline; }
.lista-cobros .valor { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lista-cobros .detalle { font-size: .8rem; color: var(--tinta-sua); margin-top: .15rem; }