/* ============================================================
   Cotizador M3 Hidro
   Paleta del manual de marca: celeste #169fdb / gris #575756
   Tipografía: Nunito
   ============================================================ */

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../assets/fonts/nunito-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2122, U+2212;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../assets/fonts/nunito-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+2020, U+20A0-20AB, U+2C60-2C7F;
}

:root {
  --celeste: #169fdb;
  --celeste-osc: #0f7fb1;
  --celeste-claro: #e8f6fd;
  --gris: #575756;
  --gris-medio: #7c7c7b;
  --gris-claro: #e4e7ea;
  --fondo: #f2f5f7;
  --blanco: #ffffff;
  --texto: #2f3335;
  --exito: #1f9d55;
  --error: #d64545;
  --alerta: #c98a00;
  --sombra: 0 1px 2px rgba(38, 50, 56, .08), 0 2px 10px rgba(38, 50, 56, .06);
  --radio: 10px;
  --alto-topbar: 60px;
}

*, *::before, *::after { box-sizing: border-box; }

/* El atributo hidden debe ganarle a cualquier display de más abajo */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  font-size: 15px;
  line-height: 1.45;
  padding-bottom: env(safe-area-inset-bottom);
}

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.01em; }
h2 { font-size: 1.02rem; color: var(--gris); }

.mono { font-variant-numeric: tabular-nums; }
.oculto { display: none !important; }

/* ---------------- Inicio de sesión ---------------- */
body.con-login { overflow: hidden; }
body.con-login .topbar, body.con-login main { display: none; }

.login {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: linear-gradient(150deg, #f2f5f7 0%, #dceefa 100%);
  overflow-y: auto;
}
.login-caja {
  width: 100%; max-width: 380px;
  background: var(--blanco);
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(38, 50, 56, .16);
  padding: 30px 26px 22px;
  text-align: center;
}
.login-logo { height: 62px; width: auto; margin-bottom: 12px; }
.login-caja h1 { font-size: 1.35rem; color: var(--gris); }
.login-sub { color: var(--gris-medio); font-size: .9rem; margin: 4px 0 22px; }
.login-caja .campo { text-align: left; }
.login-btn { width: 100%; padding: 13px; font-size: 1rem; margin-top: 6px; }
.login-caja .btn-texto { width: 100%; margin-top: 4px; font-weight: 700; font-size: .86rem; }
.login-caja .error, .login-caja .nota { text-align: left; margin: 2px 0 8px; }

/* ---------------- Usuario conectado ---------------- */
.usuario { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.usuario .avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--celeste); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .84rem; flex-shrink: 0;
}
.usuario-nombre {
  font-weight: 700; font-size: .84rem; color: var(--gris);
  max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.usuario .btn-texto { padding: 6px 8px; font-size: .82rem; }

/* ---------------- Barra superior ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 16px;
  min-height: var(--alto-topbar);
  padding: 8px 18px;
  background: var(--blanco);
  border-bottom: 1px solid var(--gris-claro);
  box-shadow: 0 1px 6px rgba(38, 50, 56, .06);
}

.marca { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.marca img { height: 38px; width: auto; display: block; }
.marca-txt { display: flex; flex-direction: column; line-height: 1.05; }
.marca-txt strong { font-size: 1.02rem; color: var(--gris); }
.marca-txt span { font-size: .74rem; font-weight: 700; color: var(--celeste); letter-spacing: .09em; text-transform: uppercase; }

.tabs { display: flex; gap: 4px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--gris-medio);
  padding: 9px 14px; border-radius: 999px; white-space: nowrap;
  transition: background .15s, color .15s;
}
.tab:hover { background: var(--fondo); color: var(--gris); }
.tab.activa { background: var(--celeste); color: #fff; }

.conexion { display: flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700; color: var(--gris-medio); flex-shrink: 0; }
.conexion .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--gris-medio); }
.conexion.online .punto { background: var(--exito); }
.conexion.local .punto { background: var(--alerta); }
.conexion.error .punto { background: var(--error); }

/* ---------------- Layout ---------------- */
main { max-width: 1400px; margin: 0 auto; padding: 18px; }
.vista { display: none; }
.vista.activa { display: block; }

.grid-superior { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.grid-cierre { display: grid; grid-template-columns: 1fr 380px; gap: 16px; margin-top: 16px; }

/* ---------------- Tarjetas ---------------- */
.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--gris-claro);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 16px;
  margin-bottom: 16px;
}
.grid-superior .tarjeta, .grid-cierre .tarjeta { margin-bottom: 0; }

