:root {
  color-scheme: light dark;
  --fondo: #f4f6f8;
  --papel: #ffffff;
  --texto: #1a1d21;
  --suave: #5b6672;
  --borde: #d8dee5;
  --acento: #c0392b;
  --acento-tinta: #ffffff;
  --sombra: 0 1px 2px rgba(16,24,32,.06), 0 4px 12px rgba(16,24,32,.06);
  --radio: 12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #14181d;
    --papel: #1c2229;
    --texto: #e8edf2;
    --suave: #9aa7b4;
    --borde: #2e3740;
    --acento: #e05545;
    --sombra: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.35);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.55;
}

.cabecera {
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  padding: 1.1rem 1rem; max-width: 1100px; margin: 0 auto;
}
.marca {
  font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em;
  text-decoration: none; color: var(--texto);
}
.marca span { color: var(--acento); }
.lema { margin: 0; color: var(--suave); font-size: .9rem; }

main { max-width: 1100px; margin: 0 auto; padding: 0 1rem 3rem; }

h1 { font-size: 1.6rem; margin: .8rem 0 .3rem; letter-spacing: -.01em; }
.bajada { margin: 0 0 1rem; color: var(--suave); max-width: 60ch; }

.privacidad {
  margin: 0 0 1.4rem; padding: .7rem .9rem;
  border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--papel); font-size: .92rem; max-width: 60ch;
}

.zona-soltar {
  border: 2px dashed var(--borde); border-radius: var(--radio);
  background: var(--papel); padding: 2.4rem 1rem; text-align: center;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.zona-soltar:hover, .zona-soltar:focus-visible { border-color: var(--acento); }
.zona-soltar.encima { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 7%, var(--papel)); }
.zona-soltar-interior { pointer-events: none; }
.icono-subir { width: 40px; height: 40px; color: var(--acento); }
.zona-titulo { margin: .5rem 0 .1rem; font-weight: 600; }
.zona-sub { margin: 0; color: var(--suave); font-size: .9rem; }

