/* ========================================
   THEME CONFIGURATION - Círculo Médico
   ======================================== */

/* Solo cambiá estos valores para cambiar todo el theme */

:root {
  /* === COLORES PRINCIPALES === */
  
  /* Público (Front) - Teal/Turquesa */
  --color-public-primary: 13 148 136;      /* teal-600 */
  --color-public-primary-hover: 15 118 110; /* teal-700 */
  --color-public-secondary: 5 150 105;     /* emerald-600 */
  
  /* Admin - Purple */
  --color-admin-primary: 124 58 237;       /* purple-700 */
  --color-admin-primary-hover: 109 40 217; /* purple-800 */
  
  /* Prestadores - Blue (OKLCH based) */
  --color-prestador-primary: oklch(37.2% 0.044 257.287);      /* Base azul */
  --color-prestador-primary-hover: oklch(32% 0.048 257.287);  /* Azul más oscuro */
  --color-prestador-light: oklch(50% 0.04 257.287);           /* Azul claro */
  --color-prestador-lighter: oklch(70% 0.03 257.287);         /* Azul muy claro */
  --color-prestador-bg: oklch(95% 0.01 257.287);              /* Fondo azul muy suave */
  
  /* === COLORES DE NAVEGACIÓN === */
  --color-nav-bg: 30 41 59;                /* slate-800 */
  --color-nav-bg-end: 15 23 42;            /* slate-900 */
  --color-nav-text: 255 255 255;           /* white */
  --color-nav-hover: 45 212 191;           /* teal-400 */
  
  /* === COLORES DE FONDO === */
  --color-bg-page: 248 250 252;            /* slate-50 */
  --color-bg-card: 255 255 255;            /* white */
  --color-bg-card-secondary: 248 250 252;  /* slate-50 */
  
  /* === COLORES DE TEXTO === */
  --color-text-primary: 15 23 42;          /* slate-900 */
  --color-text-secondary: 100 116 139;     /* slate-500 */
  --color-text-muted: 148 163 184;         /* slate-400 */
  
  /* === COLORES DE BORDES === */
  --color-border-light: 226 232 240;       /* slate-200 */
  --color-border-medium: 203 213 225;      /* slate-300 */
  
  /* === COLORES DE ESTADO === */
  --color-success: 34 197 94;              /* green-500 */
  --color-error: 239 68 68;                /* red-500 */
  --color-warning: 251 191 36;             /* amber-400 */
  --color-info: 59 130 246;                /* blue-500 */
  
  /* === TIPOGRAFÍA === */
  --font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.875rem;     /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-lg: 1.125rem;     /* 18px */
  --font-size-xl: 1.25rem;      /* 20px */
  --font-size-2xl: 1.5rem;      /* 24px */
  --font-size-3xl: 1.875rem;    /* 30px */
  
  /* === ESPACIADO === */
  --spacing-xs: 0.5rem;         /* 8px */
  --spacing-sm: 0.75rem;        /* 12px */
  --spacing-md: 1rem;           /* 16px */
  --spacing-lg: 1.5rem;         /* 24px */
  --spacing-xl: 2rem;           /* 32px */
  
  /* === BORDES Y SOMBRAS === */
  --border-radius-sm: 0.5rem;   /* 8px */
  --border-radius-md: 0.75rem;  /* 12px */
  --border-radius-lg: 1rem;     /* 16px */
  --border-radius-xl: 1.5rem;   /* 24px */
}

/* ========================================
   CLASES DE UTILIDAD PERSONALIZADAS
   ======================================== */

/* Estas clases usan las variables de arriba */

.theme-bg-public {
  background-color: rgb(var(--color-public-primary));
}

.theme-bg-admin {
  background-color: rgb(var(--color-admin-primary));
}

.theme-bg-prestador {
  background-color: var(--color-prestador-primary);
}

.theme-bg-prestador-light {
  background-color: var(--color-prestador-light);
}

.theme-bg-prestador-lighter {
  background-color: var(--color-prestador-lighter);
}

.theme-bg-prestador-bg {
  background-color: var(--color-prestador-bg);
}

