/* ═══════════════════════════════════════════════════════════════════
   TEMA ARGENTINA - Tech & Profesional
   🇦🇷 Paleta: Azules y cianos modernos con toques naturales
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Bases y Estructura */
  --arg-negro: #000000;
  --arg-ceniza: #252525;
  --arg-plata: #C0C0C0;
  --arg-blanco: #FFFFFF;
  --arg-calido: #FAF1F1;
  
  /* Identidad (El "Celeste" Moderno) */
  --arg-marino: #020F27;
  --arg-petroleo: #0B4A6E;
  --arg-cyan: #22D9DF;
  --arg-brillante: #28FFFF;
  
  /* Equilibrio Orgánico */
  --arg-oliva: #6B9432;
  --arg-lima: #C1FF72;
}

/* ═══════════════════════════════════════════════════════════════════
   FONDO ARGENTINA
   ═══════════════════════════════════════════════════════════════════ */

body {
  background: linear-gradient(180deg, var(--arg-negro), var(--arg-marino));
}

.bg {
  background: 
    radial-gradient(1200px 700px at 70% 25%, rgba(34,217,223,.18), transparent 55%),
    radial-gradient(1100px 700px at 80% 60%, rgba(40,255,255,.14), transparent 55%),
    radial-gradient(900px 600px at 20% 70%, rgba(193,255,114,.10), transparent 60%),
    linear-gradient(180deg, var(--arg-negro), var(--arg-marino));
}

.bg::before {
  background:
    radial-gradient(circle at 25% 20%, rgba(34,217,223,.12), transparent 40%),
    radial-gradient(circle at 80% 35%, rgba(40,255,255,.12), transparent 38%),
    radial-gradient(circle at 55% 85%, rgba(193,255,114,.10), transparent 45%);
}

/* ═══════════════════════════════════════════════════════════════════
   SCROLLBAR ARGENTINA
   ═══════════════════════════════════════════════════════════════════ */

html {
  scrollbar-color: var(--arg-cyan) var(--arg-negro);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--arg-cyan), var(--arg-petroleo));
}

::-webkit-scrollbar-thumb:hover {
  background: var(--arg-brillante);
}

/* ═══════════════════════════════════════════════════════════════════
   BRAND ARGENTINA
   ═══════════════════════════════════════════════════════════════════ */

.brand .mark {
  box-shadow: 0 0 0 1px rgba(34,217,223,.3), 0 0 40px rgba(34,217,223,.25);
  background-image: url('../img/escencial-logoblanco.png');
}

/* ═══════════════════════════════════════════════════════════════════
   GRADIENTES Y COLORES PRIMARIOS
   ═══════════════════════════════════════════════════════════════════ */

.grad-primary {
  background: linear-gradient(90deg, var(--arg-cyan), var(--arg-brillante));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.prompt-btn {
  background: linear-gradient(135deg, var(--arg-cyan), var(--arg-petroleo));
  box-shadow: 0 10px 30px rgba(34,217,223,.4);
}

.prompt-btn:hover {
  box-shadow: 0 20px 50px rgba(34,217,223,.6);
}

/* ═══════════════════════════════════════════════════════════════════
   MODELO SELECTOR - ARGENTINA ACTIVO
   ═══════════════════════════════════════════════════════════════════ */

.model-card[data-model="argentina"] {
  border-color: var(--arg-cyan);
}

.model-card[data-model="argentina"].active {
  border-color: var(--arg-cyan);
  box-shadow: 0 0 0 1px var(--arg-cyan), 0 20px 60px rgba(34,217,223,.4);
}

.model-card[data-model="argentina"].active::before {
  background: radial-gradient(circle at 50% 0%, rgba(34,217,223,.15), transparent 70%);
  opacity: 1;
}

.model-card[data-model="argentina"]:hover {
  border-color: var(--arg-brillante);
  box-shadow: 0 10px 40px rgba(34,217,223,.3);
}

/* ═══════════════════════════════════════════════════════════════════
   INPUTS ARGENTINA
   ═══════════════════════════════════════════════════════════════════ */

input[type="text"]:focus,
textarea:focus {
  border-color: var(--arg-cyan);
  box-shadow: 0 0 0 3px rgba(34,217,223,.15);
}

/* ═══════════════════════════════════════════════════════════════════
   BOTONES ARGENTINA
   ═══════════════════════════════════════════════════════════════════ */

.btn-primary {
  background: linear-gradient(135deg, var(--arg-cyan), var(--arg-petroleo));
  box-shadow: 0 10px 30px rgba(34,217,223,.35);
}

.btn-primary:not(:disabled):hover {
  box-shadow: 0 20px 50px rgba(34,217,223,.5);
  background: linear-gradient(135deg, var(--arg-brillante), var(--arg-cyan));
}

.btn-secondary {
  background: linear-gradient(135deg, var(--arg-oliva), var(--arg-lima));
  box-shadow: 0 10px 30px rgba(193,255,114,.35);
}

.btn-secondary:not(:disabled):hover {
  box-shadow: 0 20px 50px rgba(193,255,114,.5);
  background: linear-gradient(135deg, var(--arg-lima), var(--arg-oliva));
}

/* ═══════════════════════════════════════════════════════════════════
   SPINNER ARGENTINA
   ═══════════════════════════════════════════════════════════════════ */

.spinner {
  border-top-color: var(--arg-cyan);
  border-right-color: var(--arg-brillante);
}

/* ═══════════════════════════════════════════════════════════════════
   MODAL BUTTONS
   ═══════════════════════════════════════════════════════════════════ */

#copyBtn {
  background: linear-gradient(135deg, var(--arg-cyan), var(--arg-petroleo));
  box-shadow: 0 10px 30px rgba(34,217,223,.35);
}

#copyBtn:hover {
  background: linear-gradient(135deg, var(--arg-brillante), var(--arg-cyan));
  box-shadow: 0 15px 40px rgba(34,217,223,.5);
}

#copyBtn.copied {
  background: linear-gradient(135deg, var(--arg-oliva), var(--arg-lima));
}