/* ============================================================================
   grs-corporativo.css — Tema corporativo + capa responsiva del CRM GRS.
   El bundle de React (Tailwind) no trae breakpoints: aquí se adapta a
   teléfono (≤ 767 px), tablet (768–1199 px) y PC, y se cambia la paleta
   índigo por la corporativa (marino #0B1E38 / azul #1B3F70 / dorado #C6A15B).
   Las páginas PHP (bandeja, redes, publicar…) usan las variables --ind*.
============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700&display=swap');

:root{
  --grs-navy:#0B1E38; --grs-navy-2:#132B4D; --grs-blue:#1B3F70; --grs-blue-2:#25528F;
  --grs-gold:#C6A15B; --grs-gold-d:#A9843F; --grs-gold-soft:#F6F0E3; --grs-blue-soft:#EAF0F8;
  --grs-bg:#F5F6F9; --grs-line:#E3E7EE;
  /* páginas PHP del CRM */
  --ind:var(--grs-blue); --ind-d:var(--grs-navy); --ind-soft:var(--grs-blue-soft); --bg:var(--grs-bg); --line:var(--grs-line);
}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}

/* ── Paleta: índigo/violeta → marino/dorado ─────────────────────────────── */
#root .bg-indigo-500,#root .bg-indigo-600,#root .bg-violet-500,#root .bg-violet-600,#root .bg-purple-600{background-color:var(--grs-blue)!important}
#root .hover\:bg-indigo-600:hover,#root .hover\:bg-indigo-700:hover,#root .hover\:bg-violet-700:hover{background-color:var(--grs-navy)!important}
#root .bg-indigo-50,#root .bg-violet-50,#root .bg-purple-50{background-color:var(--grs-blue-soft)!important}
#root .bg-indigo-100,#root .bg-violet-100,#root .hover\:bg-indigo-100:hover,#root .hover\:bg-indigo-50:hover{background-color:#DCE5F2!important}
#root .text-indigo-400,#root .text-indigo-500,#root .text-indigo-600,#root .text-indigo-700,#root .text-violet-600,#root .text-violet-700,#root .text-purple-600,
#root .hover\:text-indigo-700:hover,#root .hover\:text-indigo-600:hover{color:var(--grs-blue)!important}
#root .border-indigo-100,#root .border-indigo-200,#root .border-indigo-500,#root .border-violet-200,#root .hover\:border-indigo-200:hover{border-color:#C9D6EA!important}
#root .border-indigo-500,#root .border-b-2.border-indigo-500{border-color:var(--grs-gold)!important}
#root .from-indigo-500,#root .from-violet-500{--tw-gradient-from:var(--grs-blue)!important}
#root .to-violet-500,#root .to-purple-500,#root .to-indigo-600{--tw-gradient-to:var(--grs-navy)!important}
#root .ring-indigo-500,#root .focus\:ring-indigo-500:focus,#root .focus\:ring-indigo-200:focus{--tw-ring-color:rgba(198,161,91,.45)!important}
#root .focus\:border-indigo-400:focus,#root .focus\:border-indigo-300:focus{border-color:var(--grs-gold)!important}
#root input[type=checkbox],#root input[type=radio]{accent-color:var(--grs-blue)}
#root .bg-gray-50{background-color:var(--grs-bg)!important}

/* Barra lateral corporativa */
#root aside.grs-sidebar{background:linear-gradient(180deg,var(--grs-navy) 0%,#0E2645 100%)!important;box-shadow:1px 0 0 rgba(198,161,91,.18)}
#root aside.grs-sidebar>div:first-child{background:var(--grs-gold)!important}
#root aside.grs-sidebar>div:first-child svg{color:var(--grs-navy)!important}
#root aside.grs-sidebar button{color:#9FB0C8}
#root aside.grs-sidebar button.bg-indigo-500,#root aside.grs-sidebar button[data-active]{background:rgba(198,161,91,.16)!important;color:var(--grs-gold)!important;box-shadow:inset 3px 0 0 var(--grs-gold)}
#root aside.grs-sidebar button:hover{background:rgba(255,255,255,.07)!important;color:#fff!important}

/* Cabeceras de sección con tipografía corporativa */
#root .grs-main>div:first-child h1,#root .grs-main>div:first-child h2{font-family:"Playfair Display",Georgia,serif;letter-spacing:.2px;color:var(--grs-navy)}
#root .grs-main>div:first-child{border-bottom:1px solid var(--grs-line)!important}
#root .rounded-2xl{border-color:var(--grs-line)}

/* Tablas: nunca desbordan la pantalla */
#root table{max-width:100%}
#root .overflow-x-auto,#root [class*="overflow-x"]{-webkit-overflow-scrolling:touch}

/* ── TABLET (768–1199 px) ───────────────────────────────────────────────── */
@media (max-width:1199px){
  #root .grid-cols-4,#root .grid-cols-5,#root .lg\:grid-cols-4,#root .grid-cols-8{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #root .grid-cols-3{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #root .w-\[380px\],#root .w-\[340px\],#root .w-\[320px\],#root .w-\[300px\]{width:280px!important}
  #root .px-6{padding-left:18px!important;padding-right:18px!important}
}

