/* ===========================================================================
   Cáscara común de la aplicación.
   Este archivo es la fuente de verdad del aspecto: se carga DESPUÉS de
   style.css y redefine sus mismas variables, así que recolorea las pantallas
   que ya existían sin tener que reescribir ni una regla suya.

   Se unificó sobre la paleta de papel cálido de la pantalla de procesos, no
   sobre el azul de las otras: el #2563eb es el azul por defecto de cualquier
   plantilla, y la paleta cálida se diseñó a propósito para no parecerlo. El
   acento es un verde azulado profundo, institucional y sin ese tono.
   =========================================================================== */

:root {
  /* Papel y tinta */
  --bg: #f4f1ea;
  --card: #fffefb;
  --fill: #efebe1;
  --border: #ded7c9;
  --border-soft: #eae5da;

  --text: #1b1917;
  --text-2: #4a4440;
  --text-muted: #746c62;

  /* La tinta de los títulos: mantiene el peso del navy anterior pero tira
     al verde del acento, para que no convivan dos familias de color. */
  --navy: #16302c;
  --navy-light: #24463f;

  --accent: #0f5d57;
  --accent-dark: #0a443f;
  --accent-soft: #e2eeec;

  /* Estos se reservan para lo que exige una reacción: plazos y dinero. */
  --green: #1f5c3d;
  --red: #a3281e;
  --red-bg: #fbeae8;
  --warn: #8a5a12;
  --warn-bg: #fbf2e3;

  --radius: 8px;
  --radius-lg: 12px;
  --shadow: 0 1px 2px rgba(27, 25, 23, .05), 0 2px 6px rgba(27, 25, 23, .04);
  --shadow-lg: 0 12px 32px rgba(27, 25, 23, .14);
  --ring: 0 0 0 3px rgba(15, 93, 87, .14);
  --font: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "SF Mono", Consolas, monospace;
  --shell-h: 52px;
}

/* Base comun: misma tipografia, tamano y fondo en todas las pantallas. */
body {
  font-family: var(--font);
  font-size: 15.5px;
  line-height: 1.55;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Barra de navegación: idéntica en las cuatro pantallas, misma posición,
   mismo orden, mismas etiquetas. Es lo que hace que se lea como una sola
   aplicación y no como cuatro herramientas que comparten servidor.
   -------------------------------------------------------------------------- */
.app-shell {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(27, 25, 23, .04);
  /* La barra es un <header>, y la pantalla de procesos le da relleno a todo
     header: sin esto heredaba 13px arriba y quedaba mas alta que en las
     demas pantallas, con el salto visible al cambiar de pestaña. */
  padding: 0;
  margin: 0;
}

.app-shell-in {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 24px;
  min-height: var(--shell-h);
  display: flex;
  align-items: center;
  gap: 26px;
}

.app-marca {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  flex: none;
}
.app-marca:hover { color: var(--accent); }
.app-marca .mk {
  width: 18px; height: 18px; flex: none;
  border-radius: 4px;
  background: var(--accent);
  position: relative;
}
.app-marca .mk::after {
  content: "";
  position: absolute; left: 4px; top: 4px;
  width: 10px; height: 2px; border-radius: 1px;
  background: var(--card);
  box-shadow: 0 4px 0 var(--card), 0 8px 0 var(--card);
}

.app-nav {
  display: flex;
  align-items: stretch;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.app-nav::-webkit-scrollbar { display: none; }

.app-nav a {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  min-height: var(--shell-h);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .13s, border-color .13s;
}
.app-nav a:hover { color: var(--text); border-bottom-color: var(--border); }

/* La pantalla actual se marca con color Y con una regla inferior: solo con
   color no se distingue si no se perciben bien los colores. */
.app-nav a[aria-current="page"] {
  color: var(--accent);
  font-weight: 700;
  border-bottom-color: var(--accent);
}

.app-nav .marca-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--fill);
  color: var(--text-muted);
}
.app-nav .marca-n.urge { background: var(--red); color: #fff; }
.app-nav .marca-n[hidden] { display: none; }

.app-acciones {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  margin-left: auto;
}
/* Las acciones que sube cada pantalla no deben estirar la barra: sin esto,
   la de procesos quedaba 13px mas alta que las demas y el salto se notaba. */
.app-acciones > * { margin: 0 !important; }
.app-acciones .btn,
.app-acciones button,
.app-acciones a {
  padding: 4px 11px;
  font-size: 0.8rem;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .app-shell-in { padding: 0 14px; gap: 14px; }
  .app-marca span:not(.mk) { display: none; }
}

/* --------------------------------------------------------------------------
   Ajustes a las pantallas que ya existían, para que respiren igual
   -------------------------------------------------------------------------- */
.page { max-width: 1100px; padding-top: 26px; }
.page-header h1 { letter-spacing: -0.02em; font-size: 1.5rem; color: var(--text); }

/* El salto de ancla no puede quedar debajo de la barra fija. */
[id] { scroll-margin-top: calc(var(--shell-h) + 14px); }

/* Proceso al que se llegó desde otra pantalla: se resalta un momento para no
   obligar a buscarlo a ojo en una lista larga. */
@keyframes app-destaca {
  0%   { box-shadow: 0 0 0 3px var(--accent); }
  100% { box-shadow: 0 0 0 3px transparent; }
}
.app-destacado { animation: app-destaca 2.4s ease-out 1; }

/* Las acciones que cada pantalla sube a la barra se ven iguales en todas.
   Sin el selector con id, el boton Actualizar de procesos conservaba su
   tamano y esquinas propios y desentonaba junto a los de las otras pantallas. */
.app-acciones #refrescar,
.app-acciones .btn,
.app-acciones button,
.app-acciones a {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-2);
  line-height: 1.5;
}
.app-acciones #refrescar:hover:not(:disabled),
.app-acciones .btn:hover,
.app-acciones a:hover { border-color: var(--accent); color: var(--accent); }
.app-acciones .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.app-acciones .btn-primary:hover { background: var(--accent-dark); color: #fff; }

/* Red de seguridad: un boton creado sin clase (por ejemplo desde script)
   sale con el mismo aspecto que los demas, no con la caja gris del navegador. */
button:not([class]):not([id="submit-btn"]):not([id="refrescar"]) {
  padding: 8px 15px;
  border-radius: var(--radius);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.3;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-2);
}
button:not([class]):not([id="submit-btn"]):not([id="refrescar"]):hover { border-color: var(--text-muted); color: var(--text); }

