/* ===========================================================================
   Asistente de Dictaminación Técnica · Circular ADIP 2020
   =========================================================================== */
:root {
  --guinda: #9f2241;        /* color institucional CDMX */
  --guinda-800: #7c1a33;
  --dorado: #b38e5d;
  --tinta: #1d2733;
  --tinta-600: #4a5568;
  --gris: #6b7280;
  --linea: #e2e6ea;
  --fondo: #f4f6f8;
  --panel: #ffffff;
  --ok: #1f8a52;
  --ok-bg: #e8f6ee;
  --alerta: #c0392b;
  --alerta-bg: #fbeceb;
  --aviso: #b7791f;
  --aviso-bg: #fdf6e3;
  --radio: 10px;
  --sombra: 0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04);
  --sombra-md: 0 4px 16px rgba(16,24,40,.10);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: var(--tinta);
  background: var(--fondo);
  line-height: 1.5;
}

/* ---------- Header ---------- */
.app-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 28px;
  background: linear-gradient(100deg, var(--guinda), var(--guinda-800));
  color: #fff; box-shadow: var(--sombra-md);
}
.brand { display: flex; align-items: center; gap: 14px; }
/* La barra de acciones fue creciendo (Solicitudes, Prompt IA, Exportar, Importar,
 * Reiniciar); sin flex explícito, en pantallas angostas el bloque se comprime junto
 * al logo y cada botón cae en su propia línea (encabezado gigante). Flex + wrap deja
 * que fluyan varios por renglón en vez de apilarse uno por uno. */
.header-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.brand-mark {
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 2px solid rgba(255,255,255,.7); border-radius: 8px;
  font-weight: 800; letter-spacing: .5px; font-size: 15px;
}
.brand-text h1 { font-size: 18px; margin: 0; font-weight: 700; }
.brand-text p { margin: 2px 0 0; font-size: 12.5px; opacity: .85; }

