/* ==========================================================================
   SMS Gateway - Panel Web UI Stylesheet
   ========================================================================== */

/* Typography: Plus Jakarta Sans (Headings) & Inter (Body) */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('vendor/fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('vendor/fonts/inter-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-heading: 'Plus Jakarta Sans', var(--font-sans);
}

/* Base resets & typography */
html, body {
  font-family: var(--font-sans);
  min-height: 100vh;
  letter-spacing: -0.011em;
  transition: background-color 0.25s ease, color 0.25s ease;
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: var(--font-heading);
  letter-spacing: -0.025em;
  font-weight: 700;
}

/* Palette custom: Light Mode */
:root,
[data-theme="light"] {
  color-scheme: light;
  --color-primary: #0d9488;
  --color-primary-content: #ffffff;
  --color-secondary: #4f46e5;
  --color-secondary-content: #ffffff;
  --color-accent: #0284c7;
  --color-accent-content: #ffffff;
  --color-neutral: #1e293b;
  --color-neutral-content: #f8fafc;
  --color-base-100: #ffffff;
  --color-base-200: #f8fafc;
  --color-base-300: #f1f5f9;
  --color-base-content: #0f172a;
  --color-info: #0284c7;
  --color-info-content: #ffffff;
  --color-success: #10b981;
  --color-success-content: #ffffff;
  --color-warning: #f59e0b;
  --color-warning-content: #1e293b;
  --color-error: #ef4444;
  --color-error-content: #ffffff;
  --radius-selector: 0.625rem;
  --radius-field: 0.625rem;
  --radius-box: 0.875rem;
  --border: 1px;
}

/* Palette custom: Dark Mode */
[data-theme="dark"] {
  color-scheme: dark;
  --color-primary: #14b8a6;
  --color-primary-content: #042f2e;
  --color-secondary: #818cf8;
  --color-secondary-content: #1e1b4b;
  --color-accent: #38bdf8;
  --color-accent-content: #082f49;
  --color-neutral: #334155;
  --color-neutral-content: #f8fafc;
  --color-base-100: #0f172a;
  --color-base-200: #090e1a;
  --color-base-300: #1e293b;
  --color-base-content: #f1f5f9;
  --color-info: #38bdf8;
  --color-info-content: #082f49;
  --color-success: #34d399;
  --color-success-content: #022c22;
  --color-warning: #fbbf24;
  --color-warning-content: #451a03;
  --color-error: #f87171;
  --color-error-content: #450a0a;
  --radius-selector: 0.625rem;
  --radius-field: 0.625rem;
  --radius-box: 0.875rem;
  --border: 1px;
}

/* Accessibility: Focus outlines */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Lucide font-icons alignment & display */
[class^="icon-"], [class*=" icon-"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: -0.125em;
}

/* Cards & Surfaces */
.panel-card {
  background-color: var(--color-base-100);
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.panel-card:hover {
  border-color: rgba(13, 148, 136, 0.25);
}

/* Pulse animation for presence indicator */
@keyframes pulse-dot {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.6;
  }
}

.pulse-indicator {
  animation: pulse-dot 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Loading button spinner */
.btn.is-loading .btn-text {
  opacity: 0;
}
.btn.is-loading .btn-spinner {
  display: inline-block !important;
}

/* La hoja de iconos Lucide fuerza display:inline-block y anula la clase hidden de Tailwind */
[class*="icon-"].hidden { display: none !important; }