/* ---- Paleta de color — mismo sistema de tokens que gruas/JASO, colores de Alai ----
   Verdes extraídos del logo real (alaiextrusion-logo.svg): #7ACC00 (vivo, solo acentos
   puntuales) / #0C6835 (acento principal, buen contraste con blanco) / #025F1D (hover). */
:root{
  --bg:#ffffff; --panel:#f6f8f6; --panel-2:#eef4ec; --line:#dde4dc;
  --ink:#1c2620; --muted:#66766c; --accent:#0c6835; --accent-2:#025f1d; --accent-bright:#7acc00;
  --ok:#2f9e44; --bad:#e2231a;
}
*{box-sizing:border-box}
/* El atributo hidden debe ganar siempre, aunque el elemento tenga su propio
   display:flex por clase o id (si no, [hidden] pierde el empate de especificidad). */
[hidden]{ display:none !important; }
html, body{ height:100%; }
body{
  margin:0;
  display:flex;
  flex-direction:column;
  font-family:"Inter",system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
}

/* Cabecera de dos filas: la fila principal es fija (marca, navegación entre
   secciones, usuario) y la fila contextual está supeditada a ella — cambia según
   qué sección esté activa (herramientas del configurador, buscador de clientes...). */
#topbar{ flex:0 0 auto; }
#fila-principal{
  display:flex;
  align-items:center;
  gap:1.1rem;
  flex-wrap:wrap;
  padding:0.6rem 1rem;
  background:var(--panel);
  border-bottom:1px solid var(--line);
}
#brand{
  font-weight:650;
  font-size:15px;
  display:flex;
  align-items:center;
  gap:8px;
  margin-right:auto;
}
#brand-logo{ height:26px; width:auto; display:block; }
#brand .kick{
  font-family:"Space Mono",monospace;
  font-size:9.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:400;
}
#nav-secciones{ display:flex; gap:0.4rem; }
.tab{
  position:relative;
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid transparent; background:none; color:var(--muted);
  font-family:inherit; font-size:0.85rem; font-weight:600;
  padding:0.45rem 0.9rem; border-radius:8px; cursor:pointer;
  transition:color .12s, background .12s;
}
.tab i{ color:var(--muted); transition:color .12s; }
.tab:hover{ background:var(--panel-2); color:var(--ink); }
/* Selección marcada con una línea que se "dibuja" de izquierda a derecha (scaleX con
   origen a la izquierda), en vez de rellenar la pestaña de color — al desactivarse,
   la misma transición la recoge hacia la izquierda. */
.tab::after{
  content:'';
  position:absolute;
  left:0.9rem; right:0.9rem; bottom:1px;
  height:2px;
  background:var(--accent);
  border-radius:2px;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s ease;
}
.tab.activo{ color:var(--accent); }
.tab.activo i{ color:var(--accent); }
.tab.activo::after{ transform:scaleX(1); }

#fila-contextual{
  padding:0.5rem 1rem;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
#fila-contextual .ctx{ display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; }
#topbar label{ font-size:0.82rem; display:flex; align-items:center; gap:0.35rem; color:var(--ink); }
#topbar label .u{ font-family:"Space Mono",monospace; font-size:10px; color:var(--muted); }
#topbar input, #topbar select{
  font-family:inherit;
  font-size:0.82rem;
  border:1px solid var(--line);
  border-radius:7px;
  padding:5px 8px;
  background:#fff;
  color:var(--ink);
}
#topbar input:focus, #topbar select:focus{ outline:none; border-color:var(--accent); }

.btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--ink);
  font-family:inherit;
  font-size:0.82rem;
  padding:0.4rem 0.8rem;
  border-radius:8px;
  cursor:pointer;
  transition:.12s;
}
.btn i{ color:var(--accent); }
/* Botón solo-icono (lápiz/mano/curva): cuadrado y compacto */
.btn.icono{ padding:0.4rem; width:34px; justify-content:center; }
.btn.icono i{ margin:0; }
.btn.boceto-op{ gap:6px; padding:0.4rem 0.6rem; cursor:default; }
.btn.boceto-op input[type=range]{ width:72px; }
.btn.boceto-op input[type=number]{ width:46px; border:1px solid #d7dae0; border-radius:5px; padding:2px 4px; font:inherit; }
.btn.boceto-op .k-lbl{ font-style:italic; font-weight:600; }
.btn:hover{ border-color:#c2c6cd; background:var(--panel-2); }
.btn:disabled{ opacity:0.5; cursor:not-allowed; pointer-events:none; }
.btn.primary{ background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600; }
.btn.primary i{ color:#fff; }
.btn.primary:hover{ background:var(--accent-2); border-color:var(--accent-2); }
.btn.activo{ background:var(--accent); color:#fff; border-color:var(--accent); }
.btn.activo i{ color:#fff; }

/* #main aloja las 4 secciones (Configurador/Presupuestos/Clientes/Usuarios); solo
   una está visible a la vez ([hidden] la saca del flujo), y esa es la que ocupa
   todo el espacio restante bajo la cabecera de dos filas. */
#main{ flex:1; min-height:0; display:flex; }
.seccion{ flex:1; min-height:0; }
.seccion.pagina{ padding:1.3rem 1.6rem; overflow:auto; background:#fff; }

/* Dentro del Configurador: panel de edición (el "menú de la izquierda") fijo, el 3D
   se lleva TODO el resto del ancho (el panel de costes flota encima, no le quita sitio). */
#seccion-configurador{
  display:flex;
  height:100%;
  background:var(--line);
  gap:1px;
}
#panel-editor{
  flex:0 0 380px;
  width:380px;
  background:#fff;
  padding:0.9rem 1rem;
  overflow:auto;
}
#panel-3d{
  flex:1;
  position:relative;
  background:var(--panel);
  overflow:hidden;
}

/* Botón "Intercambiar paneles": intercambia SOLO las dos ventanitas (lienzo 2D ↔ visor 3D)
   entre el hueco grande (panel-3d, a la derecha) y el pequeño (dentro de la columna
   izquierda, donde va el lienzo). El resto de la columna izquierda no se mueve. Cada
   ventana ocupa el hueco donde caiga: absoluta rellenando el grande, o en bloque en el pequeño. */
#viewport-3d, #editor-canvas-wrap{ position:relative; }
#panel-3d > #viewport-3d, #panel-3d > #editor-canvas-wrap{ position:absolute; inset:0; }
#panel-editor #viewport-3d, #panel-editor #editor-canvas-wrap{ position:relative; width:100%; height:300px; margin-bottom:0.6rem; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
#main h2{
  font-size:0.8rem;
  margin:1rem 0 0.6rem;
  color:var(--muted);
  font-weight:600;
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  row-gap:2px;
  gap:8px;
  text-transform:uppercase;
  letter-spacing:.04em;
}
#main h2:first-child{ margin-top:0; }
#main h2 i{ color:var(--accent); font-size:0.85rem; align-self:center; }
#main h2 small{
  flex-basis:100%;
  font-family:"Space Mono",monospace;
  font-size:9.5px;
  letter-spacing:0;
  text-transform:none;
  color:var(--muted);
  font-weight:400;
}
.step{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px; height:16px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  font-family:"Space Mono",monospace;
  font-size:10px;
  font-weight:700;
}

/* El lienzo 2D rellena su ventana (igual que el visor 3D rellena la suya) y sus
   herramientas se superponen en las esquinas, como los controles del 3D — así al
   intercambiar las ventanas ambas se ven igual. */
#editor-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  cursor:crosshair;
  background:var(--panel);
  display:block;
}
#editor-controls, #editor-controls-boceto{ position:absolute; z-index:5; display:flex; gap:6px; }
#editor-controls{ top:10px; left:10px; }
/* Abajo-izquierda: no choca con la tarjeta de coste flotante (arriba-derecha) al pasar al hueco grande. */
#editor-controls-boceto{ bottom:10px; left:10px; }
#editor-controls .btn, #editor-controls-boceto .btn{ background:rgba(255,255,255,0.9); }
#editor-controls .btn.activo{ background:var(--accent); color:#fff; border-color:var(--accent); }
#editor-controls .btn.activo i{ color:#fff; }
#editor-controls-boceto .btn.boceto-op input[type=range]{ width:60px; }
/* Icono "quitar boceto": la imagen con una raya diagonal encima (mismo tamaño superpuesto). */
.ico-boceto-off{ position:relative; display:inline-block; line-height:1; }
.ico-boceto-off .fa-slash{ position:absolute; left:0; top:0; color:var(--bad); }