.theme-text-public {
  color: rgb(var(--color-public-primary));
}

.theme-text-admin {
  color: rgb(var(--color-admin-primary));
}

.theme-text-prestador {
  color: var(--color-prestador-primary);
}

.theme-border-public {
  border-color: rgb(var(--color-public-primary));
}

/* Navegación con gradiente */
.theme-nav-gradient {
  background: linear-gradient(to right, rgb(var(--color-nav-bg)), rgb(var(--color-nav-bg-end)));
}

/* Card estándar */
.theme-card {
  background-color: rgb(var(--color-bg-card));
  border: 1px solid rgb(var(--color-border-light));
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-lg);
}

/* Botón primario público */
.theme-btn-public {
  background-color: rgb(var(--color-public-primary));
  color: white;
  transition: all 0.2s;
}

.theme-btn-public:hover {
  background-color: rgb(var(--color-public-primary-hover));
}

/* Botón primario admin */
.theme-btn-admin {
  background-color: rgb(var(--color-admin-primary));
  color: white;
  transition: all 0.2s;
}

.theme-btn-admin:hover {
  background-color: rgb(var(--color-admin-primary-hover));
}

/* Botón primario prestador */
.theme-btn-prestador {
  background-color: var(--color-prestador-primary);
  color: white;
  transition: all 0.2s;
}

.theme-btn-prestador:hover {
  background-color: var(--color-prestador-primary-hover);
}

/* ========================================
   CONFIGURACIÓN EXTENDIDA DE TAILWIND
   ======================================== */

/* 
  Podés usar las variables CSS directamente en Tailwind:
  - bg-[rgb(var(--color-public-primary))]
  - text-[rgb(var(--color-text-primary))]
  
  O crear un tailwind.config.js para mappear las variables
*/

/* ========================================
   FALLBACK PARA NAVEGADORES VIEJOS
   Tailwind v4 usa oklch() y @layer, que Android/Samsung Internet
   desactualizados no soportan: los colores (y a veces todas las
   utilidades) se descartan. Este bloque solo aplica en esos navegadores.
   ======================================== */

@supports not (color: oklch(0% 0 0)) {
  :root {
    --color-prestador-primary: #314158;
    --color-prestador-primary-hover: #23334b;
    --color-prestador-light: #55647a;
    --color-prestador-lighter: #939fb1;
    --color-prestador-bg: #eaeff5;
  }

  /* Login de prestadores */
  .login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
    background: #f0fdf4;
    background: linear-gradient(to bottom right, #f0fdf4, #dcfce7);
    box-sizing: border-box;
  }

  .login-wrap {
    width: 100%;
    max-width: 28rem;
  }

  .login-title {
    margin: 0;
    text-align: center;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
    color: #111827;
  }

  .login-subtitle {
    margin: 8px 0 32px;
    text-align: center;
    font-size: 14px;
    color: #4b5563;
  }

  .login-card {
    background: #ffffff;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
  }

  .login-card form > div {
    margin-bottom: 24px;
  }

  .login-label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
  }

  .login-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    font-size: 16px;
    color: #111827;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    -webkit-appearance: none;
    appearance: none;
  }

  .login-input:focus {
    outline: none;
    border-color: #22c55e;
    box-shadow: 0 0 0 2px #22c55e;
  }

  .login-password {
    position: relative;
  }

  .login-password .login-input {
    padding-right: 48px;
  }

  .login-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: transparent;
    border: 0;
    color: #9ca3af;
  }

  .login-toggle svg {
    width: 20px;
    height: 20px;
  }

  .login-toggle svg.hidden {
    display: none;
  }

  .login-btn {
    display: block;
    width: 100%;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    background: #16a34a;
    border: 0;
    border-radius: 8px;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
  }

  .login-btn:hover,
  .login-btn:active {
    background: #15803d;
  }

  .login-links {
    margin-top: 24px;
    text-align: center;
    font-size: 14px;
  }

  .login-links a,
  .login-back {
    color: #16a34a;
  }

  .login-back {
    display: inline-block;
    margin-top: 32px;
    font-weight: 600;
  }
}