/* La app: lista de plantillas, galería, generar, plan, claves, docs y login.

   Los tokens, la tipografía, los botones y la cabecera vienen de base.css —
   los MISMOS que la landing. Acá va sólo lo propio de estas pantallas.

   No toca static/css/editor-modelo.css: la geometría de hoja del editor está
   atada al @page del PDF (motor/nucleo/pagina.py) y se rompe si se la mueve. */

.contenido {
  max-width: 68rem;
  margin: 0 auto;
  padding: clamp(1.75rem, 4vw, 3rem) var(--canal) 4rem;
}
.contenido-ancho { max-width: 82rem; }

/* ── Encabezado de pantalla ─────────────────────────────────────────────── */

.pagina-cab {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}
.pagina-cab h1 {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -.03em;
}
.pagina-cab p { margin: .4rem 0 0; color: var(--cuerpo); font-size: .98rem; }

h2 { font-size: 1.25rem; font-weight: 650; letter-spacing: -.02em; }

/* ── Formularios ────────────────────────────────────────────────────────── */

label { display: block; font-size: .88rem; font-weight: 550; margin-bottom: .3rem; }

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input:not([type]), select, textarea {
  width: 100%;
  padding: .6rem .75rem;
  border: 1px solid var(--raya);
  border-radius: 8px;
  background: var(--blanco);
  color: var(--tinta);
  font-family: inherit;
  font-size: .95rem;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 3px var(--verde-tenue);
}
textarea { min-height: 5rem; resize: vertical; }
input[type="file"] { font-size: .9rem; }

.campo { margin-bottom: 1rem; }
.campo-linea { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.campo-linea input { width: auto; flex: 1; min-width: 12rem; }

.ayuda { margin: .35rem 0 0; font-size: .84rem; color: var(--apagado); }
.error { color: #B3261E; font-size: .88rem; }

/* ── Tarjetas y paneles ─────────────────────────────────────────────────── */

.tarjeta {
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra-baja);
  padding: 1.5rem 1.6rem 1.7rem;
}
.tarjeta + .tarjeta { margin-top: 1.25rem; }
.tarjeta h2 { margin-top: 0; }

.grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1.25rem; }

/* Caja centrada: login, registro, recuperar contraseña. */
.tarjeta-centro {
  max-width: 25rem;
  margin: clamp(1.5rem, 6vh, 4rem) auto;
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra-media);
  padding: 2rem 1.9rem 2.1rem;
}
.tarjeta-centro h1 { margin: 0 0 .4rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; }
.tarjeta-centro .intro { margin: 0 0 1.5rem; color: var(--cuerpo); font-size: .95rem; }
.tarjeta-centro .boton { width: 100%; margin-top: .5rem; }
.tarjeta-centro .pie-caja { margin: 1.25rem 0 0; font-size: .9rem; color: var(--cuerpo); text-align: center; }
.tarjeta-centro a { color: var(--verde); font-weight: 550; }

/* ── Lista de plantillas ────────────────────────────────────────────────── */

.lista {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra-baja);
  overflow: hidden;
}
.fila {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .95rem 1.15rem;
}
.fila + .fila { border-top: 1px solid var(--raya); }
.fila:hover { background: var(--lienzo); }
.fila form { margin: 0; }
.fila-nombre { font-weight: 600; color: inherit; text-decoration: none; letter-spacing: -.01em; }
.fila-nombre:hover { color: var(--verde); }
.fila-detalle { color: var(--apagado); font-size: .85rem; }
.fila .ms-auto, .ms-auto { margin-left: auto; }

.etiqueta {
  padding: .12rem .5rem;
  border-radius: 5px;
  background: var(--lienzo);
  color: var(--apagado);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.etiqueta-viva { background: var(--verde-tenue); color: var(--verde); }

.vacio {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--cuerpo);
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra-baja);
}

/* ── Tablas ─────────────────────────────────────────────────────────────── */

.tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla th {
  text-align: left;
  padding: .5rem .7rem;
  border-bottom: 1px solid var(--raya);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--apagado);
}
.tabla td { padding: .65rem .7rem; border-bottom: 1px solid var(--raya); }
.tabla tr:last-child td { border-bottom: 0; }
.tabla form { margin: 0; }
.fila-apagada td { color: var(--apagado); }