.tarjeta-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
  padding-bottom: 10px; border-bottom: 2px solid var(--celeste-claro);
}
.head-acciones { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }

/* ---------------- Campos ---------------- */
.campo { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; position: relative; }
.campo:last-child { margin-bottom: 0; }
.campo label, .mini-campo {
  font-size: .72rem; font-weight: 800; color: var(--gris-medio);
  text-transform: uppercase; letter-spacing: .04em;
}
.mini-campo { display: flex; flex-direction: column; gap: 4px; }

input, select, textarea {
  font: inherit; color: var(--texto);
  background: var(--blanco);
  border: 1.5px solid var(--gris-claro);
  border-radius: 8px;
  padding: 9px 11px;
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--celeste);
  box-shadow: 0 0 0 3px rgba(22, 159, 219, .16);
}
input[type="search"] { -webkit-appearance: none; }
textarea { resize: vertical; }

.fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fila-2 .campo { margin-bottom: 12px; }

.input-sufijo { position: relative; display: block; }
.input-sufijo i {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-style: normal; font-weight: 800; color: var(--gris-medio); pointer-events: none;
}
.input-sufijo input { padding-right: 26px; }

/* Campo con flechas pegadas al número, para sumar o restar días */
.pasos { display: flex; align-items: center; gap: 10px; }

