/* Documental PS - documentacion de venta.
   Paleta oficial de Parque: Azul Profundo #092a32, Verde Parque #2f8a43 (accion en 600 #26743a
   porque blanco sobre el canonico no llega a AA a 14 px), Oro Serenidad #d1a15a.
   Sin tipografias web: la CSP de esta landing es `style-src 'self'` y no hay font-src, asi que una
   fuente de Google se bloquearia en silencio y caeria a la de sistema sin avisar. Se usa Georgia,
   que esta en todas partes y compone bien en papel. */

:root {
  --azul: #092a32;
  --azul-2: #35505a;
  --azul-3: #6b8189;
  --verde: #2f8a43;
  --verde-600: #26743a;
  --oro: #d1a15a;
  --papel: #ffffff;
  --fondo: #f4f2ed;
  --borde: #dcd8cf;
  --borde-2: #ebe7e0;
  --rojo: #a3352c;

  /* Tinta del documento impreso: mas contrastada que la de pantalla, porque el papel no ilumina. */
  --doc-tinta: #14252b;
  --doc-tinta-2: #4a6169;
  --doc-tinta-3: #7b8f95;
  --doc-linea: #d9d4c9;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--azul);
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ encabezado de la app */
.dp-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 22px; background: var(--papel); border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; z-index: 5;
}
.dp-top-brand { display: flex; align-items: center; gap: 11px; }
.dp-top-brand div { display: flex; flex-direction: column; line-height: 1.15; }
.dp-top-brand span { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--verde-600); font-weight: 700; }
.dp-top-brand strong { font-size: 17px; font-weight: 600; }
.dp-top-back {
  color: var(--azul); text-decoration: none; font-size: 13px; font-weight: 600;
  border: 1px solid var(--borde); border-radius: 8px; padding: 8px 13px; background: var(--papel);
}
.dp-top-back:hover { border-color: var(--verde-600); color: var(--verde-600); }

/* ------------------------------------------------------------------ layout */
.dp-shell {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px;
  max-width: 1500px; margin: 0 auto; padding: 24px 22px 64px;
}
@media (min-width: 1080px) {
  .dp-shell { grid-template-columns: minmax(0, 450px) minmax(0, 1fr); align-items: start; }
  .dp-preview { position: sticky; top: 84px; }
}

/* ------------------------------------------------------------------ formulario */
.dp-form { display: flex; flex-direction: column; gap: 18px; }
.dp-intro { background: var(--papel); border: 1px solid var(--borde); border-radius: 12px; padding: 20px 22px; }
.dp-eyebrow { margin: 0; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--verde-600); font-weight: 700; }
.dp-intro h1 { margin: 7px 0 8px; font-size: 26px; font-weight: 600; letter-spacing: -.01em; }
.dp-lead { margin: 0; color: var(--azul-2); font-size: 14px; }

.dp-status {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px solid rgba(163, 53, 44, .35); background: #fbeceb; color: var(--rojo);
  border-radius: 10px; padding: 12px 15px; font-size: 13.5px; font-weight: 600;
}
.dp-status button {
  border: 1px solid currentColor; background: transparent; color: inherit;
  border-radius: 7px; padding: 5px 11px; font: inherit; font-size: 12.5px; cursor: pointer;
}

.dp-fieldset { border: 1px solid var(--borde); border-radius: 12px; background: var(--papel); padding: 18px 20px 20px; margin: 0; }
.dp-fieldset legend { padding: 0 8px; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--azul-3); font-weight: 700; }
.dp-hint { margin: 0 0 14px; font-size: 13px; color: var(--azul-2); }

.dp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
@media (max-width: 560px) { .dp-grid { grid-template-columns: minmax(0, 1fr); } }
.dp-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.dp-field-wide { grid-column: 1 / -1; }
.dp-field > span { font-size: 12px; font-weight: 700; color: var(--azul-2); }
.dp-field > span em { font-style: normal; font-weight: 500; color: var(--azul-3); }
.dp-field input, .dp-field select {
  min-height: 42px; padding: 8px 11px; font: inherit; font-size: 14.5px; color: var(--azul);
  border: 1px solid var(--borde); border-radius: 9px; background: var(--papel); width: 100%;
}
.dp-field input:focus, .dp-field select:focus { outline: 2px solid var(--verde-600); outline-offset: 1px; border-color: var(--verde-600); }

/* Flecha propia en todo campo que ofrece una lista, sea `select` o texto con sugerencias.
   Dos motivos: el `select` pierde su flecha nativa en cuanto se le fija un `background`, y el
   `input list=""` nunca tuvo una, asi que se ve igual que un campo de texto comun y nadie descubre
   que hay opciones. Va como data URI porque la CSP de esta landing admite `img-src data:`. */
.dp-field select,
.dp-field input[list] {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%2335505a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 12px 8px;
  padding-right: 36px;
}

