/* Surco · Barbosa — prototipo de media fidelidad */
:root{
  --verde:#2f6b3c; --verde-osc:#255731; --verde-claro:#e8f0e9;
  --acento:#c2602f; --acento-claro:#fbeee6;
  --fondo:#ffffff; --superficie:#fff; --borde:#e5e7eb; --borde-fuerte:#d1d5db;
  --texto:#1d211e; --texto-2:#4b524d; --tenue:#737a75; --hover:#f3f4f6;
  --ok:#2f6b3c; --aviso:#a86b12; --aviso-claro:#fbf3e2;
  --r:8px; --sombra:0 1px 2px rgba(16,24,20,.06); --sombra-2:0 8px 24px -8px rgba(16,24,20,.18);
  --font:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --dur:200ms; --ease:cubic-bezier(.2,.7,.3,1);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);font-size:14px;line-height:1.5;color:var(--texto);background:var(--fondo);overflow-x:clip;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.01em}
h1{font-size:22px}
h2{font-size:15px}
a{color:var(--verde);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
.oculto{display:none!important}
.tenue{color:var(--tenue)}
.num{font-variant-numeric:tabular-nums}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 14px;border-radius:6px;border:1px solid transparent;font-weight:500;font-size:14px;cursor:pointer;text-decoration:none!important;white-space:nowrap;
  transition:background-color var(--dur) var(--ease), border-color var(--dur), box-shadow var(--dur), transform 80ms}