.barra {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap; margin: 1.2rem 0 .6rem;
  padding: .7rem .9rem; background: var(--papel);
  border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.barra-info { display: flex; flex-direction: column; }
#resumen { font-weight: 600; }
.origenes { color: var(--suave); font-size: .85rem; }
.barra-acciones { display: flex; gap: .5rem; flex-wrap: wrap; }

.boton {
  font: inherit; font-size: .92rem; padding: .5rem .9rem;
  border: 1px solid var(--borde); border-radius: 8px;
  background: var(--papel); color: var(--texto); cursor: pointer;
}
.boton:hover { border-color: var(--acento); }
.boton:disabled { opacity: .5; cursor: default; border-color: var(--borde); }
.boton-principal {
  background: var(--acento); color: var(--acento-tinta); border-color: var(--acento);
  font-weight: 600;
}

.estado { min-height: 1.4rem; margin: .4rem 0; color: var(--suave); font-size: .92rem; }
.estado.error { color: var(--acento); font-weight: 600; }

.grilla {
  display: grid; gap: .9rem; margin-top: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.ficha {
  background: var(--papel); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra);
  padding: .5rem; display: flex; flex-direction: column; gap: .4rem;
}
.ficha.arrastrando { opacity: .4; }
.ficha.destino { outline: 2px solid var(--acento); outline-offset: 2px; }

.lienzo-caja {
  background: #fff; border: 1px solid var(--borde); border-radius: 6px;
  aspect-ratio: 1 / 1.3; display: grid; place-items: center; overflow: hidden;
}
.lienzo-caja canvas {
  max-width: 100%; max-height: 100%;
  transition: transform .15s ease;
}
.cargando { color: var(--suave); font-size: .8rem; }

.ficha-pie {
  display: flex; align-items: center; justify-content: space-between; gap: .2rem;
}
.numero { font-size: .8rem; color: var(--suave); }
.acciones { display: flex; gap: .15rem; }
.mini {
  font: inherit; font-size: .95rem; line-height: 1;
  width: 28px; height: 28px; display: grid; place-items: center;
  border: 1px solid var(--borde); border-radius: 6px;
  background: transparent; color: var(--texto); cursor: pointer;
}
.mini:hover { border-color: var(--acento); color: var(--acento); }
.mini:disabled { opacity: .35; cursor: default; }

.pie {
  max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem 2.5rem;
  color: var(--suave); font-size: .85rem; border-top: 1px solid var(--borde);
}
.pie p { margin: .2rem 0; }
/* Sin esto el enlace del pie salia con el azul subrayado del navegador, que
   en modo oscuro ademas casi no se lee. */
.pie a { color: var(--suave); text-decoration: underline; text-underline-offset: 2px; }
.pie a:hover { color: var(--acento); }

/* Reservado para publicidad: altura fija para que nunca salte el contenido. */
.anuncio { min-height: 100px; display: grid; place-items: center; margin: 1rem 0; }
@media (min-width: 720px) { .anuncio { min-height: 90px; } }

/* El atributo hidden lo pisa cualquier regla con display: se refuerza aca. */
[hidden] { display: none !important; }

/* --- Portada --- */
.tarjetas {
  display: grid; gap: .9rem; margin: 1.4rem 0 2rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.tarjeta {
  display: block; text-decoration: none; color: inherit;
  background: var(--papel); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 1rem 1.1rem; transition: border-color .15s, transform .15s;
}
.tarjeta:hover { border-color: var(--acento); transform: translateY(-2px); }
.tarjeta h2 { margin: 0 0 .25rem; font-size: 1.05rem; }
.tarjeta p { margin: 0; color: var(--suave); font-size: .9rem; line-height: 1.45; }
.tarjeta.pronto { opacity: .55; pointer-events: none; }
.etiqueta {
  display: inline-block; margin-left: .4rem; padding: .05rem .4rem;
  border: 1px solid var(--borde); border-radius: 999px;
  font-size: .7rem; color: var(--suave); vertical-align: middle;
}

.seccion { margin: 2rem 0 0; max-width: 65ch; }
.seccion h2 { font-size: 1.15rem; margin: 0 0 .4rem; }
.seccion p { margin: 0 0 .7rem; color: var(--suave); }

.volver { display: inline-block; margin-top: .6rem; color: var(--suave); font-size: .9rem; }

/* --- Seleccion de paginas --- */
.ficha { position: relative; }
.marca-elegir {
  position: absolute; top: .55rem; left: .55rem; z-index: 2;
  background: var(--papel); border: 1px solid var(--borde);
  border-radius: 6px; padding: .1rem .25rem; line-height: 0;
}
.marca-elegir input { width: 17px; height: 17px; accent-color: var(--acento); }
.ficha.descartada .lienzo-caja { opacity: .3; }
.ficha.descartada .numero { text-decoration: line-through; }

/* --- Anotador: pagina grande con capa de dibujo encima --- */
.herramientas {
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
  margin: 1.2rem 0 .6rem; padding: .6rem .7rem;
  background: var(--papel); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra);
}
.grupo { display: flex; gap: .3rem; align-items: center; }
.separador { width: 1px; align-self: stretch; background: var(--borde); margin: 0 .3rem; }

.util {
  font: inherit; font-size: .9rem; padding: .4rem .7rem;
  border: 1px solid var(--borde); border-radius: 8px;
  background: transparent; color: var(--texto); cursor: pointer;
}
.util:hover { border-color: var(--acento); }
.util[aria-pressed="true"] {
  background: var(--acento); color: var(--acento-tinta); border-color: var(--acento);
}

/* La marca de "elegido" va POR FUERA del circulito, no como borde adentro. Con
   un borde de 2 px comiendose el relleno, el negro sobre fondo oscuro quedaba
   como un aro vacio: parecia que no habia ningun color elegido, justo en el
   que viene elegido por defecto. */
.color {
  width: 26px; height: 26px; padding: 0; border-radius: 50%;
  border: 0; cursor: pointer;
  /* El aro gris de siempre separa un color oscuro del fondo oscuro. */
  box-shadow: 0 0 0 1px var(--borde);
}
.color[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--papel), 0 0 0 4px var(--acento);
}

.lienzo-pagina {
  position: relative; margin: 0 auto; width: max-content;
  background: #fff; box-shadow: var(--sombra); line-height: 0;
}
.lienzo-pagina canvas { display: block; }
#capa { position: absolute; inset: 0; touch-action: none; cursor: crosshair; }

.escritorio { overflow: auto; padding: .5rem 0 1rem; }

#caja-texto {
  position: absolute; z-index: 5; font: inherit;
  border: 1px solid var(--acento); border-radius: 4px;
  padding: .15rem .3rem; background: var(--papel); color: var(--texto);
  min-width: 8rem;
}

.navegacion {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  margin: .4rem 0; color: var(--suave); font-size: .9rem;
}

/* --- Barra de estilo del texto (aparece solo con la herramienta Texto) --- */
.barra-texto { margin-top: -.2rem; }
.barra-texto select {
  font: inherit; font-size: .9rem; padding: .35rem .5rem;
  border: 1px solid var(--borde); border-radius: 8px;
  background: var(--papel); color: var(--texto);
}
.estilo { min-width: 2.2rem; font-size: 1rem; }
.estilo.negrita { font-weight: 700; }
.estilo.cursiva { font-style: italic; font-family: Georgia, serif; }
.estilo.subraya { text-decoration: underline; }
.estilo.tacha   { text-decoration: line-through; }
.etiqueta-casilla { font-size: .9rem; color: var(--suave); gap: .35rem; cursor: pointer; }
.etiqueta-casilla input { accent-color: var(--acento); }

