/* ============================================================================
   Sistema de diseño de la plataforma — EL MISMO del sitio losplata.com.co:
   Inter (con respaldo SF Pro de Apple), tinta #0A0A0A, gris #6E6E6E,
   menta #9BFAB0, fondo crema #FAFAF7. Minimalista y elegante.
   Toda página nueva usa ESTE archivo; no inventar colores ni fuentes propias.
   ============================================================================ */
:root {
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --crema: #FAFAF7;
  --menta: #9BFAB0;
  --menta-clara: #C4FBD0;
  --menta-oscura: #15803d;
  --tinta: #0A0A0A;
  --tinta-suave: #2E2E2E;
  --gris: #6E6E6E;
  --borde: #ECECE7;
  --rojo: #C2412D;
  --rojo-fondo: #FBEAE7;
  --blanco: #FFFFFF;
  --radio: 14px;
  --sombra: 0 1px 2px rgba(10,10,10,.04), 0 4px 16px rgba(10,10,10,.04);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  background: var(--crema);
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 15px;
  line-height: 1.5;
}
h1, h2, h3 { font-weight: 700; letter-spacing: -0.03em; color: var(--tinta); margin: 0 0 8px; }
h1 { font-size: 24px; }
h2 { font-size: 21px; }
h3 { font-size: 16px; letter-spacing: -0.02em; }
p  { margin: 0 0 12px; }
a  { color: inherit; }

.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 26px;
  box-shadow: var(--sombra);
}

.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.campo label { font-size: 13px; font-weight: 600; color: var(--tinta-suave); }
.campo input, .campo select, select {
  padding: 11px 13px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  background: var(--blanco);
  color: var(--tinta);
  transition: box-shadow .15s ease, border-color .15s ease;
}
.campo input::placeholder { color: #B5B5AF; }
.campo input:focus, .campo select:focus, select:focus {
  outline: none;
  border-color: var(--menta);
  box-shadow: 0 0 0 3px var(--menta-clara);
}

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px;
  border-radius: 11px;
  border: none;
  background: var(--tinta);
  color: var(--blanco);
  font-size: 15px; font-weight: 600; font-family: inherit; letter-spacing: -0.01em;
  cursor: pointer;
  width: 100%;
  transition: opacity .15s ease, transform .05s ease;
}
.boton:hover { opacity: .85; }
.boton:active { transform: scale(.99); }
.boton:disabled { opacity: .45; cursor: default; }
.boton.menta { background: var(--menta); color: var(--tinta); }
.boton.suave { background: var(--blanco); color: var(--tinta); border: 1px solid var(--borde); }
.boton.suave:hover { background: var(--crema); opacity: 1; }
.boton.chico { width: auto; padding: 8px 13px; font-size: 13px; border-radius: 9px; }

.aviso { border-radius: 10px; padding: 11px 14px; font-size: 14px; margin: 10px 0; display: none; line-height: 1.45; }
.aviso.error { background: var(--rojo-fondo); color: var(--rojo); display: block; }
.aviso.ok { background: var(--menta-clara); color: var(--menta-oscura); display: block; }

.pildora {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: -0.01em;
}
.pildora.dueno { background: var(--menta); color: var(--tinta); }
.pildora.supervisor { background: #FDF3D8; color: #8A6116; }
.pildora.asesor { background: #ECECE7; color: var(--tinta-suave); }

.cargando { color: var(--gris); font-size: 14px; padding: 12px 0; }

/* ---------- Menú lateral compartido (menu.js) ----------
   Modo AUTO (por defecto): la barra ocupa 64px (solo iconos) y, al pasar el mouse,
   el PANEL se despliega FLOTANDO por encima del contenido (sin moverlo) y se retrae
   al salir. Modo FIJO (clic en ☰): queda anclada abierta a 218px. */
.menu-l {
  flex-shrink: 0; position: sticky; top: 0; height: 100vh;
  width: 218px; box-sizing: border-box; transition: width .18s ease; z-index: 40;
}
.menu-l:not(.fijo) { width: 64px; }
.menu-panel {
  height: 100%; box-sizing: border-box; background: var(--blanco);
  border-right: 1px solid var(--borde); padding: 14px 10px;
  display: flex; flex-direction: column; gap: 2px;
}
.menu-l:not(.fijo) .menu-panel {
  position: absolute; left: 0; top: 0; width: 64px; padding: 14px 8px;
  overflow: hidden; transition: width .18s ease, box-shadow .18s ease;
}
.menu-l:not(.fijo):hover .menu-panel {
  width: 218px; padding: 14px 10px; overflow: visible;
  box-shadow: 10px 0 34px rgba(10,10,10,.12); z-index: 90;
}

.menu-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 2px 4px 14px; }
.menu-marca { display: flex; align-items: center; gap: 8px; min-width: 0; }
.menu-punto { width: 12px; height: 12px; background: var(--menta); border-radius: 4px; flex-shrink: 0; }
.menu-nombre { font-weight: 700; font-size: 13.5px; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-hamburguesa {
  background: none; border: none; cursor: pointer; color: var(--gris);
  width: 30px; height: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.menu-hamburguesa:hover { background: var(--crema); color: var(--tinta); }
.menu-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 11px; border-radius: 10px; text-decoration: none;
  font-size: 14px; font-weight: 500; color: var(--gris); cursor: pointer;
  white-space: nowrap; transition: background .12s ease, color .12s ease;
}
.menu-item svg { flex-shrink: 0; }
.menu-item:hover { color: var(--tinta); }
.menu-item.activo { background: var(--crema); color: var(--tinta); font-weight: 600; }
.menu-abajo { margin-top: auto; }

/* Apariencia CONTRAÍDA = modo auto sin hover (solo iconos) */
.menu-l:not(.fijo):not(:hover) .menu-cabeza { justify-content: center; }
.menu-l:not(.fijo):not(:hover) .menu-marca,
.menu-l:not(.fijo):not(:hover) .menu-texto { display: none; }
.menu-l:not(.fijo):not(:hover) .menu-item { justify-content: center; padding: 11px 0; }
.menu-l:not(.fijo):not(:hover) .menu-grupo > .menu-item .chev { display: none; }
.menu-l:not(.fijo):not(:hover) .menu-sub { display: none !important; }

/* ---------- Grupos con submenú (acordeón cuando el panel está abierto) ---------- */
.menu-grupo { position: relative; }
.menu-grupo > .menu-item { cursor: pointer; }
.menu-grupo > .menu-item .chev { margin-left: auto; flex-shrink: 0; transition: transform .15s ease; }
.menu-grupo.abierto > .menu-item .chev { transform: rotate(90deg); }
.menu-sub { display: none; flex-direction: column; gap: 2px; }
.menu-grupo.abierto > .menu-sub { display: flex; }
.menu-sub .menu-item { padding-left: 41px; font-size: 13.5px; }

@media (max-width: 700px) {
  /* En celular no hay hover: la barra queda en 64px y se ancla con ☰ (modo fijo). */
  .menu-l.fijo { width: 168px; }
}