/* 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 {
  /* El aire de arriba, como variable: el editor lo cancela para que su
     cabecera quede pegada al navbar en vez de dejar una franja blanca. */
  --pad-arriba: clamp(1.75rem, 4vw, 3rem);

  max-width: 68rem;
  margin: 0 auto;
  padding: var(--pad-arriba) 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. */

/* El buscador de la galería: un campo, sin filtros. El input no se estira a
   todo el ancho —a 68rem, un campo de búsqueda de una palabra se ve absurdo. */
.buscador {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin: 1.25rem 0 1.5rem;
}
.buscador input { width: auto; flex: 0 1 22rem; min-width: 12rem; }

.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: var(--hoja-alto, 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 ───────────────────────────────────────────────────────────────── */

/* La medida del texto corrido. El contenedor sigue en 46rem porque el código
   y las tablas necesitan ese ancho, pero a 46rem un párrafo mide ~92
   caracteres por renglón: al volver al margen izquierdo el ojo salta tan lejos
   que releer o saltear un renglón se vuelve habitual. No duele una vez, duele
   acumulado — y acá vive la lectura más larga del producto (términos,
   privacidad y la referencia de la API).

   68ch cae dentro del rango cómodo (45–75) y va en `ch` y no en `rem` para que
   la medida siga a la tipografía: si cambia la fuente o el cuerpo, el renglón
   se sigue cortando donde corresponde. Se aplica al TEXTO, no al contenedor,
   justamente para no angostar los bloques de código ni las tablas. */
.pagina-docs { max-width: 46rem; }
.pagina-docs > p,
.pagina-docs > ul,
.pagina-docs > ol,
.pagina-docs .docs-lista,
.pagina-docs .docs-intro { max-width: 68ch; }
.pagina-docs h2 { margin-top: 2.25rem; max-width: 34ch; }
.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); }

/* ── La pantalla de entrada: elegir con qué generar ──────────────────────────
   Es donde cae el login. Está armada alrededor de UNA acción —generar— y no
   del CRUD: la tarjeta entera es el botón, editar es un link chico y borrar
   vive detrás del «···». Antes esto era una lista de nombres donde «Generar»
   pesaba lo mismo que «Borrar». */

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

.cabecera-uso { min-width: 12rem; }
.uso-cifra { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; }
.uso-de { font-size: .95rem; font-weight: 500; color: var(--apagado); }
.cabecera-uso .texto-suave { margin-left: .35rem; }
.cabecera-uso .barra-uso { margin-top: .45rem; }

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

.tarjeta-plantilla {
  position: relative;
  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-plantilla:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }
/* Inactiva: se ve apagada pero sigue siendo generable — el estado no esconde
   la acción, sólo la baja de tono. */
.tarjeta-apagada .galeria-preview { opacity: .5; }

.previa-vacia { align-self: center; margin-top: 3.5rem; color: var(--apagado); font-size: .85rem; }

.tarjeta-cuerpo { display: flex; flex-direction: column; flex: 1; padding: .95rem 1.1rem 1.05rem; }
.tarjeta-titulo {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin: 0 0 .2rem; font-size: 1.06rem; font-weight: 650; letter-spacing: -.01em;
}
.tarjeta-detalle { margin: 0 0 .9rem; font-size: .85rem; color: var(--apagado); }

.tarjeta-acciones { display: flex; align-items: center; gap: .75rem; margin-top: auto; }
.tarjeta-acciones form { margin: 0; }

/* El link que se estira sobre la tarjeta entera: clickeable toda, pero un solo
   link en el árbol de accesibilidad (de ahí el aria-label con el nombre). Lo
   que va por encima —Editar, «···»— sube con z-index. */
.enlace-extendido::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.tarjeta-acciones > .accion-secundaria,
.tarjeta-acciones > .menu-mas { position: relative; z-index: 1; }

/* Sin esto la tarjeta PARPADEA, y el motivo no se ve mirando la pantalla.
   `.boton:hover` levanta el botón con translateY(-1px), y un `transform`
   convierte al elemento en bloque contenedor de sus descendientes absolutos.
   O sea que al pasar el cursor, el ::after de acá arriba deja de medirse
   contra la tarjeta y se encoge al rectángulo del botón. Entonces: el cursor
   entra en el ::after → el botón queda en :hover → el ::after se encoge → el
   cursor ya no está sobre nada → se va el :hover → el ::after vuelve a
   estirarse → y otra vez. Es un lazo que se realimenta solo mientras el cursor
   esté sobre la tarjeta y fuera del botón.
   El link extendido no necesita ese movimiento: el que da la respuesta visual
   es el `translateY(-3px)` de la tarjeta entera. */
.enlace-extendido:hover { transform: none; }

.accion-secundaria { font-size: .88rem; color: var(--apagado); text-decoration: none; }
.accion-secundaria:hover { color: var(--tinta); text-decoration: underline; }

