/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./src/app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
/* src/app/globals.css */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  /* Paleta principal */
  --c-bg:          #F7F6F3;
  --c-bg-alt:      #EFEDE8;
  --c-surface:     #FFFFFF;
  --c-surface-2:   #F4F2EF;
  --c-border:      #E2DED8;
  --c-border-dark: #C8C3BA;

  /* Texto */
  --c-text:        #1A1916;
  --c-text-2:      #6B6760;
  --c-text-3:      #A8A49F;

  /* Acento */
  --c-accent:      #2A5CFF;
  --c-accent-bg:   #EEF2FF;
  --c-accent-dark: #1A3FCC;

  /* Estados */
  --c-success:     #1D7A4A;
  --c-success-bg:  #E8F5EE;
  --c-warning:     #8A5500;
  --c-warning-bg:  #FFF3DC;
  --c-danger:      #C0180C;
  --c-danger-bg:   #FEF0EF;

  /* Prioridades */
  --c-urgent:      #C0180C;
  --c-high:        #C47B00;
  --c-normal:      #2A5CFF;
  --c-low:         #A8A49F;

  /* Tipos de mensaje */
  --c-inbound:     #E8F0FE;
  --c-outbound:    #E8F5EE;
  --c-internal:    #FFF8E6;

  /* Layout */
  --sidebar-w:     224px;
  --topbar-h:      52px;
  --radius-sm:     6px;
  --radius-md:     10px;
  --radius-lg:     14px;
  --radius-xl:     18px;

  /* Sombras */
  --shadow-card:   0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-lifted: 0 4px 16px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-modal:  0 20px 60px rgba(0,0,0,0.18), 0 4px 16px rgba(0,0,0,0.08);

  /* Fuentes */
  --font-sans: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'DM Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--font-sans);
  font-size: 15px;
  background: var(--c-bg);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
}

body { margin: 0; min-height: 100vh; }

/* Scrollbar personalizada */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--c-border-dark); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-text-3); }

/* Selección */
::selection { background: var(--c-accent-bg); color: var(--c-accent-dark); }

/* Transiciones globales */
a, button { transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s; }

/* Animaciones de entrada */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideRight {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

.animate-fade-up    { animation: fadeUp 0.25s ease both; }
.animate-fade-in    { animation: fadeIn 0.2s ease both; }
.animate-slide-right{ animation: slideRight 0.2s ease both; }
.animate-scale-in   { animation: scaleIn 0.2s ease both; }

/* Utilidades */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}