/* =========================================================
   Panel de cotizaciones — Barnat Lawn Solutions
   ========================================================= */
:root{
  --verde-900:#0c2f1b;
  --verde-800:#14532d;
  --verde-700:#1b6b3a;
  --verde-600:#248c4b;
  --lima:#7ed957;
  --crema:#f6f8f3;
  --tinta:#12211a;
  --gris:#5d6b62;
  --linea:rgba(18,33,26,.10);
  --sombra:0 8px 24px rgba(12,47,27,.10);
  --sombra-lg:0 20px 50px rgba(12,47,27,.20);
  --radio:16px;
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;background:var(--crema);color:var(--tinta);
  font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  line-height:1.55;-webkit-text-size-adjust:100%;
}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;line-height:1.2;letter-spacing:-.01em}
:focus-visible{outline:3px solid var(--lima);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:0;border-radius:999px;padding:13px 22px;cursor:pointer;
  font:inherit;font-weight:800;font-size:.96rem;
  transition:transform .18s,filter .18s,box-shadow .18s;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn:active{transform:none}
.btn--lima{background:var(--lima);color:var(--verde-900);box-shadow:0 6px 18px rgba(126,217,87,.35)}
.btn--gris{background:#e7ece4;color:var(--tinta)}
.btn--full{width:100%}
.btn.cargando{pointer-events:none;opacity:.8}
.spin{display:none;width:16px;height:16px;border:2.4px solid rgba(0,0,0,.2);border-top-color:currentColor;border-radius:50%;animation:giro .7s linear infinite}
.btn.cargando .spin{display:block}
@keyframes giro{to{transform:rotate(360deg)}}

.ico{
  display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;
  border:0;border-radius:12px;background:rgba(255,255,255,.14);cursor:pointer;transition:background .2s;
}
.ico svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico:hover{background:rgba(255,255,255,.26)}

/* ---------- campos ---------- */
.campo{display:block;margin-bottom:15px;text-align:left}
.campo>span{display:block;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--verde-800);margin-bottom:7px}
.campo input,.campo textarea,.campo select{
  width:100%;font:inherit;color:var(--tinta);background:#fbfdfa;
  padding:13px 15px;border:2px solid #e2e8dd;border-radius:12px;transition:border-color .2s,box-shadow .2s;
}
.campo textarea{resize:vertical;min-height:110px}
.campo input:focus,.campo textarea:focus,.campo select:focus{
  outline:0;border-color:var(--verde-600);background:#fff;box-shadow:0 0 0 4px rgba(36,140,75,.12);
}

/* =========================================================
   LOGIN
   ========================================================= */
.login{
  min-height:100svh;display:grid;place-items:center;padding:24px 18px;
  background:radial-gradient(120% 70% at 80% 0%,#1d7a44 0%,transparent 60%),linear-gradient(165deg,#0c2f1b,#14532d 60%,#0f3d22);
}
.login__box{
  width:100%;max-width:400px;background:#fff;border-radius:22px;
  padding:34px 26px 26px;text-align:center;box-shadow:var(--sombra-lg);
  animation:sube .45s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes sube{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.login__box img{width:72px;height:72px;margin:0 auto 14px;border-radius:50%}
.login__box h1{font-size:1.4rem;margin-bottom:2px}
.login__sub{margin:0 0 24px;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);font-weight:700}
.login__err{margin:12px 0 0;color:#c9302c;font-weight:700;font-size:.9rem;min-height:1.2em}
.login__demo{margin:18px 0 0;font-size:.8rem;color:var(--gris);background:#f2f6ef;border-radius:10px;padding:9px}

/* =========================================================
   CABECERA
   ========================================================= */
.top{position:sticky;top:0;z-index:20;background:linear-gradient(135deg,#0c2f1b,#14532d);box-shadow:0 4px 18px rgba(12,47,27,.22)}
.top__in{max-width:1080px;margin:auto;padding:11px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.top__marca{display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none;min-width:0}
.top__marca img{width:38px;height:38px;border-radius:50%;background:#fff;flex:0 0 38px}
.top__marca span{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.top__marca strong{font-size:1.02rem}
.top__marca small{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top__acc{display:flex;gap:8px;flex:0 0 auto}

.aviso{
  max-width:1080px;margin:14px auto 0;padding:11px 15px;border-radius:12px;
  background:#eef6e8;border:1px solid rgba(36,140,75,.28);color:var(--verde-800);font-size:.86rem;
}
.aviso--warn{background:#fff6e6;border-color:rgba(245,166,35,.4);color:#7a4d00}
.aviso code{background:rgba(0,0,0,.07);padding:1px 5px;border-radius:5px;font-size:.92em}
.aviso{margin-inline:16px}
@media (min-width:1112px){ .aviso{margin-inline:auto} }

/* =========================================================
   RESUMEN + FILTROS
   ========================================================= */
.resumen{max-width:1080px;margin:16px auto 0;padding:0 16px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (min-width:620px){ .resumen{grid-template-columns:repeat(4,1fr)} }
.tarjeta{background:#fff;border:1px solid var(--linea);border-radius:14px;padding:14px;box-shadow:var(--sombra)}
.tarjeta b{display:block;font-size:1.6rem;line-height:1.1;color:var(--verde-700)}
.tarjeta span{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}

.barra{max-width:1080px;margin:18px auto 0;padding:0 16px;display:grid;gap:10px}
@media (min-width:760px){ .barra{grid-template-columns:1fr 280px;align-items:center} }
.filtros{display:flex;gap:7px;overflow-x:auto;padding-bottom:3px;-webkit-overflow-scrolling:touch}
.filtro{
  flex:0 0 auto;border:2px solid #e2e8dd;background:#fff;color:var(--gris);
  padding:8px 14px;border-radius:999px;font:inherit;font-size:.85rem;font-weight:700;cursor:pointer;
  transition:.2s;white-space:nowrap;
}
.filtro:hover{border-color:var(--verde-600);color:var(--verde-800)}
.filtro.on{background:var(--verde-700);border-color:var(--verde-700);color:#fff}
.filtro i{font-style:normal;opacity:.7;margin-left:5px}

.buscar{position:relative;display:block}
.buscar svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:17px;height:17px;fill:none;stroke:var(--gris);stroke-width:2;stroke-linecap:round}
.buscar input{width:100%;font:inherit;padding:12px 14px 12px 38px;border:2px solid #e2e8dd;border-radius:999px;background:#fff}
.buscar input:focus{outline:0;border-color:var(--verde-600)}

/* =========================================================
   LISTA DE COTIZACIONES
   ========================================================= */
.lista{max-width:1080px;margin:16px auto 40px;padding:0 16px;display:grid;gap:14px}
.vacio{text-align:center;color:var(--gris);padding:40px 16px}

.cot{
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  box-shadow:var(--sombra);overflow:hidden;animation:sube .35s cubic-bezier(.2,.7,.3,1) both;
}
.cot__cab{display:flex;align-items:flex-start;gap:12px;padding:16px 16px 12px;cursor:pointer}
.cot__cab h3{font-size:1.08rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cot__meta{font-size:.8rem;color:var(--gris);margin-top:2px}
.cot__flecha{margin-left:auto;flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;color:var(--gris);transition:transform .28s}
.cot.abierta .cot__flecha{transform:rotate(180deg)}
.cot__flecha svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

.pill{
  display:inline-block;padding:3px 11px;border-radius:999px;
  font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
}
.e-nueva{background:#e3f0ff;color:#14538c}
.e-contactado{background:#fff2d6;color:#8a5b00}
.e-cotizado{background:#efe4ff;color:#5c2d91}
.e-agendado{background:#dff5e3;color:#1b6b3a}
.e-completado{background:#d7f5dd;color:#0f5c2a}
.e-perdido{background:#f2e4e4;color:#8c2b28}

.cot__cuerpo{display:none;border-top:1px solid var(--linea);padding:16px}
.cot.abierta .cot__cuerpo{display:block;animation:abre .3s ease both}
@keyframes abre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.datos{display:grid;gap:9px;margin-bottom:14px}
@media (min-width:560px){ .datos{grid-template-columns:1fr 1fr} }
.dato{display:flex;gap:8px;font-size:.92rem;align-items:baseline}
.dato b{flex:0 0 84px;font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}
.dato a{color:var(--verde-700);font-weight:700;text-decoration:none;word-break:break-word}
.dato a:hover{text-decoration:underline}

.servs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.serv{background:#eaf7e4;border:1px solid #b9e3a4;color:var(--verde-800);border-radius:999px;padding:4px 11px;font-size:.78rem;font-weight:700}

.bloque{margin-bottom:14px}
.bloque>h4{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);margin:0 0 6px}
.mensaje{background:#f7faf5;border-radius:10px;padding:11px 13px;font-size:.93rem;white-space:pre-wrap}

.fotos{display:flex;flex-wrap:wrap;gap:8px}
.fotos img{width:82px;height:72px;object-fit:cover;border-radius:10px;border:1px solid var(--linea);cursor:zoom-in;transition:transform .2s}
.fotos img:hover{transform:scale(1.05)}

.notas textarea{width:100%;font:inherit;font-size:.92rem;padding:10px 12px;border:2px solid #e2e8dd;border-radius:10px;background:#fbfdfa;resize:vertical;min-height:64px}
.notas textarea:focus{outline:0;border-color:var(--verde-600);background:#fff}

.estados{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.est{
  border:2px solid #e2e8dd;background:#fff;color:var(--gris);border-radius:999px;
  padding:6px 13px;font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;transition:.18s;
}
.est:hover{border-color:var(--verde-600);color:var(--verde-800)}
.est.on{background:var(--verde-700);border-color:var(--verde-700);color:#fff}

.acciones{display:flex;flex-wrap:wrap;gap:8px}
.acciones .btn{padding:11px 18px;font-size:.9rem}
.acciones .btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.histo{margin-top:14px;border-top:1px dashed var(--linea);padding-top:10px}
.histo li{list-style:none;font-size:.8rem;color:var(--gris);padding:3px 0}
.histo li b{color:var(--verde-800)}
.histo ul{margin:0;padding:0}

/* =========================================================
   MODAL + VISOR
   ========================================================= */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px}
.modal__fondo{position:absolute;inset:0;background:rgba(9,26,17,.6);backdrop-filter:blur(3px);animation:fundir .25s ease both}
.modal__caja{
  position:relative;width:100%;max-width:520px;max-height:92svh;overflow-y:auto;
  background:#fff;border-radius:18px;padding:20px;box-shadow:var(--sombra-lg);
  animation:sube .3s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes fundir{from{opacity:0}to{opacity:1}}
.modal__caja header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.modal__caja h2{font-size:1.2rem}
.modal__caja .ico{background:#e7ece4}
.modal__caja .ico svg{stroke:var(--tinta)}
.modal__para{margin:0 0 14px;font-size:.9rem;color:var(--gris);background:#f2f6ef;padding:9px 12px;border-radius:10px}
.modal__pie{display:flex;gap:10px;justify-content:flex-end;margin-top:4px}

/* ---------- configuración de correo ---------- */
.enlace{
  border:0;background:none;padding:0;margin-left:6px;cursor:pointer;
  font:inherit;font-weight:800;color:inherit;text-decoration:underline;
}
.estado-cfg{
  margin:0 0 14px;padding:10px 13px;border-radius:10px;font-size:.88rem;font-weight:700;
  background:#f2f6ef;color:var(--verde-800);
}
.estado-cfg.mal{background:#fdecea;color:#a5261f}
.ayuda{margin-bottom:16px;background:#f7faf5;border:1px solid var(--linea);border-radius:12px;padding:10px 14px}
.ayuda summary{cursor:pointer;font-weight:800;font-size:.88rem;color:var(--verde-800)}
.ayuda ol{margin:10px 0 6px;padding-left:20px;font-size:.86rem;color:var(--gris);line-height:1.7}
.ayuda p{margin:0;font-size:.84rem;color:var(--gris)}
.fila2{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:480px){ .fila2{grid-template-columns:1fr 150px} }
.pista{display:block;margin-top:6px;font-size:.78rem;color:var(--gris);line-height:1.5}
.pista--nota{margin-top:12px;background:#f7faf5;border-radius:10px;padding:9px 12px}
.pista code{background:rgba(0,0,0,.06);padding:1px 5px;border-radius:5px}
.check{display:flex;align-items:center;gap:10px;margin-bottom:16px;cursor:pointer;font-size:.92rem;font-weight:600}
.check input{width:20px;height:20px;accent-color:var(--verde-700);flex:0 0 20px}

/* --- configuración de correo --- */
.modal__estado{margin:0 0 16px;padding:11px 13px;border-radius:10px;font-size:.88rem;background:#f2f6ef;color:var(--gris)}
.modal__estado.ok{background:#eaf7e4;color:var(--verde-800)}
.modal__estado.mal{background:#fff6e6;color:#7a4d00}
.modal__estado small{opacity:.75}
.form__2{display:grid;gap:0 12px;grid-template-columns:2fr 1fr}
.cfg__nota{margin:0 0 10px;font-size:.88rem;color:var(--gris)}
.cfg__nota code{background:#eef2ea;padding:1px 5px;border-radius:5px}
.cfg__code{
  margin:0 0 12px;padding:11px 13px;border-radius:10px;overflow-x:auto;
  background:#0c2f1b;color:#a7e86b;font:600 .82rem/1.5 ui-monospace,Consolas,monospace;
}
.cfg__ayuda{display:block;margin-top:6px;font-size:.78rem;color:var(--gris);line-height:1.5}
.cfg__ayuda a{color:var(--verde-700);font-weight:700}
.cfg__check{display:flex;align-items:center;gap:9px;margin:2px 0 16px;font-size:.9rem;font-weight:600;cursor:pointer}
.cfg__check input{width:18px;height:18px;accent-color:var(--verde-700)}
.enlace{
  border:0;background:none;padding:0;margin-left:6px;cursor:pointer;
  font:inherit;font-weight:800;color:inherit;text-decoration:underline;
}

.visor{position:fixed;inset:0;z-index:70;display:grid;place-items:center;background:rgba(6,20,12,.92);padding:20px;animation:fundir .2s ease both}
.visor img{max-width:100%;max-height:88svh;border-radius:12px}
.visor__x{position:absolute;top:16px;right:16px;background:rgba(255,255,255,.16)}

.toast{
  position:fixed;left:50%;bottom:22px;z-index:80;
  background:var(--verde-900);color:#fff;padding:12px 20px;border-radius:999px;
  font-size:.9rem;font-weight:700;box-shadow:var(--sombra-lg);max-width:92vw;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translate(-50%,20px);
  transition:opacity .26s,transform .3s cubic-bezier(.2,.7,.3,1),visibility .3s;
}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
.toast.mal{background:#a5261f}