/* ───────────────────────────────────────────────────────────────────────────
   El panel de una tienda, para su dueño.

   En claro y no con el tema oscuro del panel de administración, por la misma
   razón que el informe: esto lo abre alguien que no es informático, muchas
   veces desde el móvil entre dos cosas. Comparte paleta con el informe para
   que el panel y el papel se reconozcan como lo mismo.

   Una columna, tarjetas, nada que interpretar. Si algo va mal se dice con
   palabras antes que con un color: un semáforo sin texto no informa a quien
   no sabe qué se está midiendo.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  --tinta:  #1A1F28;
  --tinta2: #55606F;
  --tinta3: #8A93A1;
  --linea:  #DDE1E6;
  --linea2: #EFF1F4;
  --papel:  #FFFFFF;
  --fondo:  #EDEFF2;
  --acento: #2F4FB8;
  --bien:   #1F7A4D;
  --ojo:    #8A6516;
  --mal:    #B03A2E;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

#hoja {
  max-width: 680px;
  margin: 0 auto;
  padding: 24px 16px 64px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cargando { color: var(--tinta3); text-align: center; padding: 48px 0; }

/* ── cabecera ─────────────────────────────────────────────────────────────── */
.cabecera { padding: 8px 4px 0; }
.cabecera h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-wrap: balance;
  word-break: break-word;
}
.cabecera .marca {
  margin: 0 0 4px;
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta3);
}

/* ── estado de ahora ──────────────────────────────────────────────────────── */
/* Ya no es tarjeta propia: es la fila de estado dentro de «tu tienda, ahora»,
   pegada a la portada. La captura para reconocerla, la sonda para saberlo. */
.estado {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
}
.estado .punto {
  flex: 0 0 auto;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--tinta3);
}
.estado[data-bien="si"] .punto { background: var(--bien); }
.estado[data-bien="no"] .punto { background: var(--mal); }
.estado .texto { font-weight: 600; }
.estado .cuando { display: block; font-weight: 400; font-size: 13px; color: var(--tinta2); }

/* ── tarjetas ─────────────────────────────────────────────────────────────── */
.tarjeta {
  padding: 18px;
  border-radius: 12px;
  background: var(--papel);
  border: 1px solid var(--linea);
}
.tarjeta.centrada { text-align: center; margin: 48px auto; max-width: 480px; }
.tarjeta h2 {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta3);
  font-weight: 600;
}
.tarjeta h1 { margin: 0 0 12px; font-size: 22px; }

.cifra { font-size: 30px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cifra .unidad { font-size: 16px; font-weight: 500; color: var(--tinta2); }
.bajo { margin-top: 2px; font-size: 13.5px; color: var(--tinta2); }
.tenue { color: var(--tinta3); font-size: 13.5px; }

.filas { display: flex; flex-direction: column; gap: 0; }
.fila {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--linea2);
}
.fila:last-child { border-bottom: 0; }
.fila .que { color: var(--tinta2); }
.fila .cuanto { font-weight: 550; text-align: right; font-variant-numeric: tabular-nums; }
.fila .cuanto small { display: block; font-weight: 400; color: var(--tinta3); font-size: 12.5px; }

.marca-ojo { color: var(--ojo); }
.marca-mal { color: var(--mal); }
.marca-bien { color: var(--bien); }

/* ── botones de pago ──────────────────────────────────────────────────────── */
.boton {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 9px;
  background: var(--acento);
  color: #fff;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  border: 0;
  cursor: pointer;
}
.boton:hover { filter: brightness(1.08); }
/* El contorno: mismo tamaño y sitio que el sólido, menos peso. En pantalla
   sólo hay un botón sólido —el pago más urgente— y esto es todo lo demás. */
.boton.secundario { background: none; color: var(--acento); border: 1px solid var(--acento); }
.boton.secundario:hover { filter: none; background: color-mix(in srgb, var(--acento) 8%, transparent); }
.boton[aria-disabled="true"] {
  background: var(--linea);
  color: var(--tinta3);
  cursor: not-allowed;
  pointer-events: none;
}

