/* Honest Paper — panel de gestión de suscripción (/honestpaper/cuenta/).
   Misma paleta y tipografías autoalojadas que el minisite (../styles.css). */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/bricolage-var-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../fonts/hanken-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --hp-green: #37b07a;
  --hp-green-deep: #0e2a1c;
  --hp-green-mid: #128a4f;
  --hp-ink: #10241a;
  --hp-ink-hover: #1c3b2b;
  --hp-paper: #f6f1e3;
  --hp-paper-warm: #fffdf7;
  --hp-paper-dark: #efe7d0;
  --hp-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --hp-text: 'Hanken Grotesk', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font: 400 16px/1.55 var(--hp-text);
  color: var(--hp-ink);
  background: var(--hp-paper);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: var(--hp-green-mid); }

/* Cabecera */
.c-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 22px;
  background: var(--hp-paper-warm);
  border-bottom: 1px solid rgba(16, 36, 26, .1);
}
.c-logo {
  font: 700 22px var(--hp-display);
  color: var(--hp-ink);
  text-decoration: none;
  letter-spacing: -.02em;
}
.c-logo__dot { color: var(--hp-green); }
/* Trazo de rotulador bajo «honest», el mismo que la landing. Es una silueta
   rellena, no una linea: un stroke de SVG no puede variar de grosor. */
.c-mark { position: relative; display: inline-block; }
.c-mark__underline { position: absolute; left: 0; bottom: -4px; width: 100%; height: 8px; overflow: visible; }
/* El color va aqui y no en un fill= del marcado: var() no se resuelve de forma
   fiable dentro de un atributo de presentacion de SVG. */
.c-mark__underline path { fill: var(--hp-green); }
.c-top__session { display: flex; align-items: center; gap: 12px; }
.c-top__email { font-size: 14px; color: rgba(16, 36, 26, .65); word-break: break-all; }

/* Contenido */
.c-main {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 20px 48px;
  flex: 1;
}
.c-h1 { font: 700 30px/1.15 var(--hp-display); letter-spacing: -.02em; margin: 10px 0 18px; }
.c-h2 { font: 700 20px/1.2 var(--hp-display); margin: 0; }
.c-h3 { font: 700 16px var(--hp-display); margin: 22px 0 8px; }
.c-muted { color: rgba(16, 36, 26, .62); font-size: 14.5px; }
.c-hint { color: rgba(16, 36, 26, .62); font-size: 13.5px; margin-top: 22px; }

.c-card {
  background: var(--hp-paper-warm);
  border: 1px solid rgba(16, 36, 26, .1);
  border-radius: 18px;
  padding: 22px 24px;
  margin: 0 0 18px;
  box-shadow: 0 14px 34px -22px rgba(14, 42, 28, .35);
}
.c-card--login { max-width: 440px; margin: 40px auto; }

/* Botones (misma píldora que el minisite) */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  /* Transparente y no 0: así el botón oscuro mide lo mismo que los de contorno
     (44 px) y no queda 2 px más bajo cuando van uno al lado del otro. */
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  font: 600 15px var(--hp-text);
  padding: 12px 24px;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
/* Las iconas van con currentColor, así que heredan el color del botón. No se
   encogen nunca: si el texto va justo, que se parta él y no el dibujo. */
.c-btn__icon { width: 16px; height: 16px; flex: 0 0 16px; }
.c-btn--sm .c-btn__icon { width: 14px; height: 14px; flex-basis: 14px; }
.c-btn--dark { background: var(--hp-ink); color: var(--hp-paper); }
.c-btn--dark:hover { background: var(--hp-ink-hover); transform: translateY(-1px); }
.c-btn--ghost {
  background: transparent;
  border: 1px solid rgba(16, 36, 26, .28);
  color: var(--hp-ink);
}
.c-btn--ghost:hover { background: rgba(16, 36, 26, .06); }
.c-btn--danger {
  background: transparent;
  border: 1px solid rgba(150, 40, 30, .4);
  color: #8c2a1e;
}
.c-btn--danger:hover { background: rgba(150, 40, 30, .07); }
.c-btn--sm { font-size: 13.5px; padding: 8px 16px; }
.c-linkbtn {
  background: none;
  border: 0;
  padding: 0;
  color: var(--hp-green-mid);
  font: 500 14px var(--hp-text);
  text-decoration: underline;
  cursor: pointer;
}