/* Titulos de seccion dentro de una tarjeta: un solo tamano en todas las
   pantallas (antes cada una usaba el que traia el navegador o uno propio). */
.card h2 { font-size: 1.15rem; margin: 0 0 8px; color: var(--text); letter-spacing: -0.01em; }
.card > h2 + .hint, .card > h2 + p { margin-top: 0; }

/* Empresas plegables en Configuracion */
.empresa-bloque > div:first-child { justify-content: flex-start !important; }
.empresa-bloque > div:first-child h3 { flex: 1; }
.empresa-plegar {
  flex: none; width: 28px; height: 28px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--card); color: var(--text-2);
  font-size: 0.95rem; line-height: 1; cursor: pointer; padding: 0;
}
.empresa-plegar:hover { border-color: var(--accent); color: var(--accent); }
.empresa-bloque.plegada { padding-top: 12px; padding-bottom: 12px; }
.empresa-cuerpo { margin-top: 16px; }
.empresa-cuerpo[hidden] { display: none; }

/* Usuario en sesion y boton de salir, al extremo derecho de la barra */
.app-usuario {
  display: flex; align-items: center; gap: 10px; flex: none;
  padding-left: 14px; border-left: 1px solid var(--border);
  font-size: 0.82rem;
}
.app-usuario[hidden] { display: none; }
.app-usuario-nombre { color: var(--text-2); text-decoration: none; font-weight: 600; max-width: 160px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-usuario-nombre:hover { color: var(--accent); }
.app-salir {
  background: none; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 3px 10px; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); cursor: pointer;
}
.app-salir:hover { border-color: var(--red); color: var(--red); }
@media (max-width: 760px) { .app-usuario-nombre { display: none; } }

/* Usuarios: empresas asignadas */
.usu-empresas { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.usu-empresa { display: inline-flex; align-items: center; gap: 6px; font-size: 0.92rem; font-weight: 400; cursor: pointer; }
.usu-chips { display: flex; flex-wrap: wrap; gap: 4px; max-width: 260px; }
.usu-chip { background: var(--fill); border: 1px solid var(--border); border-radius: 999px; padding: 1px 9px; font-size: 0.8rem; color: var(--text); }
.usu-sin { font-size: 0.82rem; color: var(--warn); }
.usu-editor[hidden] { display: none; }
.usu-editor-caja { background: var(--fill); border: 1px solid var(--border); border-radius: var(--radius, 8px); padding: 14px 16px; margin: 4px 0 10px; }
.usu-editor-caja input[type=email] { max-width: 320px; }

/* Formularios firmados por empresa */
.form-cabecera { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.form-previa { background: var(--fill); border: 1px solid var(--border); border-radius: var(--radius, 8px); padding: 14px 16px; margin: 10px 0; }
.form-guia { margin-top: 10px; }
.form-guia summary { cursor: pointer; font-size: 0.9rem; color: var(--accent); }
.form-guia code { background: var(--fill); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; font-size: 0.85em; }

.form-galeria{display:flex;flex-wrap:wrap;gap:10px}
.form-img{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px;border:1px solid var(--border,#ddd);border-radius:8px;cursor:pointer;min-width:90px}
.form-img img{max-width:96px;max-height:96px}