/* ── TELÉFONO / TABLET CHICA (html.grs-mobile = ≤ 820 px, lo pone index.php) ──
   El menú es un cajón deslizable (hamburguesa). Aquí se hace corporativo, ancho
   y con nombre de cada sección; el resto adapta rejillas, espacios y modales. */
html.grs-mobile #grs-topbar{background:var(--grs-navy)!important;border-bottom:1px solid rgba(198,161,91,.3)!important}
html.grs-mobile #grs-burger,html.grs-mobile #grs-back{background:rgba(255,255,255,.1)!important;color:#fff!important;border-color:rgba(255,255,255,.18)!important}
html.grs-mobile #grs-topbar::after{content:"Grupo Rojas Silva · CRM";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:600 15px "Playfair Display",Georgia,serif;color:#fff;letter-spacing:.3px;pointer-events:none}
html.grs-mobile.grs-ticket #grs-topbar::after{content:""}
html.grs-mobile #root aside.grs-sidebar{width:248px!important;align-items:stretch!important;padding:14px 12px calc(14px + env(safe-area-inset-bottom))!important;
  overflow-y:auto!important;gap:2px!important}
html.grs-mobile #root aside.grs-sidebar>div:first-child{width:44px!important;margin:0 0 12px 4px!important}
html.grs-mobile #root aside.grs-sidebar button{width:100%!important;height:44px!important;justify-content:flex-start!important;padding:0 12px!important;gap:12px;border-radius:11px!important}
html.grs-mobile #root aside.grs-sidebar button>svg{margin:0!important;flex-shrink:0}
html.grs-mobile #root aside.grs-sidebar button[title]::after{content:attr(title);font:600 14px Inter,sans-serif;color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.grs-mobile #root aside.grs-sidebar button.bg-indigo-500,html.grs-mobile #root aside.grs-sidebar button[data-active]{box-shadow:inset 3px 0 0 var(--grs-gold)!important}
html.grs-mobile #root aside.grs-sidebar>div:not(:first-child){width:100%!important}

@media (max-width:820px){
  #root .px-6,#root .px-5{padding-left:14px!important;padding-right:14px!important}
  #root .pt-6:not(.grs-main){padding-top:14px!important}
  #root .p-6:not(.grs-main),#root .p-5:not(.grs-main){padding:14px!important}
  #root .gap-6{gap:14px!important}
  #root .text-2xl{font-size:1.3rem!important}
  #root .grid-cols-3,#root .grid-cols-5,#root .grid-cols-8,#root .lg\:grid-cols-2{grid-template-columns:minmax(0,1fr)!important}
  #root .grid-cols-4,#root .lg\:grid-cols-4{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #root .grid-cols-2:has(input,select,textarea){grid-template-columns:minmax(0,1fr)!important}
  #root [class*="col-span-"]{grid-column:auto!important}
  #root .grid-cols-7{font-size:11px}
  #root .grid-cols-7>*{min-width:0;padding:3px!important}
  #root .grs-main .flex.items-center.gap-1:has(>button:nth-child(4)){overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  #root .max-w-\[72\%\],#root .max-w-\[75\%\],#root .max-w-\[80\%\]{max-width:88%!important}
  #root .fixed.inset-0.flex.justify-end>*{width:100%!important;max-width:100%!important}
  #root .fixed.inset-0.items-center.justify-center>*{max-height:calc(100dvh - 24px);overflow-y:auto;width:100%}
  #root .fixed.bottom-6.right-6{left:12px;right:12px!important;bottom:12px!important;max-width:none!important;width:auto!important}
}
@media (max-width:480px){
  #root .grid-cols-4,#root .lg\:grid-cols-4{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #root .grid-cols-2:not(:has(>:nth-child(3))){grid-template-columns:minmax(0,1fr)!important}
  #root .text-xl{font-size:1.1rem!important}
}
/* Ajustes finos en teléfono */
html.grs-mobile #root .grs-main.p-6{padding:60px 14px 14px!important}
html.grs-mobile #root .grs-main .flex:has(>.w-\[300px\],>.w-\[320px\],>.w-\[340px\],>.w-\[280px\]:not(.grs-list),>.w-\[260px\],>.w-\[240px\],>.w-\[220px\]){flex-direction:column!important;overflow-y:auto!important}
html.grs-mobile #root .grs-main :is(.w-\[300px\],.w-\[320px\],.w-\[340px\],.w-\[260px\],.w-\[240px\],.w-\[220px\]){width:100%!important;max-width:100%!important;border-right:0!important;border-bottom:1px solid var(--grs-line)}
html.grs-mobile #root .grs-main .flex.gap-4:has(>.rounded-xl){flex-wrap:wrap}
html.grs-mobile #root .grs-main .flex.gap-4:has(>.rounded-xl)>.rounded-xl{flex:1 1 calc(50% - 8px);min-width:0}
/* Bandeja de entrada (chats.php) */
.av{background:linear-gradient(135deg,var(--grs-blue),var(--grs-navy))!important}
.chf{flex-wrap:wrap!important;overflow-x:visible!important}
.lhead .t,.tbar h1,.tbar .t{font-family:"Playfair Display",Georgia,serif}