/*******************************************************
 * desktop.css — Layout de tablet y computadora (2026-09-14)
 *
 * REGLA (pedido de Yoander): SOLO reorganizar, no romper nada.
 * - Todo vive detras de media queries >=768px: el telefono (<768px)
 *   no se entera de que este archivo existe.
 * - Cero cambios de logica: la barra lateral (js/desktop-nav.js) solo
 *   proxy-clickea la navegacion que ya existe (setView / botones).
 * - Los !important de la seccion de overlays son necesarios porque esos
 *   modales traen position/inset INLINE en su style.
 *
 * Breakpoints:
 *   >=768px   tablet: riel de iconos (76px), sin barra inferior
 *   >=1100px  desktop: sidebar completa (250px) + overlays centrados
 *   >=1180px  desktop ancho: columna derecha "Tu dia" (solo en Inicio)
 *******************************************************/

#veSidebar { display: none; }
#veRightCol { display: none; }

/* ═════════ TABLET (>=768px): riel de iconos ═════════ */
@media (min-width: 768px) {

  #bottomNav { display: none !important; }

  #veSidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: 76px;
    background: var(--color-card-bg, #fff);
    border-right: 1px solid var(--color-border, rgba(0,0,0,0.07));
    padding: 20px 10px calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 9000; /* bajo los overlays (99990+), sobre el contenido */
    align-items: center;
    overflow-y: auto;
    scrollbar-width: none;
  }
  #veSidebar::-webkit-scrollbar { display: none; }

  .ve-sb-brand { font-weight: 800; font-size: 17px; padding-bottom: 18px; letter-spacing: 0; white-space: nowrap; }
  .ve-sb-brand .b { color: #2979FF; } .ve-sb-brand .g { color: #00D9A5; }
  .ve-sb-brand .full { display: none; }

  .ve-sb-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; width: 100%; align-items: center; }
  .ve-sb-item {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    width: 52px; padding: 13px 0; border: none; background: transparent;
    border-radius: 13px; cursor: pointer; color: var(--color-text-strong, #16181d);
    font-weight: 700; font-size: 15px;
  }
  .ve-sb-item:hover { background: var(--color-surface, #f4f6f9); }
  .ve-sb-item.active { background: linear-gradient(45deg, #2979FF 10%, #00D9A5 90%); color: #fff; box-shadow: 0 4px 12px rgba(41,121,255,0.3); }
  .ve-sb-item svg { width: 24px; height: 24px; flex-shrink: 0; }
  .ve-sb-item .lbl { display: none; }

  .ve-sb-create {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 52px; padding: 13px 0; border: none; cursor: pointer;
    background: linear-gradient(45deg, #2979FF 10%, #00D9A5 90%); color: #fff;
    border-radius: 13px; font-weight: 800; font-size: 14.5px; margin: 14px 0 14px;
    box-shadow: 0 4px 14px rgba(41,121,255,0.35);
  }
  .ve-sb-create .lbl { display: none; }

  .ve-sb-me {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 52px; padding: 8px 0; border: none; background: transparent;
    border-radius: 13px; cursor: pointer;
  }
  .ve-sb-me:hover { background: var(--color-surface, #f4f6f9); }
  .ve-sb-me .ava {
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
    background: linear-gradient(45deg, #2979FF 10%, #00D9A5 90%);
    display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800;
  }
  .ve-sb-me .ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ve-sb-me .who { display: none; }

  /* El contenido respira a la derecha del riel */
  #mainScreen { margin-left: 76px; }

  /* Feed a ancho de lectura (solo Inicio; el resto queda igual) */
  #homeScreen #storiesBar,
  #homeScreen #feedContainer { max-width: 600px; margin-left: auto; margin-right: auto; }
}

/* ═════════ DESKTOP (>=1100px): sidebar completa ═════════ */
@media (min-width: 1100px) {

  #veSidebar { width: 250px; padding: 22px 12px calc(18px + env(safe-area-inset-bottom, 0px)); align-items: stretch; }
  .ve-sb-brand { font-size: 22px; letter-spacing: 2px; padding: 0 12px 22px; }
  .ve-sb-brand .full { display: inline; }
  .ve-sb-brand .short { display: none; }
  .ve-sb-nav { align-items: stretch; }
  .ve-sb-item { width: auto; justify-content: flex-start; padding: 12px 14px; }
  .ve-sb-item .lbl { display: inline; }
  .ve-sb-create { width: auto; margin: 14px 2px 16px; padding: 13px; }
  .ve-sb-create .lbl { display: inline; }
  .ve-sb-me { width: auto; justify-content: flex-start; padding: 8px 12px; }
  .ve-sb-me .who { display: block; text-align: left; }
  .ve-sb-me .who b { font-size: 13.5px; display: block; color: var(--color-text-strong, #16181d); }
  .ve-sb-me .who span { font-size: 11.5px; color: var(--color-muted, #7a8494); font-weight: 600; }

  #mainScreen { margin-left: 250px; }

  /* Overlays a pantalla completa -> panel centrado (traen inset INLINE,
     por eso los !important). Lista curada: solo pantallas verificadas. */
  #appointmentsScreenModal,
  #ve-barbershop-appts {
    top: 20px !important; bottom: 20px !important;
    left: calc(50% + 125px) !important; right: auto !important;
    width: min(760px, calc(100vw - 330px)) !important;
    transform: translateX(-50%);
    border-radius: 22px !important;
    box-shadow: 0 30px 80px rgba(0,0,0,0.35);
    border: 1px solid var(--color-border, rgba(0,0,0,0.07));
  }

  /* Ajustes: de sheet inferior a tarjeta centrada */
  #settings-modal { align-items: center !important; justify-content: center; }
  #settings-modal > div {
    width: min(560px, 92vw) !important;
    border-radius: 18px !important;
    max-height: 86vh !important;
  }
}

/* ═════════ DESKTOP ANCHO (>=1180px): columna derecha en Inicio ═════════ */
@media (min-width: 1180px) {
  body.ve-home-on #veRightCol {
    display: flex; flex-direction: column; gap: 16px;
    position: fixed; top: 20px; right: 20px; bottom: 20px;
    width: 336px; overflow-y: auto; scrollbar-width: none;
    z-index: 8000;
  }
  body.ve-home-on #veRightCol::-webkit-scrollbar { display: none; }
  body.ve-home-on #mainScreen { margin-right: 372px; }

  .ve-rc { background: var(--color-card-bg, #fff); border-radius: 16px; box-shadow: 0 6px 18px rgba(16,24,40,0.06); border: 1px solid var(--color-border, rgba(0,0,0,0.05)); padding: 16px; flex-shrink: 0; }
  .ve-rc-t { font-size: 12.5px; font-weight: 800; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; color: var(--color-text-strong, #16181d); text-transform: uppercase; letter-spacing: 0.5px; }
  .ve-rc-t a { font-size: 11.5px; color: #2979FF; text-decoration: none; font-weight: 800; cursor: pointer; text-transform: none; letter-spacing: 0; }

  .ve-rc-sum { display: flex; gap: 8px; margin-bottom: 12px; }
  .ve-rc-sum .m { flex: 1; background: var(--color-surface, #f4f6f9); border-radius: 12px; padding: 10px 8px; text-align: center; }
  .ve-rc-sum .n { font-size: 17px; font-weight: 800; color: var(--color-text-strong, #16181d); }
  .ve-rc-sum .l { font-size: 9.5px; color: var(--color-muted, #7a8494); font-weight: 700; }
  .ve-rc-sum .money .n { background: linear-gradient(45deg, #2979FF 10%, #00D9A5 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }

  .ve-rc-apt { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-top: 1px solid var(--color-border, rgba(0,0,0,0.06)); }
  .ve-rc-apt:first-of-type { border-top: none; }
  .ve-rc-apt .h { width: 46px; font-size: 12.5px; font-weight: 800; text-align: center; flex-shrink: 0; color: var(--color-text-strong, #16181d); }
  .ve-rc-apt .w { flex: 1; min-width: 0; }
  .ve-rc-apt .w b { font-size: 12.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--color-text-strong, #16181d); }
  .ve-rc-apt .w span { font-size: 10.5px; color: var(--color-muted, #7a8494); font-weight: 600; }

  .ve-rc-sug { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
  .ve-rc-sug .ava { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; overflow: hidden; background: linear-gradient(45deg, #667eea, #764ba2); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; }
  .ve-rc-sug .ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ve-rc-sug .w { flex: 1; min-width: 0; }
  .ve-rc-sug .w b { font-size: 12.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--color-text-strong, #16181d); }
  .ve-rc-sug .w span { font-size: 10.5px; color: var(--color-muted, #7a8494); font-weight: 600; }
  .ve-rc-sug button { border: 1.5px solid #2979FF; background: transparent; color: #2979FF; font-weight: 800; font-size: 11px; border-radius: 999px; padding: 6px 12px; cursor: pointer; flex-shrink: 0; }

  .ve-rc-foot { font-size: 10.5px; color: var(--color-muted, #9aa3b2); font-weight: 600; padding: 0 6px; line-height: 1.8; }
}

/* ═════════ AJUSTES DEL BARRIDO (2026-09-14, revision de Yoander) ═════════ */

/* Pantallas interiores a ancho de lectura (antes estiradas a 1200px+) */
@media (min-width: 768px) {
  #searchScreen { max-width: 680px; margin-left: auto; margin-right: auto; }
  #notificationsScreen { max-width: 720px; margin-left: auto; margin-right: auto; }
  #storeScreen { max-width: 1040px; margin-left: auto; margin-right: auto; }
  #profileScreen { max-width: 935px; margin-left: auto; margin-right: auto; }
  #chatScreen { max-width: 780px; margin-left: auto; margin-right: auto; }

  /* Reels a columna de telefono centrada con fondo oscuro completo
     (estaba descuadrado: la regla vieja de max-width chocaba con el
     layout nuevo). El box-shadow gigante hace de backdrop. */
  .reels-fullscreen {
    left: 50% !important;
    right: auto !important;
    width: min(440px, 100vw) !important;
    max-width: none !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    box-shadow: 0 0 0 200vmax rgba(8, 10, 14, 0.92);
  }

  /* El visor de historias ya venia centrado a 500px por la regla vieja;
     solo le damos el mismo backdrop para que no se vea el feed detras. */
  .story-viewer, .ve-sv { box-shadow: 0 0 0 200vmax rgba(8, 10, 14, 0.92); }

  /* Creador de posts/historias: columna centrada sobre backdrop */
  .pc-overlay {
    left: 50% !important;
    right: auto !important;
    width: min(560px, 100vw) !important;
    transform: translateX(-50%);
    box-shadow: 0 0 0 200vmax rgba(8, 10, 14, 0.92);
  }
}

@media (min-width: 1100px) {
  /* Header superior fuera: la marca ya vive en la sidebar (y el toggle
     de Reels tambien). Era una franja duplicada arriba del contenido. */
  #vehyly-header { display: none !important; }
  .toggle-feed-reels { display: none !important; }
  /* El contenido compensa el alto del header fijo que ya no esta */
  #mainScreen { padding-top: 12px; }

  /* Backdrop de foco para los paneles centrados */
  #appointmentsScreenModal,
  #ve-barbershop-appts {
    box-shadow: 0 0 0 200vmax rgba(16, 20, 28, 0.45);
  }

  /* Sabanas del perfil (Billetera, etc.): de sheet inferior de ancho
     completo a panel centrado */
  .ve-overlay { align-items: center !important; justify-content: center; }
  .ve-overlay .ve-sheet {
    width: min(640px, 92vw) !important;
    max-height: 88vh !important;
    border-radius: 18px !important;
  }
}