:root {
    --ink: #10231d;
    --muted: #64746e;
    --line: #dfe8e4;
    --surface: #ffffff;
    --canvas: #f3f7f5;
    --brand: #087a5b;
    --brand-dark: #045a43;
    --brand-soft: #dff4ec;
    --brand-border: #8fc9b7;
    --accent: #f5b942;
    --shadow: 0 18px 50px color-mix(in srgb,var(--brand) 12%,transparent);
    --font: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Todos los selectores muestran sus opciones en mayúsculas sin alterar el valor persistido. */
.z-combobox-input,
.z-combobox-popup .z-comboitem,
.z-combobox-popup .z-comboitem-content,
.z-combobox-popup .z-comboitem-text,
.z-comboitem,
.z-comboitem-content,
.z-comboitem-text,
.z-comboitem .z-label {
    text-transform: uppercase !important;
}

/* Pedidos MVP */
.orders-page { padding:28px; }
.page-head { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:22px; }
.cart-launch,.promotion-launch,.order-page-actions { display:flex; align-items:center; gap:7px; }
.order-page-actions { gap:14px; }
.cart-overview { display:flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid var(--brand-border); border-radius:11px; background:#fff; color:var(--brand-dark); font-size:11px; font-weight:800; white-space:nowrap; }
.cart-overview > span { display:flex; gap:3px; }
.cart-overview-total { padding-left:8px; border-left:1px solid var(--line); font-size:13px; }
.promotions-button { height:42px; padding:0 17px; }
.section-title,.section-copy { display:block; }
.section-title { font-size:26px; font-weight:850; letter-spacing:-.5px; }
.section-copy { margin-top:5px; color:var(--muted); }
.pill,.status-chip { display:inline-block; padding:6px 11px; border-radius:999px; background:var(--brand-soft); color:var(--brand-dark); font-size:12px; font-weight:800; }
.company-required { display:flex; align-items:center; gap:12px; margin-bottom:18px; padding:14px 16px; color:var(--brand-dark); background:var(--brand-soft); border:1px solid var(--brand-border); border-radius:13px; }
.company-required > .z-icon-building { font-size:22px; }
.company-required .z-label { display:block; }
.company-required .z-label:first-child { font-weight:800; }
.order-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,360px); gap:22px; align-items:start; }
.catalog-layout { display:block; }
.catalog-layout .product-grid { grid-template-columns:repeat(auto-fit,minmax(285px,1fr)); gap:11px; }
.catalog-filters { display:flex; gap:20px; margin:-5px 0 16px; padding:10px 14px; background:#fff; border:1px solid var(--line); border-radius:11px; }
.catalog-filters .z-checkbox-content { font-weight:750; }
.product-badges { display:flex; gap:5px; min-height:20px; }
.product-flags { display:flex; flex-wrap:wrap; gap:12px 24px; margin-top:15px; padding:14px; background:var(--brand-soft); border:1px solid var(--brand-border); border-radius:12px; }
.product-flags .z-checkbox-content { font-weight:800; }
.offer-chip,.featured-chip { padding:3px 7px; border-radius:999px; font-size:10px; font-weight:850; }
.offer-chip { color:#a34600; background:#fff1d6; }
.featured-chip { color:var(--brand-dark); background:var(--brand-soft); }
.search-box { display:flex; gap:9px; margin-bottom:18px; }
.search-box .z-textbox { flex:1; height:44px; border:1px solid var(--line); border-radius:11px; padding:0 14px; }
.secondary-button,.primary-small { border:0; border-radius:10px; font-weight:750; }
.secondary-button { color:var(--brand); background:var(--brand-soft); }
.primary-small { color:white; background:var(--brand); padding:8px 12px; }
.product-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.product-card { display:flex; gap:10px; align-items:flex-start; min-height:138px; padding:12px; box-sizing:border-box; background:white; border:1px solid var(--line); border-radius:13px; box-shadow:0 5px 16px rgba(20,55,44,.04); }
.product-icon { flex:0 0 40px; width:40px; height:40px; display:grid; place-items:center; border-radius:11px; color:var(--brand); background:var(--brand-soft); font-size:18px; }
.product-copy { min-width:0; flex:1; }
.product-name,.product-code,.product-description,.product-price { display:block; }
.product-name { overflow:hidden; font-size:13px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.product-code,.product-description { color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.product-price { margin-top:5px; color:var(--brand-dark); font-weight:850; }
.product-footer,.cart-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.product-footer { margin-top:8px; }
.product-card-actions { display:flex; align-items:center; gap:6px; }
.catalog-quantity { display:flex; align-items:center; gap:3px; }
.catalog-quantity .z-button { width:26px; height:28px; min-height:28px; padding:0; color:var(--brand); background:var(--brand-soft); border:0; border-radius:7px; }
.catalog-quantity .z-decimalbox { width:42px; height:28px; padding:0 3px; box-sizing:border-box; text-align:center; border:1px solid var(--line); border-radius:7px; }
.product-card-actions .primary-small { padding:7px 9px; }
.availability-chip { display:block; width:max-content; margin-top:5px; padding:3px 8px; border-radius:999px; color:var(--brand-dark); background:var(--brand-soft); font-size:11px; font-weight:750; }
.catalog-empty,.cart-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:180px; padding:22px; box-sizing:border-box; color:var(--muted); text-align:center; background:white; border:1px dashed var(--brand-border); border-radius:15px; }
.catalog-empty > .z-icon-search,.cart-empty > .z-icon-shopping-basket { margin-bottom:5px; color:var(--brand); font-size:28px; }
.cart-panel,.balance-card { background:white; border:1px solid var(--line); border-radius:18px; box-shadow:0 10px 30px rgba(20,55,44,.07); }
.cart-panel { position:sticky; top:18px; padding:18px; }
.cart-modal .cart-panel { position:static; padding:0; border:0; box-shadow:none; }
.cart-modal .cart-lines { max-height:44vh; }
.cart-count { color:var(--muted); font-size:12px; font-weight:750; }
.cart-empty { min-height:145px; margin:14px 0; background:var(--canvas); }
.cart-lines { margin:14px 0; max-height:42vh; overflow:auto; }
.cart-line { display:grid; grid-template-columns:minmax(0,1fr) auto 34px; gap:9px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); }
.cart-product { min-width:0; }
.cart-name,.cart-meta { display:block; }
.cart-name { font-weight:750; }
.cart-meta { color:var(--muted); font-size:12px; }
.cart-amount { font-weight:800; }
.quantity-control { display:flex; align-items:center; gap:5px; margin-top:8px; }
.quantity-control .z-button { width:28px; height:28px; min-height:28px; padding:0; color:var(--brand); background:var(--brand-soft); border:0; border-radius:8px; }
.quantity-control .z-decimalbox { width:68px; height:28px; padding:0 5px; box-sizing:border-box; text-align:center; border:1px solid var(--line); border-radius:7px; }
.cart-panel > .z-textbox { width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:10px; padding:10px; }
.field-label { display:block; margin:13px 0 7px; font-size:12px; font-weight:800; }
.cart-total { display:flex; justify-content:space-between; padding:16px 0; font-size:18px; font-weight:850; }
.cart-note { display:block; margin:-5px 0 14px; color:var(--muted); font-size:11px; line-height:1.4; }
.order-totals { margin-top:12px; border-top:1px solid var(--line); }
.order-totals > div,.confirm-summary > div { display:flex; justify-content:space-between; gap:15px; padding:7px 0; }
.order-totals .cart-total { padding:13px 0; border-top:1px solid var(--line); }
.confirm-intro { display:flex; align-items:center; gap:13px; margin-bottom:18px; padding:14px; background:var(--brand-soft); border-radius:12px; }
.confirm-intro > span { color:var(--brand); font-size:24px; }
.order-confirm-modal .z-combobox { width:100%; }
.address-selector { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px; align-items:end; }
.address-selector .secondary-button { height:42px; margin-bottom:12px; }
.address-form { margin-top:5px; }
.address-form .z-textbox { width:100%; box-sizing:border-box; }
.confirm-summary { margin-top:18px; padding:12px 16px; background:var(--canvas); border-radius:12px; }
.confirm-summary .confirm-total { margin-top:5px; padding-top:12px; border-top:1px solid var(--line); font-size:18px; font-weight:850; }
.cart-panel .primary-button { width:100%; }
.balance-card { min-width:150px; padding:12px 18px; }
.balance-card .z-label { display:block; }
.balance-card .z-label:first-child { color:var(--muted); font-size:12px; }
.balance-card .z-label:last-child { color:var(--brand-dark); font-size:23px; font-weight:850; }
.responsive-list { width:100%; border:1px solid var(--line); border-radius:15px; overflow:hidden; background:white; }
.admin-form-card { padding:22px; margin-bottom:18px; background:#fff; border:1px solid var(--line); border-radius:16px; }
.admin-form-card > .panel-title { margin-bottom:18px; }
.admin-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.admin-span { grid-column:1/-1; }
.admin-check-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:8px; }
.admin-actions { display:flex; justify-content:flex-end; gap:10px; padding-top:18px; }
.admin-modal { padding:18px; border:1px solid var(--brand-border) !important; border-radius:16px; box-shadow:0 18px 48px color-mix(in srgb,var(--brand) 18%,transparent) !important; overflow:hidden; }
.admin-modal .z-window-header { margin:-18px -18px 18px; padding:14px 18px; color:white; background:var(--brand); border-bottom:1px solid var(--brand-dark); font-weight:800; }
.admin-modal .z-window-content { border:0; }
.admin-modal .z-decimalbox,.admin-modal .z-combobox { width:100%; height:42px; box-sizing:border-box; }
.color-field .z-colorbox { width:100%; }
.color-field .z-colorbox-input { width:calc(100% - 42px); height:48px; padding:0 15px; box-sizing:border-box; border:1px solid #cedbd6; border-radius:12px 0 0 12px; background:#f9fbfa; }
.color-field .z-colorbox-button { width:42px; height:48px; border:1px solid #cedbd6; border-left:0; border-radius:0 12px 12px 0; }
.app-shell .z-listheader { color:white; background:var(--brand); border-color:var(--brand-dark); }
.app-shell .z-listheader-content { color:white; font-weight:800; }
.app-shell .z-listitem:hover > .z-listcell { background:var(--brand-soft); }
.app-shell .z-listitem-selected > .z-listcell { background:color-mix(in srgb,var(--brand) 18%,white); }
.app-shell .z-listitem-selected .z-listcell-content { color:var(--ink); }
.app-shell .z-listbox { border-color:var(--brand-border); }
.app-shell .z-window-modal { border:1px solid var(--brand-border); }
.order-summary { display:flex; flex-direction:column; gap:5px; padding:13px; margin-bottom:16px; background:var(--brand-soft); border-radius:12px; }
.company-logo { width:42px; height:42px; object-fit:contain; border-radius:9px; }
.sidebar-footer .z-label { display:block; margin-top:3px; overflow:hidden; text-overflow:ellipsis; }
.user-customer { display:block; max-width:230px; overflow:hidden; color:var(--brand-dark); font-size:12px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.form-card,.register-card { max-width:620px; padding:24px; background:white; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); }
.register-page { min-height:100vh; display:grid; place-items:center; padding:22px; box-sizing:border-box; background:var(--canvas); }
.register-card { width:100%; box-sizing:border-box; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.form-grid .full { grid-column:1 / -1; }
.login-link { display:block; margin-top:18px; color:var(--brand); text-align:center; font-weight:750; }

@media (max-width: 950px) {
  .order-layout { grid-template-columns:1fr; }
  .cart-panel { position:static; }
  .catalog-layout .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 650px) {
  .orders-page { padding:16px 11px; }
  .page-head { align-items:flex-start; flex-direction:column; }
  .product-grid { grid-template-columns:1fr; }
  .catalog-layout .product-grid { grid-template-columns:1fr; }
  .product-card { align-items:flex-start; }
  .search-box { flex-direction:column; }
  .form-grid { grid-template-columns:1fr; }
  .form-grid .full { grid-column:auto; }
  .search-box .z-button { width:100%; height:42px; }
  .responsive-list .z-listhead { display:none; }
  .responsive-list .z-listitem { display:block; padding:10px; border-bottom:1px solid var(--line); }
  .responsive-list .z-listcell { display:block; border:0; padding:3px 5px; }
  .admin-form-grid,.admin-check-grid { grid-template-columns:1fr; }
  .admin-span { grid-column:auto; }
}

/* Chatbots */
.automation-page { padding:28px; }
.chatbot-tabs { border-bottom:1px solid var(--line); margin-bottom:18px; }
.chatbot-tab { display:inline-block; padding:10px 4px 12px; color:var(--brand); font-weight:800; border-bottom:3px solid var(--brand); }
.chatbot-selector { background:#fff; border:1px solid var(--line); border-radius:18px; padding:16px; margin-bottom:18px; box-shadow:0 7px 22px rgba(20,55,44,.05); }
.chatbot-selector-title, .panel-heading, .node-editor-heading, .options-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.chatbot-selector-title { font-weight:800; margin-bottom:12px; }
.count-badge { min-width:24px; padding:3px 8px; border-radius:20px; text-align:center; background:#e7f6f0; color:var(--brand); font-size:12px; }
.chatbot-card-list { display:flex; gap:12px; overflow-x:auto; padding-bottom:2px; }
.chatbot-card { min-width:210px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:13px 15px; border:1px solid var(--line); border-radius:13px; cursor:pointer; background:#fbfdfc; }
.chatbot-card:hover { border-color:#8fd2ba; background:#f4fbf8; }
.chatbot-card-name, .chatbot-card-copy { display:block; }
.chatbot-card-name { font-weight:750; margin-bottom:4px; }
.chatbot-card-copy, .chatbot-empty { color:var(--muted); font-size:12px; }
.chatbot-workspace { display:grid; grid-template-columns:minmax(210px, .72fr) minmax(470px, 1.55fr) minmax(280px, .9fr); gap:16px; align-items:start; }
.chatbot-tree-panel, .chatbot-editor-panel, .chatbot-preview-panel { background:#fff; border:1px solid var(--line); border-radius:18px; padding:17px; box-shadow:0 8px 26px rgba(20,55,44,.05); }
.panel-heading { padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--line); }
.panel-title, .panel-subtitle { display:block; }
.panel-title { font-weight:800; font-size:16px; }
.panel-subtitle { color:var(--muted); font-size:12px; margin-top:3px; }
.flow-root, .flow-node { display:flex; align-items:center; gap:10px; border-radius:11px; padding:10px; }
.flow-root { color:var(--brand); font-weight:800; background:#eaf7f2; margin-bottom:9px; }
.flow-node { position:relative; margin:0 0 7px 17px; border:1px solid var(--line); cursor:pointer; }
.flow-node:hover { border-color:#8fd2ba; background:#f7fcfa; }
.flow-connector { position:absolute; left:-18px; top:-9px; width:17px; height:30px; border-left:1px solid #aac9bd; border-bottom:1px solid #aac9bd; border-radius:0 0 0 7px; }
.flow-node-name, .flow-node-type { display:block; }
.flow-node-name { font-weight:700; }
.flow-node-type { color:var(--muted); font-size:11px; margin-top:2px; }
.editor-separator { border-top:1px solid var(--line); margin:21px 0; }
.node-editor-heading { margin-bottom:14px; }
.options-editor { margin-top:16px; }
.options-heading { font-weight:750; margin-bottom:9px; }
.link-button { color:var(--brand); border:0; background:transparent; box-shadow:none; font-weight:700; }
.option-row { display:grid; grid-template-columns:58px minmax(120px,1fr) minmax(145px,1fr) 34px; gap:7px; align-items:center; margin-bottom:8px; }
.option-row .z-textbox, .option-row .z-combobox { width:100%; }
.chatbot-actions { display:flex; align-items:center; justify-content:flex-end; gap:9px; margin-top:22px; padding-top:17px; border-top:1px solid var(--line); }
.preview-channel-icon { font-size:22px; color:#25d366; }
.phone-preview { overflow:hidden; border:7px solid #19352d; border-radius:24px; background:#efeae2; min-height:500px; }
.phone-header { display:flex; gap:10px; align-items:center; background:#075e54; color:#fff; padding:12px; }
.phone-header > span { font-size:29px; }
.phone-header .z-label { display:block; font-weight:700; }
.phone-header div .z-label:last-child { font-size:10px; font-weight:400; opacity:.8; }
.phone-chat { min-height:390px; padding:14px 10px; background-color:#efeae2; background-image:radial-gradient(rgba(7,94,84,.055) 1px,transparent 1px); background-size:14px 14px; }
.wa-bubble { width:82%; padding:9px 10px; margin-bottom:9px; border-radius:3px 11px 11px 11px; background:#fff; box-shadow:0 1px 1px rgba(0,0,0,.12); font-size:12px; line-height:1.45; }
.wa-bubble > .z-label { white-space:pre-wrap; }
.preview-option { color:#087a67; padding:7px 2px 2px; margin-top:5px; border-top:1px solid #e3e7e5; text-align:center; font-weight:700; }
.phone-input { display:flex; justify-content:space-between; align-items:center; margin:8px; padding:9px 12px; border-radius:18px; background:#fff; color:#89938f; font-size:11px; }

@media (max-width: 1250px) {
    .chatbot-workspace { grid-template-columns:220px minmax(430px,1fr); }
    .chatbot-preview-panel { grid-column:1 / -1; }
    .phone-preview { max-width:360px; margin:auto; }
}

@media (max-width: 780px) {
    .automation-page { padding:18px 12px; }
    .chatbot-workspace { grid-template-columns:1fr; }
    .chatbot-preview-panel { grid-column:auto; }
    .option-row { grid-template-columns:52px 1fr 34px; }
    .option-row .z-combobox { grid-column:1 / 3; grid-row:2; }
    .chatbot-actions { align-items:stretch; flex-direction:column; }
    .chatbot-actions .z-button { width:100%; }
}

/* Tema dinámico por empresa: se mantiene al final para prevalecer sobre estilos de módulo. */
.app-shell .z-listheader,
.app-shell .users-list .z-listheader,
.app-shell .hours-list .z-listheader {
    color: white;
    background: var(--brand);
    border-color: var(--brand-dark);
}
.app-shell .z-listheader-content,
.app-shell .users-list .z-listheader-content,
.app-shell .hours-list .z-listheader-content { color:white; }
.app-shell .primary-button,
.app-shell .primary-small,
.app-shell .send-button,
.app-shell .note-save { background:var(--brand); color:white; }
.app-shell .primary-button:hover,
.app-shell .primary-small:hover,
.app-shell .send-button:hover,
.app-shell .note-save:hover { background:var(--brand-dark); }
.app-shell .z-textbox:focus,
.app-shell .z-decimalbox:focus,
.app-shell .z-combobox-input:focus,
.app-shell .z-colorbox-input:focus { border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent); }
.app-shell .z-window-modal,
.app-shell .admin-modal { border:1px solid var(--brand-border) !important; }

.field-help {
    display:block;
    margin-top:6px;
    color:#68736f;
    font-size:11px;
    line-height:1.45;
}
.advertising-preview {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:110px !important;
    min-height:110px;
    max-height:110px;
    padding:6px;
    overflow:hidden;
    box-sizing:border-box;
    background:#f6f8f7;
    border:1px dashed var(--brand-border);
    border-radius:12px;
}
.advertising-preview-image {
    display:block;
    width:auto !important;
    max-width:100% !important;
    height:100px !important;
    max-height:100px !important;
    object-fit:contain !important;
    border-radius:8px;
}
.advertising-preview .z-image {
    width:auto !important;
    max-width:100% !important;
    height:100px !important;
    max-height:100px !important;
    object-fit:contain !important;
}
.advertising-preview-video-wrap,
.advertising-preview-video-wrap video,
.advertising-preview-video {
    display:block;
    width:auto;
    max-width:100%;
    height:100px;
    max-height:100px;
}
.advertising-preview-empty {
    max-width:420px;
    color:#68736f;
    font-size:12px;
    line-height:1.5;
    text-align:center;
}

.promotions-viewer {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:auto;
    min-height:0;
    max-height:none;
    aspect-ratio:16 / 5;
    overflow:hidden;
    box-sizing:border-box;
    background:var(--canvas);
    border-radius:12px;
}
.promotions-media {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}
.promotions-video-wrap {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
}
.promotions-video-wrap video,
.promotions-video {
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}
.promotions-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding-top:16px;
}
.promotions-position { color:var(--muted); font-weight:800; }
.promotions-actions { display:flex; align-items:center; gap:10px; }
.promotions-modal .z-window-content { overflow:hidden; }
.promotions-modal .advertising-nav { background:rgba(255,255,255,.2); }
.promotions-modal .advertising-nav:hover { background:var(--brand); }
.advertising-nav {
    position:absolute;
    z-index:2;
    top:50%;
    width:38px;
    height:38px;
    padding:0;
    transform:translateY(-50%);
    color:white;
    background:rgba(0,0,0,.45);
    border:0;
    border-radius:50%;
}
.advertising-nav-previous { left:12px; }
.advertising-nav-next { right:12px; }

@media (max-width:650px) {
    .order-page-actions { width:100%; flex-wrap:wrap; justify-content:space-between; gap:8px; }
    .promotion-launch,.cart-launch { gap:4px; }
    .cart-launch { flex-wrap:wrap; justify-content:flex-end; }
    .cart-overview { padding:6px 8px; }
    .promotions-button,.cart-launch .primary-button { padding:0 10px; font-size:11px; }
    .promotions-viewer { width:100%; height:auto; min-height:0; aspect-ratio:16 / 5; }
    .promotions-footer { align-items:stretch; flex-direction:column; }
    .promotions-actions { flex-direction:column-reverse; }
    .promotions-actions .z-button { width:100%; }
}

.media-gallery-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
    gap:18px;
    margin:18px 0;
}
.media-gallery-card {
    overflow:hidden;
    border:1px solid var(--brand-border,#d9e4df);
    border-radius:14px;
    background:#fff;
    box-shadow:0 8px 24px rgba(16,35,29,.07);
}
.media-gallery-preview {
    display:flex;
    align-items:center;
    justify-content:center;
    height:170px;
    background:#eef3f1;
}
.media-gallery-preview .z-image,
.media-gallery-preview .z-video,
.media-gallery-video {
    width:100%;
    height:170px;
    object-fit:contain;
}
.media-gallery-placeholder { font-size:44px; color:#91a39c; }
.media-gallery-copy { display:grid; gap:12px; padding:14px; }
.media-gallery-copy .product-name {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.media-gallery-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; }

html, body, .z-page {
    margin: 0;
    min-height: 100%;
    background: var(--canvas);
}
body, .z-label, .z-button, .z-textbox {
    font-family: var(--font) !important;
    color: var(--ink);
}
.z-button {
    text-shadow: none;
}

.login-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: clamp(32px, 7vw, 110px);
    padding: clamp(28px, 6vw, 90px);
    box-sizing: border-box;
    background:
        radial-gradient(circle at 12% 12%, color-mix(in srgb,var(--brand) 14%,transparent), transparent 30%),
        linear-gradient(135deg, var(--brand-soft) 0%, #f8fbfa 56%, color-mix(in srgb,var(--brand) 9%,white) 100%);
}
.login-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.brand-mark {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    background: var(--brand);
    box-shadow: 0 14px 30px color-mix(in srgb,var(--brand) 28%,transparent);
}
.brand-mark .z-label {
    color: white;
    font-size: 38px;
    font-weight: 800;
}
.brand-name {
    margin-top: 22px;
    font-size: clamp(42px, 6vw, 74px);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -3px;
}
.brand-tagline {
    margin-top: 16px;
    max-width: 470px;
    color: var(--muted);
    font-size: clamp(18px, 2vw, 25px);
    line-height: 1.45;
}
.login-card {
    width: 100%;
    max-width: 450px;
    justify-self: center;
    padding: clamp(28px, 5vw, 48px);
    box-sizing: border-box;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 28px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(12px);
}
.login-title {
    display: block;
    font-size: 30px;
    font-weight: 800;
}
.login-copy {
    display: block;
    margin: 8px 0 28px;
    color: var(--muted);
    font-size: 15px;
}
.login-error {
    display: block;
    padding: 12px 14px;
    margin-bottom: 16px;
    color: #a92d2d;
    background: #fff0f0;
    border-radius: 10px;
}
.field {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-bottom: 18px;
}
.field > .z-label {
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 13px;
}
.field .z-textbox {
    width: 100% !important;
    height: 48px;
    padding: 0 15px;
    box-sizing: border-box;
    background: #f9fbfa;
    border: 1px solid #cedbd6;
    border-radius: 12px;
    font-size: 15px;
    transition: .2s;
}
.field .z-textbox:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px color-mix(in srgb,var(--brand) 14%,transparent);
}
.password-field .z-textbox {
    padding-right: 74px;
}
.password-toggle {
    position: absolute;
    right: 5px;
    bottom: 5px;
    height: 38px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: var(--brand);
    font-weight: 700;
}
.primary-button {
    height: 50px;
    margin-top: 4px;
    border: 0;
    border-radius: 13px;
    background: var(--brand);
    color: white;
    font-size: 15px;
    font-weight: 800;
    box-shadow: 0 10px 20px color-mix(in srgb,var(--brand) 22%,transparent);
}
.primary-button:hover {
    background: var(--brand);
}
.login-help {
    display: block;
    margin-top: 22px;
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}

.app-shell {
    height: 100vh;
    overflow: hidden;
    background: var(--canvas);
}
.app-topbar {
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    box-sizing: border-box;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    position: relative;
    z-index: 30;
}
.topbar-start, .topbar-tools, .user-area {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.topbar-tools {
    margin-left: auto;
    gap: 18px;
}
.brand-mark-small {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    box-shadow: none;
}
.brand-mark-small .z-label {
    font-size: 20px;
}
.topbar-brand {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.5px;
}
.page-title {
    margin-left: 16px;
    padding-left: 26px;
    border-left: 1px solid var(--line);
    font-size: 14px;
    color: var(--muted);
}
.icon-button {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--brand);
    font-size: 17px;
}
.icon-button:hover {
    background: var(--brand-soft);
}
.mobile-menu-button {
    display: none;
}
.company-switcher {
    min-width: 290px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    box-sizing: border-box;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #f8fbfa;
}
.company-switcher-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--brand-soft);
    color: var(--brand);
}
.company-switcher-copy {
    flex: 1;
    min-width: 0;
}
.company-switcher-copy > .z-label {
    display: block;
    margin-bottom: 1px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
}
.company-switcher .z-combobox {
    width: 100%;
}
.company-switcher .z-combobox-input {
    height: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
    box-shadow: none;
}
.company-switcher .z-combobox-input:focus {
    border: 0;
    box-shadow: none;
    outline: none;
}
.company-switcher .z-combobox-button {
    width: 24px;
    height: 22px;
    border: 0;
    background: transparent;
    color: var(--brand);
}
.user-avatar {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: var(--brand-soft);
}
.user-avatar .z-label {
    color: var(--brand);
    font-size: 14px;
    font-weight: 800;
}
.user-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 0;
}
.user-name {
    font-size: 13px;
    font-weight: 800;
}
.user-role {
    color: var(--muted);
    font-size: 11px;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-body {
    height: calc(100vh - 72px);
    display: flex;
    position: relative;
}
.app-sidebar {
    width: 250px;
    flex: 0 0 250px;
    display: flex;
    flex-direction: column;
    padding: 20px 14px 14px;
    box-sizing: border-box;
    background: var(--brand-dark);
    overflow-y: auto;
}
.sidebar-home, .menu-item {
    width: 100%;
    height: 43px;
    margin-bottom: 4px;
    padding: 0 14px;
    text-align: left;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #e8f5f0;
    font-size: 14px;
}
.sidebar-home {
    background: rgba(255,255,255,.10);
    font-weight: 800;
}
.sidebar-home:hover, .menu-item:hover,
.sidebar-home:focus, .menu-item:focus,
.sidebar-home:active, .menu-item:active {
    background: rgba(255,255,255,.14);
    color: white;
    box-shadow: none;
    outline: none;
}
.sidebar-home i, .menu-item i {
    width: 25px;
    color: rgba(255,255,255,.82);
}
.menu-section {
    margin-top: 22px;
}
.menu-section-title {
    display: block;
    margin: 0 14px 9px;
    color: rgba(255,255,255,.68);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.sidebar-footer {
    margin-top: auto;
    padding: 18px 12px 4px;
    border-top: 1px solid rgba(255,255,255,.09);
}
.sidebar-footer .z-label {
    color: #78998e;
    font-size: 11px;
}
.app-content {
    flex: 1;
    min-width: 0;
    overflow: auto;
    padding: clamp(18px, 3vw, 40px);
    box-sizing: border-box;
}
.sidebar-backdrop {
    display: none;
}

.dashboard {
    max-width: 1180px;
    margin: 0 auto;
}
.hero-card {
    min-height: 230px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: clamp(28px, 5vw, 58px);
    box-sizing: border-box;
    border-radius: 26px;
    background: linear-gradient(125deg, var(--brand), var(--brand-dark));
    box-shadow: var(--shadow);
    overflow: hidden;
}
.eyebrow {
    display: block;
    margin-bottom: 12px;
    color: #9ce0c9;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.hero-title {
    display: block;
    max-width: 650px;
    color: white;
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -1.5px;
}
.hero-copy {
    display: block;
    max-width: 620px;
    margin-top: 18px;
    color: #d6eee6;
    font-size: 15px;
    line-height: 1.6;
}
.hero-orb {
    flex: 0 0 130px;
    width: 130px;
    height: 130px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.18);
}
.hero-orb .z-label {
    color: white;
    font-size: 66px;
    font-weight: 800;
}
.status-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 22px;
}
.status-card {
    position: relative;
    min-height: 94px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 22px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 6px 20px rgba(20,55,44,.04);
}
.status-card > .z-label:not(.status-title) {
    color: var(--muted);
    font-size: 12px;
}
.status-title {
    margin-bottom: 7px;
    font-size: 17px;
    font-weight: 800;
}
.status-dot {
    position: absolute;
    right: 22px;
    top: 25px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.is-green {
    background: #24a879;
}
.is-blue {
    background: #388ed1;
}
.is-amber {
    background: var(--accent);
}
.notice-card {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 22px;
    padding: 22px 24px;
    background: #fff9ea;
    border: 1px solid #f2dfad;
    border-radius: 16px;
}
.notice-card > .z-label:not(.notice-title) {
    color: #6f613c;
    line-height: 1.5;
}
.notice-title {
    color: #5f4b16;
    font-weight: 800;
}
.dashboard-promotions { margin-top:22px; padding:18px; background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:0 8px 26px rgba(20,55,44,.06); }
.dashboard-promotions-head,.dashboard-promotions-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.dashboard-promotions-head { margin-bottom:14px; }
.dashboard-promotions-head .section-title { font-size:20px; }
.dashboard-promotion-stage { position:relative; width:min(100%,1000px); height:auto; aspect-ratio:16 / 5; margin:0 auto; overflow:hidden; background:var(--canvas); border-radius:15px; }
.dashboard-promotion-media { width:100%; height:100%; object-fit:cover; }
.dashboard-promotion-video-wrap,.dashboard-promotion-video-wrap video { width:100%; height:100%; object-fit:contain; }
.dashboard-promotions-actions { justify-content:flex-end; padding-top:13px; }
@media (max-width:650px) {
  .dashboard-promotion-stage { width:100%; height:auto; aspect-ratio:16 / 5; }
  .dashboard-promotions-head { align-items:flex-start; }
  .dashboard-promotions-actions .z-button { width:100%; }
}
.empty-page {
    max-width: 680px;
    min-height: 320px;
    margin: 7vh auto 0;
    padding: 50px 30px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: white;
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: var(--shadow);
}
.feature-icon {
    width: 66px;
    height: 66px;
    display: grid;
    place-items: center;
    margin-bottom: 20px;
    border-radius: 20px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 28px;
}
.feature-title {
    margin-bottom: 10px;
    font-size: 28px;
    font-weight: 800;
}
.empty-page > .z-label:not(.feature-title):not(.feature-status) {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.5;
}
.feature-status {
    margin-top: 24px;
    padding: 8px 12px;
    border-radius: 20px;
    background: var(--canvas);
    color: var(--brand);
    font-size: 11px;
    font-weight: 800;
}

/* Página de sesión expirada */
.timeout-page {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 88px 24px 56px;
    box-sizing: border-box;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 12%, color-mix(in srgb,var(--brand) 13%,transparent), transparent 31%),
        linear-gradient(135deg, var(--brand-soft) 0%, #f8fbfa 55%, color-mix(in srgb,var(--brand) 9%,white) 100%);
}
.timeout-brand {
    position: absolute;
    top: 28px;
    left: 32px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 2;
}
.timeout-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
}
.timeout-glow-top {
    width: 340px;
    height: 340px;
    top: -170px;
    right: -100px;
    background: color-mix(in srgb,var(--brand) 12%,transparent);
}
.timeout-glow-bottom {
    width: 280px;
    height: 280px;
    left: -120px;
    bottom: -150px;
    background: rgba(245,185,66,.12);
}
.timeout-card {
    position: relative;
    z-index: 1;
    width: min(100%, 520px);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(32px, 5vw, 52px);
    box-sizing: border-box;
    text-align: center;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(255,255,255,.92);
    border-radius: 28px;
    box-shadow: 0 24px 70px rgba(20,55,44,.13);
    backdrop-filter: blur(12px);
}
.timeout-icon {
    width: 74px;
    height: 74px;
    display: grid;
    place-items: center;
    margin-bottom: 24px;
    border-radius: 23px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 31px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--brand) 12%,transparent);
}
.timeout-eyebrow {
    margin-bottom: 9px;
    color: var(--brand);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}
.timeout-title {
    color: var(--ink);
    font-size: clamp(30px, 4vw, 40px);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -1px;
}
.timeout-copy {
    max-width: 410px;
    margin-top: 16px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.65;
}
.timeout-action,
.timeout-action:visited {
    min-width: 230px;
    margin-top: 28px;
    padding: 14px 22px;
    box-sizing: border-box;
    border-radius: 13px;
    background: var(--brand);
    color: white !important;
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 12px 24px color-mix(in srgb,var(--brand) 24%,transparent);
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.timeout-action:hover {
    background: var(--brand-dark);
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 15px 28px color-mix(in srgb,var(--brand) 30%,transparent);
}
.timeout-action i {
    margin-right: 8px;
}
.timeout-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    color: var(--muted);
}
.timeout-note .z-label {
    color: var(--muted);
    font-size: 12px;
}
.timeout-note .z-icon-shield {
    color: var(--brand);
}
.timeout-footer {
    position: absolute;
    bottom: 24px;
    z-index: 1;
    color: #789087;
    font-size: 11px;
}

.users-page { max-width: 1240px; margin: 0 auto; }
.module-header { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:22px; }
.module-title { display:block; font-size:28px; font-weight:800; }
.module-copy { display:block; margin-top:6px; color:var(--muted); }
.compact-button { width:auto; min-width:140px; padding:0 20px; }
.module-alert { display:flex; gap:10px; padding:18px; color:#5f4b16; background:#fff9ea; border:1px solid #f2dfad; border-radius:14px; }
.module-alert.module-error { color:#8a3030; background:#fff0f0; border-color:#efc5c5; }
.users-layout { display:grid; grid-template-columns:minmax(0, 1fr) 390px; gap:20px; align-items:start; }
.users-list-card, .user-form-card { background:white; border:1px solid var(--line); border-radius:20px; box-shadow:0 8px 26px rgba(20,55,44,.06); overflow:hidden; }
.list-toolbar { display:flex; align-items:center; gap:8px; padding:16px; border-bottom:1px solid var(--line); }
.search-input { flex:1; height:42px; padding:0 13px; border:1px solid #cedbd6; border-radius:11px; }
.users-list { border:0; }
.users-list .z-listheader { background:#f8fbfa; border-color:var(--line); color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; }
.users-list .z-listcell { padding:12px 8px; border-color:var(--line); }
.user-cell { display:flex; flex-direction:column; gap:4px; }.cell-title { font-weight:800; }.cell-copy { color:var(--muted); font-size:12px; }
.state-badge { display:inline-block; padding:5px 9px; border-radius:20px; font-size:10px; font-weight:800; }.state-badge.active { color:#087a5b; background:#dff4ec; }.state-badge.inactive { color:#8a4343; background:#f9e5e5; }
.row-action { width:34px; height:34px; padding:0; border:0; border-radius:9px; color:var(--brand); background:var(--brand-soft); }
.user-form-card { padding:22px; }.form-title { display:block; margin-bottom:22px; font-size:20px; font-weight:800; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field .z-combobox { width:100%; }.field .z-combobox-input { width:calc(100% - 32px); height:48px; padding:0 15px; box-sizing:border-box; background:#f9fbfa; border:1px solid #cedbd6; border-radius:12px 0 0 12px; }.field .z-combobox-button { height:48px; border-color:#cedbd6; border-radius:0 12px 12px 0; }
.permission-title { display:block; margin:5px 0 12px; font-weight:800; font-size:13px; }.permissions-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:15px; background:#f8fbfa; border-radius:12px; }
.form-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:22px; }.secondary-button { height:50px; padding:0 18px; border:1px solid var(--line); border-radius:13px; background:white; color:var(--ink); font-weight:800; }

.settings-page { max-width:1240px; margin:0 auto; }
.settings-layout { display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(350px, .85fr); gap:20px; align-items:start; }
.settings-main, .settings-side { display:flex; flex-direction:column; gap:20px; }
.settings-card { padding:22px; background:white; border:1px solid var(--line); border-radius:20px; box-shadow:0 8px 26px rgba(20,55,44,.06); }
.settings-card-heading { display:flex; align-items:center; gap:13px; margin-bottom:22px; }
.settings-card-icon { flex:0 0 42px; width:42px; height:42px; display:grid; place-items:center; color:var(--brand); background:var(--brand-soft); border-radius:12px; font-size:18px; }
.settings-card-icon.whatsapp-icon { color:#137a55; background:#dcf7e9; }
.settings-card-title { display:block; font-size:17px; font-weight:800; }
.settings-card-copy { display:block; margin-top:3px; color:var(--muted); font-size:12px; line-height:1.4; }
.settings-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.settings-full { grid-column:1 / -1; }
.hours-list { border:1px solid var(--line); border-radius:13px; overflow:hidden; }
.hours-list .z-listheader { background:#f8fbfa; border-color:var(--line); color:var(--muted); font-size:10px; font-weight:800; text-transform:uppercase; }
.hours-list .z-listcell { padding:9px 8px; border-color:var(--line); }
.hours-list .z-listcell:first-child { font-weight:700; }
.time-input { width:82px; height:36px; padding:0 9px; box-sizing:border-box; border:1px solid #cedbd6; border-radius:9px; }
.setting-toggle { display:flex; justify-content:space-between; align-items:center; gap:20px; margin:-4px 0 20px; padding:14px; background:#f8fbfa; border-radius:12px; }
.toggle-title, .toggle-copy { display:block; }.toggle-title { font-size:13px; font-weight:800; }.toggle-copy { margin-top:3px; color:var(--muted); font-size:11px; }
.settings-note { display:flex; align-items:center; gap:8px; margin-top:-5px; color:var(--muted); font-size:11px; }
.notification-options { display:grid; grid-template-columns:1fr 1fr; gap:14px 10px; padding:15px; background:#f8fbfa; border-radius:12px; }
.notification-emails { margin-top:18px; margin-bottom:0; }.field-help { margin-top:6px; color:var(--muted); font-size:11px !important; font-weight:400 !important; }

/* Contactos */
.contacts-page { max-width:1240px; margin:0 auto; }
.contacts-layout { display:grid; grid-template-columns:minmax(0,1fr) 410px; gap:20px; align-items:start; }
.templates-layout { display:grid; grid-template-columns:minmax(0,1fr) 430px; gap:20px; align-items:start; }
.template-body-copy { max-width:440px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.contacts-list-card, .contact-form-card { background:white; border:1px solid var(--line); border-radius:20px; box-shadow:0 8px 26px rgba(20,55,44,.06); overflow:hidden; }
.contact-form-card { padding:22px; }
.contact-row-actions { display:flex; gap:6px; }
.danger-action { color:#a23b3b; background:#faeaea; }
.contact-notes { min-height:96px; resize:vertical; }

/* Bandeja de conversaciones */
.inbox-page { height:100%; min-height:560px; }
.inbox-company-alert { max-width:900px; margin:0 auto; }
.inbox-shell { height:100%; min-height:560px; display:grid; grid-template-columns:380px minmax(0,1fr); background:white; border:1px solid var(--line); border-radius:20px; box-shadow:0 12px 36px rgba(20,55,44,.08); overflow:hidden; }
.inbox-list-panel { min-width:0; display:flex; flex-direction:column; border-right:1px solid var(--line); overflow:hidden; }
.inbox-list-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 20px 14px; }
.inbox-title { display:block; font-size:22px; font-weight:800; }
.inbox-unread-total,.inbox-subtitle { color:var(--muted); font-size:11px; }.inbox-unread-total { display:inline-block; margin-top:4px; }
.channel-badge { flex:0 0 auto; padding:7px 10px; color:#087a5b; background:#dcf7e9; border-radius:20px; font-size:11px; font-weight:800; }.channel-badge .z-icon-whatsapp { margin-right:5px; }
.inbox-search { position:relative; margin:0 16px 12px; }.inbox-search > span { position:absolute; left:13px; top:13px; z-index:1; color:#8a9994; }
.inbox-search .z-textbox { width:100%; height:42px; padding:0 13px 0 37px; box-sizing:border-box; border:1px solid #cedbd6; border-radius:11px; background:#f8fbfa; }
.inbox-filters { display:flex; gap:7px; padding:0 16px 13px; overflow-x:auto; scrollbar-width:none; }.inbox-filters::-webkit-scrollbar { display:none; }
.filter-chip { flex:0 0 auto; min-height:31px; padding:0 11px; border:1px solid var(--line); border-radius:18px; background:white; color:var(--muted); font-size:11px; font-weight:700; }.filter-chip:hover,.filter-chip.active { color:var(--brand); border-color:#9dcebe; background:var(--brand-soft); }
.conversation-list { flex:1; min-height:0; overflow-y:auto; border-top:1px solid var(--line); }
.conversation-item { display:flex; gap:12px; padding:15px 16px; border-bottom:1px solid #edf2f0; cursor:pointer; transition:.16s; }.conversation-item:hover { background:#f8fbfa; }.conversation-item.selected { background:#eaf7f2; box-shadow:inset 3px 0 var(--brand); }
.conversation-avatar { flex:0 0 43px; width:43px; height:43px; display:grid; place-items:center; border-radius:14px; background:#dff4ec; }.conversation-avatar .z-label { color:var(--brand); font-size:13px; font-weight:800; }
.conversation-main { min-width:0; flex:1; }.conversation-topline,.conversation-bottomline { display:flex; align-items:center; gap:8px; min-width:0; }.conversation-name { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:800; }.conversation-time { flex:0 0 auto; color:var(--muted); font-size:10px; }
.conversation-phone { display:block; margin-top:2px; color:#80908a; font-size:10px; }.conversation-bottomline { margin-top:7px; }.conversation-preview { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:11px; }.unread-badge { flex:0 0 auto; min-width:19px; height:19px; padding:0 5px; box-sizing:border-box; line-height:19px; text-align:center; border-radius:10px; background:var(--brand); color:white !important; font-size:10px; font-weight:800; }
.conversation-state { display:inline-block; margin-top:9px; padding:4px 8px; border-radius:12px; }.conversation-state .z-label { font-size:9px; font-weight:800; }.conversation-state.nueva,.status-menu.nueva { color:#176fb0; background:#e1f1fc; }.conversation-state.abierta,.status-menu.abierta { color:#087a5b; background:#dff4ec; }.conversation-state.pendiente,.status-menu.pendiente { color:#8a6213; background:#fff2d3; }.conversation-state.cerrada,.status-menu.cerrada { color:#68736f; background:#edf1ef; }
.inbox-empty-list { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--muted); }.inbox-empty-list > span { font-size:24px; }
.chat-panel { position:relative; min-width:0; display:flex; flex-direction:column; background:#f4f8f6; overflow:hidden; }.chat-header { min-height:74px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:12px 20px; box-sizing:border-box; background:white; border-bottom:1px solid var(--line); }.chat-contact { min-width:0; display:flex; align-items:center; gap:12px; }.chat-avatar { flex-basis:42px; width:42px; height:42px; }.chat-contact-name,.chat-contact-phone,.contact-presence { display:block; }.chat-contact-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:800; }.chat-contact-phone { margin-top:3px; color:var(--muted); font-size:11px; }.contact-presence { margin-top:2px; color:#7c918a; font-size:9px; }.contact-presence.typing { color:var(--brand); font-weight:800; }
.chat-actions { display:flex; align-items:center; gap:9px; }.chat-tool { width:36px; height:36px; padding:0; border:0; border-radius:10px; color:var(--brand); background:#f3f8f6; }.chat-tool:hover,.chat-tool.active { background:var(--brand-soft); }.agent-select { width:165px; }.agent-select .z-combobox-input { width:calc(100% - 32px); height:36px; padding:0 10px; box-sizing:border-box; border:1px solid #cedbd6; border-radius:10px 0 0 10px; font-size:11px; }.agent-select .z-combobox-button { height:36px; border-color:#cedbd6; border-radius:0 10px 10px 0; }.status-menu { min-width:92px; height:36px; border:0; border-radius:10px; font-size:11px; font-weight:800; }
.message-history { flex:1; min-height:0; padding:24px clamp(18px,4vw,48px); box-sizing:border-box; overflow-y:auto; background:linear-gradient(rgba(244,248,246,.94),rgba(244,248,246,.94)),radial-gradient(circle at 1px 1px,#a8bbb4 1px,transparent 0); background-size:auto,20px 20px; }
.load-previous { display:block; height:30px; margin:0 auto 20px; padding:0 13px; border:1px solid var(--line); border-radius:16px; background:white; color:var(--muted); font-size:10px; }.load-previous i { margin-right:5px; }
.message-row { display:flex; margin-bottom:13px; }.message-row.outgoing { justify-content:flex-end; }.message-bubble { position:relative; max-width:min(72%,560px); padding:10px 13px 8px; box-sizing:border-box; background:white; border:1px solid #e2eae7; border-radius:5px 15px 15px 15px; box-shadow:0 3px 10px rgba(20,55,44,.05); }.outgoing .message-bubble { background:#dff4ec; border-color:#c7e9dc; border-radius:15px 5px 15px 15px; }.message-sender { display:block; margin-bottom:5px; color:var(--brand); font-size:10px; font-weight:800; }.message-text { display:block; line-height:1.45; font-size:13px; white-space:pre-wrap; }.message-meta { display:flex; align-items:center; justify-content:flex-end; gap:5px; margin-top:5px; color:#7e8e88; }.message-meta .z-label { color:#7e8e88; font-size:9px; }.message-meta span { color:var(--brand); font-size:9px; }.message-actions { position:absolute; right:6px; top:-25px; display:none; gap:3px; padding:3px; border:1px solid var(--line); border-radius:9px; background:white; box-shadow:0 5px 14px rgba(20,55,44,.12); z-index:2; }.message-bubble:hover .message-actions { display:flex; }.message-actions .z-button { width:25px; height:25px; padding:0; border:0; background:transparent; color:var(--brand); }
.message-attachment { min-width:260px; display:flex; flex-wrap:wrap; align-items:center; gap:11px; padding:11px; box-sizing:border-box; background:rgba(255,255,255,.7); border:1px solid rgba(8,122,91,.14); border-radius:11px; }.message-attachment > span { flex:0 0 38px; width:38px; height:38px; display:grid; place-items:center; border-radius:10px; color:var(--brand); background:var(--brand-soft); font-size:17px; }.attachment-preview { flex:0 0 100%; min-height:95px; display:flex; align-items:center; justify-content:center; gap:8px; border-radius:9px; background:#e9f1ee; color:var(--brand); overflow:hidden; }.attachment-preview > span { font-size:25px; }.attachment-preview .z-label { color:var(--muted); font-size:10px; }.video-preview { background:#17342c; }.video-preview > span { color:white; font-size:32px; }.audio-preview { min-height:48px; justify-content:flex-start; padding:0 10px; box-sizing:border-box; background:#edf7f3; }.audio-preview .z-button { flex:0 0 30px; width:30px; height:30px; padding:0; border:0; border-radius:50%; color:white; background:var(--brand); }.audio-preview > span { width:3px; height:15px; border-radius:2px; background:#84b8a7; }.audio-preview > span:nth-of-type(2),.audio-preview > span:nth-of-type(4) { height:25px; }.attachment-data { flex:1; min-width:0; }.attachment-name,.attachment-meta { display:block; }.attachment-name { max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:800; }.attachment-meta { margin-top:3px; color:var(--muted); font-size:9px; }.attachment-action { flex:0 0 32px; width:32px; height:32px; padding:0; border:0; border-radius:9px; color:var(--brand); background:white; }
.message-composer { position:relative; padding:9px 18px 27px; background:white; border-top:1px solid var(--line); }.composer-toolbar,.composer-main { display:flex; align-items:center; gap:8px; }.composer-toolbar { min-height:36px; }.composer-tool { width:30px; height:30px; padding:0; border:0; border-radius:8px; background:transparent; color:var(--brand); font-size:14px; }.composer-tool:hover { background:var(--brand-soft); }.composer-formats { margin-left:3px; color:var(--muted); font-size:9px; }.composer-main { align-items:flex-end; }.composer-main .z-textbox { flex:1; min-height:46px; max-height:100px; padding:12px 14px; box-sizing:border-box; border:1px solid #cedbd6; border-radius:13px; resize:none; }.send-button { flex:0 0 46px; width:46px; height:46px; border:0; border-radius:13px; background:var(--brand); color:white; font-size:16px; }.send-button:hover { background:var(--brand-dark); }.demo-caption { position:absolute; left:20px; bottom:7px; color:#91a09a; font-size:9px; }
.reply-preview { display:flex; align-items:center; gap:9px; margin:0 0 5px; padding:8px 10px; border-left:3px solid var(--brand); border-radius:7px; background:#f0f7f4; }.reply-preview > span { color:var(--brand); }.reply-preview > div { flex:1; min-width:0; }.reply-preview .z-label { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:10px; }.reply-preview .z-label:first-child { color:var(--brand); font-weight:800; }.reply-preview .z-button { width:26px; height:26px; padding:0; border:0; background:transparent; color:var(--muted); }
.contact-detail-panel { position:absolute; top:0; right:0; bottom:0; z-index:10; width:min(330px,92%); padding:18px; box-sizing:border-box; overflow-y:auto; background:white; border-left:1px solid var(--line); box-shadow:-14px 0 35px rgba(20,55,44,.12); }.contact-panel-header { display:flex; align-items:center; justify-content:space-between; padding-bottom:14px; border-bottom:1px solid var(--line); }.contact-panel-header > .z-label { font-size:15px; font-weight:800; }.contact-panel-header .z-button { width:32px; height:32px; padding:0; border:0; background:transparent; color:var(--muted); }.contact-profile { display:flex; flex-direction:column; align-items:center; padding:24px 0; }.contact-profile .conversation-avatar { width:58px; height:58px; margin-bottom:10px; }.contact-profile > .z-label { font-weight:800; }.contact-profile > .z-label:last-child { margin-top:3px; color:var(--muted); font-size:11px; font-weight:400; }.contact-section { padding:17px 0; border-top:1px solid var(--line); }.contact-section-title { display:block; margin-bottom:11px; font-size:11px; font-weight:800; text-transform:uppercase; }.contact-tags { display:flex; flex-wrap:wrap; gap:6px; }.contact-tags span,.contact-tags .z-button { padding:6px 9px; border:0; border-radius:14px; background:var(--brand-soft); color:var(--brand); font-size:9px; font-weight:800; }.contact-tags .z-button { height:auto; background:#f2f5f4; }.contact-section .z-textbox { width:100%; padding:10px; box-sizing:border-box; border:1px solid #cedbd6; border-radius:10px; resize:none; }.note-save { width:100%; height:36px; margin-top:8px; border:0; border-radius:10px; background:var(--brand); color:white; font-weight:800; }.contact-meta-list { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.contact-meta-list .z-label { color:var(--muted); font-size:10px; }.contact-meta-list .z-label:nth-child(even) { color:var(--ink); text-align:right; font-weight:700; }
.chat-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:30px; text-align:center; background:#f8fbfa; color:var(--muted); }.chat-empty > span { width:70px; height:70px; display:grid; place-items:center; margin-bottom:18px; border-radius:22px; background:var(--brand-soft); color:var(--brand); font-size:30px; }.chat-empty-title { margin-bottom:7px; color:var(--ink); font-size:20px; font-weight:800; }

@media (max-width: 1024px) {
    .login-page {
        grid-template-columns: 1fr;
        gap: 26px;
        padding: 24px 18px;
    }
    .login-brand {
        align-items: center;
        text-align: center;
    }
    .brand-mark {
        width: 58px;
        height: 58px;
        border-radius: 18px;
    }
    .brand-mark .z-label {
        font-size: 30px;
    }
    .brand-name {
        margin-top: 14px;
        font-size: 42px;
    }
    .brand-tagline {
        margin-top: 8px;
        font-size: 16px;
    }
    .login-card {
        padding: 28px 22px;
        border-radius: 22px;
    }
    .app-topbar {
        height: 64px;
        padding: 0 12px;
    }
    .app-body {
        height: calc(100vh - 64px);
    }
    .mobile-menu-button {
        display: inline-block;
    }
    .brand-mark-small, .topbar-brand {
        display: none;
    }
    .page-title {
        margin-left: 0;
        padding-left: 0;
        border: 0;
        font-weight: 800;
        color: var(--ink);
    }
    .user-copy {
        display: none;
    }
    .company-switcher {
        min-width: 240px;
    }
    .app-sidebar {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 25;
        transform: translateX(-105%);
        transition: transform .22s ease;
        box-shadow: 15px 0 45px rgba(0,0,0,.2);
    }
    .app-sidebar.is-open {
        transform: translateX(0);
    }
    .sidebar-backdrop {
        position: absolute;
        inset: 0;
        z-index: 20;
        background: rgba(6,27,21,.52);
    }
    .sidebar-backdrop.is-open {
        display: block;
    }
    .app-content {
        padding: 16px;
    }
    .hero-card {
        min-height: 250px;
        padding: 28px 24px;
    }
    .hero-orb {
        display: none;
    }
    .status-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .status-card:last-child {
        grid-column: span 2;
    }
    .empty-page {
        margin-top: 3vh;
        min-height: 300px;
        padding: 40px 20px;
    }
    .users-layout { grid-template-columns:1fr; }
    .user-form-card { grid-row:1; }
    .settings-layout { grid-template-columns:1fr; }
    .contacts-layout { grid-template-columns:1fr; }
    .templates-layout { grid-template-columns:1fr; }
    .contact-form-card { grid-row:1; }
    .inbox-shell { grid-template-columns:330px minmax(0,1fr); }
    .chat-header { align-items:flex-start; flex-direction:column; }.chat-actions { width:100%; }.agent-select { flex:1; width:auto; }
}

@media (max-width: 640px) {
    .app-topbar {
        gap: 8px;
    }
    .topbar-tools {
        gap: 6px;
    }
    .page-title {
        display: none;
    }
    .company-switcher {
        min-width: 0;
        width: min(48vw, 190px);
        padding: 6px 8px;
    }
    .company-switcher-icon,
    .user-avatar {
        display: none;
    }
    .logout-button {
        width: 38px;
        padding: 0;
    }
    .hero-card {
        min-height: 220px;
        border-radius: 20px;
    }
    .hero-title {
        font-size: 30px;
        letter-spacing: -.8px;
    }
    .hero-copy {
        font-size: 14px;
    }
    .status-grid {
        grid-template-columns: 1fr;
    }
    .status-card:last-child {
        grid-column: auto;
    }
    .notice-card {
        padding: 18px;
    }
    .module-header { align-items:flex-start; flex-direction:column; }
    .module-header .compact-button { width:100%; }
    .form-grid, .permissions-grid { grid-template-columns:1fr; }
    .settings-form-grid, .notification-options { grid-template-columns:1fr; }
    .settings-full { grid-column:auto; }
    .settings-card { padding:18px; }
    .contacts-list .z-listheader:nth-child(2), .contacts-list .z-listcell:nth-child(2) { display:none; }
    .inbox-page { height:auto; min-height:0; }.inbox-shell { height:auto; min-height:680px; grid-template-columns:1fr; }.inbox-list-panel { min-height:420px; border-right:0; border-bottom:1px solid var(--line); }.conversation-list { max-height:430px; }.chat-panel { min-height:600px; }.chat-empty { min-height:360px; }.message-history { min-height:380px; padding:18px 12px; }.message-bubble { max-width:86%; }.chat-header { padding:12px 14px; }.message-composer { padding-left:12px; padding-right:12px; }
    .timeout-page {
        justify-content: center;
        padding: 86px 16px 52px;
    }
    .timeout-brand {
        top: 20px;
        left: 20px;
    }
    .timeout-card {
        padding: 32px 22px;
        border-radius: 22px;
    }
    .timeout-icon {
        width: 64px;
        height: 64px;
        margin-bottom: 20px;
        border-radius: 19px;
        font-size: 27px;
    }
    .timeout-title {
        font-size: 30px;
    }
    .timeout-copy {
        font-size: 14px;
    }
    .timeout-action {
        width: 100%;
        min-width: 0;
    }
    .timeout-footer {
        bottom: 17px;
        font-size: 10px;
    }
}

/* Sobrescribe estilos heredados de cada módulo con el tema de la empresa. */
.app-shell .z-listheader,
.app-shell .users-list .z-listheader,
.app-shell .hours-list .z-listheader {
    color:white;
    background:var(--brand);
    border-color:var(--brand-dark);
}
.app-shell .z-listheader-content,
.app-shell .users-list .z-listheader-content,
.app-shell .hours-list .z-listheader-content { color:white; }
.app-shell .primary-button,
.app-shell .primary-small,
.app-shell .send-button,
.app-shell .note-save { background:var(--brand); color:white; }
.app-shell .primary-button:hover,
.app-shell .primary-small:hover,
.app-shell .send-button:hover,
.app-shell .note-save:hover { background:var(--brand-dark); }
.app-shell .z-textbox:focus,
.app-shell .z-decimalbox:focus,
.app-shell .z-combobox-input:focus,
.app-shell .z-colorbox-input:focus {
    border-color:var(--brand);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent);
}
.app-shell .z-window-modal,
.app-shell .admin-modal { border:1px solid var(--brand-border) !important; }