/* ── Avisos ─────────────────────────────────────────────────────────────── */

.aviso {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
  padding: .85rem 1.1rem;
  margin: 1.25rem 0;
  border-radius: 10px;
  background: var(--verde-tenue);
  color: #0B5C3E;
  font-size: .9rem;
}
.aviso input { flex: 1; min-width: 15rem; font-family: var(--mono); font-size: .82rem; }
.aviso-atencion { background: #FDF3E4; color: #7A4A11; }
.aviso-error { background: #FBEAE9; color: #8C1D18; }

/* ── Plan y uso ─────────────────────────────────────────────────────────── */

.plan-actual { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.plan-nombre { font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; }
.barra-uso { height: 8px; border-radius: 5px; background: var(--lienzo); overflow: hidden; margin-top: .6rem; }
.barra-uso-relleno { height: 100%; border-radius: 5px; background: var(--verde); }
.barra-uso-relleno.barra-llena { background: #B3261E; }
.precio-grande { font-size: 2rem; font-weight: 700; letter-spacing: -.035em; margin: .25rem 0; }

/* ── Galería (miniaturas reales) ────────────────────────────────────────────
   La hoja mide sus 210mm y se achica con transform; como transform NO achica la
   caja de layout, los márgenes negativos la dejan del tamaño visual. La
   tipografía la inyecta la vista con css_contenido(prefijo=".galeria-hoja ").
   Misma geometría que el PDF: no tocar. */

.grilla-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.25rem; }
.tarjeta-galeria {
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra-baja);
  overflow: hidden;
  transition: transform .18s cubic-bezier(.3,.7,.4,1), box-shadow .18s;
}
.tarjeta-galeria:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }

.galeria-preview {
  position: relative;
  height: 12.5rem;
  background: #EDEFEE;
  border-bottom: 1px solid var(--raya);
  overflow: hidden;
  padding-top: .85rem;
  pointer-events: none;
  user-select: none;
  display: flex;
  justify-content: center;
}
.galeria-preview::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3rem;
  background: linear-gradient(to bottom, transparent, #EDEFEE 92%);
}
.galeria-hoja {
  --hoja-ancho: 210mm;
  --galeria-escala: .34;

  width: var(--hoja-ancho);
  min-height: 297mm;
  padding: 16mm 14mm;
  background: var(--blanco);
  box-shadow: 0 2px 8px rgba(23, 23, 26, .13);
  transform: scale(var(--galeria-escala));
  transform-origin: top center;
  flex: 0 0 auto;
  margin: 0 calc(var(--hoja-ancho) * (var(--galeria-escala) - 1) / 2);
}
.galeria-info { padding: 1rem 1.1rem 1.2rem; }
.galeria-info h2 { margin: 0 0 .3rem; font-size: 1.06rem; font-weight: 650; }
.galeria-info p { margin: 0 0 .9rem; font-size: .9rem; color: var(--cuerpo); line-height: 1.5; }
.galeria-info form { margin: 0; }
.galeria-agregada { margin: 0; padding: .45rem 0; font-size: .85rem; color: var(--verde); font-weight: 550; }

/* ── Docs ───────────────────────────────────────────────────────────────── */

.pagina-docs { max-width: 46rem; }
.pagina-docs h2 { margin-top: 2.25rem; }
.docs-intro { font-size: 1.05rem; color: var(--cuerpo); }
.docs-lista { line-height: 1.7; }
.bloque-codigo {
  margin: 1rem 0;
  padding: 1.1rem 1.25rem;
  border-radius: var(--radio);
  background: var(--tinta);
  color: #DCDCE2;
  font-family: var(--mono);
  font-size: .8rem;
  line-height: 1.65;
  overflow-x: auto;
}
.pagina-docs code {
  padding: .1em .35em;
  border-radius: 4px;
  background: var(--lienzo);
  font-family: var(--mono);
  font-size: .88em;
}
.pagina-docs .bloque-codigo code { background: none; padding: 0; }
.separador-docs { border: 0; border-top: 1px solid var(--raya); margin: 2.5rem 0; }
.tabla-docs { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla-docs th {
  text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--raya); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--apagado);
}
.tabla-docs td { padding: .6rem .7rem; border-bottom: 1px solid var(--raya); }

