/* ============================================================
   Empathy Connect — Sistema de diseño de mockups
   Base visual: Krayin (Webkul) + componentes propios.
   Se usa junto con Tailwind CDN. Aquí van los componentes
   reutilizables y las variables de marca.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;600;700;800;900&display=swap');

:root{
  --brand:#156C4F;          /* Waló verde — primario */
  --brand-600:#003926;      /* verde oscuro (hover / header) */
  --brand-50:#e6f2ec;       /* verde muy claro (focus ring / fondos) */
  --connect:#0d5a41;        /* acento secundario verde */
  --wa:#25D366;             /* WhatsApp */
  --ink:#0A0A0A;            /* ink */
  --muted:#6b7280;
  --line:#e5e7eb;
  --bg:#f6f6f7;
  --ok:#16a34a; --warn:#d97706; --err:#dc2626; --info:#156C4F;
  --serif:'Inter',system-ui,sans-serif;   /* títulos: Inter (antes Merriweather) */
}

*{ font-family:'Manrope',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
body{ color:var(--ink); background:var(--bg); }
::selection{ background:var(--brand); color:#fff; }

/* Títulos (Inter) */
.ec-pagehead h1, .ec-modal-head h3, .ec-sidebar .brand .name{ font-family:var(--serif); }

/* ---- Scrollbars finos ---- */
.scrollbar-thin::-webkit-scrollbar{ width:6px; height:6px; }
.scrollbar-thin::-webkit-scrollbar-track{ background:transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb{ background:#d1d5db; border-radius:6px; }
.scrollbar-thin::-webkit-scrollbar-thumb:hover{ background:#9ca3af; }

/* ============================================================
   SHELL KRAYIN (sidebar + topbar)  — usado en super-admin y admin tenant
   ============================================================ */
.ec-shell{ display:flex; height:100vh; overflow:hidden; }
.ec-sidebar{ width:240px; flex-shrink:0; background:#fff; color:#4b5563; display:flex; flex-direction:column; border-right:1px solid var(--line); }
.ec-sidebar .brand{ display:flex; align-items:center; gap:.6rem; padding:1rem 1.1rem; border-bottom:1px solid var(--line); }
.ec-sidebar .brand .logo{ width:30px;height:30px;display:flex;align-items:center;justify-content:center; }
.ec-sidebar .brand .logo img{ width:100%;height:100%;object-fit:contain; }
.ec-sidebar .brand .name{ font-weight:800;color:var(--ink);font-size:15px;line-height:1; }
.ec-nav{ padding:.6rem .5rem; overflow-y:auto; flex:1; }
.ec-nav .group{ font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:#9ca3af; padding:.9rem .8rem .35rem; }
.ec-nav a{ display:flex; align-items:center; gap:.7rem; padding:.55rem .8rem; border-radius:9px; color:#4b5563; font-size:13.5px; font-weight:500; transition:.15s; }
.ec-nav a:hover{ background:#f6f6f7; color:var(--ink); }
.ec-nav a.active{ background:var(--brand); color:#fff; font-weight:600; box-shadow:0 4px 12px -2px rgba(255,0,131,.45); }
.ec-nav a .ico{ width:20px; font-size:17px; text-align:center; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.ec-main{ flex:1; display:flex; flex-direction:column; overflow:hidden; }
.ec-topbar{ height:56px; flex-shrink:0; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 1.2rem; }
.ec-content{ flex:1; overflow-y:auto; padding:1.4rem; }

/* tag de origen de pantalla */
.ec-origin{ font-size:10px; font-weight:700; padding:.12rem .5rem; border-radius:999px; }
.ec-origin.krayin{ background:#dbeafe; color:#1d4ed8; }
.ec-origin.propio{ background:#ede9fe; color:#6d28d9; }

/* ============================================================
   TÍTULOS DE PÁGINA / BREADCRUMB
   ============================================================ */
.ec-pagehead{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.1rem; }
.ec-pagehead h1{ font-size:20px; font-weight:700; }
.ec-breadcrumb{ font-size:12px; color:var(--muted); margin-bottom:.2rem; }

/* ============================================================
   CARDS / KPI
   ============================================================ */
.ec-card{ background:#fff; border:1px solid var(--line); border-radius:12px; }
.ec-card-p{ padding:1.1rem; }
.ec-kpi{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:1rem 1.1rem; }
.ec-kpi .label{ font-size:12px; color:var(--muted); font-weight:500; }
.ec-kpi .value{ font-size:26px; font-weight:800; margin-top:.2rem; }
.ec-kpi .delta{ font-size:11px; font-weight:600; }

/* ============================================================
   BOTONES
   ============================================================ */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.45rem; font-size:13.5px; font-weight:600; padding:.5rem .9rem; border-radius:9px; transition:.15s; cursor:pointer; border:1px solid transparent; }
.btn-primary{ background:var(--brand); color:#fff; }
.btn-primary:hover{ background:var(--brand-600); }
.btn-connect{ background:var(--connect); color:#fff; }
.btn-ghost{ background:#fff; border-color:var(--line); color:#374151; }
.btn-ghost:hover{ background:#f9fafb; }
.btn-danger{ background:var(--err); color:#fff; }
.btn-success{ background:var(--ok); color:#fff; }
.btn-sm{ padding:.35rem .6rem; font-size:12px; border-radius:7px; }
.btn-wa{ background:var(--wa); color:#fff; }

/* ============================================================
   BADGES / PILLS / ESTADOS
   ============================================================ */
.badge{ display:inline-flex; align-items:center; gap:.3rem; font-size:11px; font-weight:600; padding:.18rem .55rem; border-radius:999px; }
.badge-green{ background:#dcfce7; color:#16a34a; }
.badge-amber{ background:#fef3c7; color:#b45309; }
.badge-red{ background:#fee2e2; color:#dc2626; }
.badge-blue{ background:#dbeafe; color:#1d4ed8; }
.badge-gray{ background:#f3f4f6; color:#4b5563; }
.badge-purple{ background:#ede9fe; color:#6d28d9; }
.dot{ width:7px;height:7px;border-radius:999px;display:inline-block; }
.pulse{ animation:pulse 1.4s infinite; }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }

/* tags 6 colores (Krayin) */
.tag{ display:inline-flex; align-items:center; gap:.25rem; font-size:11px; font-weight:600; padding:.12rem .5rem; border-radius:6px; }
.tag-red{background:#fee2e2;color:#dc2626;} .tag-orange{background:#ffedd5;color:#ea580c;}
.tag-amber{background:#fef3c7;color:#d97706;} .tag-yellow{background:#fef9c3;color:#ca8a04;}
.tag-lime{background:#ecfccb;color:#65a30d;} .tag-green{background:#dcfce7;color:#16a34a;}
.tag-blue{background:#dbeafe;color:#2563eb;} .tag-purple{background:#ede9fe;color:#7c3aed;}

/* ============================================================
   DATAGRID (tabla Krayin)
   ============================================================ */
.ec-grid{ width:100%; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.ec-grid-toolbar{ display:flex; align-items:center; justify-content:space-between; padding:.7rem .9rem; border-bottom:1px solid var(--line); gap:.6rem; }
table.ec-table{ width:100%; border-collapse:collapse; font-size:13px; }
table.ec-table th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:600; padding:.7rem .9rem; border-bottom:1px solid var(--line); background:#fafafa; }
table.ec-table td{ padding:.7rem .9rem; border-bottom:1px solid #f1f3f5; }
table.ec-table tr:hover td{ background:#fafbfc; }

/* ============================================================
   FORM CONTROLS (Krayin)
   ============================================================ */
.ec-label{ font-size:12.5px; font-weight:600; color:#374151; margin-bottom:.3rem; display:block; }
.ec-input,.ec-select,.ec-textarea{ width:100%; font-size:13.5px; padding:.55rem .7rem; border:1px solid #d1d5db; border-radius:9px; background:#fff; transition:.15s; }
.ec-input:focus,.ec-select:focus,.ec-textarea:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-50); }
.ec-help{ font-size:11.5px; color:var(--muted); margin-top:.25rem; }
.ec-switch{ width:40px;height:22px;border-radius:999px;background:#d1d5db;position:relative;cursor:pointer;transition:.2s; }
.ec-switch.on{ background:var(--brand); }
.ec-switch::after{ content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:999px;background:#fff;transition:.2s; }
.ec-switch.on::after{ left:20px; }

/* ============================================================
   MODALES / OVERLAY
   ============================================================ */
.ec-overlay{ position:fixed; inset:0; background:rgba(15,23,42,.45); display:flex; align-items:center; justify-content:center; z-index:80; padding:1rem; }
.ec-modal{ background:#fff; border-radius:14px; width:100%; max-width:520px; box-shadow:0 20px 60px rgba(0,0,0,.25); animation:pop .18s ease-out; }
.ec-modal.lg{ max-width:760px; }
.ec-modal.xl{ max-width:980px; }
.ec-modal-head{ display:flex; align-items:center; justify-content:space-between; padding:1rem 1.2rem; border-bottom:1px solid var(--line); }
.ec-modal-head h3{ font-weight:700; font-size:16px; }
.ec-modal-body{ padding:1.2rem; max-height:70vh; overflow-y:auto; }
.ec-modal-foot{ display:flex; justify-content:flex-end; gap:.6rem; padding:1rem 1.2rem; border-top:1px solid var(--line); }
@keyframes pop{ from{opacity:0; transform:translateY(8px) scale(.98);} to{opacity:1; transform:none;} }

/* ============================================================
   TOASTS / FLASH (Krayin) — abajo a la izquierda
   ============================================================ */
.ec-toasts{ position:fixed; left:1rem; bottom:1rem; z-index:100; display:flex; flex-direction:column; gap:.5rem; }
.ec-toast{ display:flex; gap:.6rem; align-items:flex-start; background:#fff; border-left:6px solid var(--info); border-radius:10px; padding:.7rem .9rem; box-shadow:0 8px 24px rgba(0,0,0,.12); min-width:280px; animation:slidein .25s; }
.ec-toast.ok{ border-color:var(--ok);} .ec-toast.warn{ border-color:var(--warn);} .ec-toast.err{ border-color:var(--err);} .ec-toast.info{ border-color:var(--info);}
.ec-toast .t{ font-weight:700; font-size:13px; }
.ec-toast .m{ font-size:12.5px; color:var(--muted); }
@keyframes slidein{ from{opacity:0; transform:translateX(-12px);} to{opacity:1; transform:none;} }

/* ============================================================
   CHAT (propio) — burbujas, composer
   ============================================================ */
.bubble-in{ border-radius:4px 16px 16px 16px; background:#fff; border:1px solid #eef0f2; }
.bubble-out{ border-radius:16px 4px 16px 16px; background:#dcf8c6; }
.bubble-ai{ border-radius:16px 4px 16px 16px; background:#ede9fe; }
.tab-active{ border-bottom:2px solid var(--brand); color:var(--brand); font-weight:600; }
.fade-in{ animation:fadeIn .2s ease-out; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }
.composer-btn{ transition:.15s; padding:.4rem; border-radius:8px; color:#6b7280; }
.composer-btn:hover{ background:#f3f4f6; color:#374151; }

/* shimmer */
.shimmer{ background:linear-gradient(90deg,#f3f4f6 25%,#e9ebee 37%,#f3f4f6 63%); background-size:400% 100%; animation:sh 1.4s infinite; border-radius:8px; }
@keyframes sh{ 0%{background-position:100% 0;} 100%{background-position:-100% 0;} }

/* util */
.hide{ display:none !important; }
.divider{ height:1px; background:var(--line); margin:1rem 0; }
.kbd{ font-size:11px; background:#f3f4f6; border:1px solid #e5e7eb; border-bottom-width:2px; border-radius:5px; padding:.05rem .35rem; color:#4b5563; }

/* ============================================================
   ÍCONOS icomoon (reutilizados de Krayin) — clases .icon-*
   ============================================================ */
@font-face{ font-family:'icomoon'; src:url('/assets/fonts/icomoon.woff') format('woff'); font-weight:normal; font-style:normal; font-display:block; }
[class^="icon-"],[class*=" icon-"]{ font-family:'icomoon'!important; speak:never; font-style:normal; font-weight:normal; font-variant:normal; text-transform:none; line-height:1; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.icon-image:before{content:"\e956"}
.icon-bookmark:before{content:"\e92c"}
.icon-bookmark-active:before{content:"\e92d"}
.icon-stats-down:before{content:"\e94d"}
.icon-error:before{content:"\e951"}
.icon-info:before{content:"\e952"}
.icon-success:before{content:"\e953"}
.icon-warning:before{content:"\e954"}
.icon-stats-down:before{content:"\e94d"}
.icon-stats-up:before{content:"\e94f"}
.icon-attribute:before{content:"\e947"}
.icon-download:before{content:"\e948"}
.icon-settings-warehouse:before{content:"\e94e"}
.icon-move:before{content:"\e949"}
.icon-organization:before{content:"\e94a"}
.icon-role:before{content:"\e94b"}
.icon-user:before{content:"\e94c"}
.icon-system-generate:before{content:"\e950"}
.icon-settings-attributes:before{content:"\e93b"}
.icon-settings-flow:before{content:"\e93c"}
.icon-settings-group:before{content:"\e93d"}
.icon-settings-mail:before{content:"\e93e"}
.icon-settings-pipeline:before{content:"\e93f"}
.icon-settings-roles:before{content:"\e940"}
.icon-settings-sources:before{content:"\e941"}
.icon-settings-tag:before{content:"\e942"}
.icon-settings-type:before{content:"\e943"}
.icon-settings-user:before{content:"\e944"}
.icon-settings-webforms:before{content:"\e945"}
.icon-settings-webhooks:before{content:"\e946"}
.icon-attached-file:before{content:"\e932"}
.icon-forward:before{content:"\e933"}
.icon-location:before{content:"\e934"}
.icon-pin:before{content:"\e935"}
.icon-print:before{content:"\e936"}
.icon-reply-all:before{content:"\e937"}
.icon-reply:before{content:"\e938"}
.icon-rotten:before{content:"\e939"}
.icon-tag:before{content:"\e93a"}
.icon-list:before{content:"\e92e"}
.icon-enter:before{content:"\e92f"}
.icon-kanban:before{content:"\e930"}
.icon-tick:before{content:"\e931"}
.icon-eye-hide:before{content:"\e929"}
.icon-percentage:before{content:"\e92a"}
.icon-dollar:before{content:"\e92b"}
.icon-radio-selected:before{content:"\e924"}
.icon-radio-normal:before{content:"\e925"}
.icon-folder:before{content:"\e926"}
.icon-file:before{content:"\e927"}
.icon-eye:before{content:"\e928"}
.icon-notification:before{content:"\e900"}
.icon-configuration:before{content:"\e901"}
.icon-note:before{content:"\e902"}
.icon-edit:before{content:"\e903"}
.icon-menu:before{content:"\e955"}
.icon-calendar:before{content:"\e904"}
.icon-delete:before{content:"\e905"}
.icon-more:before{content:"\e906"}
.icon-checkbox-multiple:before{content:"\e907"}
.icon-checkbox-select:before{content:"\e908"}
.icon-checkbox-outline:before{content:"\e909"}
.icon-message:before{content:"\e90a"}
.icon-video:before{content:"\e90b"}
.icon-attachment:before{content:"\e90c"}
.icon-sent:before{content:"\e90d"}
.icon-call:before{content:"\e90e"}
.icon-meeting:before{content:"\e90f"}
.icon-light:before{content:"\e910"}
.icon-dark:before{content:"\e911"}
.icon-mail:before{content:"\e912"}
.icon-leads:before{content:"\e913"}
.icon-filter:before{content:"\e914"}
.icon-setting:before{content:"\e915"}
.icon-product:before{content:"\e916"}
.icon-contact:before{content:"\e917"}
.icon-activity:before{content:"\e918"}
.icon-perosnal:before{content:"\e919"}
.icon-quote:before{content:"\e91a"}
.icon-dashboard:before{content:"\e91b"}
.icon-cross-large:before{content:"\e91c"}
.icon-left-arrow:before{content:"\e91d"}
.icon-right-arrow:before{content:"\e91e"}
.icon-up-arrow:before{content:"\e91f"}
.icon-down-arrow:before{content:"\e920"}
.icon-search:before{content:"\e921"}
.icon-add:before{content:"\e922"}
.icon-add-2:before{content:"\e923"}