#mecanizados-form{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  align-items:center;
  font-size:0.82rem;
  margin-bottom:0.6rem;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:9px;
  padding:0.6rem 0.7rem;
}
#mecanizados-form label{ display:flex; align-items:center; gap:0.35rem; color:var(--muted); font-size:0.78rem; }
#mecanizados-form input, #mecanizados-form select{
  font-family:inherit;
  font-size:0.82rem;
  border:1px solid var(--line);
  border-radius:7px;
  padding:5px 8px;
  background:#fff;
}
#mecanizados-lista{ list-style:none; margin:0; padding:0; font-size:0.82rem; }
#mecanizados-lista li{
  display:flex;
  align-items:center;
  gap:0.6rem;
  padding:0.5rem 0.6rem;
  border:1px solid var(--line);
  border-radius:8px;
  margin-bottom:6px;
  background:#fff;
}
#mecanizados-lista li:hover{ border-color:var(--accent); }
#mecanizados-lista button{
  margin-left:auto;
  background:none;
  border:1px solid var(--bad);
  color:var(--bad);
  border-radius:6px;
  padding:0.15rem 0.6rem;
  cursor:pointer;
  font-size:0.75rem;
}

#stage-3d{ position:absolute; inset:0; }
#stage-3d canvas{ width:100% !important; height:100% !important; display:block; }

/* Tarjeta flotante de coste, sobre el 3D — mismo patrón que .card #calc en gruas */
.card{
  position:absolute;
  top:18px; right:18px;
  background:rgba(255,255,255,.9);
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px 16px;
  backdrop-filter:blur(6px);
  box-shadow:0 4px 16px rgba(20,24,32,.08);
  min-width:200px;
}

/* Menú contextual de tramo (botón derecho sobre el 3D) — misma tarjeta, posición fija
   siguiendo al cursor en vez de anclada a una esquina. */
.menu-segmento{
  position:fixed;
  top:auto; right:auto;
  z-index:100;
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:0.8rem;
}
.menu-segmento h2{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin:-12px -16px 4px; padding:8px 10px 8px 12px;
  background:var(--panel-2); border-radius:10px 10px 0 0;
  font-size:0.78rem; color:var(--muted); font-weight:600;
  text-transform:uppercase; letter-spacing:.04em;
}
.menu-segmento label{ display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--muted); }
.menu-segmento input, .menu-segmento select{
  font-family:inherit;
  font-size:0.8rem;
  border:1px solid var(--line);
  border-radius:6px;
  padding:3px 6px;
}
.menu-segmento input[type=color]{ padding:1px 3px; width:44px; }
.menu-segmento input[type=range]{ width:120px; padding:0; }
.menu-segmento .btn{ justify-content:center; margin-top:2px; }
.menu-segmento .menu-cuerpo{ display:flex; flex-direction:column; gap:8px; }

/* Controles flotantes sobre el visor 3D (toggle de cotas) */
#stage-controls{ position:absolute; top:10px; left:10px; z-index:5; display:flex; gap:6px; }
#stage-controls .btn{ background:rgba(255,255,255,0.9); font-size:0.78rem; padding:5px 10px; }
#stage-controls .btn.activo{ background:var(--accent); color:#fff; border-color:var(--accent); }
#stage-controls .btn.activo i{ color:#fff; }

/* Cotas vivas en 3D (etiquetas CSS2D superpuestas al modelo) */
.cota-3d{
  font-family:"Space Mono",monospace; font-size:11px; font-weight:700;
  padding:1px 6px; border-radius:6px; white-space:nowrap;
  border:1px solid rgba(0,0,0,0.1); user-select:none;
}
.cota-tramo{ background:rgba(255,255,255,0.9); color:#1f2937; }
.cota-longitud{ background:var(--accent); color:#fff; border-color:var(--accent-2); }

/* ---- Acceso de usuarios (login, badge, gestión) ---- */
#login-overlay{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink);
}
#login-form{
  position:static;
  display:flex; flex-direction:column; gap:12px;
  width:280px; padding:28px 26px;
}
#login-logo{ height:34px; width:auto; margin:0 auto 10px; }
#login-form label{ display:flex; flex-direction:column; gap:4px; font-size:0.82rem; color:var(--muted); }
#login-form input{
  font-family:inherit; font-size:0.9rem;
  border:1px solid var(--line); border-radius:7px;
  padding:7px 9px;
}
#login-form input:focus{ outline:none; border-color:var(--accent); }
#login-error{ color:var(--bad); font-size:0.8rem; margin:0; }