/* ── Clases que ya usaban los templates ─────────────────────────────────────
   Se conservan sus nombres en vez de renombrar 12 archivos: lo que cambia es
   que ahora se dibujan con los tokens de base.css, los mismos que la landing. */

.barra-usuario { font-size: .85rem; color: var(--apagado); }

/* Lista de plantillas */
.lista-cabecera { display: flex; align-items: end; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.lista-cabecera h1 { margin: 0 0 .1rem; font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 700; letter-spacing: -.03em; }
.form-inline { display: flex; gap: .5rem; align-items: center; }
.form-inline input { width: auto; min-width: 13rem; }

.lista-plantillas {
  list-style: none; margin: 1.25rem 0 0; padding: 0;
  background: var(--blanco); border-radius: var(--radio);
  box-shadow: var(--sombra-baja); overflow: hidden;
}
.fila-plantilla { display: flex; align-items: center; gap: .9rem; padding: .95rem 1.15rem; }
.fila-plantilla + .fila-plantilla { border-top: 1px solid var(--raya); }
.fila-plantilla:hover { background: var(--lienzo); }
.fila-plantilla form { margin: 0; }
.lista-vacia { padding: 3rem 1.5rem; text-align: center; color: var(--cuerpo); background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra-baja); margin-top: 1.25rem; }
.etiqueta-inactiva {
  padding: .12rem .5rem; border-radius: 5px; background: var(--lienzo); color: var(--apagado); font-size: .66rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}

/* Texto secundario, usado en casi todas las pantallas */
.texto-suave { color: var(--apagado); font-size: .88rem; }
.descripcion { color: var(--cuerpo); font-size: .95rem; }

/* Claves de API */
.aviso-clave {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  padding: .85rem 1.1rem; margin: 1.25rem 0; border-radius: 10px;
  background: var(--verde-tenue); color: #0B5C3E; font-size: .9rem;
}
.aviso-clave input { flex: 1; min-width: 15rem; font-family: var(--mono); font-size: .82rem; }
.tabla-claves { width: 100%; border-collapse: collapse; font-size: .92rem; margin-top: 1.25rem; }
.tabla-claves th {
  text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--raya); font-size: .68rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--apagado);
}
.tabla-claves td { padding: .65rem .7rem; border-bottom: 1px solid var(--raya); }
.tabla-claves form { margin: 0; }
.clave-revocada td { color: var(--apagado); }

/* Plan, checkout y tiers */
.tarjeta-plan, .tarjeta-checkout, .tarjeta-generar, .tarjeta-tier {
  background: var(--blanco); border-radius: var(--radio);
  box-shadow: var(--sombra-baja); padding: 1.5rem 1.6rem 1.7rem;
}
.tarjeta-plan, .tarjeta-checkout { max-width: 30rem; margin-top: 1.25rem; }
.tarjeta-plan h2, .tarjeta-checkout h2, .tarjeta-generar h2, .tarjeta-tier h2 { margin-top: 0; }
.plan-uso { margin-bottom: 1.25rem; font-size: .95rem; }
.etiqueta-pro {
  padding: .12rem .5rem; border-radius: 5px; background: var(--verde-tenue); color: var(--verde); font-size: .66rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.checkout-precio { font-size: 2rem; font-weight: 700; letter-spacing: -.035em; margin: .25rem 0; }
.checkout-detalle { padding-left: 1.1rem; font-size: .93rem; color: var(--cuerpo); line-height: 1.7; }
.banda-mock {
  padding: .6rem .9rem; margin-bottom: 1.25rem; border-radius: 8px;
  background: #FDF3E4; color: #7A4A11; font-size: .85rem; font-weight: 550;
}
.grilla-tiers, .grilla-generar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.25rem; margin-top: 1.5rem;
}
.tarjeta-tier.tier-actual { box-shadow: inset 0 0 0 1.5px var(--verde), var(--sombra-media); }