/* ---------- Stepper ---------- */
.stepper {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 14px 28px; background: var(--panel);
  border-bottom: 1px solid var(--linea);
}
.step-pill {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--gris);
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid transparent; white-space: nowrap;
  transition: background .15s, color .15s;
}
.step-pill:hover { background: #f0f1f4; }
.step-pill .dot {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: #e7eaee; color: var(--gris);
}
.step-pill.active { color: var(--guinda); font-weight: 700; }
.step-pill.active .dot { background: var(--guinda); color: #fff; }
.step-pill.done .dot { background: var(--ok); color: #fff; }
.step-pill.done .dot::after { content: "✓"; }
.step-pill.done .dot span { display: none; }

/* ---------- Layout ---------- */
.wrap { max-width: 900px; margin: 24px auto 60px; padding: 0 20px; }
.card {
  background: var(--panel); border: 1px solid var(--linea);
  border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 28px 30px;
}
.step-head { margin-bottom: 18px; }
.step-head h2 { margin: 0; font-size: 20px; color: var(--tinta); }
.step-head .sub { color: var(--gris); font-size: 13.5px; margin-top: 4px; }
.step-head .ref {
  display: inline-block; margin-top: 8px; font-size: 11.5px;
  color: var(--guinda); background: #faeef1; border: 1px solid #f0d8de;
  padding: 2px 9px; border-radius: 6px; font-weight: 600;
}

/* ---------- Form ---------- */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.grid .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.field label { font-size: 13px; font-weight: 600; color: var(--tinta-600); }
.field label .req { color: var(--alerta); }
.field .hint { font-size: 11.5px; color: var(--gris); }
input[type=text], input[type=email], input[type=tel], input[type=number],
input[type=date], select, textarea {
  font: inherit; font-size: 14px; color: var(--tinta);
  padding: 9px 11px; border: 1px solid #cdd4db; border-radius: 8px;
  background: #fff; width: 100%; transition: border .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--guinda);
  box-shadow: 0 0 0 3px rgba(159,34,65,.12);
}
textarea { resize: vertical; min-height: 84px; }
.field.invalid input, .field.invalid textarea, .field.invalid select { border-color: var(--alerta); }
.field .err { color: var(--alerta); font-size: 11.5px; display: none; }
.field.invalid .err { display: block; }

/* ---------- Cards de selección (modalidad / categoría / perspectiva) ---------- */
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.choice {
  border: 1.5px solid var(--linea); border-radius: 10px; padding: 16px 18px;
  cursor: pointer; background: #fff; transition: border .15s, box-shadow .15s, background .15s;
}
.choice:hover { border-color: var(--dorado); }
.choice.sel { border-color: var(--guinda); background: #fdf3f6; box-shadow: 0 0 0 3px rgba(159,34,65,.08); }
.choice h3 { margin: 0 0 4px; font-size: 15px; }
.choice p { margin: 0; font-size: 12.5px; color: var(--gris); }
.choice .meta { margin-top: 8px; font-size: 11.5px; color: var(--guinda); font-weight: 600; }

/* ---------- Tabla de bienes ---------- */
/* Son 6-7 columnas con <input> sin ancho fijo; su min-content suma más que el
 * viewport en móvil y desborda TODA la página (no solo la tabla) si no se le da
 * su propio scroll horizontal. display:block conserva la alineación interna de
 * columnas (thead/tbody/tr/td siguen siendo table-*) y solo el <table> scrollea. */
.tabla-bienes { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; border-collapse: collapse; margin-top: 6px; }
.tabla-bienes th, .tabla-bienes td { padding: 8px; border-bottom: 1px solid var(--linea); text-align: left; font-size: 13px; }
.tabla-bienes th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .3px; color: var(--gris); }
.tabla-bienes input { padding: 6px 8px; }
.tabla-bienes td.num input { text-align: right; }
.tabla-bienes .del { color: var(--alerta); cursor: pointer; background: none; border: none; font-size: 18px; line-height: 1; }
.total-row { text-align: right; font-weight: 700; margin-top: 10px; font-size: 15px; }

/* ---------- Checklist ---------- */
.checklist { list-style: none; padding: 0; margin: 8px 0 0; }
.checklist li {
  display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px;
  border: 1px solid var(--linea); border-radius: 8px; margin-bottom: 7px; background: #fff;
}
.checklist li label { font-size: 13px; cursor: pointer; }
.checklist li input { margin-top: 3px; }
.chk-group h4 { margin: 16px 0 6px; font-size: 13.5px; color: var(--guinda); }

/* ---------- Validación / prevención ---------- */
.callout { border-radius: 10px; padding: 14px 16px; margin: 6px 0 16px; font-size: 13.5px; border: 1px solid; }
.callout.ok { background: var(--ok-bg); border-color: #bfe6cf; color: #14603a; }
.callout.alerta { background: var(--alerta-bg); border-color: #f3c9c5; color: #8f2019; }
.callout.aviso { background: var(--aviso-bg); border-color: #f0e0b0; color: #7a5410; }
.callout h4 { margin: 0 0 6px; font-size: 14px; }
.callout ul { margin: 6px 0 0; padding-left: 20px; }
.callout li { margin: 3px 0; }

/* ---------- Botones ---------- */
.btn {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  padding: 10px 18px; border-radius: 8px; border: 1px solid transparent;
  transition: background .15s, box-shadow .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--guinda); color: #fff; }
.btn-primary:hover { background: var(--guinda-800); }
.btn-ghost { background: #fff; color: var(--tinta-600); border-color: #cdd4db; }
.btn-ghost:hover { background: #f3f4f6; }
.btn-sm { padding: 6px 12px; font-size: 12.5px; }
.nav-buttons { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; }
.nav-status { font-size: 12px; color: var(--gris); }
.btn-add { margin-top: 8px; }

/* ---------- Footer ---------- */
.app-footer { text-align: center; padding: 18px; font-size: 12px; color: var(--gris); }
.app-footer .mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; color: var(--guinda); }
.mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }

/* ===========================================================================
   DOCUMENTO OFICIAL (vista previa + impresión a PDF)
   =========================================================================== */
.documento {
  background: #fff; max-width: 820px; margin: 20px auto; padding: 60px 64px;
  border: 1px solid var(--linea); border-radius: 6px; box-shadow: var(--sombra-md);
  color: #111; font-family: "Times New Roman", Georgia, serif; font-size: 12.5pt;
  /* Emula una hoja carta (más ancha que un celular); sin esto, sus tablas
     internas (montos, encabezados largos) empujan TODA la página a scrollear
     horizontalmente en vez de solo esta vista previa. */
  overflow-x: auto;
}
.doc-actions { display: flex; gap: 10px; justify-content: center; margin: 18px 0 4px; }
.doc-membrete { text-align: center; border-bottom: 2px solid var(--guinda); padding-bottom: 12px; margin-bottom: 22px; }
.doc-membrete .ent { font-size: 10.5pt; letter-spacing: .5px; color: #333; text-transform: uppercase; }
.doc-membrete .dep { font-weight: 700; font-size: 12pt; margin-top: 3px; }
.doc-folio { text-align: right; font-size: 10.5pt; color: #444; margin-bottom: 18px; }
.doc-titulo { text-align: center; font-weight: 700; font-size: 13pt; text-transform: uppercase; margin: 8px 0 22px; }
.documento h3 { font-size: 11.5pt; border-bottom: 1px solid #ccc; padding-bottom: 3px; margin: 22px 0 10px; }
.documento p { text-align: justify; margin: 8px 0; }
.documento table.dt { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 11pt; }
.documento table.dt th, .documento table.dt td { border: 1px solid #999; padding: 6px 8px; text-align: left; }
.documento table.dt th { background: #f0eef0; }
.doc-kv { margin: 4px 0; }
.doc-kv b { display: inline-block; min-width: 190px; }
.doc-firma { margin-top: 60px; text-align: center; }
.doc-firma .linea { border-top: 1px solid #333; width: 320px; margin: 0 auto 4px; }
.doc-sello { margin-top: 30px; font-size: 9.5pt; color: #666; text-align: center; }
.doc-lista { margin: 6px 0; padding-left: 22px; }
.doc-lista li { margin: 3px 0; }
.documento table.dt th[colspan] { background: #e6e2e6; }
.documento table.dt tr > th:first-child:not([colspan]) { background: #6b6b6b; color: #fff; width: 26%; font-weight: 600; }
.doc-formato-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #bbb; padding-bottom: 8px; margin-bottom: 14px; }
.doc-formato-head .ent { font-size: 9.5pt; letter-spacing: .4px; color: #333; }
.page-break { page-break-before: always; break-before: page; height: 0; }
.documento .page-break + * { margin-top: 20px; }

/* ---------- Modal (Prompt IA) ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(16, 24, 40, .55);
  display: grid; place-items: center; padding: 20px;
}
/* El display:grid de arriba le ganaría al atributo hidden; esta regla restaura el cierre */
.modal-overlay[hidden] { display: none; }
.modal {
  background: #fff; border-radius: 12px; box-shadow: var(--sombra-md);
  width: min(780px, 100%); max-height: 88vh;
  display: flex; flex-direction: column; padding: 20px 22px;
  overflow-y: auto; /* el contenido (modos + prompt + pegar respuesta) puede exceder 88vh */
}
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modal-head h2 { margin: 0; font-size: 18px; color: var(--guinda); }
.modal-sub { font-size: 12.5px; color: var(--gris); margin: 8px 0 12px; }
.modal textarea {
  flex: 1; min-height: 300px; resize: vertical; width: 100%;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12px;
  line-height: 1.45; padding: 12px; border: 1px solid #cdd4db; border-radius: 8px;
  background: #fafbfc; color: var(--tinta);
}
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; }
.btn-ia { border-color: var(--dorado); color: var(--guinda); font-weight: 700; }
.btn-ia:hover { background: #fdf6ec; }

@media (max-width: 720px) {
  .grid, .choice-grid { grid-template-columns: 1fr; }
  .doc-kv b { min-width: 130px; }
  .documento { padding: 30px 22px; }
  /* El logo/título ocupa casi todo el ancho angosto; bajamos las acciones a su
     propio renglón de ancho completo para que fluyan 2-3 por fila en vez de
     apilarse una por una y triplicar la altura del encabezado. */
  .app-header { flex-wrap: wrap; row-gap: 10px; }
  .header-actions { width: 100%; justify-content: flex-start; }
}

/* ---------- Impresión ---------- */
@media print {
  body { background: #fff; }
  .no-print { display: none !important; }
  .documento { box-shadow: none; border: none; margin: 0; padding: 0; max-width: 100%; overflow-x: visible; }
  .doc-actions { display: none; }
  @page { size: letter; margin: 2.2cm 2.2cm; }
}

/* Respaldo (mejora 1.4): el botón Exportar "late" cuando hay captura con cambios
   sin exportar y el último respaldo .json es viejo o no existe. */
.btn-respaldo {
  border-color: #e8a013 !important;
  color: #8a5a00 !important;
  animation: pulso-respaldo 2s ease-out infinite;
}
@keyframes pulso-respaldo {
  0%   { box-shadow: 0 0 0 0 rgba(232, 160, 19, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(232, 160, 19, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 160, 19, 0); }
}