@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");
@import url("iconos.css");

/* -------------------------------------------------------------------------
   aXusta · base visual compartida
   Tokens, tipografía, controles y accesibilidad usados en todas las páginas.
   Los estilos propios de cada pantalla viven en su hoja correspondiente.
   ------------------------------------------------------------------------- */

:root {
  --tinta: #1e2a3a;
  --suave: #657180;
  --linea: #e1e4e8;
  --fondo: #f5f6f7;
  --panel: #ffffff;
  --acento: #1e2a3a;
  --acento-oscuro: #15202e;
  --peligro: #a11;
  --radio: 7px;
  --sombra: 0 1px 4px rgb(30 42 58 / 10%);
}

/* Restablecimiento mínimo: facilita que todas las pantallas partan igual. */
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--tinta);
  background: var(--fondo);
  font: 14px/1.5 "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Controles nativos con una apariencia consistente. */
button, input, select { font: inherit; }
button { color: var(--tinta); cursor: pointer; }
button:disabled { cursor: default; }

/* El logotipo siempre es una vía de vuelta a Proyectos. */
.logo-portada { display:inline-flex; align-items:center; gap:8px; color:inherit; text-decoration:none; }
.logo-axusta { display:block; width:auto; height:26px; }
.monograma-axusta { display:block; flex:none; width:24px; height:24px; }

/* Botones de acción compartidos por Inicio, la ficha de proyecto y las
   páginas que vengan: normal, primario y la variante compacta de lista.
   Cada hoja puede ajustar solo el tamaño (Inicio los lleva algo mayores). */
.boton, .primario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--tinta);
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  text-decoration: none;
  cursor: pointer;
}
.boton:hover { background: var(--fondo); border-color: #c9d0d8; }
.primario { color: #fff; background: var(--acento); border-color: var(--acento); }
.primario:hover { background: var(--acento-oscuro); }
.boton.compacto { min-height: 0; padding: 4px 10px; font-size: 12px; }

/* Estado de venta del proyecto — pipeline diseño → presupuestado → aceptado
   → fabricación → entregado (es del negocio, no de construcción). Mismos
   pares texto/fondo en todo el site; el margen lo pone cada página. */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 20px;
}
.chip.fase-diseno { color: var(--suave); background: var(--fondo); }
.chip.fase-presupuestado { color: #8a6d1a; background: #fdf4dc; }
.chip.fase-aceptado { color: #1e6b3a; background: #e4f5ea; }
.chip.fase-fabricacion { color: #1d5fa8; background: #dbe9f7; }
.chip.fase-entregado { color: #fff; background: var(--acento); }

input, select, button { accent-color: var(--acento); }
/* Ninguna casilla numérica lleva las flechitas de más/menos, en ninguna
   página: una medida se teclea y se pulsa Intro, nunca se sube de una en una
   (dictado del usuario, 2026-08-07). Va aquí y no en cada hoja para que
   cualquier campo nuevo salga bien de serie. */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* Texto de estado vacío reutilizable en catálogo y paneles. */
.vacio-msg { padding: 30px 0; color: var(--suave); font-size: 13px; text-align: center; }

/* Diálogos propios de la página. El navegador aporta el foco atrapado, el
   cierre con Escape y el backdrop; la caja visible y sus controles son de
   aXusta, también en páginas que no tienen la hoja del diseñador. */
.dialogo-utilidad {
  position: fixed;
  inset: 0;
  width: fit-content;
  height: fit-content;
  max-width: none;
  max-height: calc(100vh - 32px);
  margin: auto;
  padding: 0;
  color: var(--tinta);
  background: transparent;
  border: 0;
}
.dialogo-utilidad::backdrop { background: rgb(30 42 58 / 34%); }
.dialogo-utilidad-caja {
  width: min(340px, calc(100vw - 48px));
  margin: 0;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: 10px;
  box-shadow: 0 14px 42px rgb(30 42 58 / 22%);
}
.dialogo-utilidad-ceja {
  display: block;
  margin-bottom: 6px;
  color: var(--acento);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.dialogo-utilidad-titulo {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.25;
}
.dialogo-utilidad-texto {
  margin: 0 0 16px;
  color: var(--suave);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-line;
}
.dialogo-utilidad-campo {
  display: block;
  margin: 0 0 16px;
  color: var(--suave);
  font-size: 12px;
}
.dialogo-utilidad-campo span { display: block; margin-bottom: 5px; }
.dialogo-utilidad-campo textarea {
  display: block;
  width: 100%;
  min-height: 30px;
  padding: 8px 9px;
  resize: vertical;
  color: var(--tinta);
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: 6px;
  font: inherit;
  font-size: 12px;
  line-height: 1.45;
}
.dialogo-utilidad-campo textarea:focus { outline: none; border-color: var(--acento); }
.dialogo-utilidad-campo textarea.dialogo-utilidad-entrada--corta { resize: none; }
.dialogo-utilidad-acciones { display: flex; justify-content: flex-end; gap: 8px; }
.dialogo-utilidad-acciones button {
  min-height: 32px;
  padding: 6px 13px;
  color: var(--suave);
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: 6px;
  font-size: 12px;
}
.dialogo-utilidad-acciones button:hover { color: var(--tinta); background: var(--fondo); }
.dialogo-utilidad-confirmar { color: #fff !important; background: var(--acento) !important; border-color: var(--acento) !important; }
.dialogo-utilidad-confirmar:hover { background: var(--acento-oscuro) !important; }
.dialogo-utilidad--peligro .dialogo-utilidad-confirmar { background: var(--peligro) !important; border-color: var(--peligro) !important; }
.dialogo-utilidad--peligro .dialogo-utilidad-confirmar:hover { opacity: .88; }

@media (max-width: 600px) {
  .dialogo-utilidad { width: calc(100vw - 24px); }
  .dialogo-utilidad-caja { width: 100%; }
}