.btn:active{transform:scale(.98)}
.btn:focus-visible{outline:2px solid var(--verde);outline-offset:2px}
.btn svg{width:16px;height:16px;flex:none}
.btn-p{background:var(--verde);color:#fff}
.btn-p:hover{background:var(--verde-osc)}
.btn-s{background:var(--superficie);border-color:var(--borde-fuerte);color:var(--texto)}
.btn-s:hover{background:var(--hover)}
.btn-g{background:transparent;color:var(--texto-2)}
.btn-g:hover{background:var(--hover)}
.btn-sm{height:30px;padding:0 10px;font-size:13px}
.btn-bloque{width:100%}
.btn[disabled]{opacity:.65;cursor:default}
.btn .giro{width:15px;height:15px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:girar .7s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}

/* ---------- ingreso ---------- */
.ingreso{min-height:100vh;display:flex;flex-direction:column;transition:opacity 220ms var(--ease), transform 220ms var(--ease)}
.ingreso.saliendo{opacity:0;transform:scale(.985)}
.ingreso-centro{flex:1;display:flex;align-items:center;justify-content:center;padding:32px 16px}
.ingreso-caja{width:100%;max-width:380px}
.ingreso-marca{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.ingreso-marca .palabra{font-size:20px;line-height:1.15;letter-spacing:-.02em}
.ingreso-marca .palabra b{font-weight:700}
.ingreso-marca .palabra span{font-weight:500;color:var(--verde)}
.ingreso-marca small{display:block;color:var(--tenue);font-size:12px;margin-top:2px}
.ingreso-texto{animation:entrar 320ms 120ms var(--ease) both}
/* logo */
.logo{flex:none;display:block;border-radius:50%}
.logo-anim .lg-fondo{transform-origin:24px 24px;animation:lg-pop 420ms var(--ease) both}
.logo-anim .lg-surco{stroke-dasharray:26;stroke-dashoffset:26;animation:lg-trazo 420ms 180ms ease-out forwards}
.logo-anim .lg-s2{animation-delay:260ms}
.logo-anim .lg-tallo{stroke-dasharray:10;stroke-dashoffset:10;animation:lg-trazo 260ms 360ms ease-out forwards}
.logo-anim .lg-hojas{transform-origin:24px 25px;animation:lg-brote 380ms 480ms cubic-bezier(.3,1.4,.5,1) both}
@keyframes lg-pop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
@keyframes lg-trazo{to{stroke-dashoffset:0}}
@keyframes lg-brote{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
.ingreso h1{font-size:24px;margin-bottom:4px}
.ingreso .sub{color:var(--tenue);margin:0 0 22px}
.panel-ingreso{background:var(--superficie);border:1px solid var(--borde);border-radius:10px;padding:22px;box-shadow:var(--sombra)}
.segmento{display:grid;grid-template-columns:1fr 1fr;background:var(--hover);border-radius:7px;padding:3px;margin-bottom:16px}
.segmento label{position:relative;text-align:center;padding:6px;border-radius:5px;cursor:pointer;font-weight:500;color:var(--texto-2);transition:background var(--dur),color var(--dur),box-shadow var(--dur)}
.segmento input{position:absolute;opacity:0;width:1px;height:1px;left:0;top:0}
.segmento label:has(input:checked){background:var(--superficie);color:var(--texto);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.ingreso-nota{font-size:12px;color:var(--tenue);margin-top:14px;text-align:center}

/* ---------- estructura ---------- */
.marco{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;animation:aparecer 280ms var(--ease) both}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
.barra{position:sticky;top:0;z-index:20;height:56px;background:var(--superficie);border-bottom:1px solid var(--borde);display:flex;align-items:center;gap:12px;padding:0 16px}
.marca{display:flex;align-items:center;gap:9px;color:var(--texto);text-decoration:none!important}
.marca b{font-weight:600;font-size:16px}
.marca span{color:var(--tenue);font-size:13px;border-left:1px solid var(--borde);padding-left:9px}
.barra .der{margin-left:auto;display:flex;align-items:center;gap:6px}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--verde-claro);color:var(--verde);display:grid;place-items:center;font-weight:600;font-size:12px}
.usuario-nombre{font-size:13px;color:var(--texto-2);margin-right:4px}
.contenido{min-width:0;padding:20px 16px 92px;max-width:1080px;width:100%;margin:0 auto}
.lateral{display:none}
.tabs{position:fixed;bottom:0;left:0;right:0;z-index:30;background:var(--superficie);border-top:1px solid var(--borde);display:grid;grid-template-columns:repeat(4,1fr);padding:4px 0 calc(4px + env(safe-area-inset-bottom))}
.tabs a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--tenue);padding:6px 0;text-decoration:none!important;transition:color var(--dur)}
.tabs a svg{width:21px;height:21px}
.tabs a.activo{color:var(--verde);font-weight:600}
.fab{position:fixed;right:16px;bottom:76px;z-index:31;width:52px;height:52px;border-radius:14px;background:var(--verde);color:#fff;border:0;display:grid;place-items:center;box-shadow:var(--sombra-2);cursor:pointer;transition:transform 120ms, background var(--dur)}
.fab:active{transform:scale(.94)}
.fab svg{width:22px;height:22px}
.pie{font-size:12px;color:var(--tenue);text-align:center;padding:14px 16px 84px;border-top:1px solid var(--borde)}

@media (min-width:900px){
  .marco{grid-template-columns:220px minmax(0,1fr)}
  .barra{grid-column:1/-1}
  .lateral{display:flex;flex-direction:column;gap:1px;background:var(--superficie);border-right:1px solid var(--borde);padding:14px 10px;position:sticky;top:56px;height:calc(100vh - 56px)}
  .lateral a{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:6px;color:var(--texto-2);text-decoration:none!important;font-weight:500;transition:background var(--dur),color var(--dur)}
  .lateral a svg{width:18px;height:18px;color:var(--tenue);transition:color var(--dur)}
  .lateral a:hover{background:var(--hover);color:var(--texto)}
  .lateral a.activo{background:var(--verde-claro);color:var(--verde)}
  .lateral a.activo svg{color:var(--verde)}
  .lateral .titulo{font-size:11px;font-weight:600;color:var(--tenue);text-transform:uppercase;letter-spacing:.06em;padding:14px 10px 6px}
  .lateral .titulo:first-child{padding-top:4px}
  .tabs,.fab{display:none}
  .contenido{padding:28px 32px 40px}
  .pie{grid-column:2;padding-bottom:16px;text-align:left;padding-left:32px}
}

/* transición entre vistas */
.vista{animation:entrar 220ms var(--ease) both}
@keyframes entrar{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.vista.suave{animation:fundido 180ms ease both}
@keyframes fundido{from{opacity:0}to{opacity:1}}

/* ---------- piezas ---------- */
.cab{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.cab p{margin:2px 0 0;color:var(--tenue)}
.miga{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--tenue);margin-bottom:8px}
.miga svg{width:14px;height:14px}
.caja{background:var(--superficie);border:1px solid var(--borde);border-radius:var(--r);box-shadow:var(--sombra)}
.caja-cab{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--borde)}
.caja-cuerpo{padding:16px}
.rejilla{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.r2{grid-template-columns:repeat(2,minmax(0,1fr))}.r-panel{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}.r-form{grid-template-columns:minmax(0,1fr) 300px}}

.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-bottom:16px}
@media (min-width:760px){.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
.kpi{padding:14px 16px;border-right:1px solid var(--borde);border-bottom:1px solid var(--borde)}
.kpi:nth-child(2n){border-right:0}
.kpi:nth-child(n+3){border-bottom:0}
@media (min-width:760px){.kpi{border-bottom:0!important;border-right:1px solid var(--borde)!important}.kpi:last-child{border-right:0!important}}
.kpi > span{display:block;font-size:12.5px;color:var(--tenue)}
.kpi b{display:block;font-size:24px;font-weight:600;margin-top:2px;font-variant-numeric:tabular-nums}
.kpi small{font-size:12px;color:var(--tenue)}

.filas{list-style:none;margin:0;padding:0}
.fila{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--borde);color:inherit;text-decoration:none!important;transition:background var(--dur)}
.fila:last-child{border-bottom:0}
a.fila:hover{background:var(--hover)}
.fila .txt{flex:1;min-width:0}
.fila .txt b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fila .txt small{color:var(--tenue);font-size:12.5px}
.fila .lado{text-align:right;font-size:13px;white-space:nowrap}
.prod{width:34px;height:34px;border-radius:6px;display:grid;place-items:center;font-size:12px;font-weight:600;flex:none;background:var(--verde-claro);color:var(--verde)}
.prod.lg{width:44px;height:44px;font-size:15px;border-radius:8px}