#usuario-badge{ display:flex; align-items:center; gap:8px; font-size:0.82rem; }
#usuario-nombre{ color:var(--muted); }

.btn-cerrar{
  margin-left:auto; border:none; background:none; cursor:pointer;
  font-size:1.1rem; line-height:1; color:var(--muted); padding:0 2px;
}
.btn-cerrar:hover{ color:var(--bad); }
.buscador{
  width:100%; margin-bottom:0.8rem; font-family:inherit; font-size:0.85rem;
  border:1px solid var(--line); border-radius:8px; padding:7px 10px;
}
.buscador:focus{ outline:none; border-color:var(--accent); }
.tabla-datos{ width:100%; border-collapse:collapse; font-size:0.85rem; margin-bottom:1rem; }
.tabla-datos th{ text-align:left; color:var(--muted); font-size:0.75rem; text-transform:uppercase; padding:4px 8px; }
.tabla-datos td{ padding:6px 8px; border-top:1px solid var(--line); }
.tabla-datos button{
  background:none; border:1px solid var(--line); color:var(--muted);
  border-radius:6px; padding:2px 8px; cursor:pointer; font-size:0.75rem; margin-right:4px;
}
.tabla-datos button:hover{ border-color:var(--accent); color:var(--accent); }
.tabla-datos button[data-id]{ border-color:var(--bad); color:var(--bad); margin-right:0; }
.tabla-datos button[data-id]:hover{ background:var(--bad); color:#fff; }
.form-crud h3{ font-size:0.8rem; color:var(--muted); text-transform:uppercase; margin:0 0 0.6rem; }
.error-inline{ color:var(--bad); font-size:0.8rem; margin:0.5rem 0 0; }
.form-crud .fila{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.form-crud input, .form-crud select, .form-crud textarea{
  font-family:inherit; font-size:0.85rem;
  border:1px solid var(--line); border-radius:7px; padding:6px 9px;
}
.form-crud textarea{ width:100%; margin-top:8px; resize:vertical; min-height:2.4em; }

/* ---- Normativa y uso (preguntas, avisos/alarmas, memoria) ---- */
#normativa-form{
  display:flex; flex-wrap:wrap; gap:0.5rem; align-items:center;
  font-size:0.82rem; margin-bottom:0.6rem;
  background:var(--panel); border:1px solid var(--line); border-radius:9px;
  padding:0.6rem 0.7rem;
}
#normativa-form label{ display:flex; align-items:center; gap:0.35rem; color:var(--muted); font-size:0.78rem; }
#normativa-form input, #normativa-form select{
  font-family:inherit; font-size:0.82rem;
  border:1px solid var(--line); border-radius:7px; padding:5px 8px; background:#fff;
}
#normativa-form input{ width:70px; }
#norma-resumen{ color:var(--bad); }
#normativa-lista{ list-style:none; margin:0 0 0.6rem; padding:0; font-size:0.8rem; }
.norma-item{
  display:flex; gap:0.55rem; align-items:baseline;
  padding:0.45rem 0.6rem; border:1px solid var(--line); border-left-width:3px;
  border-radius:8px; margin-bottom:5px; background:#fff;
}
.norma-item i{ font-size:0.85rem; }
.norma-item.alarma{ border-left-color:var(--bad); }
.norma-item.alarma i{ color:var(--bad); }
.norma-item.aviso{ border-left-color:#e8a000; }
.norma-item.aviso i{ color:#e8a000; }
.norma-item.info{ border-left-color:var(--muted); }
.norma-item.info i{ color:var(--muted); }
.norma-item.ok{ border-left-color:var(--ok); }
.norma-item.ok i{ color:var(--ok); }
#normativa-acciones{ display:flex; gap:0.5rem; flex-wrap:wrap; }

/* Ventana flotante de la memoria descriptiva */
#modal-memoria{
  position:fixed; top:70px; left:50%; transform:translateX(-50%);
  z-index:150; width:min(760px, 92vw); max-height:82vh; overflow:auto;
  background:#fff;
}
#modal-memoria h2{
  display:flex; align-items:center; gap:8px;
  font-size:0.8rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em;
  margin:0 0 0.6rem;
}
#modal-memoria h2 i{ color:var(--accent); }
#memoria-contenido{ font-size:0.85rem; line-height:1.5; }
#memoria-contenido h3{ margin:0.2rem 0 0.2rem; font-size:1rem; }
#memoria-contenido h4{
  margin:1rem 0 0.4rem; font-size:0.78rem; color:var(--accent);
  text-transform:uppercase; letter-spacing:.05em;
}
#memoria-contenido table{ width:100%; border-collapse:collapse; font-size:0.82rem; }
#memoria-contenido th{ text-align:left; color:var(--muted); font-size:0.72rem; text-transform:uppercase; padding:3px 8px; }
#memoria-contenido td{ padding:4px 8px; border-top:1px solid var(--line); }
#memoria-contenido ul{ margin:0.2rem 0; padding-left:1.2rem; }
#memoria-contenido li{ margin-bottom:0.45rem; }
.memoria-meta{ font-family:"Space Mono",monospace; font-size:10px; color:var(--muted); }
.memoria-alarma{ color:var(--bad); }