/* Formularios */
.c-form { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.c-form__row { display: flex; gap: 14px; flex-wrap: wrap; }
.c-form__row .c-label { flex: 1 1 180px; }
.c-label { display: flex; flex-direction: column; gap: 6px; font: 600 13.5px var(--hp-text); }
.c-input {
  font: 400 16px var(--hp-text);
  color: var(--hp-ink);
  background: #fff;
  border: 1px solid rgba(16, 36, 26, .22);
  border-radius: 10px;
  padding: 11px 13px;
  width: 100%;
}
.c-input:focus { outline: 2px solid var(--hp-green); outline-offset: 1px; border-color: var(--hp-green); }
.c-input--code {
  font: 700 30px var(--hp-display);
  letter-spacing: .45em;
  /* El letter-spacing deja un hueco DESPUÉS del último dígito, así que con
     text-align:center los números caen a la izquierda del centro real; el
     text-indent lo compensa. Sin max-width: el campo mide lo mismo que el
     botón «Entrar», porque .c-form estira los dos hijos por igual. */
  text-indent: .45em;
  text-align: center;
}
.c-login-alt { display: flex; gap: 18px; margin-top: 16px; }

/* Suscripción */
.c-sub__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.c-badge {
  font: 700 12px var(--hp-text);
  text-transform: uppercase;
  letter-spacing: .06em;
  border-radius: 999px;
  padding: 5px 12px;
}
.c-badge--active { background: rgba(55, 176, 122, .18); color: var(--hp-green-mid); }
.c-badge--paused { background: rgba(16, 36, 26, .1); color: rgba(16, 36, 26, .7); }
.c-badge--canceled { background: rgba(150, 40, 30, .12); color: #8c2a1e; }
.c-badge--past_due { background: rgba(196, 138, 22, .16); color: #8a5c0a; }

.c-stats { display: flex; gap: 14px; margin: 16px 0 6px; flex-wrap: wrap; }
.c-stat {
  flex: 1 1 200px;
  background: var(--hp-paper);
  border: 1px solid rgba(16, 36, 26, .08);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.c-stat__num { font: 700 34px/1 var(--hp-display); color: var(--hp-green-mid); }
.c-stat__label { font-size: 13.5px; color: rgba(16, 36, 26, .65); }

.c-actions { display: flex; flex-direction: column; margin-top: 16px; }
/* «Aún tengo papel» y «SOS, necesito papel» son la misma pregunta con dos
   respuestas opuestas: van en paralelo y separadas por una línea, para que se
   lean enfrentadas y no como una lista de opciones sueltas. */
/* Sin align-items: las dos columnas igualan altura y la línea de en medio
   llega abajo del todo; si no, queda un palito suelto a media altura. */
.c-actions__fork { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.c-actions__fork > * + * { border-left: 1px solid rgba(16, 36, 26, .1); padding-left: 20px; }
.c-actions__title { font: 700 14px var(--hp-display); margin-bottom: 8px; }
.c-actions__row { display: flex; gap: 10px; flex-wrap: wrap; }
/* Posponer y saltar son la misma respuesta en dos grados, así que comparten
   un solo contorno partido por una línea, en vez de ir como dos píldoras
   sueltas. Van apilados: uno al lado del otro no caben en media tarjeta. */
.c-btngroup {
  display: flex;
  flex-direction: column;
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(16, 36, 26, .28);
  border-radius: 12px;
  overflow: hidden;
}
.c-btngroup form + form { border-top: 1px solid rgba(16, 36, 26, .28); }
.c-btngroup .c-btn {
  width: 100%;
  /* El contorno lo pone el contenedor, pero el borde se queda transparente
     para no perder 2 px de alto (el mínimo táctil son 44). */
  border-color: transparent;
  border-radius: 0;
  /* Alineados a la izquierda: apilados, las iconas hacen columna. El
     text-align hace falta aparte: los <button> vienen centrados de fábrica y
     justify-content no manda sobre el texto cuando la etiqueta se parte. */
  justify-content: flex-start;
  text-align: left;
}
/* Cancelar es otro tema, no una tercera respuesta: detrás de la separación. */
.c-actions__aside { display: flex; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(16, 36, 26, .1); }

.c-notice {
  background: var(--hp-paper);
  border: 1px solid rgba(16, 36, 26, .12);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14.5px;
  margin: 14px 0;
}
.c-notice--warn { border-color: rgba(196, 138, 22, .4); background: rgba(196, 138, 22, .07); }

/* Tablas */
.c-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.c-table th {
  text-align: left;
  font: 700 12.5px var(--hp-text);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: rgba(16, 36, 26, .55);
  padding: 6px 10px 6px 0;
  border-bottom: 1px solid rgba(16, 36, 26, .14);
}
.c-table td { padding: 8px 10px 8px 0; border-bottom: 1px solid rgba(16, 36, 26, .07); }
.c-table--wrap { display: block; overflow-x: auto; }

/* Avisos flash */
.c-flash {
  border-radius: 12px;
  padding: 12px 16px;
  margin: 0 0 16px;
  font-size: 14.5px;
  border: 1px solid;
}
.c-flash--ok { background: rgba(55, 176, 122, .12); border-color: rgba(55, 176, 122, .4); color: #0b3f2e; }
.c-flash--error { background: rgba(150, 40, 30, .08); border-color: rgba(150, 40, 30, .35); color: #8c2a1e; }

.c-adminbar {
  background: var(--hp-green-deep);
  color: var(--hp-paper);
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 14px;
  margin-bottom: 16px;
}
.c-adminbar a { color: #abe6b6; }

/* Vista admin */
.c-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin: 0 0 6px; }
.c-filters .c-label { flex: 0 1 auto; }
.c-kpis { display: flex; gap: 14px; flex-wrap: wrap; margin: 14px 0; }
.c-kpi {
  flex: 1 1 150px;
  background: var(--hp-paper);
  border: 1px solid rgba(16, 36, 26, .08);
  border-radius: 14px;
  padding: 12px 14px;
}
.c-kpi__num { font: 700 26px/1.1 var(--hp-display); }
.c-kpi__label { font-size: 12.5px; color: rgba(16, 36, 26, .6); }

/* Pie */
.c-footer {
  text-align: center;
  font-size: 13px;
  color: rgba(16, 36, 26, .55);
  padding: 18px 20px 26px;
}

@media (max-width: 560px) {
  .c-main { padding: 20px 14px 40px; }
  .c-card { padding: 18px 16px; }
  .c-stats { flex-direction: column; }
  .c-btn { padding-left: 18px; padding-right: 18px; }
  /* En pantalla estrecha las etiquetas largas se parten, y centradas dejan la
     icona colgando lejos del texto. Todas a lo ancho y alineadas a la
     izquierda: la icona queda pegada a su etiqueta y en columna con las del
     grupo de arriba. */
  .c-actions form,
  .c-actions .c-btn { width: 100%; }
  .c-actions .c-btn { justify-content: flex-start; text-align: left; }
  /* Apiladas no caben enfrentadas, pero la línea las sigue separando: la de
     al lado pasa a ir encima. */
  .c-actions__fork { grid-template-columns: 1fr; gap: 16px; }
  .c-actions__fork > * + * {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(16, 36, 26, .1);
    padding-top: 16px;
  }
  /* Apilado, la línea de las dos preguntas y la de cancelar se parecen
     demasiado: a cancelar se le da más aire para que no parezca la tercera. */
  .c-actions__aside { margin-top: 28px; padding-top: 20px; }
}