/* ALMAGO — TEMA CLARO (Liquid Glass Light). El único tema del producto.
   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.

   ⚠️ SE LLAMABA client.css Y ERA SOLO DEL CLIENTE. Desde el 2026-08-12 lo carga
   TAMBIÉN el panel del operador (`base.html`), por decisión de Diego: "prefiero
   que Admin ya sea exactamente igual, para que toda la página de ALMAGO sea
   homogénea". Consecuencia que hay que tener presente al editar este archivo: las
   reglas de abajo —incluidas las de `!important` y la @media de teléfono— ya NO
   son territorio exclusivo del cliente; tocan las dos superficies. La paleta
   oscura sigue viviendo en el `:root` de admin.css, que es lo que este archivo
   pisa; nadie la carga sola hoy. */

/* ════════════════════════════════════════════════════════════════════════════
   SINCRONIZADO CON chat.html (Rebanada 3, Diego 2026-07-20): "el diseño de todas
   las pantallas del cliente debe ser el mismo que el del chat principal".

   Los valores de abajo son COPIA TEXTUAL del :root de chat.html — que a su vez es
   copia textual del mockup aprobado. Antes eran una versión ANTERIOR de la misma
   idea (verde #3f6a4c en vez de #3f7a54, tinta azulada #2b2f38 en vez de #1c2b22,
   sombras negras en vez de verdes): parecido de lejos, distinto de cerca — justo
   el defecto que la Pieza 6 corrigió en el chat.

   Si cambias un token en chat.html, cámbialo AQUÍ también. Son un solo diseño en
   dos archivos porque el chat es una plantilla suelta y estas diez son una familia
   sobre admin.css; test_diseno_cliente_sincronizado.py falla si se desincronizan.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Capa 1 — fondo de página (textual de chat.html) ───────────────────── */
  --page-bg:   linear-gradient(160deg, #fafcfa 0%, #f0f6f2 55%, #e9f2ed 100%);
  --ink:       #1c2b22;
  --ink-muted: rgba(28,43,34,0.62);
  --ink-faint: rgba(28,43,34,0.40);

  /* ── Capa 2 — vidrio de tarjetas (textual de chat.html) ────────────────── */
  --glass-bg:     linear-gradient(165deg, rgba(255,255,255,0.58), rgba(255,255,255,0.26));
  --glass-border: rgba(255,255,255,0.75);
  --glass-shadow: 0 10px 30px rgba(31,60,45,0.14), inset 0 1px 0 rgba(255,255,255,0.85);
  --glass-blur:   blur(24px) saturate(180%);

  /* ── Capa 3 — burbujas (textual de chat.html) ──────────────────────────── */
  --bubble-fill:       radial-gradient(120% 100% at 50% 15%, rgba(255,255,255,0.62), rgba(255,255,255,0.22) 75%);
  --bubble-fill-hover: radial-gradient(120% 100% at 50% 15%, rgba(255,255,255,0.80), rgba(255,255,255,0.34) 75%);
  --bubble-ring:       rgba(255,255,255,0.92);
  --bubble-shadow:     0 8px 20px rgba(31,60,45,0.18), inset 0 1px 1px rgba(255,255,255,0.92);
  --bubble-shadow-sm:  0 4px 12px rgba(31,60,45,0.14), inset 0 1px 1px rgba(255,255,255,0.85);
  --bubble-glow:       0 1px 1px rgba(255,255,255,0.80);

  /* Marca — el verde vive SOLO en acentos puntuales, nunca de relleno de botón. */
  --brand:      #3f7a54;
  --brand-soft: rgba(63,122,84,0.14);

  --font-serif: 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-sans:  -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
  --spring:     cubic-bezier(.34, 1.56, .64, 1);

  /* Extensiones de chat.html, derivadas de lo de arriba. */
  --brand-dark:   #2f5f40;
  --brand-veil:   rgba(63,122,84,0.07);
  --brand-hair:   rgba(63,122,84,0.20);
  --brand-scroll: rgba(63,122,84,0.22);
  --surface:      rgba(255,255,255,0.78);
  --radius:       18px;

  /* ── Puente hacia admin.css ────────────────────────────────────────────────
     admin.css aporta la ESTRUCTURA de estas diez pantallas y usa otros nombres
     de token. Aquí se re-apuntan a los del chat: un solo diseño, dos vocabularios.
     Sin este puente el chat se vería nuevo y las pantallas seguirían con lo viejo. */
  --fg:        var(--ink);
  --muted:     var(--ink-muted);
  --fg-muted:  var(--ink-muted);
  --label:     var(--ink-faint);
  --divider:   rgba(28,43,34,0.10);
  --border:    rgba(28,43,34,0.10);
  --bg:        rgba(255,255,255,0.55);
  --input-border: rgba(28,43,34,0.12);
  --hover:     rgba(28,43,34,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;
  --accent:    var(--brand);
  --brand-wash: rgba(63,122,84,0.09);

  /* Sombras del panel del operador (2026-08-12). En oscuro son negro al 45-50%;
     sobre fondo claro eso se ve como mugre, no como profundidad. Aquí son verde
     apagado, la misma familia que --glass-shadow. */
  --shadow-modal:  0 24px 70px rgba(31,60,45,0.22);
  --shadow-drawer: -12px 0 34px rgba(31,60,45,0.16);

  /* Burbuja de acento (botón principal, switch on) — derivada del verde nuevo. */
  --bubble-accent-fill:       radial-gradient(120% 100% at 50% 12%, #4f8f63, #3f7a54 78%);
  --bubble-accent-fill-hover: radial-gradient(120% 100% at 50% 12%, #5a9d70, #356847 78%);
  --bubble-accent-ring:       rgba(255,255,255,0.55);
  --bubble-accent-shadow:     0 8px 20px rgba(31,60,45,0.32), inset 0 1px 1px rgba(255,255,255,0.45);
  --bubble-accent-shadow-sm:  0 4px 12px rgba(31,60,45,0.26), inset 0 1px 1px rgba(255,255,255,0.40);

  /* Detalles que admin.css usa y el chat no dibuja. */
  --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.80));
  --bubble-knob:        #ffffff;
  --bubble-knob-shadow: 0 2px 4px rgba(31,60,45,0.18);
  --ghost-bg:           rgba(255,255,255,0.45);
  --ghost-border:       rgba(28,43,34,0.10);
  --ghost-hover-bg:     rgba(255,255,255,0.72);

  /* ── Acentos semánticos ────────────────────────────────────────────────── */
  --green: #1f9d57;
  --red:   #e0352b;
  --warn:  #c77700;

  /* ── Switches ──────────────────────────────────────────────────────────── */
  --switch-off: rgba(28,43,34,0.14);
  --switch-on:  var(--brand);
  --knob-off:   #ffffff;
  --knob-on:    #ffffff;
}

/* Halos de fondo — textuales de chat.html. Antes eran dos verdes tenues; el chat
   usa un verde MÁS presente arriba-izquierda y un azul frío abajo-derecha, que es
   lo que le da profundidad al vidrio. z-index -1 (y no 0 como el chat) porque aquí
   no hay un .stage con z-index propio que los tape. */
body::before, body::after {
  content: ""; position: fixed; border-radius: 50%;
  filter: blur(150px); z-index: -1; pointer-events: none;
}
body::before { width: 560px; height: 560px; top: -200px; left: -160px; background: rgba(79,170,120,0.22); }
body::after  { width: 540px; height: 540px; bottom: -180px; right: -140px; background: rgba(70,140,190,0.16); }

/* La tipografía del chat: sans para la interfaz. Sin esto las diez pantallas
   heredaban la pila de admin.css y se leían distinto aunque los colores cuadraran. */
body { font-family: var(--font-sans); }

/* Scrollbars verdes en todo ALMAGO → mismo detalle que el chat, en vez del gris del
   navegador. Desde 2026-08-12 también en el panel del operador. */
::-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 (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". El !important gana sobre el <style> inline que
   cada template carga después en el body.

   ⚠️ 2026-08-12: estas reglas YA alcanzan al panel del operador — el archivo dejó
   de ser exclusivo del cliente. Las clases de abajo (.pin-btn, .save-btn, .data-btn,
   .msg.user, .crm-*) son de pantallas de cliente, así que en la práctica el panel
   solo recibe lo genérico: los inputs de vidrio y la @media de teléfono. Al agregar
   una regla nueva aquí, pensar en las DOS superficies.
   ════════════════════════════════════════════════════════════════════════════ */

/* 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);
}

/* ────────────────────────────────────────────────────────────────────────────
   Un solo material de botón (Diego 2026-07-20): "los botones verdes deben ser
   como el resto".

   admin.css ya trae .btn/.btn-primary en vidrio, pero VARIAS pantallas del cliente
   traen su propio <style> con un botón de relleno verde sólido hecho a mano
   (.pin-btn, .save-btn, .data-btn…). Ese relleno contradice la regla del diseño
   aprobado: el verde es acento, NUNCA relleno de botón — su color se lo da el
   fondo. Aquí se re-materializan todos con el mismo vidrio del chat.

   Hace falta !important: esos <style> viven en el <body>, o sea DESPUÉS de este
   archivo, así que sin él ganarían por orden.
   ──────────────────────────────────────────────────────────────────────────── */
.pin-btn,
.save-btn,
.docs-add .save-btn,
.data-btn {
  background: var(--bubble-fill) !important;
  border: 1.5px solid var(--bubble-ring) !important;
  box-shadow: var(--bubble-shadow-sm) !important;
  color: var(--ink) !important;
  text-shadow: var(--bubble-glow);
  border-radius: 999px !important;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .15s, transform .08s;
}
.pin-btn:hover, .save-btn:hover, .data-btn:hover {
  background: var(--bubble-fill-hover) !important;
}
.pin-btn:active, .save-btn:active, .data-btn:active { transform: translateY(1px); }
/* El ghost hermano tenía el verde como TEXTO para contrastar con el sólido; ya no
   hay sólido del cual distinguirse, así que se alinea con la tinta del resto. */
.data-btn-ghost { color: var(--ink-muted) !important; }

/* Burbuja del dueño en el hilo de una automatización = la del chat principal,
   textual. Era verde sólida con texto blanco: la misma conversación se veía de dos
   maneras según por dónde entraras. */
.msg.user {
  background: linear-gradient(165deg, rgba(255,255,255,0.90), rgba(255,255,255,0.55)) !important;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--bubble-ring);
  color: var(--ink) !important;
  box-shadow: 0 4px 16px rgba(31,60,45,0.14), inset 0 1px 0 rgba(255,255,255,0.90);
}

/* ════════════════════════════════════════════════════════════════════════════
   Teléfono (Diego 2026-07-20): "Almago se debe de poder adaptar a las pantallas,
   para que sirva en un telefono y en una computadora".

   El chat ya tenía su propia @media; estas diez pantallas heredaban la estructura
   del PANEL DEL OPERADOR, que se diseñó para monitor. En 390px la barra de
   herramientas del CRM se salía de la pantalla (el botón "+ Nuevo contacto" quedaba
   cortado, sin forma de llegar a él) y el encabezado se despedazaba en columnitas.

   ⚠️ 2026-08-12: al cargarse este archivo también en `base.html`, esta @media ahora
   SÍ alcanza al panel del operador. Es efecto secundario deseable —el panel se vuelve
   usable en teléfono, que es justo desde donde Diego lo abre— pero no fue diseñado
   para él: si una pantalla de operador se ve rara en móvil, el culpable está aquí.
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  /* El .main del operador asume márgenes de monitor. */
  .main { padding: 16px 14px 32px !important; }

  /* La fila de encabezado deja de ser una sola línea: título arriba, acciones
     abajo. Antes era flex sin wrap → lo que no cabía se salía de la pantalla. */
  .page-header-row {
    flex-wrap: wrap; align-items: flex-start !important; gap: 12px;
  }
  .page-header-row > * { min-width: 0; }
  .page-header h2 { font-size: 19px; }

  /* Los formularios de la barra (buscar + botón) se estiran al ancho disponible
     en vez de quedarse en su ancho fijo de escritorio. El input de búsqueda trae
     width:180px INLINE, por eso hace falta !important. */
  .page-header-row form { flex: 1 1 100%; display: flex; gap: 6px; }
  .page-header-row form input { flex: 1 1 auto; width: auto !important; min-width: 0; }
  .page-header-row > div:last-child { flex: 1 1 100%; flex-wrap: wrap; }

  /* Botones cómodos para el dedo (Apple recomienda 44px de alto de área táctil). */
  .btn, .btn-sm, .pin-btn, .save-btn, .data-btn { min-height: 40px; }

  /* Las tablas anchas (CRM) se deslizan DENTRO de su caja, nunca empujan la página
     — si la página entera se desliza en horizontal, se siente rota. */
  .crm-table-wrap, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .crm-table { min-width: 520px; }

  /* Nada puede desbordar la pantalla en horizontal. Es la red de seguridad para
     lo que no previmos: una nota larga, un correo sin espacios, un nombre eterno. */
  body { overflow-x: hidden; }
  .card { padding: 16px !important; }
}

/* Sin azul decorativo: avatares y chips a vidrio neutro, como el avatar del chat. */
.crm-avatar, .crm-avatar-lg {
  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;
}