#costes-out{ font-size:0.85rem; }
#costes-out dt{
  font-family:"Space Mono",monospace;
  font-size:9.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:0.9rem;
}
#costes-out dd{
  margin:2px 0 0;
  font-family:"Space Mono",monospace;
  font-size:1.2rem;
  font-weight:700;
  color:var(--accent);
}

/* ===================== Presupuestos: estados, embudo, ficha, diálogo ===================== */

/* Variantes de botón para las acciones de estado */
.btn.ok{ border-color:var(--ok); color:var(--ok); }
.btn.ok:hover{ background:var(--ok); color:#fff; }
.btn.peligro{ border-color:var(--bad); color:var(--bad); }
.btn.peligro:hover{ background:var(--bad); color:#fff; }

/* Chips de estado (listado y ficha) */
.chip{
  display:inline-block; font-size:0.7rem; font-weight:600; padding:2px 9px; border-radius:999px;
  text-transform:uppercase; letter-spacing:.03em; border:1px solid transparent;
}
.e-borrador{ background:#eef4ec; color:#66766c; border-color:var(--line); }
.e-enviado{ background:#e7f0fb; color:#1c5fb0; border-color:#c6dbf5; }
.e-aceptado{ background:#e6f6ec; color:#1e7e40; border-color:#bfe6cd; }
.e-rechazado{ background:#fdeceb; color:#c0221a; border-color:#f4c9c6; }
.e-caducado{ background:#fbf2e5; color:#a5701a; border-color:#efd9b4; }
.e-sustituido{ background:#f0eef4; color:#6b5e8a; border-color:#dcd5e8; }

.mono{ font-family:"Space Mono",monospace; }
.tabla-datos td.centro{ text-align:center; }
.tabla-datos td.der{ text-align:right; }
.tabla-datos tr[data-abrir]{ cursor:pointer; }
.tabla-datos tr[data-abrir]:hover{ background:var(--panel-2); }
.tabla-datos tr.fila-activa{ background:var(--panel-2); box-shadow:inset 3px 0 0 var(--accent); }

/* Embudo comercial (resumen por estado) */
#presupuestos-resumen{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:1rem; align-items:stretch; }
.embudo-chip{
  display:flex; flex-direction:column; gap:1px; min-width:104px;
  padding:8px 12px; border-radius:10px; border:1px solid var(--line); background:var(--panel);
}
.embudo-chip .n{ font-size:1.5rem; font-weight:700; line-height:1; }
.embudo-chip .et{ font-size:0.7rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.embudo-chip .suma{ font-family:"Space Mono",monospace; font-size:0.72rem; color:var(--muted); }
.embudo-chip.e-enviado{ border-color:#c6dbf5; }
.embudo-chip.e-aceptado{ border-color:#bfe6cd; }
.embudo-chip.e-rechazado{ border-color:#f4c9c6; }
.embudo-chip.e-caducado{ border-color:#efd9b4; }
.embudo-aviso{
  display:flex; align-items:center; gap:8px; padding:8px 14px; border-radius:10px;
  background:#fbf2e5; color:#a5701a; border:1px solid #efd9b4; font-size:0.82rem; align-self:center;
}

/* Ficha de detalle del presupuesto */
.ficha{
  border:1px solid var(--line); border-radius:12px; background:var(--panel);
  padding:1rem 1.2rem; margin-top:0.5rem;
}
.ficha-cab{ display:flex; align-items:center; gap:10px; }
.ficha-cab .grande{ font-size:1.1rem; font-weight:700; }
.ficha-cab .rev{ font-size:0.78rem; color:var(--muted); }
.ficha-cab .btn-cerrar{ margin-left:auto; }
.ficha-titulo{ margin:0.4rem 0 0.8rem; font-size:1.1rem; }
.ficha-datos{ display:flex; flex-wrap:wrap; gap:1.2rem; margin-bottom:0.9rem; }
.ficha-datos > div{ display:flex; flex-direction:column; }
.ficha-datos span{ font-size:0.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.ficha-datos strong{ font-size:0.9rem; }
.ficha-precio{
  display:flex; flex-wrap:wrap; gap:1.5rem; align-items:baseline;
  padding:0.7rem 0.9rem; background:var(--panel-2); border-radius:9px; margin-bottom:0.9rem;
}
.ficha-precio span{ font-size:0.82rem; color:var(--muted); }
.ficha-precio .total{ margin-left:auto; text-align:right; }
.ficha-precio .total span{ display:block; font-size:0.68rem; text-transform:uppercase; }
.ficha-precio .total strong{ font-size:1.3rem; color:var(--accent); font-family:"Space Mono",monospace; }
.ficha-comercial{ margin-bottom:0.9rem; }
.ficha-comercial summary{ cursor:pointer; font-size:0.82rem; color:var(--accent); margin-bottom:0.6rem; }
.ficha-internas{ display:flex; flex-direction:column; gap:6px; font-size:0.78rem; color:var(--muted); margin-bottom:0.9rem; }
.ficha-internas textarea{
  font-family:inherit; font-size:0.85rem; color:var(--ink);
  border:1px solid var(--line); border-radius:7px; padding:7px 9px; min-height:52px; resize:vertical;
}
.ficha-internas button{ align-self:flex-start; }
.ficha-histo{ margin-bottom:0.9rem; }
.ficha-histo h4{ font-size:0.72rem; text-transform:uppercase; color:var(--muted); margin:0 0 0.4rem; }
.ficha-histo ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.ficha-histo li{ display:flex; align-items:center; gap:10px; font-size:0.82rem; }
.ficha-histo li.actual button{ font-weight:700; color:var(--accent); }
.ficha-histo button{ background:none; border:1px solid var(--line); border-radius:6px; padding:1px 8px; cursor:pointer; font-family:"Space Mono",monospace; }
.ficha-acciones{ display:flex; flex-wrap:wrap; gap:8px; }
.ficha-msg{ margin:0.7rem 0 0; font-size:0.82rem; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.ficha-msg.ok{ color:var(--ok); }
.ficha-msg.error{ color:var(--bad); }
.ficha-msg label{ display:flex; align-items:center; gap:6px; color:var(--muted); }
.ficha-msg input{ font-family:inherit; font-size:0.85rem; border:1px solid var(--line); border-radius:6px; padding:5px 8px; }

/* Diálogo de guardado (modal centrado) */
.overlay{
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  background:rgba(20,28,22,0.45); padding:1rem;
}
.card.dialogo{
  width:min(560px,100%); max-height:90vh; overflow:auto;
  background:var(--bg); border:1px solid var(--line); border-radius:14px;
  padding:1.2rem 1.3rem; box-shadow:0 18px 50px rgba(0,0,0,0.25);
}
.card.dialogo h2{ display:flex; align-items:center; gap:8px; font-size:1.05rem; margin:0 0 1rem; }
.dg-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; }
.dg-grid label{ display:flex; flex-direction:column; gap:4px; font-size:0.8rem; color:var(--muted); }
.dg-grid label.ancho{ grid-column:1 / -1; }
.dg-grid input, .dg-grid select, .dg-grid textarea{
  font-family:inherit; font-size:0.88rem; color:var(--ink);
  border:1px solid var(--line); border-radius:7px; padding:7px 9px;
}
.dg-grid input:focus, .dg-grid select:focus, .dg-grid textarea:focus{ outline:none; border-color:var(--accent); }
.dg-grid textarea{ min-height:52px; resize:vertical; }
.dg-precios{
  display:flex; flex-wrap:wrap; gap:1.2rem; align-items:baseline;
  margin:1rem 0 0.4rem; padding:0.7rem 0.9rem; background:var(--panel-2); border-radius:9px;
}
.dg-precios span{ font-size:0.8rem; color:var(--muted); }
.dg-precios strong{ font-size:1rem; color:var(--ink); font-family:"Space Mono",monospace; }
.dg-precios .total{ margin-left:auto; }
.dg-precios .total strong{ font-size:1.25rem; color:var(--accent); }
.dg-acciones{ display:flex; justify-content:flex-end; gap:10px; margin-top:1rem; }

/* ===================== Vistas maestro-detalle (estilo gruas) ===================== */
/* Lista a la izquierda + ficha/detalle a la derecha, cada una a pantalla completa. */
.vista-md{ display:flex; flex-direction:column; flex:1; min-height:0; padding:0; }
.cv-head{ display:flex; align-items:center; gap:12px; padding:10px 16px; border-bottom:1px solid var(--line); background:var(--panel); flex-wrap:wrap; }
.cv-head h2{ margin:0; font-size:16px; white-space:nowrap; display:flex; align-items:center; gap:6px; }
.cv-head h2 i{ color:var(--accent); }
.cv-search{ flex:1; max-width:340px; border:1px solid var(--line); border-radius:8px; padding:8px 11px; font-family:inherit; font-size:13px; background:var(--bg); }
.cv-search:focus{ outline:none; border-color:var(--accent); }
.cv-head .spacer{ flex:1; }
.cv-body{ flex:1; display:flex; min-height:0; }
.cv-list{ width:330px; min-width:280px; border-right:1px solid var(--line); overflow:auto; padding:10px; background:var(--panel); }
.cv-list .cv-empty{ color:var(--muted); font-size:12.5px; padding:14px 6px; }
.cv-item{ border:1px solid var(--line); border-radius:9px; padding:9px 11px; margin-bottom:7px; cursor:pointer; background:var(--bg); transition:border-color .12s, box-shadow .12s; }
.cv-item:hover{ border-color:var(--accent); }
.cv-item.on{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.cv-item .nm{ font-weight:600; font-size:13.5px; display:flex; align-items:center; gap:6px; }
.cv-item .nm .tt{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cv-item .cv-n{ flex:0 0 auto; background:var(--accent); color:#fff; border-radius:999px; font-size:10px; padding:1px 7px; }
.cv-item .sub{ font-size:11.5px; color:var(--muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cv-item .own{ display:inline-block; font-size:9.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--accent); margin-top:3px; }
.cv-detail{ flex:1; overflow:auto; padding:18px 26px 40px; }
.cv-detail .cv-empty{ color:var(--muted); font-size:13px; padding:60px 0; text-align:center; }
.cv-title{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.cv-title h3{ margin:0; font-size:18px; font-weight:650; }
.cv-sec{ font-family:"Space Mono",monospace; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:8px; margin:20px 0 10px; }
.cv-sec::after{ content:""; flex:1; height:1px; background:var(--line); }
.cv-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px 16px; }
.cv-grid .f.full{ grid-column:1 / -1; }
.cv-grid .f label{ display:block; font-size:11px; color:var(--muted); margin-bottom:3px; }
.cv-grid .f input, .cv-grid .f select, .cv-grid .f textarea{ width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-family:inherit; font-size:13px; background:var(--bg); }
.cv-grid .f input:focus, .cv-grid .f select:focus, .cv-grid .f textarea:focus{ outline:none; border-color:var(--accent); }
.cv-actions{ display:flex; gap:8px; margin-top:18px; flex-wrap:wrap; }
.cv-actions .btn.del, .btn.del{ color:var(--bad); border-color:rgba(226,35,26,.4); }
.cv-actions .btn.del:hover, .btn.del:hover{ background:var(--bad); color:#fff; }
.check{ display:flex; align-items:center; gap:7px; font-size:13px; color:var(--ink); cursor:pointer; }
.pw-wrap{ display:flex; gap:6px; align-items:center; }
.pw-wrap input{ flex:1; }
.pw-eye{ border:1px solid var(--line); background:var(--bg); border-radius:8px; padding:0 10px; cursor:pointer; color:var(--muted); }

/* Sub-listas dentro de una ficha (presupuestos del cliente, clientes del usuario…) */
.of-list{ margin-top:6px; }
.of-row{ display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:9px; padding:8px 10px; margin-top:7px; }
.of-row .info{ flex:1; min-width:0; }
.of-row .info .num{ font-family:"Space Mono",monospace; color:var(--accent); font-size:12px; }
.of-row .info .meta{ font-size:11px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.of-row.clickable{ cursor:pointer; transition:background .12s, border-color .12s; }
.of-row.clickable:hover{ background:var(--panel-2); border-color:var(--accent); }
.of-empty{ color:var(--muted); font-size:12px; padding:8px 2px; }
.btn.mini{ padding:4px 9px; font-size:11px; }

/* Metadatos clave-valor de la ficha */
.ov-meta{ font-size:13px; color:var(--ink); line-height:1.9; }
.ov-meta .lbl{ display:inline-block; min-width:150px; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.03em; }

/* Chips de rol (usuarios) */
.rolechip{ display:inline-block; background:var(--accent); color:#fff; border-radius:999px; font-size:10px; font-weight:600; padding:2px 9px; text-transform:uppercase; letter-spacing:.03em; }
.rolechip.admin{ background:var(--ink); margin-left:4px; }

/* Chips y control segmentado de estado (presupuestos) */
.est-chip{ display:inline-block; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; padding:2px 8px; border-radius:999px; border:1px solid transparent; }
.est-borrador{ background:rgba(107,114,128,.14); color:#5b6472; border-color:rgba(107,114,128,.3); }
.est-enviado{ background:rgba(21,101,192,.12); color:#1565c0; border-color:rgba(21,101,192,.35); }
.est-aceptado{ background:rgba(47,158,68,.16); color:var(--ok); border-color:rgba(47,158,68,.4); }
.est-rechazado{ background:rgba(226,35,26,.13); color:var(--bad); border-color:rgba(226,35,26,.4); }
.est-caducado{ background:rgba(165,112,26,.14); color:#a5701a; border-color:rgba(165,112,26,.35); }
.est-sustituido{ background:rgba(107,94,138,.14); color:#6b5e8a; border-color:rgba(107,94,138,.3); }
.cv-item .est-chip{ margin-left:auto; }
.est-seg{ display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.est-seg button{ border:1px solid var(--line); background:var(--bg); color:var(--muted); font-family:inherit; font-size:12px; padding:6px 12px; border-radius:8px; cursor:pointer; }
.est-seg button:hover{ border-color:var(--accent); }
.est-seg button.on.est-borrador{ background:#5b6472; color:#fff; border-color:#5b6472; }
.est-seg button.on.est-enviado{ background:#1565c0; color:#fff; border-color:#1565c0; }
.est-seg button.on.est-aceptado{ background:var(--ok); color:#fff; border-color:var(--ok); }
.est-seg button.on.est-rechazado{ background:var(--bad); color:#fff; border-color:var(--bad); }
.est-seg button:disabled{ opacity:.45; cursor:not-allowed; }

/* Chips de filtro por estado */
.fchip{ font-size:11.5px; padding:4px 10px; border:1px solid var(--line); border-radius:20px; background:var(--bg); cursor:pointer; color:var(--muted); }
.fchip:hover{ border-color:var(--accent); color:var(--accent); }
.fchip.on{ background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600; }
.ov-sub{ display:flex; align-items:center; gap:12px; padding:8px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.ov-filters{ display:flex; gap:6px; flex-wrap:wrap; }

@media (max-width:820px){ .cv-grid{ grid-template-columns:1fr; } .cv-list{ width:44vw; min-width:0; } }

/* Banner del presupuesto activo en la fila contextual del configurador */
#presupuesto-activo{
  display:inline-flex; align-items:center; gap:6px; font-size:0.8rem; color:var(--accent);
  background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:4px 10px;
}
#presupuesto-activo em{ font-style:normal; color:var(--ink); }