/* ALMAGO — tema CLIENTE (Liquid Glass Light).
   Se carga DESPUÉS de admin.css y solo redefine los tokens del :root a la paleta
   clara de chat.html. Como admin.css está 100% dirigido por variables CSS, esto
   voltea todo el sistema (topbar, botones, cards, tablas, campos, y los estilos
   inline crm-* que usan var(--brand)/var(--panel)/var(--border)/var(--muted))
   de oscuro a liquid glass claro, sin tocar la estructura. Mismo CRM, vista de
   cliente que combina con el chat del doctor. Ver ESTADO.md bug "CRM cliente". */

:root {
  /* ── Capa 1 — fondo de página (claro y CÁLIDO, igual que chat.html Paso 7) ── */
  --page-bg:   linear-gradient(160deg, #fbfcf9 0%, #eef2ec 100%);
  --ink:       #2b2f38;
  --ink-muted: rgba(10, 13, 26, 0.60);

  /* ── Capa 2 — tarjetas / vidrio claro (tinte VERDE, no azul) ──────────── */
  --glass-bg:     linear-gradient(165deg, rgba(255,255,255,0.82), rgba(238,244,239,0.88));
  --glass-border: rgba(255, 255, 255, 0.80);
  --glass-shadow: 0 10px 34px rgba(0,0,0,0.09), inset 0 1px 0 rgba(255,255,255,0.96);
  --glass-blur:   blur(24px) saturate(180%);

  /* ── Capa 3 — burbujas liquid glass claras (botones, inputs, chips) ────── */
  --bubble-fill:        radial-gradient(120% 100% at 50% 15%, rgba(255,255,255,0.75), rgba(255,255,255,0.22) 75%);
  --bubble-fill-hover:  radial-gradient(120% 100% at 50% 15%, rgba(255,255,255,0.92), rgba(255,255,255,0.34) 75%);
  --bubble-ring:        rgba(255, 255, 255, 0.90);
  --bubble-shadow:      0 8px 18px rgba(47, 81, 57, 0.16), inset 0 1px 1px rgba(255,255,255,0.85);
  --bubble-shadow-sm:   0 4px 10px rgba(47, 81, 57, 0.12), inset 0 1px 1px rgba(255,255,255,0.75);
  --bubble-glow:        0 1px 1px rgba(255,255,255,0.70);
  --bubble-glow-sm:     0 1px 1px rgba(255,255,255,0.55);
  --bubble-icon-glow:   drop-shadow(0 1px 1px rgba(255,255,255,0.70));
  --bubble-knob:        #ffffff;
  --bubble-knob-shadow: 0 2px 4px rgba(0,0,0,0.18);
  --ghost-bg:           rgba(255, 255, 255, 0.45);
  --ghost-border:       rgba(0, 0, 0, 0.10);
  --ghost-hover-bg:     rgba(255, 255, 255, 0.72);

  /* Acento VERDE BODEGA (botón principal, switch on) — igual que chat.html (Paso 7) */
  --bubble-accent-fill:       radial-gradient(120% 100% at 50% 12%, #4f7d5c, #3f6a4c 78%);
  --bubble-accent-fill-hover: radial-gradient(120% 100% at 50% 12%, #5a8a67, #356045 78%);
  --bubble-accent-ring:       rgba(255, 255, 255, 0.55);
  --bubble-accent-shadow:     0 8px 20px rgba(47,81,57,0.32), inset 0 1px 1px rgba(255,255,255,0.45);
  --bubble-accent-shadow-sm:  0 4px 12px rgba(47,81,57,0.26), inset 0 1px 1px rgba(255,255,255,0.40);

  /* ── Texto (oscuro sobre claro) ──────────────────────────────────────── */
  --fg:       #2b2f38;
  --muted:    rgba(10, 13, 26, 0.48);
  --fg-muted: rgba(10, 13, 26, 0.48);
  --label:    rgba(10, 13, 26, 0.40);
  --divider:  rgba(0, 0, 0, 0.08);

  /* ── Superficies internas (claras) ───────────────────────────────────── */
  --bg:           rgba(255, 255, 255, 0.55);
  --input-border: rgba(0, 0, 0, 0.12);
  --surface:      rgba(255, 255, 255, 0.50);
  --hover:        rgba(0, 0, 0, 0.04);

  /* Base OPACA para color-mix() en chips/alerts — DEBE ser clara para que
     color-mix(in srgb, var(--brand) 15%, var(--panel)) dé un fondo claro. */
  --panel:  #ffffff;
  --border: rgba(0, 0, 0, 0.08);

  /* ── Acentos semánticos (ajustados para contraste sobre fondo claro) ───── */
  --green:  #1f9d57;
  --red:    #e0352b;
  --accent: #3f6a4c;
  --warn:   #c77700;
  --brand:  #3f6a4c;
  /* Velos verdes para los DETALLES (mismo set que chat.html Paso 7): que las páginas
     del cliente tampoco se vean todo blanco. Tunables desde aquí. */
  --brand-veil:   rgba(63, 106, 76, 0.07);
  --brand-hair:   rgba(63, 106, 76, 0.20);
  --brand-wash:   rgba(63, 106, 76, 0.09);
  --brand-scroll: rgba(63, 106, 76, 0.22);

  /* ── Switches ────────────────────────────────────────────────────────── */
  --switch-off: rgba(0, 0, 0, 0.14);
  --switch-on:  #3f6a4c;
  --knob-off:   #ffffff;
  --knob-on:    #ffffff;
}

/* Halos de luz VERDE difusa de fondo — el toque liquid glass de chat.html (Paso 7). */
body::before, body::after {
  content: ""; position: fixed; border-radius: 50%;
  filter: blur(130px); z-index: -1; pointer-events: none;
}
body::before { width: 600px; height: 600px; top: -180px; left: -140px; background: rgba(63,106,76,0.08); }
body::after  { width: 640px; height: 640px; bottom: -200px; right: -140px; background: rgba(79,125,92,0.06); }

/* Scrollbars verdes en las páginas del cliente (client.css solo lo cargan ellas) → mismo
   detalle que el chat, en vez del gris del navegador. */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--brand-scroll); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }
* { scrollbar-color: var(--brand-scroll) transparent; }

/* La topbar clara: el texto de marca y el "volver" deben leerse oscuros. */
.brand { color: var(--fg); }

/* ════════════════════════════════════════════════════════════════════════════
   Unificación liquid glass del lado CLIENTE (chat + CRM + Agenda + formularios).
   Diego 2026-06-17: "todo se debe de ver como el chat; todo lo que no sea fondo,
   liquid glass como el admin". client.css SOLO lo cargan las páginas de cliente
   (nunca el admin), así que estas reglas — incluso con !important — son 100%
   cliente y no tocan el panel. El !important gana sobre el <style> inline que
   cada template carga después en el body.
   ════════════════════════════════════════════════════════════════════════════ */

/* Inputs de vidrio (el admin.css los deja como caja plana; el de búsqueda del
   CRM ni type tiene, por eso salía como caja default del navegador). */
input[type="text"], input[type="password"], input[type="search"],
input[type="email"], input[type="tel"], input[type="number"],
input[type="date"], input[type="time"], input[type="datetime-local"],
input:not([type]), textarea, select {
  background: var(--bubble-fill);
  border: 1.5px solid var(--bubble-ring);
  border-radius: 12px;
  box-shadow: var(--bubble-shadow-sm);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
input[type="text"]:focus, input[type="password"]:focus, input[type="search"]:focus,
input[type="email"]:focus, input[type="tel"]:focus, input[type="number"]:focus,
input:not([type]):focus, textarea:focus, select:focus {
  background: var(--bubble-fill-hover);
  border-color: var(--bubble-ring);
}

/* Sin azul decorativo: avatares y chips a vidrio neutro, como el avatar del chat. */
.crm-avatar {
  background: var(--bubble-fill) !important;
  color: var(--fg) !important;
  border: 1.5px solid var(--bubble-ring);
  box-shadow: var(--bubble-shadow-sm);
}
.crm-tag, .crm-field-chip {
  background: rgba(10,13,26,0.06) !important;
  color: rgba(10,13,26,0.60) !important;
}
.agenda-badge.ok {
  background: rgba(10,13,26,0.06) !important;
  color: rgba(10,13,26,0.62) !important;
}