/* Generar */
.campo-generar { display: block; margin-bottom: 1rem; font-size: .88rem; font-weight: 550; }
.campo-generar input, .campo-generar textarea { margin-top: .3rem; font-weight: 400; }

/* Login, registro, recuperar contraseña, formulario no disponible */
.tarjeta-login {
  max-width: 25rem; margin: clamp(1.5rem, 6vh, 4rem) auto;
  background: var(--blanco); border-radius: var(--radio);
  box-shadow: var(--sombra-media); padding: 2rem 1.9rem 2.1rem;
}
.tarjeta-login h1 { margin: 0 0 1.25rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; }
.tarjeta-login label { margin-bottom: 1rem; font-weight: 550; }
.tarjeta-login input { margin-top: .3rem; }
.tarjeta-login .boton { width: 100%; margin-top: .5rem; }

/* Formulario público (lo ve alguien sin cuenta) */
.form-publico { max-width: 34rem; margin: clamp(1.5rem, 6vh, 4rem) auto; }
.campo-web { display: block; margin-bottom: 1.1rem; font-size: .9rem; font-weight: 550; }
.campo-web input, .campo-web textarea { margin-top: .3rem; font-weight: 400; }
.barra-dueno {
  padding: .6rem .9rem; margin-bottom: 1.25rem; border-radius: 8px;
  background: #FDF3E4; color: #7A4A11; font-size: .85rem;
}
.pie-marca { margin-top: 2rem; text-align: center; font-size: .84rem; color: var(--apagado); }

/* ── Páginas de modelo (SEO) ────────────────────────────────────────────────
   Una por plantilla. El H1 es «Modelo de factura» porque es literalmente lo
   que se busca en español. La hoja se muestra grande: es el argumento. */

.modelo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}
.modelo h1 {
  margin: .5rem 0 .75rem;
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.08;
}
.modelo-bajada { margin: 0 0 .9rem; color: var(--cuerpo); font-size: 1.03rem; }
.modelo h2 { margin: 2.25rem 0 .75rem; }

.campos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.campos li {
  padding: .28rem .65rem;
  border-radius: 6px;
  background: var(--fam-tenue, var(--lienzo));
  color: var(--fam, var(--cuerpo));
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 550;
}

.modelo-hoja {
  position: relative;
  height: 30rem;
  overflow: hidden;
  border-radius: var(--radio);
  background: #EDEFEE;
  box-shadow: var(--sombra-baja);
  padding-top: 1.25rem;
  display: flex;
  justify-content: center;
  pointer-events: none;
  user-select: none;
}
.modelo-hoja::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 4rem;
  background: linear-gradient(to bottom, transparent, #EDEFEE 92%);
}
/* Misma mecánica de siempre: la hoja mide 210mm y se achica con transform; los
   márgenes negativos dejan la caja del tamaño visual. No tocar la geometría. */
.hoja-real {
  --ancho-hoja: 210mm;
  --escala: .48;

  width: var(--ancho-hoja);
  min-height: 297mm;
  padding: 16mm 14mm;
  background: var(--blanco);
  box-shadow: 0 2px 12px rgba(23, 23, 26, .16);
  transform: scale(var(--escala));
  transform-origin: top center;
  flex: 0 0 auto;
  margin: 0 calc(var(--ancho-hoja) * (var(--escala) - 1) / 2);
}

.otros { margin-top: clamp(3rem, 6vw, 4.5rem); }
.otros-grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.otro {
  display: block;
  padding: 1.15rem 1.25rem 1.3rem;
  border-radius: var(--radio);
  background: var(--blanco);
  box-shadow: var(--sombra-baja);
  text-decoration: none;
  transition: transform .16s cubic-bezier(.3,.7,.4,1), box-shadow .16s;
}
.otro:hover { transform: translateY(-2px); box-shadow: var(--sombra-media); }
/* La familia se marca con un punto delante del nombre. Antes era un
   border-left de 3px del color de la familia: esa franja lateral de color es
   un tic de plantilla, y además desalineaba el texto de esta tarjeta respecto
   de todas las demás por los 3px del borde. */