#caja-texto {
  resize: none; overflow: hidden; white-space: pre;
  line-height: 1.25; letter-spacing: 0;
}

/* --- Cuentagotas y muestra de color --- */
.gotero { min-width: 2.2rem; font-size: 1rem; line-height: 1; }
.muestra {
  display: inline-block; width: 24px; height: 24px; border-radius: 6px;
  border: 1px solid var(--borde); background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

/* --- Cuadro para crear la firma --- */
.velo {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: rgba(15, 23, 42, .55);
  overflow: auto;
}
.dialogo {
  width: min(680px, 100%); background: var(--papel); color: var(--texto);
  border-radius: 14px; border: 1px solid var(--borde);
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
  padding: 1rem 1.1rem 1.1rem;
}
.dialogo-cabecera { display: flex; align-items: center; gap: .6rem; }
.dialogo-cabecera h2 { margin: 0; font-size: 1.15rem; flex: 1; }
.cerrar { min-width: 2.2rem; font-size: 1.2rem; line-height: 1; }

.pestanas { display: flex; gap: .35rem; margin: .8rem 0 .7rem; flex-wrap: wrap; }
.pestanas button {
  font: inherit; font-size: .92rem; padding: .45rem .8rem; cursor: pointer;
  border: 1px solid var(--borde); border-radius: 999px;
  background: transparent; color: var(--suave);
}
.pestanas button[aria-pressed="true"] {
  background: var(--acento); border-color: var(--acento); color: #fff;
}

/* El tablero a cuadros deja ver que el fondo es transparente de verdad: es la
   diferencia entre una firma que se apoya sobre el formulario y una que lo tapa. */
.pizarra, .previa {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 1;
  border: 1px dashed var(--borde); border-radius: 10px;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #eef1f5 25%, transparent 25%, transparent 75%, #eef1f5 75%),
    linear-gradient(45deg, #eef1f5 25%, transparent 25%, transparent 75%, #eef1f5 75%);
  background-size: 18px 18px;
  background-position: 0 0, 9px 9px;
  touch-action: none;
}
.pizarra { cursor: crosshair; }

.zona-foto {
  border: 2px dashed var(--borde); border-radius: 10px;
  padding: 1.4rem 1rem; text-align: center; cursor: pointer;
}
.zona-foto:hover, .zona-foto:focus { border-color: var(--acento); outline: none; }
.zona-foto p { margin: .2rem 0; }

.fila-rango { display: flex; align-items: center; gap: .6rem; margin-top: .6rem;
              font-size: .9rem; color: var(--suave); }
.fila-rango input[type="range"] { flex: 1; accent-color: var(--acento); }

.campo {
  width: 100%; font: inherit; padding: .5rem .6rem; box-sizing: border-box;
  border: 1px solid var(--borde); border-radius: 8px;
  background: var(--papel); color: var(--texto);
}
.estilos-firma { margin: .6rem 0; display: flex; gap: .35rem; flex-wrap: wrap; }

.fila-tinta { display: flex; align-items: center; gap: .45rem; margin-top: .8rem;
              flex-wrap: wrap; }
.ayuda { font-size: .88rem; color: var(--suave); margin: .5rem 0 0; }

.dialogo-pie { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
               margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--borde); }
.empuje { flex: 1; }
.boton-principal[disabled] { opacity: .45; cursor: not-allowed; }

/* --- Chip de la firma guardada --- */
.chip-firma {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .2rem .3rem .2rem .5rem; border-radius: 999px;
  border: 1px solid var(--borde); background: var(--papel);
  font-size: .85rem; color: var(--suave);
}
/* Fondo blanco fijo, no el del tema: la firma es tinta oscura sobre fondo
   transparente, y en modo oscuro la miniatura quedaba completamente en blanco
   -- se veia el chip con la cruz y nada adentro. */
.chip-firma img {
  height: 26px; width: auto; max-width: 90px; object-fit: contain;
  background: #ffffff; border-radius: 4px; padding: 1px 3px;
}
.chip-firma button {
  font: inherit; line-height: 1; cursor: pointer; border-radius: 999px;
  border: 0; background: transparent; color: var(--suave); padding: .15rem .35rem;
}
.chip-firma button:hover { background: var(--borde); color: var(--texto); }

@media (max-width: 560px) {
  .dialogo { padding: .8rem; }
  .pizarra, .previa { aspect-ratio: 2 / 1; }
}

/* --- Rellenar formularios: controles de verdad puestos sobre la hoja --- */
#capa-campos { position: absolute; inset: 0; }
.campo-pdf {
  position: absolute; box-sizing: border-box; font-family: inherit;
  margin: 0; padding: 0 2px;
  /* Celeste claro OPACO, no translucido. Cumple dos funciones a la vez: marca
     donde hay que escribir (como Acrobat; sin eso los campos son invisibles) y
     tapa el valor que el visor ya dibujo en la hoja. Un formulario que viene a
     medio llenar se veia con el texto escrito dos veces, corrido. */
  background: #e9f1ff;
  border: 1px solid #5b8def;
  border-radius: 2px; color: #101828;
}
.campo-pdf:focus {
  outline: none; background: #dbe8ff;
  border-color: var(--acento); box-shadow: 0 0 0 2px rgba(192, 57, 43, .25);
}
textarea.campo-pdf { resize: none; line-height: 1.15; padding: 1px 2px; }
/* Las casillas dibujan su propio control; el blanco solo tapa lo de abajo. */
input[type="checkbox"].campo-pdf, input[type="radio"].campo-pdf {
  padding: 0; background: #ffffff; accent-color: var(--acento); cursor: pointer;
}
/* Transparente a proposito: el valor de un campo bloqueado ya esta dibujado en
   la hoja, y este recuadro solo marca donde esta sin taparlo ni repetirlo. */
.campo-pdf.bloqueado {
  background: transparent; border-style: dashed;
  border-color: rgba(120, 130, 140, .55); pointer-events: none;
}
#resumen { font-size: .9rem; color: var(--suave); }

.aviso {
  border: 1px solid var(--borde); border-left: 4px solid var(--acento);
  border-radius: 10px; padding: .9rem 1rem; margin: 1rem 0;
  background: color-mix(in srgb, var(--acento) 5%, var(--papel));
}
.aviso h2 { margin-top: 0; font-size: 1.05rem; }

/* --- Conversion a/desde imagenes --- */
.previa-mini {
  display: block; width: 100%; height: 130px; object-fit: contain;
  background: color-mix(in srgb, var(--borde) 25%, transparent);
  border-radius: 6px;
}
.nombre-mini {
  display: block; font-size: .78rem; color: var(--suave);
  margin: .35rem 0 .3rem; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.pie-ficha { display: flex; gap: .25rem; justify-content: center; }
.ficha.arrastrando { opacity: .45; }
.fila-opcion { display: flex; align-items: center; gap: .4rem; font-size: .9rem; }
.fila-opcion select, .fila-opcion input[type="number"] {
  font: inherit; font-size: .9rem; padding: .3rem .45rem;
  border: 1px solid var(--borde); border-radius: 8px;
  background: var(--papel); color: var(--texto);
}
.fila-opcion input[type="range"] { accent-color: var(--acento); }

/* --- Barra de ajuste fino de la marca elegida --- */
#barra-marca { align-items: center; }
#barra-marca input[type="number"] {
  width: 4.6rem; font: inherit; font-size: .9rem; padding: .3rem .4rem;
  border: 1px solid var(--borde); border-radius: 8px;
  background: var(--papel); color: var(--texto);
}
#barra-marca input[type="number"]:focus {
  outline: none; border-color: var(--acento);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--acento) 30%, transparent);
}
#que-marca { color: var(--acento); }
/* En el celular los campos entran igual: la barra se parte en renglones. */
@media (max-width: 560px) {
  #barra-marca input[type="number"] { width: 4rem; }
}

/* --- Barras pegadas arriba --- */
/* La hoja pasa por debajo. Sin esto, al bajar para firmar al pie del
   documento la barra se iba de pantalla, junto con el ajuste fino y el boton
   de descargar, que es justo cuando hacen falta. */
.barras-pegadas {
  position: sticky; top: 0; z-index: 20;
  background: var(--fondo);
  padding: .5rem 0;
  /* Tope de altura para que en un telefono la barra no se coma la hoja: si no
     entra, se desplaza dentro de si misma. */
  max-height: 55vh; overflow-y: auto;
}
/* Sin sombra ni borde a proposito. Mostrarlos solo al pegarse pide JavaScript
   en los cuatro modulos, y dejarlos siempre puestos dibuja una linea suelta
   cruzando la pagina cuando todavia no se abrio ningun archivo y la barra esta
   vacia. El fondo solido ya alcanza: la hoja pasa por debajo y se entiende. */
.barras-pegadas .estado { margin-bottom: 0; }
@media (max-width: 560px) {
  .barras-pegadas { max-height: 50vh; }
}