/* ── aviso de que quien mira no es el dueño ───────────────────────────────── */
#aviso-mirando {
  position: sticky; top: 0; z-index: 10;
  padding: 10px 16px;
  background: #3B2E12;
  color: #FFE9B8;
  font-size: 13.5px;
  text-align: center;
}
#aviso-mirando strong { color: #fff; }

/* ── pie ──────────────────────────────────────────────────────────────────── */
.pie { padding: 8px 4px; color: var(--tinta3); font-size: 12.5px; }
.pie a { color: var(--acento); }

@media (max-width: 480px) {
  .cabecera h1 { font-size: 22px; }
  .cifra { font-size: 26px; }
}

/* ── el pago, en un modal ─────────────────────────────────────────────────────
   Stripe monta su formulario con una columna de ancho fijo que centra en el
   hueco que le des. Dentro de una tarjeta eso es siempre un recuadro flotando
   en otro, y no hay margen que lo arregle: se probó ceñirlo, se probó llevarlo
   al borde, y en los dos casos quedaba un hueco absurdo.

   Aquí la caja se ciñe a esa columna y el resto es fondo, que es lo que se
   espera de un modal. */
.modal-fondo {
  position: fixed; inset: 0;
  z-index: 30;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 32px 16px;
  overflow-y: auto;
  background: rgba(20, 26, 36, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.modal-caja {
  width: 100%;
  max-width: 460px;
  background: var(--papel);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(15, 20, 28, 0.28);
  overflow: hidden;
}
.modal-cabecera {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--linea);
}
.modal-titulo { margin: 0; font-size: 15px; font-weight: 600; }
.modal-importe { margin: 2px 0 0; font-size: 13px; color: var(--tinta2); font-variant-numeric: tabular-nums; }
.modal-cerrar {
  flex: 0 0 auto;
  border: 0; background: none; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--tinta3); padding: 0 2px;
}
.modal-cerrar:hover { color: var(--tinta); }
.modal-cuerpo { padding: 6px 0 0; min-height: 240px; }
.modal-cuerpo > .tenue { padding: 24px 18px; text-align: center; }

@media (max-width: 520px) {
  /* En el móvil el modal es la pantalla: un recuadro flotante con los bordes
     redondeados sólo roba altura a un formulario que ya va justo. */
  .modal-fondo { padding: 0; }
  .modal-caja { max-width: none; min-height: 100%; border-radius: 0; }
}

.aviso-pago { border-left: 3px solid var(--bien); }
.aviso-pago[data-bien="no"] { border-left-color: var(--ojo); }
.aviso-pago h2 {
  color: var(--bien);
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 4px;
}
.aviso-pago[data-bien="no"] h2 { color: var(--ojo); }

/* ── portada de la tienda ─────────────────────────────────────────────────── */
.cabecera-fila { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

.portada-marco {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--linea);
  background: var(--papel);
  line-height: 0;
}
.portada { display: block; width: 100%; height: auto; }
.portada-marco:hover { border-color: var(--acento); }
.portada-marco:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ── icono de perfil ──────────────────────────────────────────────────────── */
.perfil-boton {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--linea);
  background: var(--papel);
  color: var(--tinta2);
  cursor: pointer;
  padding: 0;
}
.perfil-boton svg { width: 22px; height: 22px; }
.perfil-boton:hover { border-color: var(--acento); color: var(--acento); }

/* ── cajón de datos y facturas ────────────────────────────────────────────── */
.cajon {
  position: fixed; inset: 0 0 0 auto;
  width: min(460px, 100%);
  background: var(--fondo);
  border-left: 1px solid var(--linea);
  box-shadow: -12px 0 40px rgba(20, 26, 36, 0.16);
  display: flex; flex-direction: column;
  z-index: 20;
}
.cajon-cabecera {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--linea);
  background: var(--papel);
}
.cajon-cabecera h2 { margin: 0; font-size: 17px; }
.cajon-cerrar {
  border: 0; background: none; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--tinta3); padding: 0 4px;
}
.cajon-cerrar:hover { color: var(--tinta); }
.cajon-cuerpo { padding: 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 24px; }

