/* ──────────────────────────────────────────────────────
   responsive-resident.css
   Breakpoints del portal de residentes de Resivia.
   Extraído de residente.html — cargar DESPUÉS del <style> inline.
   Breakpoints: min-width:900px (desktop) · max-width:420px (mobile small)
   ────────────────────────────────────────────────────── */

/* ─────────────── DESKTOP LAYOUT (≥900px) ─────────────── */
@media(min-width:900px){
  :root{ --nav-h:64px; }

  /* Top nav: más altura, añadir links horizontales */
  #topnav{
    padding:0 28px;
    justify-content:space-between;
  }
  .desk-nav{
    display:flex;
    align-items:center;
    gap:2px;
    flex:1;
    padding:0 32px;
  }
  .desk-nav-btn{
    background:none;
    border:none;
    padding:8px 14px;
    font-size:13px;
    font-weight:500;
    color:var(--text-2);
    border-radius:var(--radius);
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:6px;
    transition:background .12s, color .12s;
    font-family:var(--sans);
    position:relative;
  }
  @media (hover:hover) and (pointer:fine) { .desk-nav-btn:hover{ background:var(--surface-alt); color:var(--text); } }
  .desk-nav-btn.active{
    color:var(--accent);
    font-weight:600;
    background:var(--accent-soft);
  }
  .desk-nav-btn.active::after{
    content:'';
    position:absolute;
    bottom:-1px; left:14px; right:14px; height:2px;
    background:var(--accent);
    border-radius:2px 2px 0 0;
  }
  .desk-badge{
    background:var(--error);
    color:#fff;
    font-size:9px;
    font-weight:700;
    padding:1px 5px;
    border-radius:10px;
    min-width:16px;
    text-align:center;
    display:none;
  }

  /* Sidebar visible en desktop — 64px icon-only */
  #res-sidebar{ display:flex !important; width:64px !important; padding:20px 10px !important; align-items:center !important; overflow:visible !important; }
  #res-sidebar .sidebar-brand{ justify-content:center; padding-bottom:16px; margin-bottom:8px; }
  #res-sidebar .nav-item{ justify-content:center; padding:12px; width:44px; }
  #res-sidebar .nav-item-badge{ position:absolute; top:4px; right:4px; margin-left:0; }
  #res-sidebar .sidebar-user{
    width:34px; height:34px; border-radius:50%;
    background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25);
    color:#F4F1EA; display:flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:600; padding:0; margin-top:0; border-top:none;
  }

  /* Ocultar bottom nav y barra horizontal (sidebar los reemplaza) */
  #bottomnav{ display:none !important; }
  .desk-nav{ display:none !important; }
  .fab{ display:none !important; }
  #topnav .nav-logo{ display:none; }

  /* Topnav y contenido se desplazan para dejar espacio al sidebar */
  #topnav{ left:64px; }
  #content{
    padding-bottom:48px;
    margin-left:64px;
    max-width:none;
  }

  /* Tipografías más generosas */
  .hero-amount{ font-size:52px; }
  .hero-wrap{ padding:32px 28px 12px; }
  .section{ padding:20px 28px; }

  /* inicio-grid: 2 columnas en desktop */
  .inicio-grid{ display:grid; grid-template-columns:1fr 320px; gap:0; align-items:start; }
  .inicio-main{ min-width:0; }
  .inicio-aside{ padding-top:20px; padding-right:28px; }
  .inicio-aside .section{ padding-left:0; padding-right:0; padding-top:0; }

  /* Quick cards: un poco más anchos en desktop */
  .quick-btn{ padding:20px 16px; }

  /* Login: centrar en pantalla con dos columnas */
  #login-screen{
    flex-direction:row;
    min-height:100vh;
  }
  .login-brand-band{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:56px 48px;
    min-height:100vh;
  }
  .login-brand-band::after{ display:none; }
  .login-form-area{
    flex:0 0 460px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:48px 48px;
    max-width:460px;
  }
  .login-quote{ font-size:36px; max-width:520px; }
  .login-mark{ font-size:20px; margin-bottom:48px; }
}

/* Login: una sola columna en mobile/tablet (<900px) — el grid 1fr 1fr base se distorsiona */
@media(max-width:899px){
  #login-screen{ grid-template-columns:1fr; }
  .login-brand-band{ padding:40px 28px 32px; min-height:auto; }
  .login-quote{ font-size:24px; max-width:none; }
  .login-mark{ margin-bottom:24px; }
  .login-form-area{ padding:32px 28px 48px; }
}

/* Mobile small screens (≤420px) */
@media(max-width:420px){
  /* Quick actions: 2×2 en lugar de 4 en línea */
  .quick-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .quick-btn{padding:16px 8px;}

  /* Hero */
  .hero-amount{font-size:34px;}
  .hero-wrap{padding:18px 16px 6px;}
  .hero-card{padding:20px 18px;}

  /* Top nav: ocultar texto del usuario, solo avatar */
  .nav-user-info{display:none;}

  /* Panels */
  #content{padding-left:16px;padding-right:16px;}
  .section{padding:0;}

  /* Incidencia: categoría/prioridad en columna */
  .inc-form-grid{grid-template-columns:1fr!important;}

  /* Asambleas: texto largo */
  .asm-title{font-size:14px;}
  .asm-meta{font-size:11px;}

  /* Fondo KPIs: full-width en pantallas chicas */
  .fondo-kpis{grid-template-columns:1fr;}
  .fondo-kpi.full{grid-column:auto;}

  /* Sheets */
  .sheet{max-height:96vh;}
}