/* El menú «···»: <details>, sin JS. */
.menu-mas { margin-left: auto; }
.menu-mas > summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: .2rem .5rem; border-radius: 6px; line-height: 1;
  color: var(--apagado); font-weight: 700; letter-spacing: .05em;
}
.menu-mas > summary::-webkit-details-marker { display: none; }
.menu-mas > summary:hover { background: var(--lienzo); color: var(--tinta); }
.menu-mas-panel {
  position: absolute; right: .6rem; bottom: 2.6rem; z-index: 2;
  min-width: 9rem; padding: .3rem;
  background: var(--blanco); border-radius: 9px;
  box-shadow: var(--sombra-alta);
}
.menu-mas-panel button {
  display: block; width: 100%; padding: .5rem .6rem;
  border: 0; border-radius: 6px; background: none;
  color: var(--tinta); font: inherit; font-size: .88rem; text-align: left; cursor: pointer;
}
.menu-mas-panel button:hover { background: var(--lienzo); }
.menu-mas-panel .opcion-peligro { color: #B3261E; }
.menu-mas-panel .opcion-peligro:hover { background: #FCEEED; }

.form-inline { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.form-inline input { width: auto; min-width: 13rem; }

/* Debajo de la grilla, los otros dos caminos para sumar una plantilla. */
.otros-caminos { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--raya); }
.otros-caminos .importar { margin-bottom: .9rem; }
.otros-caminos p { margin: 0; }

/* La hoja en blanco: PRIMERA de la grilla, con o sin plantillas propias. Misma
   forma y tamaño que las demás —es un camino más, no el consuelo del que no
   encontró nada—, con el punteado como única señal de que ésta no viene hecha.
   Es un <form>, así que necesita el reset de margen que un <article> no pide. */
.tarjeta-en-blanco { margin: 0; outline: 2px dashed var(--raya); outline-offset: -2px; box-shadow: none; }
.tarjeta-en-blanco:hover { box-shadow: var(--sombra-baja); }
.tarjeta-en-blanco .galeria-preview { background: var(--lienzo); }
.tarjeta-en-blanco .galeria-preview::after { background: linear-gradient(to bottom, transparent, var(--lienzo) 92%); }
/* El botón se estira sobre la tarjeta entera, igual que el «Generar» de las
   otras: sin esto sólo sería clickeable el rectángulo del botón. */
.tarjeta-en-blanco .enlace-extendido { position: static; }

.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 {
  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 { 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-generar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.25rem; margin-top: 1.5rem;
}

/* ── El medidor de uso ──────────────────────────────────────────────────────
   Es el protagonista de /facturacion/ a propósito: el que entra casi siempre
   viene a ver cuánto le queda, no a comprar. La comparación de planes va
   después, para cuando la respuesta a eso es «poco». */
.medidor {
  /* Todo el ancho del contenedor, no una tarjeta angosta: así se lee como un
     medidor y no como una tarjeta más de la página. */
  margin-top: 1.25rem; padding: 1.4rem 1.6rem 1.5rem;
  background: var(--blanco); border-radius: var(--radio);
  box-shadow: var(--sombra-baja);
}
/* Cifra a la izquierda, cuánto queda a la derecha, la barra cruzando abajo:
   la forma de una barra de progreso. */
.medidor-cab {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.medidor-cifra {
  margin: 0; font-size: 2.6rem; line-height: 1; font-weight: 700;
  letter-spacing: -.04em;
  /* Los dígitos alineados: sin esto la cifra «salta» de ancho al cambiar. */
  font-variant-numeric: tabular-nums;
}
.medidor-de { margin-left: .3rem; font-size: 1.35rem; color: var(--apagado); font-weight: 550; }
.medidor-rotulo {
  margin-left: .6rem; font-size: .95rem; font-weight: 400; color: var(--apagado);
  letter-spacing: normal;
}
.medidor-resto { margin: 0; font-size: 1rem; color: var(--cuerpo); }
.medidor .barra-uso { margin-top: 1rem; height: 12px; }
.medidor-letra { margin: .9rem 0 0; font-size: .85rem; }
/* Sin cuota, la cifra se tiñe: el número es el dato, no el cartel de al lado. */
.medidor-lleno .medidor-cifra { color: #B3261E; }

.acciones-plan { margin-top: 1rem; }
.acciones-plan form { display: inline; margin: 0; }

/* ── El panel de planes: título, selector y tabla en UN rectángulo ──────────
   Son una sola cosa —elegir plan— y sueltos se leían como tres bloques. */
.panel-planes {
  margin-top: 2.5rem; padding: 1.4rem 1.6rem 1.6rem;
  background: var(--blanco); border-radius: var(--radio);
  box-shadow: var(--sombra-baja);
}
/* Tres columnas para que el título quede centrado en el PANEL y no en el
   espacio que le deja el selector: con flex, el título se corre a la izquierda
   tanto como mida el toggle. */
.planes-cab {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: .75rem;
}
.planes-cab .titulo-planes { grid-column: 2; }
.planes-cab .ciclo { grid-column: 3; justify-self: end; margin: 0; }
.titulo-planes {
  margin: 0; text-align: center;
  font-size: .78rem; font-weight: 650; letter-spacing: .12em;
  text-transform: uppercase; color: var(--apagado);
}
.panel-planes .tabla-planes-scroll { margin-top: 1.25rem; }
.panel-planes .tabla-planes tfoot td,
.panel-planes .tabla-planes tfoot th { border-bottom: 0; }
.planes-pie { margin: 1.1rem 0 0; font-size: .85rem; }

/* En pantalla angosta el selector no entra al lado del título: pasa abajo, y
   el título deja de necesitar las tres columnas. */
@media (max-width: 34rem) {
  .planes-cab { grid-template-columns: 1fr; }
  .planes-cab .titulo-planes, .planes-cab .ciclo { grid-column: 1; }
  .planes-cab .ciclo { justify-self: center; }
}

/* ── La tabla de planes ─────────────────────────────────────────────────────
   Tabla y no tarjetas: cuatro planes con varios atributos son datos
   tabulares, y en tarjetas hay que escanear de costado para comparar dos
   columnas que no están pegadas. */
.tabla-planes-scroll { overflow-x: auto; margin-top: 1.5rem; }
.tabla-planes {
  width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .93rem;
}
.tabla-planes th, .tabla-planes td {
  padding: .7rem .8rem; text-align: left; border-bottom: 1px solid var(--raya);
}
.tabla-planes thead th {
  font-size: .8rem; font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; color: var(--apagado);
}
.tabla-planes tbody th { font-weight: 550; }
.tabla-planes .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-planes thead th:not(:first-child),
.tabla-planes tfoot td { text-align: right; }
.tabla-planes tfoot td, .tabla-planes tfoot th { border-bottom: 0; padding-top: 1rem; }
.tabla-planes .moneda { font-size: .72em; color: var(--apagado); margin-right: .15rem; }
.tabla-planes .fila-precio td { font-weight: 650; }
/* La columna del plan que ya tenés, marcada con fondo y no con un borde
   lateral: una franja de color al costado desalinea la celda del resto. */
.tabla-planes .col-actual { color: var(--verde); }
.etiqueta-ahorro {
  margin-left: .35rem; padding: .1rem .4rem; border-radius: 5px;
  background: var(--verde-tenue); color: var(--verde);
  font-size: .68rem; font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap;
}

/* Para lectores de pantalla: encabezados que la tabla necesita y que
   visualmente sobran (la columna de características no lleva título). */
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* 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; }

/* «Contraseña» a la izquierda y «¿La olvidaste?» a la derecha, en el mismo
   renglón: el input baja entero abajo (de ahí el 100% de ancho en la fila). */
.tarjeta-login .label-con-enlace {
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap;
}
.tarjeta-login .label-con-enlace input { flex: 0 0 100%; }
.enlace-menor { font-size: .82rem; font-weight: 450; color: var(--apagado); }
.enlace-menor:hover { color: var(--verde); }
/* La salida dentro del propio error: el que falla la contraseña es el que la
   necesita. El :not(.boton) importa — sin él, un botón dentro de un error
   hereda el color del texto de error y queda oscuro sobre oscuro. */
.error a:not(.boton) { color: inherit; font-weight: 600; }

/* La fila de vuelta de /generar: volver a la izquierda, editar a la derecha. */
.volver-fila { display: flex; gap: 1.25rem; align-items: baseline; flex-wrap: wrap; }
.volver-fila .texto-suave { margin-left: auto; }

/* El error de CUOTA no es un error más: es el momento de conversión, así que
   lleva su propia caja con la salida adentro. */
.error-cuota {
  padding: 1.1rem 1.25rem;
  border-radius: var(--radio);
  background: #FDF3E4;
  color: #7A4A11;
}
.error-cuota p { margin: 0 0 .5rem; }
.error-cuota .texto-suave { color: inherit; opacity: .8; }
.error-cuota .boton { margin-top: .35rem; }

/* 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);
}

/* El artículo SEO bajo la hoja: columna de lectura, no a todo el ancho. */
.modelo-articulo {
  max-width: 46rem;
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
.modelo-articulo h2 { margin: 2.25rem 0 .75rem; }
.modelo-articulo h3 { margin: 1.5rem 0 .4rem; font-size: 1.05rem; }
.modelo-articulo p { margin: 0 0 .9rem; color: var(--cuerpo); line-height: 1.65; }

.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, .grilla-plantillas { grid-template-columns: minmax(0, 1fr); }
  .cabecera-app { align-items: start; }
  .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) ~ .planes-cab .ciclo-mes,
.ciclo-check:checked ~ .planes-cab .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 ~ .planes-cab .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. */
/* Las filas de precio y los botones del ciclo que NO está elegido se ocultan.
   Apunta a la tabla de planes: antes apuntaba a .grilla-tiers, la grilla de
   tarjetas que la tabla reemplazó. */
.ciclo-check:not(:checked) ~ .tabla-planes-scroll .solo-anio,
.ciclo-check:checked ~ .tabla-planes-scroll .solo-mes { display: none; }

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