.otro strong {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .25rem;
  font-size: 1.02rem;
  letter-spacing: -.015em;
}
.otro strong::before {
  content: "";
  width: .45rem;
  height: .45rem;
  flex: none;
  border-radius: 50%;
  background: var(--fam, var(--verde));
}
.otro span { font-size: .9rem; color: var(--cuerpo); }

.fam-cobro        { --fam: var(--cobro);        --fam-tenue: var(--cobro-tenue); }
.fam-operaciones  { --fam: var(--operaciones);  --fam-tenue: var(--operaciones-tenue); }
.fam-legales      { --fam: var(--legales);      --fam-tenue: var(--legales-tenue); }
.fam-comunicacion { --fam: var(--comunicacion); --fam-tenue: var(--comunicacion-tenue); }

/* ── Adaptación ─────────────────────────────────────────────────────────── */

@media (max-width: 40rem) {
  .barra .solo-ancho { display: none; }
  .marca { font-size: .9rem; gap: .45rem; }
  .barra .boton-chico { padding: .5rem .85rem; font-size: .78rem; }
  .contenido { padding-top: 1.5rem; }
  .pagina-cab { align-items: start; }
  .fila { flex-wrap: wrap; }
  .grilla-galeria { grid-template-columns: minmax(0, 1fr); }
  .modelo { grid-template-columns: minmax(0, 1fr); }
  .modelo-hoja { height: 20rem; }
  .modelo-hoja .hoja-real { --escala: .36; }
  .galeria-hoja { --galeria-escala: .30; }
  .galeria-preview { height: 10rem; }
  .pie-nav { margin-left: 0; }
}

/* Importar una plantilla desde un documento ya hecho (OCR). Va debajo del
   encabezado de la lista y sólo aparece si hay motor configurado. */
.importar {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
  margin: 0 0 1.25rem;
  padding: .9rem 1.15rem;
  border-radius: var(--radio);
  background: var(--lienzo);
}
.importar strong { display: block; font-size: .95rem; letter-spacing: -.01em; }
.importar .ayuda { margin: 0; }
.importar input[type="file"] { width: auto; flex: 1; min-width: 13rem; }

/* ── Selector mensual / anual ───────────────────────────────────────────────
   CSS puro: un checkbox oculto y selectores de hermano, igual que el carrusel
   de la landing. Sin JS no hay estado que se desincronice ni parpadeo inicial.
   El checkbox tiene que ser hermano ANTERIOR de lo que controla. */

.ciclo-check { position: absolute; opacity: 0; pointer-events: none; }

.ciclo {
  display: inline-flex;
  gap: .25rem;
  padding: .25rem;
  margin: 0 auto 1.5rem;
  border-radius: 999px;
  background: var(--lienzo);
  box-shadow: inset 0 0 0 1px var(--raya);
}
.ciclo-opcion {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  padding: .45rem 1rem;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 550;
  color: var(--cuerpo);
  cursor: pointer;
  user-select: none;
  transition: background .15s, color .15s;
}
/* El activo según el estado del checkbox. */
.ciclo-check:not(:checked) ~ .ciclo .ciclo-mes,
.ciclo-check:checked ~ .ciclo .ciclo-anio {
  background: var(--blanco);
  color: var(--tinta);
  box-shadow: var(--sombra-baja);
}
.ciclo-ahorro {
  padding: .1rem .4rem;
  border-radius: 5px;
  background: var(--verde-tenue);
  color: var(--verde);
  font-size: .72rem;
  font-weight: 600;
}
.ciclo-check:focus-visible ~ .ciclo { outline: 2px solid var(--verde); outline-offset: 3px; }

/* Qué se muestra en cada estado. Se ocultan con display para que el precio
   que no corresponde no quede en el flujo ni lo lea un lector de pantalla. */
.ciclo-check:not(:checked) ~ .grilla-tiers .solo-anio,
.ciclo-check:checked ~ .grilla-tiers .solo-mes { display: none; }

/* El bloque del selector va centrado sin romper la grilla de tarjetas. */
.ciclo-check ~ .ciclo { display: inline-flex; }