/* Mobile first: los estilos base son los del teléfono; los @media amplían para pantallas grandes. */
:root {
  --azul: #1f5fbf;
  --azul-oscuro: #14407f;
  --gris: #5b6472;
  --borde: #cfd6e0;
  --fondo: #f3f6fa;
  --error: #b3261e;
  --ok: #1b7a3d;
  --toque: 44px; /* alto mínimo de lo que se toca con el dedo */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #1c2430;
  background: var(--fondo);
  line-height: 1.4;
  -webkit-text-size-adjust: 100%;
}

.barra {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .3rem .8rem;
  padding: .5rem .9rem; background: var(--azul-oscuro); color: #fff;
}
.barra .marca { color: #fff; font-weight: 600; text-decoration: none; }
.barra form { margin: 0; }
.barra .menu { display: flex; align-items: center; gap: 1rem; }
.barra .menu a { color: #fff; text-decoration: none; padding: .5rem 0; }

.tarjeta {
  margin: .5rem; padding: 1rem;
  background: #fff; border: 1px solid var(--borde); border-radius: 10px;
}
h1 { margin-top: 0; font-size: 1.25rem; }

fieldset { margin: 1rem 0; padding: .8rem; border: 1px solid var(--borde); border-radius: 8px; min-width: 0; }
legend { padding: 0 .5rem; font-weight: 600; color: var(--azul-oscuro); }

/* Una columna en el teléfono. */
.grilla { display: grid; grid-template-columns: 1fr; gap: .8rem; }

.campo { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .6rem; }
.grilla .campo { margin-bottom: 0; }
label { font-size: .9rem; color: var(--gris); }
/* 16 px: por debajo, iOS hace zoom al enfocar el campo. */
input, select {
  width: 100%; min-height: var(--toque); padding: .5rem .7rem;
  font: inherit; font-size: 1rem; border: 1px solid var(--borde); border-radius: 8px; background: #fff;
}
input:focus, select:focus { outline: 2px solid var(--azul); outline-offset: 0; }
.con-error input, .con-error select { border-color: var(--error); background: #fff8f7; }
.req { color: var(--error); }
.ayuda { color: var(--gris); font-size: .8rem; }
.error { color: var(--error); font-size: .85rem; }
.error:empty { display: none; }

.fila { padding: .8rem 0; border-top: 1px dashed var(--borde); }
.fila:first-child { border-top: 0; }

button { font: inherit; cursor: pointer; border-radius: 8px; }
button.primario, a.primario { background: var(--azul); color: #fff; border: 0; padding: .6rem 1.2rem; min-height: var(--toque); }
button.primario:hover { background: var(--azul-oscuro); }
button.primario:disabled { opacity: .6; cursor: wait; }
button.grande { width: 100%; padding: .8rem; font-size: 1.05rem; }
button.secundario { background: #fff; color: var(--azul); border: 1px solid var(--azul); padding: .4rem .9rem; min-height: var(--toque); }
button.secundario:disabled { opacity: .5; cursor: not-allowed; }
button.enlace { background: none; border: 0; color: var(--azul); padding: .6rem 0; min-height: var(--toque); text-decoration: underline; }
.barra button.enlace { color: #fff; }
a.boton { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; border-radius: 8px; }

.aviso { padding: .6rem .8rem; border-radius: 8px; }
.aviso.ok { background: #e6f4ea; color: var(--ok); }
.aviso.mal { background: #fdecea; color: var(--error); }
#aviso-borrador { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.pie { text-align: center; color: var(--gris); }
.lista { padding-left: 1.2rem; }
.numero-contrato { font-size: 1.1rem; }

/* El botón de enviar queda a mano mientras se baja por el formulario largo. */
.barra-envio {
  position: sticky; bottom: 0; margin: 1rem -1rem -1rem; padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid var(--borde); border-radius: 0 0 10px 10px;
}
.estado-borrador { display: block; min-height: 1.1rem; margin-bottom: .3rem; color: var(--gris); font-size: .8rem; text-align: center; }

.encabezado { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.tabla-scroll { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla th, .tabla td { padding: .5rem .6rem; text-align: left; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.tabla .acciones { display: flex; gap: .4rem; }
.tabla .acciones form { margin: 0; }
.etiqueta { padding: .1rem .5rem; border-radius: 999px; font-size: .8rem; background: #eef1f5; color: var(--gris); }
.etiqueta.ok { background: #e6f4ea; color: var(--ok); }
.etiqueta.pendiente { background: #fff4e0; color: #8a5a00; }
.etiqueta.mal { background: #fdecea; color: var(--error); }
a.boton.secundario { background: #fff; color: var(--azul); border: 1px solid var(--azul); padding: .4rem .9rem; font-size: .9rem; min-height: var(--toque); }
label.opcion { display: flex; align-items: center; gap: .6rem; min-height: var(--toque); font-size: 1rem; color: inherit; }
label.opcion input { width: 1.3rem; height: 1.3rem; min-height: 0; }
.enlace-acceso { width: 100%; font-family: ui-monospace, monospace; font-size: .8rem; }
.en-linea { display: flex; align-items: flex-end; gap: .8rem; flex-wrap: wrap; }
.en-linea .campo { flex: 1 1 12rem; margin-bottom: 0; }

@media (min-width: 640px) {
  .barra { padding: .6rem 1.2rem; }
  .tarjeta { max-width: 760px; margin: 1.5rem auto; padding: 1.5rem; }
  .tarjeta.angosta { max-width: 440px; }
  .tarjeta.ancha { max-width: 980px; }
  h1 { font-size: 1.4rem; }
  fieldset { padding: 1rem; }
  .grilla { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .8rem 1rem; }
  button.grande { width: 100%; }
  .barra-envio { margin: 1rem -1.5rem -1.5rem; padding: .8rem 1.5rem; }
  .barra .menu a { padding: 0; }
}

/* Estado de un ambiente de firma y sus acciones */
.estado { display: inline-block; margin-left: .5rem; padding: .1rem .5rem; border-radius: 999px; font-size: .85rem; font-weight: 600; }
.estado.ok { background: #e6f4ea; color: var(--ok); }
.estado.mal { background: #fdecea; color: var(--error); }
.estado.espera { background: #fff4d6; color: #7a5a00; }
.tabla .estado { margin-left: 0; white-space: normal; }

/* Lista de contratos: filtros y páginas */
.filtros { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0; }
.filtros a { padding: .45rem .8rem; border: 1px solid var(--borde); border-radius: 999px; color: var(--gris); text-decoration: none; min-height: 36px; box-sizing: border-box; }
.filtros a.activo { background: var(--azul-oscuro); border-color: var(--azul-oscuro); color: #fff; }
.paginacion { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1rem; color: var(--gris); }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: .8rem; }
.acciones p { margin: 0; flex: 1 1 100%; }

/* Resumen de uso */
.tabla tr.elegido td { background: #eef3fb; font-weight: 600; }
.tabla tr.revisar td { background: #fff4d6; }
.tabla.resumen td:last-child { text-align: right; font-weight: 600; }
.tabla.resumen tr.total td { border-top: 2px solid var(--azul-oscuro); font-size: 1.05rem; }
a.boton { display: inline-flex; align-items: center; min-height: var(--toque); padding: 0 1rem; border-radius: 8px; background: var(--azul); color: #fff; text-decoration: none; }
@media print {
  .barra, .no-imprimir { display: none !important; }
  body { background: #fff; }
  .tarjeta { box-shadow: none; max-width: none; }
}

/* Subida de un documento para armar un formulario */
.zona-archivo { display: flex; align-items: center; justify-content: center; min-height: 6rem; margin-bottom: 1rem; padding: 1rem; border: 2px dashed var(--borde); border-radius: 12px; color: var(--gris); text-align: center; cursor: pointer; background: #fff; }
.zona-archivo.encima, .zona-archivo:hover { border-color: var(--azul); color: var(--azul-oscuro); }
.zona-archivo input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.zona-archivo:focus-within { outline: 3px solid var(--azul); outline-offset: 2px; }

/* Editor de plantillas */
body.con-editor main, body.con-editor .tarjeta { max-width: none; }
.editor-barra { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .5rem .9rem; background: #fff; border-bottom: 1px solid var(--borde); }
.editor-barra .volver { color: var(--azul-oscuro); text-decoration: none; }
.editor-barra input[type=text] { flex: 1 1 14rem; min-width: 10rem; font-size: 1rem; padding: .45rem .6rem; border: 1px solid var(--borde); border-radius: 8px; }
.editor-barra .guardado { color: var(--gris); font-size: .85rem; min-width: 8rem; }
.editor-barra .botones { display: flex; gap: .4rem; flex-wrap: wrap; }
#ed-aviso { margin: .6rem .9rem; }
.editor-cuerpo { display: grid; grid-template-columns: 16rem minmax(0, 1fr) 17rem; gap: 1rem; padding: 1rem .9rem; align-items: start; }
.editor-izq, .editor-der { position: sticky; top: 4.2rem; max-height: calc(100vh - 5rem); overflow: auto; padding: .8rem; background: #fff; border: 1px solid var(--borde); border-radius: 12px; }
.editor-izq h2, .editor-der h2 { margin-top: 0; font-size: 1rem; }
.modos { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-bottom: .6rem; }
.modo { padding: .6rem .4rem; border: 2px solid var(--borde); border-radius: 10px; background: #fff; font-weight: 600; cursor: pointer; }
.modo.activo { border-color: var(--azul); background: #eaf1fc; color: var(--azul-oscuro); }
.pendientes { margin: 0; padding-left: 1.1rem; font-size: .9rem; }
.pendientes li { margin-bottom: .35rem; }
.pendientes li.listo { color: var(--ok); list-style: none; margin-left: -1.1rem; font-weight: 600; }
button.enlace { padding: 0; border: 0; background: none; color: var(--azul); text-align: left; text-decoration: underline; cursor: pointer; font: inherit; }
button.peligro { margin-top: 1rem; padding: .5rem .8rem; border: 1px solid var(--error); border-radius: 8px; background: #fff; color: var(--error); cursor: pointer; }
.editor-paginas { display: flex; flex-direction: column; align-items: flex-start; gap: 1.4rem; overflow-x: auto; padding: 1rem .2rem 2rem; }
.editor-paginas .pagina { position: relative; flex: none; margin: 0 auto; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); user-select: none; -webkit-user-select: none; }
.editor-paginas .pagina img { display: block; width: 100%; height: 100%; pointer-events: none; }
.editor-paginas .capa { position: absolute; inset: 0; cursor: crosshair; touch-action: none; }
.editor-paginas.modo-firma .capa { cursor: cell; }
.editor-paginas .numero-pagina { position: absolute; top: -1.1rem; left: 0; font-size: .75rem; color: var(--gris); }
.caja { position: absolute; box-sizing: border-box; overflow: visible; border: 1.5px solid rgba(31, 95, 191, .85); background: rgba(31, 95, 191, .12); cursor: move; touch-action: none; }
.caja.firma { border-color: rgba(214, 120, 0, .9); background: rgba(214, 120, 0, .14); }
.caja.guia { pointer-events: none; border-style: dashed; }
.caja.elegida { border-width: 2.5px; box-shadow: 0 0 0 3px rgba(31, 95, 191, .25); background: rgba(31, 95, 191, .22); }
.caja.firma.elegida { box-shadow: 0 0 0 3px rgba(214, 120, 0, .3); background: rgba(214, 120, 0, .24); }
.caja .rotulo { position: absolute; left: 2px; bottom: calc(100% + 1px); max-width: 16rem; overflow: hidden; padding: 0 .25rem; border-radius: 3px; background: rgba(20, 64, 127, .9); color: #fff; font-size: .68rem; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; pointer-events: none; }
.caja.firma .rotulo { background: rgba(160, 84, 0, .92); bottom: auto; top: 2px; }
.caja .asa { position: absolute; right: -5px; bottom: -5px; width: 10px; height: 10px; border: 1.5px solid #fff; border-radius: 2px; background: var(--azul); cursor: ew-resize; }
.caja.firma .asa { background: #c46a00; cursor: nwse-resize; }
.menu-flotante { position: fixed; z-index: 50; min-width: 15rem; max-height: 70vh; overflow: auto; padding: .3rem; background: #fff; border: 1px solid var(--borde); border-radius: 10px; box-shadow: 0 6px 24px rgba(0, 0, 0, .25); }
.menu-flotante[hidden] { display: none; }
.menu-flotante .menu-titulo { padding: .4rem .6rem; color: var(--gris); font-size: .8rem; font-weight: 600; }
.menu-flotante button { display: block; width: 100%; min-height: 40px; padding: .45rem .7rem; border: 0; border-radius: 6px; background: none; text-align: left; font: inherit; cursor: pointer; }
.menu-flotante button:hover:not(:disabled), .menu-flotante button:focus-visible { background: #eaf1fc; }
.menu-flotante button:disabled { color: #9aa3b0; cursor: not-allowed; }
.menu-flotante hr { margin: .25rem 0; border: 0; border-top: 1px solid var(--borde); }
@media (max-width: 1100px) {
  .editor-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .editor-izq, .editor-der { position: static; max-height: none; }
}

.zoom { display: flex; gap: .3rem; margin: .4rem 0 .8rem; }
.zoom button { flex: 1; min-height: 36px; border: 1px solid var(--borde); border-radius: 8px; background: #fff; cursor: pointer; }

/* Una casilla de verificación con su texto, en una línea */
.campo.casilla label { display: flex; align-items: center; gap: .5rem; color: inherit; font-size: .95rem; cursor: pointer; }
.campo.casilla input[type=checkbox] { width: 1.25rem; min-height: 0; height: 1.25rem; padding: 0; flex: none; }
.editor-der .campo label { display: flex; flex-direction: column; gap: .25rem; }
.editor-der .campo.casilla label { flex-direction: row; }

/* Editor: casillas, tablas, datos automáticos, contexto y orden */
.caja.automatico { border-color: rgba(110, 70, 160, .9); background: rgba(110, 70, 160, .13); }
.caja.automatico .rotulo { background: rgba(86, 52, 130, .92); }
.caja.de-tabla { border-color: rgba(21, 128, 61, .9); background: rgba(21, 128, 61, .13); }
.caja.de-tabla .rotulo { background: rgba(17, 94, 50, .92); }
.caja.casilla-marca { border-color: rgba(31, 95, 191, .95); background: rgba(31, 95, 191, .18); }
.caja.casilla-marca.de-tabla { border-color: rgba(21, 128, 61, .95); background: rgba(21, 128, 61, .2); }
.caja.fantasma { pointer-events: none; border: 1px dashed rgba(21, 128, 61, .55); background: rgba(21, 128, 61, .05); }
.editor-paginas.modo-casilla .capa { cursor: copy; }
.contexto { margin: .6rem 0; padding: .5rem .6rem; border-radius: 8px; background: #fff4d6; color: #5c4300; font-size: .85rem; }
.contexto button { margin-top: .3rem; padding: .3rem .6rem; border: 1px solid #b58900; border-radius: 6px; background: #fff; cursor: pointer; }
.contexto[hidden] { display: none; }
.editor-izq details.orden { margin-top: 1rem; }
.editor-izq details.orden summary { cursor: pointer; font-weight: 600; color: var(--azul-oscuro); }
.editor-izq details.orden ol { margin: .4rem 0 0; padding-left: 1.2rem; font-size: .85rem; }
.editor-izq details.orden li { margin-bottom: .25rem; }
.editor-izq details.orden li .nombre { margin-right: .3rem; }
.editor-izq details.orden li small { display: block; color: var(--gris); }
.editor-izq details.orden li button { margin-left: .2rem; padding: 0 .35rem; border: 1px solid var(--borde); border-radius: 4px; background: #fff; cursor: pointer; font-size: .7rem; }
.editor-izq details.orden li button:disabled { opacity: .35; cursor: default; }
.editor-der h3 { margin: 1rem 0 .4rem; font-size: .95rem; }
.editor-der .fila-opcion { display: flex; gap: .3rem; margin-bottom: .4rem; }
.editor-der .fila-opcion input { min-height: 38px; }
.editor-der .fila-opcion.elegida input { border-color: var(--azul); }
.editor-der button.chico { flex: none; width: 2.2rem; border: 1px solid var(--borde); border-radius: 8px; background: #fff; cursor: pointer; }
.editor-der > button:not(.peligro) { display: block; width: 100%; margin-top: .5rem; min-height: 40px; border: 1px solid var(--borde); border-radius: 8px; background: #fff; cursor: pointer; font: inherit; }

.aviso.espera { background: #fff4d6; color: #5c4300; }
#subida-aviso ul { margin: .4rem 0 .8rem 1.1rem; padding: 0; }

.editor-izq button.secundario { display: block; width: 100%; margin: .2rem 0 .8rem; min-height: 38px; border: 1px solid var(--borde); border-radius: 8px; background: #fff; cursor: pointer; font: inherit; }