.estado{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--texto-2);white-space:nowrap}
.estado::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c,#9aa09b)}
.e-0,.e-1{--c:#7aa383}.e-2{--c:#d1a23f}.e-3{--c:var(--acento)}.e-4{--c:#b4b8b2}
.e-activa{--c:var(--verde)}.e-pausada{--c:#b4b8b2}.e-vendida{--c:var(--acento)}

.barra-prog{height:4px;border-radius:2px;background:var(--hover);overflow:hidden;width:90px;margin-top:6px}
.barra-prog i{display:block;height:100%;background:var(--verde);border-radius:2px;transition:width 600ms var(--ease)}

.pestanas{display:flex;gap:2px;border-bottom:1px solid var(--borde);margin-bottom:16px;overflow-x:auto}
.pestanas button{background:none;border:0;border-bottom:2px solid transparent;padding:8px 12px;margin-bottom:-1px;cursor:pointer;color:var(--tenue);font-weight:500;white-space:nowrap;transition:color var(--dur),border-color var(--dur)}
.pestanas button:hover{color:var(--texto)}
.pestanas button.activo{color:var(--verde);border-color:var(--verde)}
.pestanas button span{color:var(--tenue);font-weight:400;margin-left:4px}

/* formularios */
.form{display:grid;gap:16px}
.campo label{display:block;font-weight:500;font-size:13px;margin-bottom:6px;color:var(--texto-2)}
.campo .ayuda{display:block;color:var(--tenue);font-size:12px;margin-top:5px}
.campo input,.campo select,.campo textarea{width:100%;min-width:0;height:38px;padding:0 11px;border:1px solid var(--borde-fuerte);border-radius:6px;background:#fff;outline:none;transition:border-color var(--dur), box-shadow var(--dur)}
.campo textarea{height:auto;min-height:84px;padding:9px 11px;resize:vertical}
.campo input:hover,.campo select:hover,.campo textarea:hover{border-color:#b7bab2}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--verde);box-shadow:0 0 0 3px rgba(47,107,60,.14)}
.campo.invalido input,.campo.invalido select{border-color:#c0392b}
.dos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sufijo{position:relative}
.sufijo input{padding-right:46px}
.sufijo em{position:absolute;right:11px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--tenue);font-size:13px}
.error{color:#b03a2e;font-size:13px;background:#fdf1ef;border:1px solid #f3cfc9;border-radius:6px;padding:8px 10px}
.acciones{display:flex;gap:8px;flex-wrap:wrap;padding-top:4px}
.check{display:flex;gap:8px;align-items:center;font-size:13.5px;color:var(--texto-2);cursor:pointer}
.check input{width:16px;height:16px;accent-color:var(--verde)}
.radios{display:flex;gap:16px;flex-wrap:wrap}

/* detalle */
.det{display:flex;gap:14px;align-items:center}
.datos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px}
@media (min-width:760px){.datos{grid-template-columns:repeat(3,minmax(0,1fr))}}
.datos small{display:block;color:var(--tenue);font-size:12px}
.datos b{font-weight:500}
.etapas{list-style:none;margin:0;padding:0}
.etapas li{display:flex;gap:12px;padding-bottom:14px;position:relative}
.etapas li::before{content:"";position:absolute;left:9px;top:22px;bottom:2px;width:2px;background:var(--borde)}
.etapas li:last-child::before{display:none}
.etapas .pt{width:20px;height:20px;border-radius:50%;border:2px solid var(--borde-fuerte);background:#fff;flex:none;margin-top:1px;display:grid;place-items:center;transition:all 250ms var(--ease)}
.etapas .pt svg{width:11px;height:11px;color:#fff}
.etapas li.hecha .pt{background:var(--verde);border-color:var(--verde)}
.etapas li.hecha::before{background:var(--verde)}
.etapas li.actual .pt{border-color:var(--verde);box-shadow:0 0 0 4px var(--verde-claro)}
.etapas li.actual .pt::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--verde)}
.etapas b{display:block;font-weight:500}
.etapas small{color:var(--tenue)}
.etapas li:not(.hecha):not(.actual) b{color:var(--tenue)}
.notas{list-style:none;padding:0;margin:0}
.notas li{padding:10px 0;border-top:1px solid var(--borde)}
.notas li small{display:block;color:var(--tenue);font-size:12px}
.vacio{text-align:center;color:var(--tenue);padding:28px 12px}

/* ofertas (filas) */
.of-cab,.oferta{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr) auto;gap:12px;align-items:center;padding:11px 16px}
.of-cab{font-size:12px;color:var(--tenue);font-weight:500;border-bottom:1px solid var(--borde);background:#f7f8f9;border-radius:var(--r) var(--r) 0 0}
.oferta{border-bottom:1px solid var(--borde);transition:background var(--dur)}
.oferta:last-child{border-bottom:0}
.oferta:hover{background:#f9fafb}
.oferta .quien{display:flex;gap:12px;align-items:center;min-width:0}
.oferta .quien b{display:block;font-weight:500}
.oferta .quien small{color:var(--tenue);font-size:12.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oferta .precio{font-weight:600;font-variant-numeric:tabular-nums}
.oferta .precio small{font-weight:400;color:var(--tenue)}
.oferta .ops{display:flex;gap:6px;justify-content:flex-end}
.oferta.inactiva .quien,.oferta.inactiva .precio{opacity:.6}
.oferta .m{display:none;color:var(--tenue);font-size:12px}
@media (max-width:759px){
  .of-cab{display:none}
  .oferta{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"q p" "c c" "o o";row-gap:6px}
  .oferta .quien{grid-area:q}.oferta .precio{grid-area:p;text-align:right}
  .oferta .cant{grid-area:c;font-size:13px;color:var(--texto-2);padding-left:46px}
  .oferta .col-x{display:none}
  .oferta .ops{grid-area:o;justify-content:flex-start;padding-left:46px}
  .oferta .m{display:inline}
}
.herramientas{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.herramientas .campo{flex:1;min-width:160px}
.buscar{position:relative}
.buscar svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--tenue)}
.buscar input{padding-left:34px}
.banner{display:flex;gap:10px;align-items:center;background:var(--aviso-claro);color:#6f4a10;border:1px solid #efdcb4;border-radius:6px;padding:9px 12px;font-size:13px;margin-bottom:16px}

/* gráfico */
.grafico{display:flex;align-items:flex-end;gap:10px;height:130px}
.grafico div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;font-size:11.5px;color:var(--tenue)}
.grafico i{display:block;width:100%;max-width:28px;background:#c9d8cc;border-radius:3px 3px 0 0;margin:3px 0 6px;transform-origin:bottom;animation:crecer 600ms var(--ease) both}
.grafico div:last-child i{background:var(--verde)}
@keyframes crecer{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.pend{display:flex;gap:10px;align-items:flex-start;padding:11px 16px;border-bottom:1px solid var(--borde)}
.pend:last-child{border-bottom:0}
.pend .punto{width:8px;height:8px;border-radius:50%;background:var(--c,var(--acento));margin-top:6px;flex:none}
.pend .txt{flex:1;font-size:13.5px}

/* esqueleto */
.sk{background:linear-gradient(90deg,#eceee9 0%,#f6f7f4 40%,#eceee9 80%);background-size:300% 100%;animation:brillo 1.2s ease-in-out infinite;border-radius:4px}
@keyframes brillo{from{background-position:100% 0}to{background-position:0 0}}
.sk-t{height:12px;margin:4px 0}
.sk-n{height:24px;width:60%;margin-top:8px}
.sk-a{width:34px;height:34px;border-radius:6px;flex:none}

/* modal */
.velo{position:fixed;inset:0;z-index:50;background:rgba(20,24,21,0);display:flex;align-items:flex-end;justify-content:center;transition:background var(--dur) ease}
.velo.abierto{background:rgba(20,24,21,.42)}
.modal{background:var(--superficie);width:100%;max-width:440px;border-radius:12px 12px 0 0;padding:20px;box-shadow:var(--sombra-2);transform:translateY(24px);opacity:0;transition:transform 220ms var(--ease),opacity 180ms ease}
.velo.abierto .modal{transform:none;opacity:1}
.modal h2{font-size:17px;margin-bottom:4px}
.modal .acciones{justify-content:flex-end;margin-top:16px}
@media (min-width:760px){.velo{align-items:center}.modal{border-radius:12px;transform:translateY(8px) scale(.98)}}
.cita{background:var(--fondo);border:1px solid var(--borde);border-radius:6px;padding:10px 12px;font-size:13.5px;margin:12px 0}
.menu-mas a{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--borde);color:var(--texto);text-decoration:none!important}
.menu-mas a svg{width:20px;height:20px;color:var(--verde)}
.menu-mas a small{display:block;color:var(--tenue)}

/* avisos (toasts) */
.avisos{position:fixed;left:16px;right:16px;bottom:80px;z-index:60;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
@media (min-width:900px){.avisos{left:auto;right:24px;bottom:24px;align-items:flex-end}}
.aviso{display:flex;align-items:center;gap:10px;background:#1f2421;color:#fff;padding:10px 14px;border-radius:8px;font-size:13.5px;box-shadow:var(--sombra-2);animation:aviso-in 240ms var(--ease) both;pointer-events:auto}
.aviso svg{width:16px;height:16px;color:#8fd19e;flex:none}
.aviso.fuera{animation:aviso-out 200ms ease both}
@keyframes aviso-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes aviso-out{to{opacity:0;transform:translateY(6px)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
  .sk{animation:none}
}
@media (max-width:599px){.oculto-movil{display:none}}