.datos { display: flex; flex-direction: column; gap: 12px; }
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo > span { font-size: 12.5px; color: var(--tinta2); }
.campo input {
  font: inherit; font-size: 15px;
  padding: 9px 11px;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 8px;
}
.campo input:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 18%, transparent);
}
.campo input:disabled { background: var(--linea2); color: var(--tinta3); }
.campo-par { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; }
.datos-pie { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.datos-pie .tenue[data-nivel="mal"] { color: var(--mal); }

.facturas h3 {
  margin: 0 0 8px;
  font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--tinta3);
}
.facturas .fila { align-items: baseline; }
.facturas .cuanto small { display: block; font-weight: 400; font-size: 12px; color: var(--tinta3); }
.factura-pdf { min-width: 44px; text-align: right; }
.factura-pdf a { color: var(--acento); font-size: 13px; }

@media (max-width: 520px) {
  .campo-par { grid-template-columns: 1fr; }
}

/* ── lo que se ha hecho ───────────────────────────────────────────────────── */
.hecho { display: flex; flex-direction: column; }
.hecho-linea {
  display: flex; gap: 14px; align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--linea2);
}
.hecho-linea:last-child { border-bottom: 0; }
.hecho-fecha {
  flex: 0 0 auto;
  min-width: 6.5em;
  color: var(--tinta3);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 480px) {
  .hecho-linea { flex-direction: column; gap: 1px; }
  .hecho-fecha { min-width: 0; }
}

/* ── cuota ya domiciliada ─────────────────────────────────────────────────── */
.domiciliado { color: var(--bien); font-weight: 600; white-space: nowrap; }

/* ── «tu tienda, ahora»: portada + estado en una tarjeta ──────────────────── */
.tarjeta.tienda-ahora { padding: 0; overflow: hidden; }
.tienda-ahora .portada-marco { border: 0; border-radius: 0; }
.tienda-ahora .portada-marco + .estado { border-top: 1px solid var(--linea2); }

/* ── la tarjeta de pagos: una fila por cosa, misma anatomía ────────────────── */
.fila-pago {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 0;
}
.fila-pago + .fila-pago { border-top: 1px solid var(--linea2); }
.pago-titulo { margin: 0; font-weight: 600; text-wrap: balance; }
.pago-meta { margin: 2px 0 0; font-size: 12.5px; color: var(--tinta3); }
.pago-accion { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.importe-linea { font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.importe-linea small { font-size: 13px; font-weight: 500; color: var(--tinta2); }

/* Ámbar sólo para «pendiente»: es la única función que le queda al color. */
.chip-pendiente {
  display: inline-block; margin-left: 8px; padding: 1px 8px 2px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ojo);
  border: 1px solid color-mix(in srgb, var(--ojo) 45%, transparent);
  border-radius: 99px;
  vertical-align: 2px;
}

@media (max-width: 520px) {
  /* En el móvil la fila se parte: concepto arriba, importe y botón abajo a lo
     ancho — el pulgar no acierta un botón apretado contra el borde. */
  .fila-pago { flex-wrap: wrap; }
  .pago-accion { width: 100%; justify-content: space-between; }
}

/* ── la puerta ────────────────────────────────────────────────────────────── */
.entrada { max-width: 420px; text-align: left; }
.entrada .marca { margin: 0 0 2px; }
.entrada h1 { margin: 0 0 10px; }
.entrada form { display: flex; flex-direction: column; gap: 12px; margin: 20px 0 4px; }
.entrada .boton { width: 100%; text-align: center; }
.entrada .eco:empty { display: none; }
.entrada .eco[data-nivel="mal"] { color: var(--mal); }
.entrada .enviado { margin: 0; font-size: 17px; font-weight: 600; color: var(--bien); }
.pie-entrada { margin: 22px 0 0; }