/*
  EL EDITOR DEL CONTRATO REDACTADO (js/editorContrato.js): barra de acciones, columna de casillas a la izquierda y la hoja a la derecha.
  REGLA: solo variables de tema.css (nada de colores ni tipografías escritas aquí). Prefijo de clases: ec-.
  La hoja en la que se escribe está en editor-documento.css y lo que sale impreso, en contrato-hoja.css.
  Desde 48rem de ancho (el iPad vertical ya cuenta) se ven las dos columnas; más angosto, dos pestañas («Datos» y «Contrato»).
*/

.ec-raiz {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-4);
  min-width: 0;
}

/* ============================================================ Barra de acciones */
.ec-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-2) var(--espacio-4);
  padding: var(--espacio-3) var(--espacio-4);
}
.ec-volver {
  flex: none;
}
.ec-barra-titulo {
  display: flex;
  flex: 1 1 14rem;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-1) var(--espacio-3);
  min-width: 0;
}
.ec-titulo {
  margin: 0;
  min-width: 0;
  font-size: var(--tam-subtitulo);
}
.ec-estado {
  display: inline-flex;
  flex: none;
}
.ec-guardado-caja {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-2);
  min-width: 0;
}
.ec-guardado {
  color: var(--color-texto-suave);
}
.ec-guardado[data-estado='reintentando'],
.ec-guardado[data-estado='error'],
.ec-guardado[data-estado='noexiste'],
.ec-guardado[data-estado='conflicto'] {
  color: var(--color-peligro);
  font-weight: var(--peso-fuerte);
}
.ec-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-2);
  margin-left: auto;
}

/* ============================================================ Avisos (listo para firmar, firmado, anulado, conflicto...) */
.ec-avisos {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  min-width: 0;
}
.ec-avisos > div:empty {
  display: none;
}
.ec-aviso p {
  margin: 0 0 var(--espacio-2);
}
.ec-aviso .btn {
  margin-top: var(--espacio-1);
}

/* ============================================================ Pestañas (solo en pantallas angostas) */
.ec-pestanas {
  margin-bottom: 0;
}
.ec-cuerpo {
  min-width: 0;
}

/* ============================================================ Columna de casillas */
.ec-datos {
  min-width: 0;
}
.ec-resumen {
  margin-bottom: var(--espacio-4);
  font-weight: var(--peso-fuerte);
}
.ec-campos {
  min-width: 0;
}
.ec-campo {
  margin-bottom: var(--espacio-4);
  border-radius: var(--radio);
  transition:
    background var(--transicion),
    box-shadow var(--transicion);
  scroll-margin-top: calc(var(--ec-alto-barra, 6rem) + var(--espacio-4));
  scroll-margin-bottom: var(--espacio-5);
}
.ec-campo .campo {
  margin-bottom: var(--espacio-1);
}
/* Al tocar una casilla de la hoja, su campo se marca un momento para que se vea a dónde se fue. */
.ec-campo-resalta {
  background: var(--color-casilla-vacia-fondo);
  box-shadow: 0 0 0 var(--espacio-2) var(--color-casilla-vacia-fondo);
}
/* «No sé»: el botón va a la par del cuadro donde se escribe el dato, y abre los tres tamaños de espacio en blanco (______). */
.ec-fila-dato {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
}
.ec-fila-dato > :first-child {
  flex: 1 1 auto;
  min-width: 0;
}
.ec-no-se {
  flex: none;
}
.ec-blanco {
  margin-top: var(--espacio-2);
  padding: var(--espacio-2);
  border: 1px dashed var(--color-borde-fuerte);
  border-radius: var(--radio);
  background: var(--color-superficie-alt);
}
.ec-blanco-texto {
  margin: 0 0 var(--espacio-2);
}
.ec-tamanos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  margin-bottom: var(--espacio-2);
}
.ec-tamanos[hidden],
.ec-blanco[hidden],
.ec-fila-dato[hidden] {
  display: none;
}
.ec-escribir-dato {
  display: flex;
}
.ec-tamano {
  flex-direction: column;
  gap: var(--espacio-1);
  min-width: 0;
  padding-inline: var(--espacio-2);
}
.ec-tamano[aria-pressed='true'] {
  border-color: var(--color-primario);
  background: var(--color-info-fondo);
  color: var(--color-primario);
}
/* Una rayita del largo aproximado de cada espacio, para que se vea cuánto se deja. */
.ec-muestra {
  display: block;
  height: 0;
  border-bottom: 2px solid currentColor;
}
.ec-muestra-corto {
  width: 1.5rem;
}
.ec-muestra-medio {
  width: 2.75rem;
}
.ec-muestra-largo {
  width: 4rem;
}
.ec-editar-casilla {
  display: flex;
  margin-left: auto;
}
.ec-sin-casillas {
  margin-bottom: var(--espacio-3);
}
.ec-lista {
  margin: 0 0 var(--espacio-3);
  padding-left: var(--espacio-5);
}

/* ============================================================ La hoja */
.ec-papel {
  min-width: 0;
}
.ec-pista {
  max-width: var(--ancho-hoja);
  margin: 0 auto var(--espacio-3);
}
.ec-papel .ed-bloque {
  scroll-margin-top: calc(var(--ec-alto-barra, 6rem) + 8rem);
}

/* ============================================================ Pantallas angostas: una sola columna, con pestañas */
@media (max-width: 47.99rem) {
  .ec-raiz[data-panel='datos'] .ec-papel,
  .ec-raiz[data-panel='contrato'] .ec-datos {
    display: none;
  }
  /* Fila 1: «Volver» y el estado de guardado; fila 2: el título; fila 3: los botones (se reparten el ancho). */
  .ec-guardado-caja {
    order: 1;
    margin-left: auto;
  }
  .ec-barra-titulo {
    order: 2;
    flex-basis: 100%;
  }
  .ec-acciones {
    order: 3;
    width: 100%;
    margin-left: 0;
  }
  .ec-acciones .btn {
    flex: 1 1 9rem;
  }
}

/* ============================================================ Pantallas anchas (desde el iPad vertical): casillas a la izquierda, hoja a la derecha */
@media (min-width: 48rem) {
  .ec-raiz {
    --ed-arriba: calc(var(--ec-alto-barra, 6rem) + var(--espacio-2) + var(--espacio-3));
  }
  .ec-pestanas {
    display: none;
  }
  .ec-barra {
    position: sticky;
    top: var(--espacio-2);
    z-index: 10;
  }
  .ec-cuerpo {
    display: grid;
    grid-template-columns: minmax(15rem, 17rem) minmax(0, 1fr); /* iPad vertical: la hoja necesita el ancho */
    gap: var(--espacio-4);
    align-items: start;
  }
  /* La columna de casillas se queda a la vista debajo de la barra y, si es más alta que la pantalla, se desliza por dentro. */
  .ec-datos {
    position: sticky;
    top: calc(var(--ec-alto-barra, 6rem) + var(--espacio-2) + var(--espacio-3));
    max-height: calc(100vh - var(--ec-alto-barra, 6rem) - var(--espacio-2) - 2 * var(--espacio-3));
    max-height: calc(100dvh - var(--ec-alto-barra, 6rem) - var(--espacio-2) - 2 * var(--espacio-3));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
@media (min-width: 60rem) {
  .ec-cuerpo {
    grid-template-columns: minmax(20rem, 23rem) minmax(0, 1fr);
  }
}

/* ============================================================ «＋ Cláusula» y la cláusula recién agregada */
.ec-herramientas {
  display: flex;
  justify-content: flex-end;
  gap: var(--espacio-2);
  margin-bottom: var(--espacio-2);
}
.ec-herramientas[hidden] {
  display: none;
}
.ec-bloque-nuevo {
  border-radius: var(--radio);
  background: var(--color-info-fondo);
  outline: 2px solid var(--color-info);
  outline-offset: 2px;
}