.pasos-grupo {
  display: inline-flex; align-items: stretch; flex-shrink: 0;
  border: 1.5px solid var(--gris-claro); border-radius: 8px;
  background: var(--blanco); overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.pasos-grupo:focus-within {
  border-color: var(--celeste);
  box-shadow: 0 0 0 3px rgba(22, 159, 219, .16);
}

.pasos-grupo input {
  width: 56px; text-align: center; font-weight: 800;
  font-variant-numeric: tabular-nums;
  border: 0; border-radius: 0; padding: 9px 2px;
  border-left: 1.5px solid var(--gris-claro);
  border-right: 1.5px solid var(--gris-claro);
}
.pasos-grupo input:focus { outline: none; box-shadow: none; }
/* Se ocultan las flechitas nativas: se usan los botones grandes */
.pasos-grupo input::-webkit-outer-spin-button,
.pasos-grupo input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pasos-grupo input[type=number] { -moz-appearance: textfield; appearance: textfield; }

.paso {
  appearance: none; cursor: pointer; flex-shrink: 0;
  width: 38px; border: 0; line-height: 1;
  background: var(--blanco); color: var(--celeste);
  font-size: 1.2rem; font-weight: 800;
  transition: background .15s;
}
.paso:hover { background: var(--celeste-claro); }
.paso:active { background: #d3ecfa; }
.paso-unidad {
  font-size: .84rem; font-weight: 700; color: var(--gris-medio);
  flex: 1 1 auto; min-width: 0;
}

/* El número de cotización se asigna solo, pero se muestra destacado */
.numero-cotiz {
  background: var(--celeste-claro);
  border-color: #b9e2f6;
  font-weight: 800;
  color: var(--celeste-osc);
}

.check { display: flex; align-items: center; gap: 8px; font-weight: 600; margin: 4px 0 14px; }
.check input { width: 18px; height: 18px; accent-color: var(--celeste); flex-shrink: 0; }

.nota { font-size: .82rem; color: var(--gris-medio); margin: 8px 0 0; }
.nota-interna { font-size: .78rem; color: var(--gris-medio); margin: 10px 0 0; padding-left: 10px; border-left: 3px solid var(--celeste-claro); }
.vacio { text-align: center; color: var(--gris-medio); padding: 26px 12px; margin: 0; }
.error { color: var(--error); font-weight: 700; font-size: .86rem; margin: 0; }

/* ---------------- Botones ---------------- */
.btn {
  appearance: none; font: inherit; font-weight: 800; cursor: pointer;
  border-radius: 8px; padding: 10px 16px; border: 1.5px solid transparent;
  transition: background .15s, border-color .15s, color .15s, transform .05s;
  white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn:active { transform: translateY(1px); }
.btn-primario { background: var(--celeste); color: #fff; }
.btn-primario:hover { background: var(--celeste-osc); }
.btn-secundario { background: var(--blanco); color: var(--celeste); border-color: var(--celeste); }
.btn-secundario:hover { background: var(--celeste-claro); }
.btn-texto { background: transparent; color: var(--gris-medio); padding: 10px 10px; }
.btn-texto:hover { color: var(--celeste); background: var(--celeste-claro); }
.btn-peligro { background: transparent; color: var(--error); border-color: var(--gris-claro); }
.btn-peligro:hover { background: #fdeaea; border-color: var(--error); }

.btn-icono {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  color: var(--gris-medio); font-size: 1rem; line-height: 1;
  padding: 6px 8px; border-radius: 6px;
}
.btn-icono:hover { background: var(--fondo); color: var(--error); }

/* ---------------- Buscador con sugerencias ---------------- */
.buscador { position: relative; }
.sugerencias {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  background: var(--blanco); border: 1px solid var(--gris-claro);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(38, 50, 56, .16);
  max-height: 330px; overflow-y: auto;
}
.sug {
  padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--fondo);
  display: flex; flex-direction: column; gap: 1px;
}
.sug:last-child { border-bottom: 0; }
.sug:hover, .sug.marcada { background: var(--celeste-claro); }
.sug .titulo { font-weight: 700; font-size: .92rem; }
.sug .detalle { font-size: .76rem; color: var(--gris-medio); display: flex; gap: 8px; flex-wrap: wrap; }
.sug .detalle .cod { font-weight: 800; color: var(--celeste); }
.sug-vacia { padding: 14px 12px; color: var(--gris-medio); text-align: center; font-size: .88rem; }

/* ---------------- Cliente elegido ---------------- */
.cliente-elegido { margin-bottom: 12px; }
.chip-cliente {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--celeste-claro); border: 1px solid #b9e2f6;
  border-radius: 8px; padding: 9px 12px;
}
.chip-cliente strong { display: block; font-size: .98rem; color: var(--gris); }
.chip-cliente span { font-size: .8rem; color: var(--celeste-osc); font-weight: 700; }
.cliente-datos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 4px 14px; padding: 8px 2px 0; font-size: .82rem; color: var(--gris-medio);
}
.cliente-datos b { color: var(--texto); font-weight: 700; }
.cliente-datos div { overflow-wrap: anywhere; }

/* ---------------- Agregar producto ---------------- */
.agregar-producto { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 14px; }
.agregar-producto .crece { flex: 1 1 auto; margin-bottom: 0; }
.agregar-producto .angosto { width: 110px; flex-shrink: 0; margin-bottom: 0; }
.agregar-producto .btn { height: 40px; }

/* ---------------- Tablas ---------------- */
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
thead th {
  text-align: left; font-size: .68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--gris-medio);
  padding: 8px 8px; border-bottom: 2px solid var(--gris-claro); white-space: nowrap;
}
thead th.num, td.num { text-align: right; }
tbody td { padding: 7px 8px; border-bottom: 1px solid var(--fondo); vertical-align: middle; }
tbody tr:hover { background: #fafcfd; }

.interno { background: #fbfcfd; }
thead th.interno { color: var(--celeste-osc); }

.tabla-items .col-cod { width: 92px; }
.tabla-items .col-desc { min-width: 240px; }
.tabla-items input {
  padding: 5px 7px; border-radius: 6px; text-align: right;
  font-variant-numeric: tabular-nums; border-width: 1px;
}
.tabla-items .in-cod, .tabla-items .in-desc, .tabla-items .in-um { text-align: left; }
.tabla-items .in-cod { width: 84px; }
.tabla-items .in-um { width: 92px; }
.tabla-items .in-cant { width: 74px; }
.tabla-items .in-costo { width: 96px; }
.tabla-items .in-margen { width: 74px; }
.tabla-items .celda-precio { font-weight: 800; font-variant-numeric: tabular-nums; }
.tabla-items .celda-total { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--gris); }
.tabla-items .cod { font-weight: 800; color: var(--celeste-osc); font-variant-numeric: tabular-nums; }
.tabla-items .desc { font-weight: 600; }
.tabla-items .desc input { text-align: left; width: 100%; }
.tabla-items .um { color: var(--gris-medio); font-size: .8rem; }
.margen-bajo { color: var(--error) !important; }

.tabla-datos td:first-child { white-space: nowrap; }
.tabla-datos td .btn { padding: 5px 10px; font-size: .8rem; }
.tabla-datos .acciones { display: flex; gap: 6px; justify-content: flex-end; }

/* ---------------- Totales ---------------- */
.tarjeta-totales { display: flex; flex-direction: column; gap: 14px; }
.totales { display: flex; flex-direction: column; gap: 2px; }
.linea-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 5px 0; font-size: .92rem;
}
.linea-total span { color: var(--gris-medio); font-weight: 600; }
.linea-total b { font-variant-numeric: tabular-nums; font-weight: 800; }
.linea-total.descuento b { color: var(--error); }
.linea-total.grande {
  font-size: 1.05rem; border-top: 2px solid var(--gris-claro);
  margin-top: 6px; padding-top: 10px;
}
.linea-total.grande span { color: var(--gris); font-weight: 800; }
.linea-total.grande b { font-size: 1.45rem; color: var(--celeste); }
.linea-total.interno { font-size: .8rem; opacity: .85; }
.linea-total.interno:first-of-type { margin-top: 8px; border-top: 1px dashed var(--gris-claro); padding-top: 8px; }

.linea-total.dolar b { color: var(--gris); font-size: 1.05rem; }
.linea-total.dolar { border-bottom: 1px dashed var(--gris-claro); padding-bottom: 8px; }

/* ---------------- Bloque del dólar ---------------- */
.bloque-dolar { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--gris-claro); }
.bloque-dolar .check { margin-bottom: 8px; }
.fila-dolar { display: flex; align-items: flex-end; gap: 10px; }
.fila-dolar .campo { flex: 0 1 180px; margin-bottom: 0; }
.fila-dolar .btn { height: 40px; }

.acciones-finales { display: flex; flex-wrap: wrap; gap: 8px; }
.acciones-finales .btn-primario { flex: 1 1 100%; padding: 13px; font-size: 1rem; }
.acciones-finales .btn-secundario { flex: 1 1 auto; }

/* ---------------- Modal ---------------- */
.modal {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(47, 51, 53, .5);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  overflow-y: auto;
}
.modal[hidden] { display: none; }
.modal-caja {
  background: var(--blanco); border-radius: var(--radio);
  width: 100%; max-width: 620px; max-height: 92vh; overflow-y: auto;
  box-shadow: 0 16px 48px rgba(38, 50, 56, .3);
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--gris-claro);
  position: sticky; top: 0; background: var(--blanco); border-radius: var(--radio) var(--radio) 0 0;
}
.modal-cuerpo { padding: 18px; }
.modal-pie { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ---------------- Cartel de carga ---------------- */
.cargando {
  position: fixed; inset: 0; z-index: 85;
  background: rgba(242, 245, 247, .88);
  display: flex; align-items: center; justify-content: center;
}
.cargando-caja {
  display: flex; align-items: center; gap: 14px;
  background: var(--blanco); border: 1px solid var(--gris-claro);
  border-radius: 12px; padding: 20px 26px;
  box-shadow: 0 10px 32px rgba(38, 50, 56, .16);
  font-weight: 700; color: var(--gris);
}
.cargando-rueda {
  width: 22px; height: 22px; flex-shrink: 0;
  border: 3px solid var(--gris-claro);
  border-top-color: var(--celeste);
  border-radius: 50%;
  animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .cargando-rueda { animation-duration: 2.4s; }
}

/* ---------------- Aviso flotante ---------------- */
.aviso {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 80; background: var(--gris); color: #fff;
  padding: 11px 20px; border-radius: 999px; font-weight: 700; font-size: .9rem;
  box-shadow: 0 6px 20px rgba(38, 50, 56, .3); max-width: 92vw; text-align: center;
}
.aviso.ok { background: var(--exito); }
.aviso.mal { background: var(--error); }

/* ============================================================
   MÓVIL
   ============================================================ */
@media (max-width: 1080px) {
  .grid-superior, .grid-cierre { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body { font-size: 15px; }
  main { padding: 12px; }

  .topbar { flex-wrap: wrap; padding: 8px 12px; gap: 8px; }
  .marca img { height: 32px; }
  .conexion { order: 2; margin-left: auto; }
  .usuario { order: 2; }
  .usuario-nombre { display: none; }
  .tabs { order: 3; width: 100%; margin-left: 0; padding-bottom: 2px; }
  .fila-dolar { flex-wrap: wrap; }
  .fila-dolar .campo { flex: 1 1 140px; }
  .pasos-grupo input { width: 64px; padding-top: 11px; padding-bottom: 11px; }
  .paso { width: 46px; }
  .tab { flex: 1 0 auto; padding: 9px 12px; font-size: .9rem; }

  .tarjeta { padding: 13px; }
  .fila-2 { grid-template-columns: 1fr; gap: 0; }

  .agregar-producto { flex-wrap: wrap; }
  .agregar-producto .crece { flex: 1 1 100%; margin-bottom: 10px; }
  .agregar-producto .angosto { width: 105px; }
  .agregar-producto .btn { flex: 1 1 auto; }

  /* La tabla de ítems pasa a fichas */
  .tabla-scroll { overflow: visible; }
  .tabla-items thead { display: none; }
  .tabla-items, .tabla-items tbody, .tabla-items tr, .tabla-items td { display: block; width: 100%; }
  .tabla-items tr {
    border: 1px solid var(--gris-claro); border-radius: 9px;
    padding: 10px 12px 8px; margin-bottom: 10px; position: relative;
    background: var(--blanco);
  }
  .tabla-items tr:hover { background: var(--blanco); }
  .tabla-items td { border: 0; padding: 3px 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .tabla-items td.interno { background: transparent; }
  .tabla-items td::before {
    content: attr(data-etq);
    font-size: .7rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .04em; color: var(--gris-medio);
  }
  .tabla-items td.celda-desc { display: block; margin-bottom: 6px; }
  .tabla-items td.celda-desc::before { display: block; margin-bottom: 2px; }
  .tabla-items td.celda-desc input { text-align: left; max-width: none; width: 100%; }
  .tabla-items td.celda-cod { padding-right: 32px; }
  .tabla-items td.celda-cod::before { content: 'Código'; }
  .tabla-items td.celda-cod input { max-width: 120px; }
  .tabla-items td.celda-quitar { position: absolute; top: 6px; right: 6px; padding: 0; width: auto; }
  .tabla-items td.celda-quitar::before { display: none; }
  .tabla-items input { max-width: 130px; }
  .tabla-items .in-cant, .tabla-items .in-margen { width: 84px; }
  .tabla-items td.total-fila { border-top: 1px dashed var(--gris-claro); margin-top: 6px; padding-top: 7px; }

  .tabla-datos { font-size: .84rem; }
  .tabla-datos thead th, .tabla-datos td { padding: 6px 6px; }
  .tabla-datos .ocultable { display: none; }

  .acciones-finales .btn { flex: 1 1 100%; }
  .modal { padding: 0; align-items: flex-end; }
  .modal-caja { max-width: none; max-height: 94vh; border-radius: var(--radio) var(--radio) 0 0; }
}

@media (max-width: 400px) {
  .marca-txt strong { font-size: .95rem; }
  .tab { font-size: .84rem; padding: 8px 9px; }
}

@media print {
  .topbar, .acciones-finales, .agregar-producto, .interno { display: none !important; }
}