.dp-check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--azul-2); align-self: end; min-height: 42px; }
.dp-check input { width: 17px; height: 17px; accent-color: var(--verde-600); flex: none; }

.dp-add { display: grid; grid-template-columns: minmax(0, 1fr); gap: 13px; align-items: end; }
@media (min-width: 620px) { .dp-add { grid-template-columns: minmax(0, 1fr) auto; } }
.dp-add-actions { display: flex; gap: 9px; }

.dp-btn {
  min-height: 42px; padding: 9px 17px; font: inherit; font-size: 14px; font-weight: 600;
  border: 1px solid var(--borde); border-radius: 9px; background: var(--papel); color: var(--azul);
  cursor: pointer; white-space: nowrap;
}
.dp-btn:hover { border-color: var(--verde-600); color: var(--verde-600); }
.dp-btn-primary { background: var(--verde-600); border-color: var(--verde-600); color: #fff; }
.dp-btn-primary:hover { background: #1f6231; border-color: #1f6231; color: #fff; }
.dp-btn:disabled { opacity: .55; cursor: not-allowed; }
.dp-btn-pdf { border-color: var(--verde-600); color: var(--verde-600); }
.dp-btn-pdf:hover { background: #f1f8f2; }

.dp-ayuda {
  margin: 0; padding: 12px 15px; font-size: 13.5px; line-height: 1.5;
  border-left: 3px solid var(--verde-600); background: #f1f8f2;
  border-radius: 0 9px 9px 0; color: var(--azul-2);
}

/* ------------------------------------------------------------------ lista de adjuntos */
.dp-lista { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dp-item {
  display: grid; grid-template-columns: auto 54px minmax(0, 1fr) auto; gap: 11px; align-items: center;
  border: 1px solid var(--borde-2); border-radius: 10px; padding: 9px 11px; background: #fbfaf8;
}
.dp-item-num {
  width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center;
  background: var(--verde-600); color: #fff; font-size: 12px; font-weight: 700;
}
.dp-item-thumb { width: 54px; height: 42px; object-fit: cover; border-radius: 6px; border: 1px solid var(--borde); background: #fff; }
.dp-item-txt { min-width: 0; }
.dp-item-txt strong { display: block; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-item-txt small { color: var(--azul-3); font-size: 11.5px; }
.dp-item-acc { display: flex; gap: 4px; }
.dp-icon {
  width: 30px; height: 30px; border: 1px solid var(--borde); border-radius: 7px; background: var(--papel);
  color: var(--azul-2); font-size: 14px; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.dp-icon:hover { border-color: var(--verde-600); color: var(--verde-600); }
.dp-icon:disabled { opacity: .35; cursor: not-allowed; }
.dp-icon-del:hover { border-color: var(--rojo); color: var(--rojo); }
.dp-vacio { margin: 13px 0 0; font-size: 13px; color: var(--azul-3); }

.dp-actions { display: flex; gap: 11px; flex-wrap: wrap; }

/* ==================================================================
   EL DOCUMENTO
   ================================================================== */
.dp-preview-label { margin: 0 0 9px; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--azul-3); font-weight: 700; }

.doc {
  background: var(--papel); color: var(--doc-tinta);
  border: 1px solid var(--borde); border-radius: 3px;
  padding: 20mm 18mm 22mm; max-width: 210mm; margin: 0 auto;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 10.5pt; line-height: 1.5;
}

/* --------------------------------------------------- cabecera */
.doc-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  padding-bottom: 10px; border-bottom: 2px solid var(--oro);
}
.doc-logo { width: 200px; max-width: 46%; height: auto; }
.doc-head-meta { text-align: right; display: flex; flex-direction: column; gap: 3px; }
.doc-kicker {
  font-size: 8.5pt; letter-spacing: .18em; text-transform: uppercase;
  color: var(--verde-600); font-weight: 700;
}
.doc-fecha { font-size: 8.5pt; color: var(--doc-tinta-3); }

/* --------------------------------------------------- identidad del expediente */
.doc-hero { margin-top: 16px; }
.doc-hero-label {
  margin: 0 0 2px; font-size: 8pt; letter-spacing: .16em; text-transform: uppercase;
  color: var(--doc-tinta-3); font-weight: 700;
}
.doc-hero-nombre {
  margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 400;
  font-size: 22pt; line-height: 1.15; letter-spacing: -.01em; color: var(--doc-tinta);
}
.doc-hero-sub { margin: 5px 0 0; font-size: 10pt; color: var(--doc-tinta-2); }
.doc-hero-sub .doc-sep { color: var(--doc-linea); margin: 0 7px; }

/* --------------------------------------------------- secciones */
.doc-bloque { margin-top: 20px; }
.doc-sec {
  margin: 0 0 11px; font-size: 8.5pt; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; color: var(--doc-tinta-2);
  display: flex; align-items: center; gap: 11px;
}
/* La linea que sigue al titulo ordena la hoja sin agregar una caja mas. */
.doc-sec::after { content: ""; flex: 1; height: 1px; background: var(--doc-linea); }

/* --------------------------------------------------- ficha de datos */
.doc-datos {
  margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px 26px;
}
.doc-dato { min-width: 0; }
.doc-dato dt {
  font-size: 7.5pt; letter-spacing: .13em; text-transform: uppercase;
  color: var(--doc-tinta-3); font-weight: 700; margin-bottom: 1px;
}
.doc-dato dd { margin: 0; font-size: 10.5pt; color: var(--doc-tinta); word-break: break-word; }
.doc-dato dd.doc-vacio { color: #b3bcbf; }
/* Una nota en lugar de un numero -«no se emitio factura»- no es un dato mas: se distingue. */
.doc-dato dd.doc-nota { font-style: italic; color: var(--doc-tinta-2); font-size: 9.5pt; }
.doc-dato-ancho { grid-column: 1 / -1; }

/* --------------------------------------------------- adjuntos */
.doc-adjunto { margin-top: 16px; }
.doc-adjunto:first-child { margin-top: 0; }
.doc-adjunto-cab { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.doc-num {
  width: 20px; height: 20px; flex: none; border-radius: 3px;
  background: var(--verde-600); color: #fff;
  font-size: 8.5pt; font-weight: 700; display: grid; place-items: center;
}
.doc-adjunto-cab h3 {
  margin: 0; font-size: 9.5pt; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--doc-tinta);
}
.doc-marco {
  border: 1px solid var(--doc-linea); padding: 7px; background: #fff;
  display: flex; justify-content: center;
}
/* El tamaño depende de la forma del papel, no de un tope unico.
 *
 * Con un solo tope alto, una cedula -que es apaisada y chica- se estiraba hasta ocupar una hoja
 * entera para nada, y el expediente terminaba con una pagina por documento. Con un solo tope bajo,
 * un comprobante vertical quedaba tan angosto que no se leia.
 *
 * Se clasifica cada imagen al adjuntarla segun sea mas ancha que alta o al reves:
 *   - apaisada  ->  88 mm de alto. Una cedula queda en unos 13 cm de ancho, mas grande que la real,
 *                   y entran dos o tres por hoja.
 *   - vertical  -> 135 mm de alto. Suficiente para leer un comprobante, y todavia deja lugar para
 *                   otro documento apaisado debajo en la misma hoja.
 */
.doc-marco img { display: block; max-width: 100%; height: auto; max-height: 88mm; object-fit: contain; }
.doc-marco--vertical img { max-height: 135mm; }

.doc-placeholder {
  border: 1px dashed var(--doc-linea); color: var(--doc-tinta-3); text-align: center;
  padding: 26px 16px; font-size: 9.5pt; font-style: italic;
}

/* --------------------------------------------------- pie */
.doc-pie {
  margin-top: 22px; padding-top: 8px; border-top: 1px solid var(--doc-linea);
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 7.5pt; letter-spacing: .06em; color: var(--doc-tinta-3);
}
.doc-pie-marca { text-transform: uppercase; letter-spacing: .14em; }

/* En telefono la ficha a dos columnas queda apretada para revisar antes de imprimir.
   Acotado a `screen` a proposito: una A4 con estos margenes mide unos 680 px, de modo que un
   `max-width: 700px` sin acotar tambien se aplicaria al imprimir y partiria la ficha en una sola
   columna sobre el papel, que es justo lo que no se quiere. */
@media screen and (max-width: 700px) {
  .doc { padding: 12mm 10mm 14mm; }
  .doc-datos { grid-template-columns: minmax(0, 1fr); }
  .doc-hero-nombre { font-size: 18pt; }
}

/* ==================================================================
   IMPRESION
   ================================================================== */
@page { size: A4; margin: 15mm 14mm; }

@media print {
  html, body { background: #fff; }
  .no-print, .dp-form, .dp-top { display: none !important; }
  .dp-shell { display: block; max-width: none; margin: 0; padding: 0; }
  .dp-preview { position: static; }

  .doc {
    border: 0; border-radius: 0; padding: 0; max-width: none; margin: 0;
    font-size: 10pt;
  }

  /* Los fondos de color se imprimen: sin esto el numero de cada adjunto sale como un cuadro blanco
     con texto blanco, o sea invisible. */
  .doc-num, .doc-head { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Un adjunto no se parte entre dos hojas: media cedula arriba y media abajo no sirve como
     documentacion. Si no entra, arranca en la hoja siguiente. */
  .doc-adjunto, .doc-datos, .doc-hero { break-inside: avoid; page-break-inside: avoid; }
  .doc-adjunto-cab { break-after: avoid; page-break-after: avoid; }

  .doc-pie { break-inside: avoid; }
}