:root {
  --azul-oscuro: #1F3B57;
  --azul: #2C5A82;
  --gris-claro: #EEF3F8;
  --gris-borde: #D8E0E8;
  --texto: #1A1A1A;
  --texto-suave: #6B7280;
  --verde: #2E7D5B;
  --rojo: #B3261E;
  --amarillo: #B8860B;
  --blanco: #FFFFFF;
  --radio: 8px;
}

* { box-sizing: border-box; }

body {
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: #F4F7FA;
  color: var(--texto);
  margin: 0;
}

a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }

.contenedor-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--azul-oscuro), var(--azul));
}

.tarjeta-login {
  background: var(--blanco);
  padding: 40px;
  border-radius: var(--radio);
  width: 100%;
  max-width: 360px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.tarjeta-login h1 {
  font-size: 1.4rem;
  margin-bottom: 4px;
  color: var(--azul-oscuro);
}

.tarjeta-login p.subtitulo {
  color: var(--texto-suave);
  margin-top: 0;
  margin-bottom: 24px;
  font-size: 0.9rem;
}

.campo { margin-bottom: 16px; }
.campo label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--texto);
}
.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  font-size: 0.95rem;
  background: var(--blanco);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--azul);
}

.boton {
  display: inline-block;
  background: var(--azul);
  color: var(--blanco);
  border: none;
  padding: 10px 18px;
  border-radius: var(--radio);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.boton:hover { background: var(--azul-oscuro); text-decoration: none; }
.boton.ancho { width: 100%; }
.boton.secundario { background: var(--blanco); color: var(--azul); border: 1px solid var(--azul); }
.boton.peligro { background: var(--rojo); }
.boton.peligro:hover { background: #8f1e18; }
.boton.pequeno { padding: 6px 12px; font-size: 0.8rem; }

.error {
  background: #FDECEA;
  color: var(--rojo);
  padding: 10px 14px;
  border-radius: var(--radio);
  font-size: 0.85rem;
  margin-bottom: 16px;
}

/* --- Layout general --- */
.barra-superior {
  background: var(--azul-oscuro);
  color: var(--blanco);
  padding: 8px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 88px;
}
.barra-superior .marca { font-weight: 700; font-size: 1.1rem; }
.marca-enlace {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  border-radius: 8px;
}
.marca-enlace:hover { opacity: 0.85; }
.marca-enlace:focus-visible { outline: 2px solid var(--blanco); outline-offset: 3px; }
.barra-superior .logo-empresa {
  height: 72px;
  width: auto;
  display: block;
  border-radius: 8px;
  background: var(--blanco);
  padding: 5px 12px;
}
.barra-izquierda { display: flex; align-items: center; gap: 16px; }
.boton-atras {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.3);
  color: var(--blanco);
  padding: 6px 12px;
  border-radius: var(--radio);
  font-size: 0.85rem;
  cursor: pointer;
}
.boton-atras:hover { background: rgba(255,255,255,0.22); }
.barra-superior nav a {
  color: var(--blanco);
  margin-left: 20px;
  font-size: 0.9rem;
  opacity: 0.85;
}
.barra-superior nav a:hover { opacity: 1; text-decoration: none; }
.barra-superior form { display: inline; }
.barra-superior button.enlace {
  background: none; border: none; color: var(--blanco);
  opacity: 0.85; cursor: pointer; font-size: 0.9rem; margin-left: 20px;
}
.barra-superior button.enlace:hover { opacity: 1; text-decoration: underline; }

.contenido {
  max-width: 1000px;
  margin: 32px auto;
  padding: 0 20px;
}

.cabecera-pagina {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.cabecera-pagina h1 { font-size: 1.5rem; margin: 0; color: var(--azul-oscuro); }

.tarjeta {
  background: var(--blanco);
  border-radius: var(--radio);
  border: 1px solid var(--gris-borde);
  padding: 24px;
  margin-bottom: 20px;
}

table.tabla {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 0.9rem;
  table-layout: fixed;
}
.tabla-scroll {
  overflow-x: auto;
  border-radius: var(--radio);
}
table.tabla th {
  text-align: left;
  background: var(--gris-claro);
  padding: 10px 12px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--texto-suave);
}
table.tabla td { padding: 10px 12px; border-bottom: 1px solid var(--gris-borde); }
table.tabla tbody tr:hover { background: #FAFBFC; }

/* Recorta con puntos suspensivos el texto que no cabe en su columna (nombres,
   clientes, localidades...) en vez de dejar que empuje la tabla y desborde
   la tarjeta. El título completo se puede ver dejando el ratón encima. */
table.tabla td.recorte {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 0;
}
table.tabla td.recorte a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }

/* Igual que .recorte pero permitiendo el salto a varias líneas en vez de
   cortar el texto: para nombres de cliente, localidades y partidas donde
   preferimos ver el contenido completo aunque ocupe más alto de fila. */
table.tabla td.ajusta {
  white-space: normal;
  word-break: break-word;
}

/* Campo de texto de una partida en el catálogo: se comporta como el input
   de una sola línea de antes (mismo borde/fondo transparente) pero permite
   varias líneas cuando el nombre no cabe en una. La altura se ajusta con
   JS al cargar la página y al escribir (ver partidas.ejs). */
textarea.textarea-linea {
  border: 1px solid transparent;
  background: transparent;
  width: 100%;
  resize: none;
  overflow: hidden;
  font: inherit;
  color: inherit;
  padding: 0;
  line-height: 1.4;
  display: block;
}



.etiqueta-estado {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.estado-borrador { background: #EEF0F2; color: #4B5563; }
.estado-enviado { background: #E4EEFB; color: var(--azul); }
.estado-aceptado { background: #E4F3EB; color: var(--verde); }
.estado-rechazado { background: #FBEAE9; color: var(--rojo); }

/* El <select> de estado (en "Mis presupuestos") es editable: al ser un
   <select> nativo, el navegador le da automáticamente el ancho de la
   opción MÁS LARGA de la lista ("Rechazado"), no el de la opción
   seleccionada, así que la píldora de color se salía de su columna sin
   llegar a cerrarse en redondo por el lado derecho (se lo tapaba el botón
   de al lado). Al quitar la flecha nativa y poner una propia más estrecha,
   el select ya solo ocupa el ancho de su texto actual y la píldora se
   cierra bien por los dos lados. */
select.etiqueta-estado {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 24px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234B5563'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 8px 5px;
  cursor: pointer;
  max-width: 100%;
  box-sizing: border-box;
}

.filtros { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; align-items: flex-end; }
.filtros .campo { margin-bottom: 0; min-width: 160px; }

.fila-partida {
  display: grid;
  grid-template-columns: 1.8fr 0.9fr 0.9fr 0.9fr 0.7fr 0.9fr auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  margin-bottom: 10px;
  background: #FCFDFE;
}
.fila-partida:nth-child(even) { background: var(--gris-claro); }

.buscador-partida { position: relative; }
.lista-sugerencias {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  max-height: 220px;
  overflow-y: auto;
  z-index: 20;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  display: none;
}
.lista-sugerencias.visible { display: block; }
.lista-sugerencias div {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.9rem;
}
.lista-sugerencias div:hover, .lista-sugerencias div.activa { background: var(--gris-claro); }

.totales-panel {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
.totales-panel table { min-width: 260px; }
.totales-panel td { padding: 6px 10px; font-size: 0.9rem; }
.totales-panel tr.total-final td { font-weight: 700; font-size: 1.05rem; color: var(--azul-oscuro); border-top: 2px solid var(--gris-borde); }

.acciones-linea {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
}
/* Botones un poco más compactos que los normales dentro de las celdas de
   acciones de las tablas (para que quepan varios seguidos), pero sin llegar
   a apretarse: mantienen un tamaño cómodo de leer y de pulsar. flex-wrap
   está en "nowrap" a propósito: si no caben todos en una línea, es la
   TABLA la que hace scroll horizontal (ver .tabla-scroll), nunca los
   botones amontonándose en dos líneas dentro de su celda. */
table.tabla .acciones-linea .boton.pequeno { padding: 6px 11px; font-size: 0.78rem; white-space: nowrap; flex: 0 0 auto; }

/* Botón de acción reducido a un solo icono (p. ej. eliminar, descargar),
   para las filas de tabla que ya tienen 2-3 botones de texto: ahorra el
   espacio del texto sin perder la acción ni su etiqueta accesible. */
.boton.icono {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex: 0 0 auto;
  line-height: 1;
}
table.tabla .acciones-linea .boton.icono { padding: 0; }

.vacio {
  text-align: center;
  color: var(--texto-suave);
  padding: 40px 20px;
}

/* --- Modal de confirmación (sustituye a confirm() del navegador) --- */
.confirmacion-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 30, 45, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 16px;
}
.confirmacion-caja {
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 26px 28px;
  max-width: 380px;
  width: 100%;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.28);
  text-align: center;
}
.confirmacion-mensaje {
  margin: 0 0 22px;
  font-size: 0.98rem;
  color: var(--texto);
  line-height: 1.4;
}
.confirmacion-botones {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.confirmacion-botones .boton { min-width: 84px; }

/* --- Campo de contraseña con ojo --- */
.campo-password { position: relative; }
.campo-password input { padding-right: 42px; }
.btn-ver-password {
  position: absolute;
  right: 10px;
  top: 34px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--texto-suave);
  padding: 4px;
}
.btn-ver-password:hover { color: var(--azul); }

/* --- Chips de estado tipo obra --- */
.chip-obra {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: #EFEAE0;
  color: #5C3D1F;
}

/* --- Estadísticas: tarjetas de resumen y barras --- */
.tarjetas-resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.tarjeta-metrica {
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  padding: 16px 18px;
}
.tarjeta-metrica .valor { font-size: 1.6rem; font-weight: 700; color: var(--azul-oscuro); }
.tarjeta-metrica .etiqueta { font-size: 0.8rem; color: var(--texto-suave); margin-top: 2px; }

.fila-barra { display: grid; grid-template-columns: 140px 1fr 50px; align-items: center; gap: 10px; margin-bottom: 10px; }
.fila-barra .nombre-barra { font-size: 0.85rem; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pista-barra { background: var(--gris-claro); border-radius: 6px; height: 14px; overflow: hidden; }
.relleno-barra { background: var(--azul); height: 100%; border-radius: 6px; }
.relleno-barra.aceptados { background: var(--verde); }
.fila-barra .valor-barra { font-size: 0.8rem; color: var(--texto-suave); text-align: right; }

/* --- Donut de estados con leyenda --- */
.donut {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  flex-shrink: 0;
}
.leyenda-item { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 0.9rem; }
.punto-color { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.leyenda-nombre { flex: 1; }
.leyenda-valor { font-weight: 600; color: var(--texto); }

/* --- Rejilla de donuts pequeños por localidad --- */
.rejilla-donuts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 18px;
}
.donut-localidad { text-align: center; }
.donut-pequeno {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 8px;
}
.donut-localidad-nombre {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.donut-localidad-dato { font-size: 0.75rem; color: var(--texto-suave); }

/* --- Columnas de tabla redimensionables (eliminado) ---
   Se quitó el redimensionado manual de columnas: con varias columnas y una
   celda de acciones con varios botones, el reparto automático a partes
   iguales dejaba sin espacio suficiente a los botones y estos se salían
   de la tarjeta. Ahora cada tabla define anchos fijos con <colgroup> (ver
   cada vista .ejs) pensados para que todo quepa siempre dentro de la tarjeta. */

/* --- Asistente de búsqueda flotante --- */
#asistente-boton {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--azul);
  color: var(--blanco);
  font-size: 1.5rem;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  cursor: pointer;
  z-index: 1000;
}
#asistente-boton:hover { background: var(--azul-oscuro); }

#asistente-panel {
  position: fixed;
  bottom: 92px;
  right: 24px;
  width: 340px;
  max-width: calc(100vw - 32px);
  max-height: 70vh;
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 1000;
}
#asistente-panel.abierto { display: flex; }

.asistente-cabecera {
  background: var(--azul-oscuro);
  color: var(--blanco);
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 0.9rem;
}
.asistente-cabecera button {
  background: none;
  border: none;
  color: var(--blanco);
  font-size: 1rem;
  cursor: pointer;
  padding: 0;
}

#asistente-form {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gris-borde);
}
#asistente-input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  font-size: 0.9rem;
}
#asistente-input:focus { outline: none; border-color: var(--azul); }

.asistente-ayuda {
  margin: 0;
  padding: 0 16px 10px;
  font-size: 0.78rem;
  color: var(--texto-suave);
  line-height: 1.4;
}

#asistente-resultados {
  overflow-y: auto;
  padding: 8px 16px 16px;
}

.asistente-estado {
  color: var(--texto-suave);
  font-size: 0.85rem;
  padding: 12px 4px;
  text-align: center;
}
.asistente-error { color: var(--rojo); }

.asistente-resultado {
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  padding: 10px 12px;
  margin-bottom: 10px;
}
.asistente-resultado-cabecera {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 4px;
}
.asistente-resultado-cliente {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 2px;
}
.asistente-resultado-detalle {
  color: var(--texto-suave);
  font-size: 0.8rem;
  margin-bottom: 8px;
}
.asistente-resultado-botones {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  #asistente-panel { right: 16px; bottom: 84px; width: calc(100vw - 32px); }
  #asistente-boton { right: 16px; bottom: 16px; }
}


/* --- Entrega 12: avisos, columnas sin saltos y pantallas pequeñas --- */
.aviso { padding: 10px 16px; border-radius: var(--radio); font-size: 0.9rem; margin-bottom: 16px; }
.aviso-ok { background: #F3FAF6; border: 1px solid #2E7D5B; color: #1E5C41; }
.aviso-error { background: #FDF1F0; border: 1px solid #B3261E; color: #7A1A14; }
.tabla td:nth-child(n) .nowrap, td.nowrap { white-space: nowrap; }

@media (max-width: 700px) {
  .barra-superior { flex-wrap: wrap; padding: 8px 12px; min-height: 0; gap: 6px; }
  .barra-superior .marca { display: none; }
  .barra-superior .logo-empresa { height: 44px; padding: 3px 8px; }
  .barra-superior nav { display: flex; flex-wrap: wrap; gap: 4px 0; width: 100%; }
  .barra-superior nav a, .barra-superior button.enlace { margin-left: 0; margin-right: 14px; }
  .contenido { padding-left: 12px; padding-right: 12px; }
  .contenido div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .fila-partida { grid-template-columns: 1fr 1fr !important; }
  .fila-partida .buscador-partida { grid-column: 1 / -1; }
  .cabecera-pagina { flex-wrap: wrap; gap: 8px; }
  .filtros { flex-wrap: wrap; }
  .tarjeta { overflow-x: auto; }
}

/* --- Paginación --- */
.paginacion { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.paginacion-info { color: var(--texto-suave); font-size: 0.9rem; }
.paginacion-enlaces { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.paginacion .pagina-actual { background: var(--azul-oscuro); color: var(--blanco); cursor: default; }
.paginacion-puntos { color: var(--texto-suave); padding: 0 2px; }

/* --- Entrega 14: aviso flotante, elementos ocultables y cuenta atrás del login --- */
[hidden] { display: none !important; }
.aviso-flotante {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px);
  padding: 10px 18px; border-radius: 999px; font-size: 0.9rem; font-weight: 600;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2); opacity: 0; pointer-events: none;
  transition: opacity 0.18s, transform 0.18s; z-index: 1000; max-width: calc(100vw - 32px); text-align: center;
}
.aviso-flotante.visible { opacity: 1; transform: translate(-50%, 0); }
.aviso-flotante-ok { background: #1E5C41; color: #fff; }
.aviso-flotante-error { background: #7A1A14; color: #fff; }

.bloqueo { background: #FDF1F0; border: 1px solid #B3261E; color: #7A1A14; border-radius: var(--radio); padding: 14px 16px; margin-bottom: 16px; text-align: center; }
.bloqueo p { margin: 6px 0; font-size: 0.9rem; }
.cuenta-atras { font-size: 2.2rem; font-weight: 700; letter-spacing: 2px; font-variant-numeric: tabular-nums; margin: 4px 0; }
fieldset.campos-login { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.campos-login:disabled input { background: #EEF0F2; cursor: not-allowed; }
fieldset.campos-login:disabled .boton { opacity: 0.5; cursor: not-allowed; }

/* --- Entrega 15: listados más anchos y precio con el € pegado a la cifra --- */
.contenido.ancho { max-width: 1200px; }
.celda-precio { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.input-precio-defecto {
  width: 84px; text-align: right; border: 1px solid transparent; background: transparent;
  -moz-appearance: textfield; appearance: textfield;
}
.input-precio-defecto::-webkit-outer-spin-button,
.input-precio-defecto::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.simbolo-euro { color: var(--texto); }

/* --- Entrega 16: tabla de partidas de la factura sin scroll lateral en móvil --- */
@media (max-width: 700px) {
  table.tabla.tabla-apilable { min-width: 0 !important; table-layout: auto; }
  table.tabla.tabla-apilable thead { display: none; }
  table.tabla.tabla-apilable, table.tabla.tabla-apilable tbody, table.tabla.tabla-apilable tr, table.tabla.tabla-apilable td { display: block; width: 100%; }
  table.tabla.tabla-apilable tr { padding: 10px 12px; border-bottom: 1px solid var(--gris-borde); }
  table.tabla.tabla-apilable td { border: 0; padding: 2px 0; display: flex; justify-content: space-between; gap: 12px; text-align: right; }
  table.tabla.tabla-apilable td::before { content: attr(data-label); color: var(--texto-suave); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; text-align: left; flex: 0 0 auto; }
  table.tabla.tabla-apilable td[data-label="Partida"] { display: block; text-align: left; font-weight: 600; padding-bottom: 6px; }
  table.tabla.tabla-apilable td[data-label="Partida"]::before { display: none; }
}

/* --- Entrega 18: estados de factura, textos pequeños --- */
.estado-emitida { background: #E4F3EB; color: var(--verde); }
.estado-rectificativa { background: #FDF0DC; color: #8A5A00; }
.texto-pequeno { font-size: 0.8rem; }
.aviso-borrador { background: #FFF8E1; border: 1px solid #B8860B; color: #6B4E00; padding: 10px 16px; border-radius: var(--radio); font-size: 0.9rem; margin-bottom: 16px; }
.botones-linea { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.botones-linea form { display: inline; margin: 0; }

/* --- Entrega 19: filas alternadas, filas clicables, altura fija y ordenación --- */
[hidden] { display: none !important; }

/* Filas alternadas en suave y resaltado al pasar el ratón (mismo estilo que los PDF) */
table.tabla tbody tr:nth-child(even) { background: #F3F7FB; }
table.tabla tbody tr:hover { background: #E4EDF7; }
table.tabla tbody tr[data-href] { cursor: pointer; }

/* Todas las filas de un listado con la misma altura; el texto largo se recorta a 2 líneas
   (el texto completo sale al dejar el ratón encima) */
table.tabla.filas-fijas tbody tr { height: 64px; }
table.tabla.filas-fijas tbody td { vertical-align: middle; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; line-height: 1.35; }

/* Cabeceras ordenables: nombre de la columna + dos flechitas (la activa se marca) */
table.tabla th .orden-enlace { color: inherit; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; cursor: pointer; }
table.tabla th .orden-enlace:hover { color: var(--azul-oscuro); }
.orden-flechas { display: inline-flex; flex-direction: column; line-height: 0.7; font-size: 0.55rem; }
.orden-flechas i { font-style: normal; color: #B4C0CC; }
.orden-activo { color: var(--azul-oscuro) !important; }
.orden-asc .orden-flechas .ar, .orden-desc .orden-flechas .ab { color: var(--azul-oscuro); }

@media (max-width: 700px) {
  table.tabla.tabla-apilable.filas-fijas tbody tr { height: auto; }
  table.tabla.tabla-apilable tbody tr:nth-child(even) { background: #F3F7FB; }
  .clamp2 { display: block; -webkit-line-clamp: unset; }
}

/* La celda de acciones era display:flex y dejaba de ser celda de tabla: rompía el fondo alternado y la
   línea inferior de la fila. Ahora es una celda normal y los botones van en línea. */
table.tabla td.acciones-linea { display: table-cell; white-space: nowrap; vertical-align: middle; }
table.tabla td.acciones-linea > * { vertical-align: middle; }
table.tabla td.acciones-linea > * + * { margin-left: 6px; }
@media (max-width: 700px) {
  table.tabla.tabla-apilable td.acciones-linea { display: flex; flex-wrap: wrap; justify-content: flex-start; }
}

/* --- Entrega 20: menú con la sección actual marcada y menú de 3 barras en móvil --- */
.barra-superior { position: relative; }
.barra-superior nav a { padding: 7px 12px; margin-left: 4px; border-radius: 8px; border-bottom: 3px solid transparent; }
.barra-superior nav a.activo { opacity: 1; font-weight: 700; background: rgba(255,255,255,0.16); border-bottom-color: #fff; }
.menu-boton, .seccion-actual { display: none; }
.menu-boton { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.3); border-radius: var(--radio); width: 42px; height: 40px; padding: 0 10px; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; flex: 0 0 auto; }
.menu-boton span { display: block; height: 3px; background: #fff; border-radius: 2px; }
@media (max-width: 900px) {
  .menu-boton { display: flex; }
  .seccion-actual { display: block; font-weight: 700; font-size: 1rem; margin-left: auto; padding-right: 4px; }
  .barra-superior { flex-wrap: nowrap; justify-content: flex-start; }
  .barra-izquierda { gap: 10px; }
  .barra-superior nav { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 60; width: auto; flex-direction: column; flex-wrap: nowrap; gap: 0; background: var(--azul-oscuro); border-top: 1px solid rgba(255,255,255,0.2); box-shadow: 0 10px 24px rgba(0,0,0,0.3); padding: 6px 0; }
  .barra-superior nav.abierto { display: flex; }
  .barra-superior nav a, .barra-superior nav form { margin: 0; }
  .barra-superior nav a { padding: 15px 20px; border-radius: 0; border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 1rem; opacity: 1; border-left: 5px solid transparent; }
  .barra-superior nav a.activo { background: rgba(255,255,255,0.16); border-left-color: #fff; }
  .barra-superior nav form { display: block; }
  .barra-superior button.enlace { display: block; width: 100%; text-align: left; padding: 15px 20px; margin: 0; font-size: 1rem; }
}

/* ===== Facturación / IVA (entrega 26) ===== */
.pestanas-fiscal { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.pestanas-fiscal a, .pildora-anio { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--gris-borde); background: var(--blanco); color: var(--azul-oscuro); font-weight: 600; font-size: 0.9rem; text-decoration: none; }
.pestanas-fiscal a:hover { text-decoration: none; background: var(--gris-claro); }
.pestanas-fiscal a.activa { background: var(--azul-oscuro); color: #fff; border-color: var(--azul-oscuro); }
.rejilla-trim { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-bottom: 18px; }
.trim-tarjeta { background: var(--blanco); border: 1px solid var(--gris-borde); border-radius: var(--radio); padding: 14px 16px; border-top: 4px solid var(--azul); }
.trim-tarjeta.actual { border-top-color: var(--verde); box-shadow: 0 0 0 2px rgba(46,125,91,.15); }
.trim-tarjeta.futuro { opacity: .55; border-top-color: var(--gris-borde); }
.trim-tarjeta h3 { margin: 0 0 6px; font-size: 1rem; display: flex; justify-content: space-between; align-items: center; }
.trim-iva { font-size: 1.7rem; font-weight: 700; color: var(--azul-oscuro); line-height: 1.1; }
.trim-iva small { display: block; font-size: .75rem; font-weight: 500; color: var(--texto-suave); }
.trim-fila { display: flex; justify-content: space-between; font-size: .88rem; padding: 3px 0; border-bottom: 1px dashed var(--gris-borde); }
.trim-fila:last-of-type { border-bottom: 0; }
.var-sube { color: var(--verde); font-weight: 600; } .var-baja { color: var(--rojo); font-weight: 600; } .var-igual { color: var(--texto-suave); }
.chip-303 { font-size: .75rem; padding: 2px 8px; border-radius: 999px; background: var(--gris-claro); color: var(--azul-oscuro); font-weight: 600; }
.chip-303.pronto { background: #FDF0DC; color: #6B4E00; } .chip-303.vencido { background: #F6DDDB; color: var(--rojo); }
.grafico-barras { width: 100%; height: auto; display: block; }
.leyenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: .85rem; color: var(--texto-suave); margin: 6px 0 0; }
.leyenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.num-rojo { color: var(--rojo); }
.tabla-fiscal td.num, .tabla-fiscal th.num { text-align: right; white-space: nowrap; }
.tabla-fiscal tfoot td { font-weight: 700; background: var(--gris-claro); }
.comparador { display: grid; gap: 0; overflow-x: auto; }
.comparador table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 560px; }
.comparador th, .comparador td { padding: 10px 12px; border-bottom: 1px solid var(--gris-borde); text-align: right; }
.comparador th:first-child, .comparador td:first-child { text-align: left; color: var(--texto-suave); font-weight: 600; position: sticky; left: 0; background: var(--blanco); }
.comparador thead th { background: var(--azul-oscuro); color: #fff; font-size: 1.1rem; }
.comparador td.mejor { background: #E6F2EC; font-weight: 700; color: var(--verde); }
.comparador td.peor { background: #F9E9E7; color: var(--rojo); }
.comparador tr.grupo td { background: var(--gris-claro); font-weight: 700; color: var(--azul-oscuro); text-align: left; }
.selector-anios { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.selector-anios label { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border: 1px solid var(--gris-borde); border-radius: 999px; background: var(--blanco); cursor: pointer; font-weight: 600; }
@media print { .barra-superior, .pestanas-fiscal, .no-imprimir, .boton { display: none !important; } details:not([open]) > *:not(summary) { display: block; } }


/* =====================================================================
   Entrega 27: estilo nuevo "B" (menú lateral oscuro, contenido claro, acento ámbar)
   ===================================================================== */
:root {
  --azul-oscuro: #111827;   /* títulos y barra: gris casi negro */
  --azul: #B45309;          /* acento principal (ámbar oscuro: texto blanco legible) */
  --acento: #F59E0B;
  --gris-claro: #F3F4F6;
  --gris-borde: #E5E7EB;
  --radio: 8px;
}
body { background: #F4F5F7; }
a { color: #B45309; }
.tarjeta { border-radius: 10px; box-shadow: 0 1px 2px rgba(17,24,39,.05); }
.boton { background: var(--acento); color: #111827; }
.boton:hover { background: #D97706; color: #111827; }
.boton.secundario { background: #fff; color: #111827; border: 1px solid #D1D5DB; }
.boton.secundario:hover { background: #F3F4F6; }
.boton.peligro { background: var(--rojo); color: #fff; }
.boton.peligro:hover { background: #8f1e18; color: #fff; }
table.tabla th { background: #F9FAFB; }
.barra-superior { background: #111827; }
.barra-superior nav a.activo { background: #1F2937; border-bottom-color: var(--acento); }
.trim-tarjeta { border-top-color: var(--acento); }
.pestanas-fiscal a.activa { background: #111827; border-color: #111827; }

/* --- Menú lateral fijo en pantallas anchas (>900px) --- */
@media (min-width: 901px) {
  body { padding-left: 208px; }
  .barra-superior {
    position: fixed; top: 0; left: 0; bottom: 0; width: 208px; z-index: 50;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    padding: 16px 12px; min-height: 0; gap: 14px; overflow-y: auto;
  }
  .barra-izquierda { flex-direction: column; align-items: stretch; gap: 12px; }
  .barra-izquierda .menu-boton { display: none; }
  .barra-superior .marca-enlace { flex-direction: column; align-items: flex-start; gap: 8px; }
  .barra-superior .logo-empresa { height: 56px; max-width: 100%; }
  .barra-superior .marca { font-size: 1rem; white-space: nowrap; }
  .boton-atras { align-self: flex-start; white-space: nowrap; }
  .seccion-actual { display: none; }
  .barra-superior nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
  .barra-superior nav a { margin: 0; padding: 10px 12px; border-bottom: 0; border-left: 3px solid transparent; border-radius: 6px; font-size: .95rem; white-space: nowrap; color: #CBD5E1; opacity: 1; }
  .barra-superior nav a:hover { background: #1F2937; color: #fff; }
  .barra-superior nav a.activo { background: #1F2937; color: #fff; border-left-color: var(--acento); }
  .barra-superior nav form { margin-top: auto; padding-top: 12px; border-top: 1px solid #1F2937; display: block; }
  .barra-superior button.enlace { margin: 0; padding: 10px 12px; color: #94A3B8; width: 100%; text-align: left; }
  .barra-superior button.enlace:hover { color: #fff; text-decoration: none; }
  .contenido { margin-top: 28px; }
}
/* Barra superior en pantallas medias/pequeñas: nunca se amontona */
@media (max-width: 900px) {
  .barra-superior { background: #111827; }
  .barra-superior .marca { white-space: nowrap; }
  .boton-atras { white-space: nowrap; flex: 0 0 auto; }
  .barra-izquierda { flex-wrap: wrap; gap: 8px 10px; min-width: 0; }
  .barra-superior nav a { background: transparent; color: #E5E7EB; }
  .barra-superior nav a.activo { background: #1F2937; border-left-color: var(--acento); }
}
/* Barra de desplazamiento horizontal siempre visible abajo del todo */
.barra-scroll-fija { position: fixed; bottom: 0; z-index: 40; overflow-x: scroll; overflow-y: hidden; height: 18px; background: rgba(243,244,246,.95); border-top: 1px solid #D1D5DB; display: none; }
.barra-scroll-fija > div { height: 1px; }
@media print { .barra-scroll-fija { display: none !important; } body { padding-left: 0 !important; } }
a.enlace-trim { display: block; color: inherit; text-decoration: none; transition: box-shadow .15s, transform .15s; }
a.enlace-trim:hover { text-decoration: none; box-shadow: 0 4px 14px rgba(17,24,39,.12); transform: translateY(-1px); }
.trim-tarjeta.actual { border-top-color: var(--acento); box-shadow: 0 0 0 2px rgba(245,158,11,.2); }
.barra-scroll-fija::-webkit-scrollbar { height: 14px; }
.barra-scroll-fija::-webkit-scrollbar-thumb { background: #9CA3AF; border-radius: 7px; border: 2px solid #F3F4F6; }
.barra-scroll-fija::-webkit-scrollbar-track { background: #F3F4F6; }
.barra-scroll-fija { scrollbar-width: auto; scrollbar-color: #9CA3AF #F3F4F6; }
#form-parte input[type="number"] { padding: 5px 6px; border: 1px solid #D1D5DB; border-radius: 6px; font-size: .85rem; }
#form-parte input[type="number"]:focus { outline: 2px solid var(--acento); outline-offset: 0; }
.aviso-parte { color: var(--rojo); font-weight: 600; margin: 8px 0 0; }

/* ===== Entrega 28 ===== */
.contenido.ancho { max-width: none; }
.fila-elegir { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--gris-borde); margin: 0; }
.fila-elegir:last-child { border-bottom: 0; }
table.tabla-simple { min-width: 0; table-layout: auto; width: 100%; }
table.tabla-simple th, table.tabla-simple td { padding: 12px 16px; }
table.tabla-simple td.num, table.tabla-simple th.num { text-align: right; }
table.tabla-simple tfoot td { background: #F9FAFB; font-weight: 700; font-size: 1.05rem; border-top: 2px solid #111827; }
table.tabla-simple tbody tr { cursor: pointer; }
.selector-grupo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.selector-titulo { font-weight: 700; min-width: 90px; }
.comparador .punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.comparador td.mejor { background: #FEF3C7; color: #92400E; }
.comparador tr.grupo td { background: #F9FAFB; color: #111827; }
.comparador tr.grupo td:not(:first-child) { text-align: right; }
.comparador thead th { background: #111827; }

/* --- Estadísticas, estilo minimalista (entrega 28) --- */
.estad .barra-filtros { padding: 14px 18px; }
.estad .tarjetas-resumen { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.estad .tarjeta-metrica { background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; padding: 16px 18px; box-shadow: 0 1px 2px rgba(17,24,39,.04); }
.estad .tarjeta-metrica .valor { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; color: #111827; }
.estad .tarjeta-metrica .etiqueta { text-transform: uppercase; letter-spacing: .05em; font-size: .7rem; color: #6B7280; margin-top: 4px; }
.estad .tarjeta { border-radius: 12px; border-color: #E5E7EB; }
.estad .tarjeta h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: #6B7280; font-weight: 600; margin: 0 0 12px; }
.rejilla-estad { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin-bottom: 16px; }
.rejilla-estad .tarjeta { margin-bottom: 0; }
.tarjeta-donut { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.estad .donut { width: 140px; height: 140px; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 24px), #000 calc(100% - 23px)); mask: radial-gradient(farthest-side, transparent calc(100% - 24px), #000 calc(100% - 23px)); }
.estad .donut-pequeno { -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 11px)); mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 11px)); }
.estad .leyenda-item { font-size: .88rem; padding: 4px 0; border-bottom: 1px solid #F3F4F6; margin: 0; }
.estad .punto-color { border-radius: 50%; width: 9px; height: 9px; }
.estad .pista-barra { background: #F3F4F6; height: 10px; border-radius: 999px; }
.estad .relleno-barra { border-radius: 999px; background: #F59E0B !important; }
.estad .fila-barra { grid-template-columns: 110px 1fr 150px; }
.estad .filtros select, .estad .filtros input { border-radius: 8px; }
.rejilla-estad { grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); }
.rejilla-estad .tarjeta-donut:nth-child(3) { grid-column: 1 / -1; }
.tarjeta-donut > div:last-child { flex: 1; min-width: 150px !important; }
.estad .tarjeta-metrica .valor { font-size: 1.45rem; white-space: nowrap; }
@media (max-width: 520px) { .rejilla-estad { grid-template-columns: 1fr; } }

/* Entrega 29: botón "Ir al proyecto" de la barra */
.boton-inicio { text-decoration: none; background: var(--acento); border-color: var(--acento); color: #111827; font-weight: 600; }
.boton-inicio:hover { background: #FBBF24; }

/* Entrega 30: presupuestos agrupados por cliente y proyecto */
tr.fila-grupo td { background: #F3F4F6; border-top: 2px solid #E5E7EB; padding-top: 10px; padding-bottom: 10px; }
tr.fila-subgrupo td { background: #FAFAFA; font-size: 0.9rem; color: var(--texto-suave); padding-top: 6px; padding-bottom: 6px; padding-left: 28px; }
tr.fila-subgrupo td[colspan] { padding-left: 24px; }
.grupo-resumen { margin-left: 10px; font-size: 0.8rem; color: var(--texto-suave); font-weight: 400; }
tr.fila-agrupada td:nth-child(2) { padding-left: 28px; }

/* Entrega 30: pantalla de acceso con el mismo estilo que el resto (oscuro + ámbar), con logo */
.contenedor-login {
  background: radial-gradient(circle at 20% 15%, rgba(245,158,11,0.16), transparent 45%), #111827;
  padding: 24px;
}
.tarjeta-login {
  max-width: 380px;
  padding: 36px 36px 32px;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
  text-align: center;
  border-top: 4px solid var(--acento);
}
.login-logo { display: flex; justify-content: center; margin-bottom: 18px; }
.login-logo img { height: 84px; width: auto; max-width: 100%; border-radius: 10px; object-fit: contain; }
.tarjeta-login h1 { font-size: 1.35rem; color: #111827; margin-bottom: 6px; }
.tarjeta-login p.subtitulo { color: #6B7280; margin-bottom: 22px; }
.tarjeta-login .campo { text-align: left; }
.tarjeta-login input[type=text], .tarjeta-login input[type=password] { border-radius: 8px; }
.tarjeta-login input:focus { outline: 2px solid var(--acento); outline-offset: 0; border-color: var(--acento); }
.tarjeta-login .boton.ancho { width: 100%; padding: 11px 14px; font-size: 1rem; }
.tarjeta-login .boton { background: var(--acento); color: #111827; }
.tarjeta-login .boton:hover { background: #FBBF24; text-decoration: none; }
/* Franja de navegación de la factura: volver al proyecto / cliente */
.franja-navegacion { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.franja-navegacion .boton { font-size: 0.85rem; }
@media (min-width: 901px) { body.pagina-login { padding-left: 0; } }

/* Entrega 31: filas de suma bajo las tablas del proyecto + icono del asistente */
tfoot tr.fila-suma td{font-weight:700;background:var(--fondo-suave,#f4f6f8);border-top:2px solid var(--borde,#d8dde3)}
tfoot tr.fila-suma-suave td{font-weight:600;color:var(--texto-suave)}
#asistente-boton svg{width:30px;height:30px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Entrega 32 */
.tarjeta-login h1.login-marca { font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; font-weight: 300; font-size: 1.45rem; letter-spacing: .02em; line-height: 1.25; color: #111827; margin: 0 0 8px; }
.tarjeta-login h1.login-marca span { font-weight: 700; color: #B45309; letter-spacing: .08em; }
table.tabla th { white-space: nowrap; }
table.tabla.tabla-proyectos { min-width: 980px; }
.trim-base strong { color: #047857; }
.trim-ivaimporte strong, .trim-ivaimporte span { color: #B91C1C; }
.trim-ivaimporte span { font-weight: 600; }
.tarjeta-login h1.login-marca em { display: block; font-style: normal; font-size: 1.2rem; font-weight: 300; letter-spacing: .03em; white-space: nowrap; }
.tarjeta-login h1.login-marca span { display: block; font-size: 1.9rem; margin-top: 2px; }

/* ===== Entrega 34 ===== */
.texto-suave { color: var(--texto-suave); }
/* Foco visible para quien navega con teclado (antes se quitaba el contorno en las casillas del catálogo) */
textarea.textarea-linea:focus, .input-precio-defecto:focus { border-color: var(--gris-borde); outline: 2px solid #B45309; outline-offset: 1px; }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid #B45309; outline-offset: 2px; }
.campo input:focus, .campo select:focus, .campo textarea:focus, #asistente-input:focus { box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.30); }
/* Zonas táctiles de al menos 44 px en móvil/tablet (recomendación WCAG 2.5.5 / Apple HIG) */
@media (max-width: 900px), (pointer: coarse) {
  .boton, button, select, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { min-height: 44px; }
  input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; }
  td a, th a, .menu a, nav a { display: inline-block; padding-top: 13px; padding-bottom: 13px; }
  .menu-boton, .boton { min-width: 44px; }
}

/* ===== Entrega 35 ===== */
/* Zonas pulsables de al menos 44 px también con ratón (antes solo en móvil/tablet) */
.boton, button:not(.btn-ver-password), select, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { min-height: 44px; }
tr[data-href]:focus-visible { outline: 2px solid #B45309; outline-offset: -2px; background: #FFF7ED; }
.boton, button.boton, a.boton { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }