/* =========================================================================
   DRONGIS · Cotizador — hoja de estilo
   Paleta oficial de marca (DrongisBranding.pdf)
   ========================================================================= */

:root{
  --tinta:#07212F;
  --azul:#09506D;
  --turquesa:#46B1A0;
  --lima:#8BC63F;
  --verde:#A2D49D;
  --verde-pal:#DCEAB7;
  --amarillo:#FECD07;

  --fondo:#F4F6F7;
  --papel:#FFFFFF;
  --borde:#DDE4E7;
  --borde-fuerte:#C3CFD4;
  --texto:#0F2B39;
  --suave:#5C7684;
  --rojo:#C0392B;

  --r:10px;
  --sombra:0 1px 2px rgba(7,33,47,.06), 0 6px 20px rgba(7,33,47,.05);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--fondo);
  color:var(--texto);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ---------- pantalla de acceso ---------- */
.pantalla-acceso{
  min-height:100vh;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--tinta) 0%,var(--azul) 55%,#12707d 100%);
}
.acceso-caja{width:min(380px,92vw);text-align:center;color:#fff}
.acceso-logo{width:230px;max-width:80%;margin-bottom:6px}
.acceso-sub{
  font-family:'Raleway',sans-serif;font-weight:300;letter-spacing:.14em;
  text-transform:uppercase;font-size:12px;color:var(--turquesa);margin:0 0 28px
}
.acceso-caja form{display:grid;gap:14px;text-align:left}
.acceso-caja label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#B7D2DA;display:grid;gap:6px}
.acceso-caja input{
  font:inherit;font-size:15px;text-transform:none;letter-spacing:0;color:#fff;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r);padding:11px 13px;
}
.acceso-caja input:focus{outline:none;border-color:var(--turquesa);background:rgba(255,255,255,.14)}
.acceso-caja button{
  font:inherit;font-weight:600;letter-spacing:.04em;cursor:pointer;margin-top:6px;
  background:var(--turquesa);color:var(--tinta);border:0;border-radius:var(--r);padding:12px;
}
.acceso-caja button:hover{background:#5cc4b3}
.acceso-error{color:var(--amarillo);font-size:13px;margin:0}
.acceso-pie{margin-top:26px;font-family:'Raleway',sans-serif;font-weight:300;font-size:11px;color:#8FB0BC}

/* ---------- barra superior ---------- */
.barra{
  display:flex;align-items:center;gap:24px;
  background:var(--tinta);padding:0 20px;height:58px;position:sticky;top:0;z-index:20;
}
.barra-logo{height:24px}
.barra-nav{display:flex;gap:2px;flex:1}
.tab{
  font:inherit;font-weight:500;font-size:14px;color:#9FBAC5;cursor:pointer;
  background:none;border:0;border-bottom:2px solid transparent;padding:18px 14px 16px;
}
.tab:hover{color:#fff}
.tab.activo{color:#fff;border-bottom-color:var(--turquesa)}
.barra-usuario{display:flex;align-items:center;gap:14px;font-size:13px;color:#9FBAC5}
.salir{color:#9FBAC5;text-decoration:none;border:1px solid rgba(255,255,255,.2);border-radius:6px;padding:4px 10px}
.salir:hover{color:#fff;border-color:var(--turquesa)}

/* ---------- estructura ---------- */
main{padding:22px;max-width:1500px;margin:0 auto}
.vista{display:none}
.vista.activa{display:block}
.panel{background:var(--papel);border:1px solid var(--borde);border-radius:var(--r);box-shadow:var(--sombra);padding:20px}
.panel h2{
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--azul);
  margin:0 0 18px;padding-bottom:10px;border-bottom:1px solid var(--borde);font-weight:600
}
.cotizar-grid{display:grid;grid-template-columns:minmax(360px,1fr) minmax(420px,1.25fr);gap:20px;align-items:start}
.clientes-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:20px;align-items:start}
@media(max-width:1080px){.cotizar-grid,.clientes-grid{grid-template-columns:1fr}}

/* ---------- campos ---------- */
.campo{display:grid;gap:5px;margin-bottom:14px;position:relative}
.campo>span{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--suave);font-weight:600}
.campo input,.campo select,.campo textarea{
  font:inherit;width:100%;padding:9px 11px;border:1px solid var(--borde-fuerte);
  border-radius:8px;background:#fff;color:var(--texto)
}
.campo textarea{resize:vertical;font-family:'Raleway',sans-serif;font-weight:400}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--turquesa);box-shadow:0 0 0 3px rgba(70,177,160,.16)
}
.campo em{
  position:absolute;right:11px;bottom:10px;font-style:normal;font-size:11px;
  color:var(--suave);pointer-events:none;background:#fff;padding-left:4px
}
.campo.check{flex-direction:row;display:flex;align-items:center;gap:8px;margin-top:22px}
.campo.check input{width:auto}
.campo.check span{font-size:13px;text-transform:none;letter-spacing:0;color:var(--texto);font-weight:500}
.campos-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.campos-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.ayuda{font-family:'Raleway',sans-serif;font-weight:400;font-size:12px;color:var(--suave);margin:-2px 0 0;line-height:1.4}
.ayuda-larga{font-family:'Raleway',sans-serif;font-size:13.5px;color:var(--suave);margin:-6px 0 18px;max-width:70ch}
.resumen-modulo{
  font-family:'Raleway',sans-serif;font-size:13px;color:var(--suave);
  margin:-6px 0 16px;padding-left:11px;border-left:3px solid var(--turquesa)
}
.params{border-top:1px solid var(--borde);padding-top:16px;margin-top:4px}
.busqueda{font:inherit;width:100%;padding:9px 11px;border:1px solid var(--borde-fuerte);border-radius:8px;margin-bottom:14px}
.busqueda:focus{outline:none;border-color:var(--turquesa)}

/* ---------- indicadores ---------- */
.indicadores{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:16px 0}
.ind{background:#F7FAFA;border:1px solid var(--borde);border-radius:8px;padding:9px 11px}
.ind span{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--suave);font-weight:600}
.ind strong{display:block;font-size:17px;font-weight:600;margin-top:2px;color:var(--tinta)}
.ind.fuerte{background:var(--tinta);border-color:var(--tinta)}
.ind.fuerte span{color:var(--turquesa)}
.ind.fuerte strong{color:#fff}
.ind.bien{border-left:3px solid var(--lima)}
.ind.medio{border-left:3px solid var(--amarillo)}
.ind.mal{border-left:3px solid var(--rojo)}
.ind.mal strong{color:var(--rojo)}

/* ---------- avisos ---------- */
.aviso{
  font-family:'Raleway',sans-serif;font-size:13px;line-height:1.5;
  border-radius:8px;padding:10px 13px;margin-bottom:8px
}
.aviso.alerta{background:#FDF2F0;border-left:3px solid var(--rojo);color:#8E2C20}
.aviso.nota{background:#F3F8EF;border-left:3px solid var(--lima);color:#3D5B28}

/* ---------- desglose ---------- */
.desglose-caja{border:1px solid var(--borde);border-radius:8px;margin-bottom:16px;background:#FBFCFC}
.desglose-caja summary{
  cursor:pointer;padding:10px 13px;font-size:12px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--azul)
}
.tabla-desglose{width:100%;border-collapse:collapse;font-size:13.5px;margin-bottom:6px}
.tabla-desglose td{padding:5px 13px;border-top:1px solid var(--borde)}
.tabla-desglose td:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tabla-desglose tr.subtotal td{font-weight:600;background:#EEF4F5}
.tabla-desglose tr.total td{font-weight:700;background:var(--tinta);color:#fff}
.tabla-desglose tr.nota td{color:var(--suave);font-family:'Raleway',sans-serif}

/* ---------- precio final ---------- */
.precio-final{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:linear-gradient(100deg,var(--tinta),var(--azul));
  border-radius:var(--r);padding:14px 18px
}
.precio-label{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--turquesa);font-weight:600}
#precioTotal{font-size:27px;font-weight:700;color:#fff;line-height:1.1}

/* ---------- botones ---------- */
button{font-family:inherit}
.btn-primario,.btn-secundario,.btn-plano,.btn-peligro{
  font:inherit;font-weight:600;font-size:14px;cursor:pointer;border:0;
  border-radius:8px;padding:10px 18px;white-space:nowrap
}
.btn-primario{background:var(--turquesa);color:var(--tinta)}
.btn-primario:hover{background:#5cc4b3}
.btn-secundario{background:var(--azul);color:#fff}
.btn-secundario:hover{background:#0a637f}
.btn-plano{background:#EDF1F2;color:var(--suave)}
.btn-plano:hover{background:#E2E8EA;color:var(--texto)}
.btn-peligro{background:#FBEAE7;color:var(--rojo)}
.btn-peligro:hover{background:var(--rojo);color:#fff}
.acciones{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}

/* ---------- tablas ---------- */
.tabla-lineas,.tabla-historial{width:100%;border-collapse:collapse;font-size:13.5px;margin-bottom:12px}
.tabla-lineas th,.tabla-historial th{
  text-align:left;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--suave);padding:0 8px 7px;border-bottom:1px solid var(--borde);font-weight:600
}
.tabla-lineas td,.tabla-historial td{padding:9px 8px;border-bottom:1px solid var(--borde);vertical-align:top}
.num,td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tabla-lineas .desc{font-family:'Raleway',sans-serif;font-size:12.5px;color:var(--suave);line-height:1.45}
.tabla-lineas .item{font-weight:600}
.quitar{
  background:none;border:0;color:var(--borde-fuerte);cursor:pointer;font-size:17px;
  line-height:1;padding:2px 4px
}
.quitar:hover{color:var(--rojo)}
.vacio{
  font-family:'Raleway',sans-serif;font-size:13px;color:var(--suave);text-align:center;
  padding:22px;background:#FBFCFC;border:1px dashed var(--borde-fuerte);border-radius:8px
}
.tabla-historial .acc{display:flex;gap:6px;justify-content:flex-end}
.tabla-historial .acc button{font-size:12px;padding:5px 10px}

/* ---------- totales ---------- */
.totales{border-top:2px solid var(--tinta);padding-top:12px;margin:14px 0 18px}
.totales div{display:flex;justify-content:space-between;padding:4px 0;font-size:14px}
.totales span{color:var(--suave)}
.totales strong{font-variant-numeric:tabular-nums}
.totales .grande{border-top:1px solid var(--borde);margin-top:6px;padding-top:9px;font-size:19px}
.totales .grande strong{color:var(--azul);font-weight:700}

/* ---------- lista de clientes ---------- */
.lista{display:grid;gap:7px;max-height:62vh;overflow:auto}
.cliente-item{
  border:1px solid var(--borde);border-radius:8px;padding:11px 13px;cursor:pointer;background:#fff
}
.cliente-item:hover{border-color:var(--turquesa);background:#F7FCFB}
.cliente-item.sel{border-color:var(--turquesa);border-left-width:3px;background:#F2FAF9}
.cliente-item b{display:block;font-size:14.5px}
.cliente-item small{font-family:'Raleway',sans-serif;color:var(--suave);font-size:12.5px}
.ficha-cliente{
  background:#F7FAFA;border:1px solid var(--borde);border-left:3px solid var(--turquesa);
  border-radius:8px;padding:11px 13px;margin-bottom:14px;
  font-family:'Raleway',sans-serif;font-size:12.5px;color:var(--suave);line-height:1.6
}
.ficha-cliente b{font-family:'Barlow',sans-serif;color:var(--texto);font-size:14px}
.oculto{display:none !important}

/* ---------- supuestos ---------- */
.grupo-ajuste{margin-bottom:26px}
.grupo-ajuste h3{
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta);
  margin:0 0 4px;font-weight:600
}
.grupo-ajuste h4{
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--turquesa);
  margin:16px 0 8px;font-weight:600;padding-bottom:5px;border-bottom:1px solid var(--borde)
}
.rejilla-ajustes{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}

/* ---------- etiquetas de estado ---------- */
.etiq{
  display:inline-block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:600;padding:2px 8px;border-radius:20px
}
.etiq.borrador{background:#EDF1F2;color:var(--suave)}
.etiq.enviada{background:#E4F2F9;color:var(--azul)}
.etiq.aprobada{background:#EDF7E4;color:#4C7A22}
.etiq.rechazada{background:#FBEAE7;color:var(--rojo)}

/* ---------- toast ---------- */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translate(-50%,80px);
  background:var(--tinta);color:#fff;padding:11px 20px;border-radius:8px;
  font-size:14px;box-shadow:0 8px 30px rgba(7,33,47,.25);
  opacity:0;transition:.25s;z-index:60;pointer-events:none
}
.toast.ver{opacity:1;transform:translate(-50%,0)}
.toast.error{background:var(--rojo)}