/* ============================================================================
   SayProposals · shell del panel
   Clon del shell de la beta aprobada (saydeals.pages.dev/panel).
   Sidebar, nav, main, tarjetas de propuestas y tabla: medidas de la beta.
   ========================================================================== */

/* ---------- Login ---------- */
body.login-body{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}
.login{background:#fff;border-radius:20px;box-shadow:0 20px 60px rgba(28,43,72,.10);width:100%;max-width:420px;padding:52px 44px 42px;text-align:center;animation:login-in .4s ease both;}
@keyframes login-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.login .logo-ss{font-size:32px;}
.login .sub{font-size:11.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--gris2);margin-top:9px;}
.login form{margin-top:34px;text-align:left;}
.login .field + .field{margin-top:18px;}
.login .err{display:none;margin-top:16px;font-size:12.5px;font-weight:700;color:var(--rojo);text-align:center;}
.login .err.on{display:block;}
.login.shake{animation:login-shake .4s;}
@keyframes login-shake{20%,60%{transform:translateX(-7px);}40%,80%{transform:translateX(7px);}}

/* ---------- Shell ---------- */
body.app-body{display:flex;min-height:100vh;}

.side{width:230px;background:var(--navy);color:#fff;padding:26px 16px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh;}
.side .logo-ss{font-size:21px;padding:0 10px 4px;}
.side .marca-sub{font-size:10px;font-weight:700;letter-spacing:.2em;color:var(--celeste);padding:0 10px 18px;text-transform:uppercase;}

.nav-it{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;color:#cdd6e4;font-weight:600;font-size:14px;cursor:pointer;}
.nav-it svg{width:17px;height:17px;flex:none;}
.nav-it.act{background:rgba(142,177,209,.18);color:#fff;}
.nav-it:hover{color:#fff;}

/* Ítems cuya sección todavía no existe: visibles pero inertes. */
.nav-it.off{opacity:.38;cursor:default;}
.nav-it.off:hover{color:#cdd6e4;}

.side .fondo{margin-top:auto;display:flex;flex-direction:column;gap:4px;}

/* ---------- Bloque de perfil del sidebar ---------- */
/* Muestra siempre al usuario REAL, también dentro del modo vista: quién sos no
   cambia, cambia qué estás mirando. */
.perfil-bloque{display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 10px;border:0;border-radius:10px;background:rgba(255,255,255,.06);
  font-family:inherit;color:#fff;cursor:pointer;text-align:left;
  transition:background .16s;}
.perfil-bloque:hover{background:rgba(142,177,209,.22);}
.perfil-avatar{display:flex;align-items:center;justify-content:center;flex:none;
  width:32px;height:32px;border-radius:50%;background:var(--celeste);color:var(--navy);
  font-size:11.5px;font-weight:800;letter-spacing:.02em;}
.perfil-txt{min-width:0;flex:1;}
.perfil-nombre{display:block;font-size:13px;font-weight:700;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.perfil-rol{display:block;font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--celeste);margin-top:1px;}
.perfil-chev{width:15px;height:15px;flex:none;color:#cdd6e4;}

/* ---------- Banner del modo vista ---------- */
.banner-vista{display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  background:var(--celeste-soft);border:1px solid var(--celeste);
  border-radius:12px;padding:12px 16px;margin-bottom:22px;
  font-size:13.5px;font-weight:600;color:var(--navy);}
.banner-vista .ico{width:18px;height:18px;flex:none;color:var(--navy);}
.banner-vista b{font-weight:800;}
.banner-vista button{margin-left:auto;border:0;background:var(--navy);color:#fff;
  border-radius:8px;padding:7px 14px;font-family:inherit;font-size:12.5px;
  font-weight:700;cursor:pointer;transition:opacity .15s;}
.banner-vista button:hover{opacity:.88;}

.main{flex:1;padding:34px 40px 70px;max-width:1060px;}
.main h1{font-size:23px;font-weight:800;margin-bottom:4px;}
.bajada{color:var(--gris);font-size:14px;margin-bottom:26px;}
.sec{display:none;}
.sec.act{display:block;}
.nota{font-size:12px;color:var(--gris);margin-top:14px;}

/* Encabezado de sección: título y bajada a la izquierda, acciones a la derecha
   en la misma línea del título. Los botones son del tamaño estándar del
   design system: acá no hay botones grandes. */
.sec-head{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;margin-bottom:22px;}
.sec-head-txt{flex:1;min-width:260px;}
.sec-head-txt .bajada{margin-bottom:0;}
.sec-head-der{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding-top:2px;}

.barra-sup{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap;}
.barra-sup .der{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap;}

/* ---------- Lista de propuestas (provisoria, estilo tarjeta de la beta) ---------- */
.fila-prop{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;margin-bottom:12px;flex-wrap:wrap;}
.fila-prop .nom{font-weight:800;font-size:15.5px;min-width:180px;}
.fila-prop .meta{color:var(--gris);font-size:12.5px;}
.fila-prop .der{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.acept-linea{width:100%;font-size:12.5px;color:var(--verde);font-weight:700;margin-top:2px;}

.vacio{background:#fff;border:1px dashed var(--line);border-radius:var(--radius);padding:34px 22px;text-align:center;color:var(--gris);font-size:14px;}

/* ---------- Cotizador · medidas de la beta, verbatim ---------- */
.paso-t{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gris2);margin:22px 0 10px;}
.opciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;}
.op{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:16px;cursor:pointer;transition:border-color .15s, box-shadow .15s;}
.op:hover{border-color:var(--celeste);}
.op.sel{border-color:var(--navy);box-shadow:0 0 0 1.5px var(--navy) inset;}
.op .t{font-weight:800;font-size:14.5px;}
.op .d{font-size:12px;color:var(--gris);margin-top:3px;}
.op .pr{font-size:17px;font-weight:800;margin-top:8px;}
.cant{display:flex;align-items:center;gap:14px;}
.cant button{width:42px;height:42px;border-radius:10px;border:1.5px solid var(--line);background:#fff;font-size:20px;font-weight:700;color:var(--navy);cursor:pointer;}
.cant button:hover{border-color:var(--celeste);}
.cant .n{font-size:22px;font-weight:800;min-width:48px;text-align:center;}
.resumen{position:sticky;bottom:18px;margin-top:26px;background:var(--navy);color:#fff;border-radius:16px;padding:20px 24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;box-shadow:0 14px 40px rgba(28,43,72,.30);}
.resumen .det{font-size:13px;color:#cdd6e4;}
.resumen .tot{font-size:25px;font-weight:800;}
.resumen .der{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap;}
.resumen .btn{background:#fff;color:var(--navy);}
.resumen .btn.ghost.claro{background:transparent;color:#fff;border-color:rgba(255,255,255,.4);}
.resumen .btn.ghost.claro:hover{border-color:#fff;}

/* ---------- Grilla de precios · medidas de la beta, verbatim ---------- */
table.grilla{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
table.grilla th{background:var(--navy);color:#fff;font-size:12.5px;padding:12px 14px;text-align:left;font-weight:700;}
table.grilla td{padding:10px 14px;border-top:1px solid var(--line);}
table.grilla td:first-child{font-weight:700;font-size:13.5px;}
table.grilla input{max-width:110px;text-align:right;}

/* Descuento por volumen: lo que la beta dejaba "apagado" y el cotizador usa. */
.grilla-vol{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin-top:16px;}
.grilla-vol-campos{display:flex;gap:16px;flex-wrap:wrap;}
.grilla-vol .campo{max-width:220px;}
.campo-sufijo{display:flex;align-items:center;gap:9px;}
.campo-sufijo input{max-width:100px;text-align:right;}
.campo-sufijo span{font-size:12.5px;font-weight:700;color:var(--gris);}
.grilla-acciones{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;}

@media(max-width:760px){
  body.app-body{flex-direction:column;}
  .side{width:100%;height:auto;position:static;flex-direction:row;align-items:center;overflow-x:auto;padding:14px 12px;}
  .side .marca-sub,.side .fondo .rot{display:none;}
  .side .fondo{margin-top:0;margin-left:auto;flex-direction:row;}
  .main{padding:22px 16px 60px;}
}