/* --- VARIABLES --- */
:root { 
    --bg-app: #d1d7db; 
    --bg-sidebar: #ffffff; 
    --bg-chat: #efeae2; 
    --bg-header: #f0f2f5; 
    --input-bg: #ffffff;
    --text-primary: #111b21; 
    --text-secondary: #667781; 
    --msg-in-bg: #ffffff; 
    --msg-out-bg: #d9fdd3; 
    --border-color: #d1d7db; 
    --btn-hover: #f5f6f6; 
    --unread-badge: #25d366; 
    --admin-bg: #202c33; 
    --admin-text: #e9edef; 
    
    /* Colores Admin */
    --card-bg: #ffffff;
    --table-header: #f9fafb;
    --table-border: #e5e7eb;
    --primary-color: #00a884;
    --danger-color: #ef4444;
    --sidebar-control-bg: #ffffff;
    --sidebar-control-border: #ccd6dc;
    --sidebar-control-shadow: 0 1px 2px rgba(17, 27, 33, 0.06);
    --sidebar-accent-soft: rgba(0, 168, 132, 0.10);
    --historial-drawer-bg: #eef2f4;
    --historial-order-card-bg: #ffffff;
    --historial-order-card-border: #c3d0d6;
    --historial-order-card-shadow: 0 6px 14px rgba(17, 27, 33, 0.11);


    /* Alias para componentes que usan variables genéricas */
    --bg-primary: var(--bg-sidebar);
    --bg-secondary: var(--input-bg);
    --accent: var(--primary-color);

}

/* Cotizador alterno por caja: aislado del carrito tradicional. */
.box-quote-modal {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: none;
    justify-content: flex-end;
    background: rgba(0, 0, 0, .48);
}

.box-quote-panel {
    width: min(860px, 96vw);
    height: 100%;
    display: flex;
    flex-direction: column;
    color: var(--text-primary, #eef4f6);
    background: var(--bg-primary, #101d23);
    border-left: 1px solid var(--border-color, #34464f);
    box-shadow: -12px 0 40px rgba(0, 0, 0, .35);
}

.box-quote-header,
.box-quote-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    background: var(--bg-header, #1c2b32);
    border-bottom: 1px solid var(--border-color, #34464f);
}

.box-quote-footer {
    border-top: 1px solid var(--border-color, #34464f);
    border-bottom: 0;
}

.box-quote-title { font-size: 19px; font-weight: 900; }
.box-quote-subtitle { margin-top: 3px; font-size: 12px; color: var(--text-secondary, #aab7bd); }
.box-quote-close { border: 1px solid var(--border-color, #445861); background: transparent; color: inherit; padding: 8px 11px; border-radius: 9px; cursor: pointer; font-weight: 800; }
.box-quote-body { flex: 1; min-height: 0; overflow: auto; padding: 18px; }
.box-quote-config { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.box-quote-config label,
.box-quote-add-row label { display: grid; gap: 6px; font-size: 11px; font-weight: 900; text-transform: uppercase; color: var(--text-secondary, #aab7bd); }
.box-quote-config select,
.box-quote-add-row select,
.box-quote-add-row input,
.box-quote-mixed-status input { width: 100%; min-width: 0; padding: 10px 11px; border: 1px solid var(--border-color, #40535c); border-radius: 10px; color: var(--text-primary, #eef4f6); background: var(--bg-secondary, #15242b); }
.box-quote-assigned-profile { display: grid; gap: 6px; min-width: 0; }
.box-quote-assigned-profile > span { color: var(--text-secondary, #aab7bd); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.box-quote-assigned-profile > strong { display: flex; align-items: center; min-height: 39px; padding: 9px 11px; overflow: hidden; border: 1px solid rgba(0, 168, 132, .55); border-radius: 10px; color: var(--text-primary, #eef4f6); background: rgba(0, 168, 132, .1); text-overflow: ellipsis; white-space: nowrap; }
.box-quote-assigned-profile > strong.is-warning { border-color: rgba(245, 158, 11, .55); background: rgba(245, 158, 11, .1); }
.box-quote-assigned-profile > small { color: var(--text-secondary, #aab7bd); font-size: 10px; font-weight: 700; }
.box-quote-hint { margin: 10px 0 16px; padding: 9px 11px; border-radius: 9px; background: rgba(0, 209, 178, .1); color: var(--text-secondary, #b9c6cb); font-size: 12px; }
.box-quote-hint.is-warning { background: rgba(245, 158, 11, .12); color: #f5c66d; }
.box-quote-mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 12px; padding: 5px; border: 1px solid var(--border-color, #40535c); border-radius: 12px; background: var(--bg-header, #1c2b32); }
.box-quote-mode-switch button { min-height: 39px; padding: 8px 12px; border: 1px solid transparent; border-radius: 9px; color: var(--text-secondary, #aab7bd); background: transparent; cursor: pointer; font-weight: 900; transition: all .16s ease; }
.box-quote-mode-switch button:hover { color: var(--text-primary, #eef4f6); background: rgba(0, 168, 132, .08); }
.box-quote-mode-switch button.is-active { color: #fff; border-color: #00a884; background: rgba(0, 168, 132, .2); box-shadow: 0 0 0 2px rgba(0, 168, 132, .12); }
.box-quote-mixed-status { margin: 0 0 12px; padding: 12px; border: 1px solid rgba(0, 168, 132, .45); border-radius: 12px; background: rgba(0, 168, 132, .08); }
.box-quote-mixed-status[hidden] { display: none; }
.box-quote-mixed-status.is-complete { border-color: #22c55e; background: rgba(34, 197, 94, .1); }
.box-quote-mixed-status.is-over { border-color: #ef4444; background: rgba(239, 68, 68, .1); }
.box-quote-mixed-status-top { display: flex; align-items: end; justify-content: space-between; gap: 14px; }
.box-quote-mixed-status-top > div { min-width: 0; }
.box-quote-mixed-status strong { display: block; font-size: 13px; }
.box-quote-mixed-status span { display: block; margin-top: 3px; color: var(--text-secondary, #aab7bd); font-size: 11px; }
.box-quote-mixed-status label { width: 112px; flex: 0 0 112px; color: var(--text-secondary, #aab7bd); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.box-quote-mixed-status input { margin-top: 5px; padding: 7px 9px; font-weight: 900; }
.box-quote-progress-track { height: 7px; margin-top: 11px; overflow: hidden; border-radius: 999px; background: rgba(134, 150, 160, .2); }
.box-quote-progress-track span { display: block; width: 0; height: 100%; margin: 0; border-radius: inherit; background: #00a884; transition: width .18s ease; }
.box-quote-mixed-status.is-complete .box-quote-progress-track span { background: #22c55e; }
.box-quote-mixed-status.is-over .box-quote-progress-track span { background: #ef4444; }
.box-quote-progress-text { margin-top: 7px; color: var(--text-primary, #eef4f6); font-size: 12px; font-weight: 800; }
.box-quote-add-row { display: grid; grid-template-columns: minmax(0, 1fr) 116px auto; gap: 10px; align-items: end; margin-bottom: 14px; }
.box-quote-add-row > label[hidden] { display: none; }
.box-quote-family-picker[hidden], .box-quote-add-row[hidden], .box-quote-family-nav button[hidden] { display: none; }
.box-quote-family-picker { margin-bottom: 14px; }
.box-quote-family-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 9px; }
.box-quote-family-nav strong { font-size: 13px; overflow-wrap: anywhere; }
.box-quote-family-nav button { padding: 7px 10px; font-size: 12px; }
.box-quote-family-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 4px; max-height: 310px; overflow-y: auto; padding: 5px; border: 1px solid var(--border-color, #34464f); border-radius: 12px; background: rgba(0, 209, 178, .08); }
.box-quote-family-grid.is-products { background: rgba(185, 92, 255, .1); }
.box-quote-family-button { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; min-width: 0; min-height: 62px; padding: 8px 6px; border: 1px solid var(--border-color, #34464f); border-radius: 12px; background: var(--bg-sidebar, #1c2b32); color: var(--text-primary, #eef4f6); font: inherit; font-size: 11px; font-weight: 800; text-align: center; cursor: pointer; touch-action: manipulation; }
.box-quote-family-button:not(:disabled):hover { border-color: #00a884; background: rgba(0, 168, 132, .16); }
.box-quote-family-button:focus-visible { outline: 2px solid #00a884; outline-offset: 1px; }
.box-quote-family-button:not(:disabled):active { transform: scale(.98); }
.box-quote-family-button:disabled { opacity: .4; cursor: not-allowed; }
.box-quote-family-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; line-height: 1.15; max-height: 2.3em; overflow: hidden; overflow-wrap: anywhere; text-transform: uppercase; }
.box-quote-family-button small { font-size: 11px; font-weight: 800; }
.box-quote-family-grid > .box-quote-empty { grid-column: 1 / -1; margin: 0; }
.box-quote-add-row button,
.box-quote-primary,
.box-quote-secondary { padding: 10px 14px; border-radius: 10px; cursor: pointer; font-weight: 900; border: 1px solid var(--border-color, #40535c); }
.box-quote-add-row button,
.box-quote-primary { color: #fff; background: #00a884; border-color: #00a884; }
.box-quote-secondary { color: var(--text-primary, #eef4f6); background: transparent; }
.box-quote-add-row button:disabled,
.box-quote-primary:disabled { opacity: .45; cursor: not-allowed; }
.box-quote-table-wrap { overflow-x: auto; border: 1px solid var(--border-color, #34464f); border-radius: 12px; }
.box-quote-table { width: 100%; min-width: 790px; border-collapse: collapse; font-size: 12px; }
.box-quote-table th { padding: 10px 8px; text-align: left; color: var(--text-secondary, #aab7bd); background: var(--bg-header, #1c2b32); }
.box-quote-table td { padding: 11px 8px; border-top: 1px solid var(--border-color, #34464f); vertical-align: middle; }
.box-quote-table td small { display: block; margin-top: 3px; color: var(--text-secondary, #aab7bd); }
.box-quote-boxes,
.box-quote-units,
.box-quote-units-per-box,
.box-quote-unit-price { width: 92px; padding: 8px; border: 1px solid #00a884; border-radius: 8px; color: var(--text-primary, #eef4f6); background: var(--bg-secondary, #15242b); font-weight: 900; }
.box-quote-money-input { display: inline-flex; align-items: center; gap: 5px; min-width: 118px; }
.box-quote-money-input > span { color: var(--text-secondary, #aab7bd); font-weight: 900; }
.box-quote-money-input .box-quote-unit-price { width: 96px; }
.box-quote-box-count { display: flex; align-items: center; gap: 7px; min-width: 150px; }
.box-quote-box-count span { color: var(--text-secondary, #aab7bd); font-size: 11px; font-weight: 800; white-space: nowrap; }
.box-quote-item-kind { display: inline-flex; align-items: center; min-height: 28px; padding: 5px 9px; border: 1px solid rgba(0, 168, 132, .45); border-radius: 999px; color: #5ee3c6; background: rgba(0, 168, 132, .12); font-size: 11px; font-weight: 900; white-space: nowrap; }
.box-quote-remove { border: 0; color: #ff5d5d; background: transparent; cursor: pointer; font-size: 15px; }
.box-quote-empty { padding: 28px !important; text-align: center; color: var(--text-secondary, #aab7bd); }
.box-quote-footer > div { display: flex; gap: 9px; }
.cliente-box-price-profile-controls { display: grid; gap: 7px; }
.cliente-box-price-profile-controls [hidden] { display: none; }
.cliente-box-price-profile-status { min-height: 18px; margin-top: 6px; color: #059669; font-size: 11px; font-weight: 800; line-height: 1.35; }
.cliente-box-price-profile-status.is-warning { color: #d97706; }

@media (max-width: 720px) {
    .box-quote-panel { width: 100vw; }
    .box-quote-config { grid-template-columns: 1fr; }
    .box-quote-add-row { grid-template-columns: 1fr; }
    .box-quote-mode-switch { grid-template-columns: 1fr; }
    .box-quote-mixed-status-top { align-items: stretch; flex-direction: column; }
    .box-quote-mixed-status label { width: 100%; flex-basis: auto; }
    .box-quote-header,
    .box-quote-footer { padding: 12px; }
    .box-quote-body { padding: 12px; }
    .box-quote-footer { align-items: stretch; flex-direction: column; }
    .box-quote-footer > div { width: 100%; }
    .box-quote-footer button { flex: 1; }
}

body.dark-mode { 
    --bg-app: #0b141a; 
    --bg-sidebar: #111b21; 
    --bg-chat: #0b141a; 
    --bg-header: #202c33; 
    --input-bg: #2a3942;
    --text-primary: #e9edef; 
    --text-secondary: #8696a0; 
    --msg-in-bg: #202c33; 
    --msg-out-bg: #005c4b; 
    --border-color: #2a3942; 
    --btn-hover: #374045; 
    
    --card-bg: #1f2937;
    --table-header: #374151;
    --table-border: #374151;
    --sidebar-control-bg: #16242c;
    --sidebar-control-border: #31434e;
    --sidebar-control-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
    --sidebar-accent-soft: rgba(32, 201, 151, 0.12);
    --historial-drawer-bg: #0d181e;
    --historial-order-card-bg: #16242c;
    --historial-order-card-border: #314650;
    --historial-order-card-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);


    /* Alias para componentes que usan variables genéricas */
    --bg-primary: var(--bg-sidebar);
    --bg-secondary: var(--input-bg);
    --accent: var(--primary-color);

}

* { box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; margin: 0; padding: 0; background-color: var(--bg-app); height: 100vh; overflow: hidden; color: var(--text-primary); }

/* --- LOGIN MODERNO GRID --- */
.login-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #00a884 0%, #008069 100%); display: flex; justify-content: center; align-items: center; z-index: 1000; }
.login-box { background: white; padding: 40px; border-radius: 10px; width: 300px; text-align: center; box-shadow: 0 10px 25px rgba(0,0,0,0.2); transition: width 0.3s; }
.login-box.wide-login { width: 550px; max-width: 95%; } 
.login-input { width: 100%; padding: 12px; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 5px; outline: none; }
.login-btn { width: 100%; padding: 12px; background: #00a884; color: white; border: none; border-radius: 5px; font-weight: bold; cursor: pointer; }
.error-msg { color: red; font-size: 14px; display: none; margin-top: 10px; }

/* Grid de Usuarios */
.login-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); 
    gap: 12px; 
    margin-bottom: 20px; 
    max-height: 300px; 
    overflow-y: auto; 
    padding: 5px;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    background: #fafafa;
}

/* Tarjeta de Usuario */
.user-card { 
    background-color: #2c3e50; 
    border: 2px solid #2c3e50; 
    border-radius: 8px; 
    padding: 12px 5px; 
    cursor: pointer; 
    transition: all 0.2s; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.user-card:hover { 
    background-color: #34495e; 
    border-color: #34495e;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.user-card.selected { 
    background-color: #00a884; 
    border-color: #00a884;
    box-shadow: 0 0 0 2px #00a884, 0 0 10px rgba(0, 168, 132, 0.4);
}

.user-avatar-large { 
    width: 45px; 
    height: 45px; 
    border-radius: 50%; 
    background: #ffffff; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 22px; 
    margin-bottom: 8px; 
    color: #2c3e50; 
}

.user-name-login { 
    font-size: 11px; 
    font-weight: 700; 
    color: #ffffff; 
    line-height: 1.2;
    word-wrap: break-word;
    max-width: 100%;
}

/* --- LAYOUT --- */
.app-container { display: none; height: 100vh; width: 100%; max-width: 1920px; margin: 0 auto; background: var(--bg-sidebar); }
.sidebar { width: 320px; border-right: 1px solid var(--border-color); display: flex; flex-direction: column; background: var(--bg-sidebar); flex-shrink: 0; }

.sidebar-header { min-height: 94px; background: var(--bg-header); padding: 8px 10px; display: flex; flex-direction: column; justify-content: center; gap: 8px; border-bottom: 1px solid var(--border-color); }
.sidebar-user-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sidebar-agent-identity { min-width: 0; flex: 1 1 auto; }
.sidebar-agent-name { font-size: 13.5px; line-height: 1.05; font-weight: 800; letter-spacing: -0.1px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.my-status-row { width: max-content; max-width: 100%; min-height: 18px; margin-top: 4px; padding: 1px 7px 1px 5px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid rgba(46, 204, 113, 0.34); border-radius: 999px; background: rgba(46, 204, 113, 0.11); color: #16864d; }
body.dark-mode .my-status-row { color: #77dfa0; }
.my-status-row:has(.status-dot.ausente) { border-color: rgba(168, 85, 247, 0.34); background: rgba(168, 85, 247, 0.11); color: #7e22ce; }
.my-status-row:has(.status-dot.almuerzo) { border-color: rgba(249, 115, 22, 0.36); background: rgba(249, 115, 22, 0.11); color: #c2410c; }
body.dark-mode .my-status-row:has(.status-dot.ausente) { color: #d8b4fe; }
body.dark-mode .my-status-row:has(.status-dot.almuerzo) { color: #fdba74; }
.sidebar-agent-identity .status-dot { width: 7px; height: 7px; flex: 0 0 7px; margin: 0; border: 0; }
.sidebar-agent-identity .my-timer { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; font-size: 10px; line-height: 1; font-weight: 800; }
.sidebar-agent-menu { position: relative; flex: 0 0 34px; }
.sidebar-agent-menu > summary { list-style: none; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--sidebar-control-border); border-radius: 9px; background: var(--sidebar-control-bg); box-shadow: var(--sidebar-control-shadow); color: var(--text-secondary); cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease; }
.sidebar-agent-menu > summary::-webkit-details-marker { display: none; }
.sidebar-agent-menu > summary:hover, .sidebar-agent-menu[open] > summary { border-color: rgba(0, 168, 132, 0.55); background: var(--sidebar-accent-soft); color: var(--text-primary); }
.sidebar-agent-menu > summary:focus-visible, .sidebar-quick-actions button:focus-visible, .btn-dark-toggle:focus-visible, .btn-programados-icon:focus-visible, .btn-status-ctrl:focus-visible { outline: 2px solid rgba(0, 168, 132, 0.42); outline-offset: 2px; }
.sidebar-agent-menu-panel { position: absolute; z-index: 1600; right: 0; top: 40px; width: 188px; padding: 6px; border: 1px solid var(--sidebar-control-border); border-radius: 10px; background: var(--bg-header); box-shadow: 0 12px 34px rgba(0,0,0,.30); }
.sidebar-agent-menu-panel button { width: 100%; display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text-primary); cursor: pointer; text-align: left; }
.sidebar-agent-menu-panel button:hover { background: rgba(0,184,148,.13); }
.sidebar-agent-menu-panel button i { width: 16px; color: var(--text-secondary); }
.sidebar-agent-menu-panel .sidebar-menu-danger, .sidebar-agent-menu-panel .sidebar-menu-danger i { color: #f15c6d; }
.sidebar-agent-menu .sidebar-agent-menu-panel .sidebar-agent-state-group { width: 100%; height: auto; margin: 0 0 4px; padding: 0 0 4px; display: block; overflow: visible; border: 0; border-bottom: 1px solid var(--sidebar-control-border); border-radius: 0; background: transparent; box-shadow: none; }
.sidebar-agent-menu .sidebar-agent-menu-panel .btn-status-ctrl { height: auto; justify-content: flex-start; font-size: 12px; }
.sidebar-agent-menu .sidebar-agent-menu-panel .btn-status-ctrl + .btn-status-ctrl { border-left: 0; }
.sidebar-user-row .agent-status-buttons { width: auto; min-width: 0; flex: 0 1 auto; }
.sidebar-user-row .sidebar-agent-state-group { width: 122px; }
.sidebar-quick-actions { width: 100%; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; }
.sidebar-quick-actions button { height: 34px; min-width: 0; border: 1px solid var(--sidebar-control-border); border-radius: 9px; background: var(--sidebar-control-bg); box-shadow: var(--sidebar-control-shadow); color: var(--text-primary); display: flex; align-items: center; justify-content: center; gap: 3px; padding: 0 2px; cursor: pointer; font-size: 9.5px; font-weight: 750; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.sidebar-quick-actions button:hover { border-color: rgba(0, 168, 132, 0.58); background: var(--sidebar-accent-soft); transform: translateY(-1px); }
.sidebar-quick-actions button i { color: #20c997; font-size: 13px; }
.sidebar-cotizador-block { padding: 0 10px 10px; margin-top: 5px; border-bottom: 1px solid var(--border-color); }
.sidebar-cotizador-primary { width: 100%; min-height: 32px; justify-content: center; padding: 8px; border-color: #6c5ce7; background: #6c5ce7; color: #fff; font-size: 13px; }
.sidebar-cotizador-primary:hover { border-color: #5a4bd3; background: #5a4bd3; }
.sidebar-cotizador-primary i { margin-right: 5px; color: #fff; }

/* GESTIONES OPERATIVAS · dominio separado de pedidos y ventas */
.operational-management-overlay { display: none; position: fixed; inset: 0; z-index: 5450; padding: 18px; align-items: center; justify-content: center; background: rgba(3,12,17,.78); }
.operational-management-overlay.is-open { display: flex; }
.operational-management-dialog { width: min(1120px, 97vw); height: min(860px, calc(100vh - 36px)); min-height: 560px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border-color); border-radius: 16px; background: var(--bg-sidebar); color: var(--text-primary); box-shadow: 0 26px 80px rgba(0,0,0,.48); }
.om-header { min-height: 72px; padding: 13px 17px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border-color); background: var(--bg-header); }
.om-title-icon { width: 43px; height: 43px; flex: 0 0 43px; display: grid; place-items: center; border-radius: 12px; background: rgba(32,201,151,.15); color: #20c997; font-size: 19px; }
.om-header h2 { margin: 0; font-size: 20px; }
.om-header p { margin: 3px 0 0; color: var(--text-secondary); font-size: 12px; }
.om-close { width: 36px; height: 36px; margin-left: auto; border: 1px solid var(--border-color); border-radius: 9px; background: transparent; color: var(--text-primary); cursor: pointer; }
.om-tabs { min-height: 48px; padding: 7px 16px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid var(--border-color); background: var(--bg-header); }
.om-tabs button { height: 33px; padding: 0 13px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-color); border-radius: 9px; background: transparent; color: var(--text-secondary); cursor: pointer; font-weight: 800; }
.om-tabs button.active { border-color: rgba(32,201,151,.55); background: rgba(32,201,151,.13); color: #20c997; }
.om-view { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 14px 16px 16px; }
.om-view[hidden] { display: none !important; }
.om-filters { display: grid; grid-template-columns: 130px 160px 145px minmax(210px,1fr) auto; gap: 8px; align-items: center; }
.om-filters input, .om-filters select, .operational-management-dialog form input, .operational-management-dialog form select, .operational-management-dialog form textarea { width: 100%; min-width: 0; border: 1px solid var(--border-color); border-radius: 9px; background: var(--input-bg); color: var(--text-primary); outline: none; }
.om-filters input, .om-filters select { height: 38px; padding: 0 9px; }
.om-filters input:focus, .om-filters select:focus, .operational-management-dialog form input:focus, .operational-management-dialog form select:focus, .operational-management-dialog form textarea:focus { border-color: #20c997; box-shadow: 0 0 0 2px rgba(32,201,151,.14); }
#om-filter-refresh { height: 38px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 9px; background: #20c997; color: #062d26; cursor: pointer; font-weight: 850; }
.om-loading { margin-top: 12px; padding: 18px; text-align: center; color: var(--text-secondary); }
.om-empty { min-height: 230px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--text-secondary); text-align: center; }
.om-empty[hidden] { display: none; }
.om-empty i { font-size: 38px; margin-bottom: 5px; opacity: .55; }
.om-empty strong { color: var(--text-primary); }
.om-list { margin-top: 12px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.om-card { min-width: 0; padding: 13px; border: 1px solid var(--border-color); border-left: 4px solid #20c997; border-radius: 12px; background: var(--bg-header); }
.om-card[data-status="ANULADA"] { border-left-color: #f15c6d; opacity: .78; }
.om-card[data-status="REALIZADA"] { border-left-color: #4da3ff; }
.om-card[data-status="EN_RUTA"] { border-left-color: #f0a44a; }
.om-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.om-card-top > div { min-width: 0; }
.om-code { color: #20c997; font-size: 10px; font-weight: 900; letter-spacing: .35px; }
.om-card h3 { margin: 3px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.om-status { flex: 0 0 auto; min-height: 23px; padding: 3px 8px; border: 1px solid rgba(32,201,151,.38); border-radius: 999px; background: rgba(32,201,151,.10); color: #20c997; font-size: 9.5px; font-weight: 900; }
.om-status-anulada { border-color: rgba(241,92,109,.42); background: rgba(241,92,109,.10); color: #f15c6d; }
.om-status-en_ruta { border-color: rgba(240,164,74,.45); background: rgba(240,164,74,.10); color: #e59635; }
.om-status-realizada { border-color: rgba(77,163,255,.45); background: rgba(77,163,255,.10); color: #4da3ff; }
.om-card-meta { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--text-secondary); font-size: 10.5px; }
.om-list-day-note { margin: 10px 0; color: var(--text-secondary); font-size: 12px; }
.om-pagination { margin-top: 16px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; color: var(--text-secondary); font-size: 12px; }
.om-pagination[hidden], #om-list-more[hidden] { display: none; }
#om-list-more { min-height: 38px; padding: 0 18px; border: 0; border-radius: 9px; background: #20c997; color: #062d26; cursor: pointer; font-weight: 850; }
#om-list-more:disabled { opacity: .6; cursor: wait; }
#om-list-more:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 3px; }
.om-card-meta span { display: inline-flex; align-items: center; gap: 5px; }
.om-card-operation { margin-top: 9px; display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 7px; }
.om-card-operation span { min-width: 0; padding: 7px 8px; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon label" "icon value"; column-gap: 7px; border: 1px solid rgba(32,201,151,.16); border-radius: 8px; background: rgba(32,201,151,.055); }
.om-card-operation i { grid-area: icon; align-self: center; color: #20c997; }
.om-card-operation small { grid-area: label; color: var(--text-secondary); font-size: 8.5px; font-weight: 800; text-transform: uppercase; }
.om-card-operation strong { grid-area: value; overflow: hidden; color: var(--text-primary); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.om-card-address, .om-card-task { margin: 9px 0 0; font-size: 12px; line-height: 1.4; }
.om-card-task { color: var(--text-secondary); }
.om-card-origin { margin-top: 8px; display: flex; align-items: center; gap: 6px; color: #4da3ff; font-size: 10.5px; }
.om-card-note, .om-card-materials { margin-top: 8px; padding: 7px 8px; border-radius: 8px; background: rgba(32,201,151,.06); color: var(--text-secondary); font-size: 10.5px; line-height: 1.4; }
.om-card-note strong, .om-card-materials strong { color: var(--text-primary); }
.om-card-actions { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.om-card-actions a, .om-card-actions button { min-height: 31px; padding: 0 9px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border-color); border-radius: 8px; background: transparent; color: var(--text-primary); text-decoration: none; cursor: pointer; font-size: 10.5px; font-weight: 800; }
.om-card-actions a { border-color: rgba(32,201,151,.45); color: #20c997; }
.om-card-actions .reuse { border-color: rgba(77,163,255,.45); color: #4da3ff; }
.om-card-actions .danger { border-color: rgba(241,92,109,.42); color: #f15c6d; }
.om-form-heading { margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.om-form-heading h3 { margin: 0; font-size: 18px; }
.om-form-heading p { margin: 3px 0 0; color: var(--text-secondary); font-size: 11px; }
.om-back-list { min-height: 36px; padding: 0 12px; border: 1px solid var(--border-color); border-radius: 9px; background: transparent; color: var(--text-primary); cursor: pointer; }
.operational-management-dialog form label { min-width: 0; display: flex; flex-direction: column; gap: 5px; color: var(--text-secondary); font-size: 11px; font-weight: 800; }
.operational-management-dialog form input, .operational-management-dialog form select { height: 38px; padding: 0 10px; }
.operational-management-dialog form textarea { padding: 9px 10px; resize: vertical; line-height: 1.35; }
.om-grid { display: grid; gap: 9px; }
.om-grid-primary { grid-template-columns: 190px minmax(250px,1fr) 135px 150px; }
.om-grid-contact { grid-template-columns: minmax(220px,1fr) 155px 170px 190px; }
.om-full-label { margin-top: 10px; }
.operational-management-dialog fieldset { min-width: 0; margin: 13px 0 0; padding: 12px; border: 1px solid var(--border-color); border-radius: 11px; }
.operational-management-dialog legend { padding: 0 7px; color: var(--text-primary); font-size: 12px; font-weight: 900; }
#om-material-add { height: 38px; padding: 0 11px; border: 1px solid rgba(32,201,151,.5); border-radius: 9px; background: rgba(32,201,151,.12); color: #20c997; cursor: pointer; font-weight: 850; }
.om-location-help { margin: 6px 0 0; color: var(--text-secondary); font-size: 10px; }
.om-material-add { display: grid; grid-template-columns: minmax(240px,1fr) 120px 140px auto; gap: 9px; align-items: end; }
.om-material-table { position: relative; min-height: 85px; max-height: 170px; margin-top: 10px; overflow: auto; border: 1px solid var(--border-color); border-radius: 9px; background: var(--bg-header); }
.om-material-table table { width: 100%; border-collapse: collapse; font-size: 11px; }
.om-material-table th, .om-material-table td { padding: 7px 9px; border-bottom: 1px solid var(--border-color); text-align: left; }
.om-material-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-secondary); font-size: 11px; }
.om-material-empty[hidden] { display: none; }
.om-material-remove { width: 28px; height: 28px; border: 1px solid rgba(241,92,109,.42); border-radius: 7px; background: rgba(241,92,109,.08); color: #f15c6d; cursor: pointer; }
.operational-management-dialog form footer { margin-top: 14px; display: flex; justify-content: flex-end; gap: 8px; }
#om-submit { min-height: 39px; padding: 0 16px; border: 0; border-radius: 9px; background: #20c997; color: #062d26; cursor: pointer; font-weight: 900; }
#om-submit:disabled { opacity: .6; cursor: wait; }

@media (max-width: 820px) {
    .operational-management-overlay { padding: 7px; }
    .operational-management-dialog { width: 100%; height: calc(100vh - 14px); min-height: 0; }
    .om-filters { grid-template-columns: 1fr 1fr; }
    #om-filter-search { grid-column: 1 / -1; }
    #om-filter-refresh { justify-content: center; }
    .om-list { grid-template-columns: 1fr; }
    .om-card-operation { grid-template-columns: 1fr; }
    .om-grid-primary, .om-grid-contact, .om-material-add { grid-template-columns: 1fr 1fr; }
    .om-grid-primary label:nth-child(2), .om-material-add label:first-child { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
    .sidebar-user-row .sidebar-agent-state-group { width: 104px; }
    .sidebar-user-row .btn-status-ctrl { padding: 0 4px; font-size: 0; }
    .sidebar-user-row .btn-status-ctrl i { font-size: 11px; }
    .om-header { min-height: 62px; padding: 9px 11px; }
    .om-title-icon { width: 36px; height: 36px; flex-basis: 36px; }
    .om-header h2 { font-size: 17px; }
    .om-header p { display: none; }
    .om-tabs { padding: 6px 9px; }
    .om-view { padding: 10px; }
    .om-filters, .om-grid-primary, .om-grid-contact, .om-material-add { grid-template-columns: 1fr; }
    .om-grid-primary label:nth-child(2), .om-material-add label:first-child { grid-column: auto; }
    .om-form-heading { align-items: flex-start; }
}

/* CONSUMO INTERNO · modal compacto sin scroll de página */
.internal-consumption-overlay { display: none; position: fixed; inset: 0; z-index: 5200; padding: 18px; background: rgba(3,12,17,.74); align-items: center; justify-content: center; }
.internal-consumption-overlay.is-open { display: flex; }
.internal-consumption-dialog { width: min(920px, 96vw); max-height: calc(100vh - 36px); overflow: hidden; border: 1px solid var(--border-color); border-radius: 16px; background: var(--bg-sidebar); color: var(--text-primary); box-shadow: 0 24px 70px rgba(0,0,0,.42); }
.internal-consumption-dialog > header { min-height: 72px; padding: 14px 18px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border-color); background: var(--bg-header); }
.internal-consumption-dialog h2 { margin: 0; font-size: 20px; }
.internal-consumption-dialog header p { margin: 3px 0 0; color: var(--text-secondary); font-size: 12px; }
.ic-title-icon { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 12px; background: rgba(0,184,148,.16); color: #20c997; font-size: 19px; }
.ic-close { margin-left: auto; width: 36px; height: 36px; border: 1px solid var(--border-color); border-radius: 9px; background: transparent; color: var(--text-primary); cursor: pointer; }
.ic-loading { display: none; height: 90px; align-items: center; justify-content: center; gap: 8px; color: var(--text-secondary); }
.ic-form-content { padding: 15px 18px 16px; }
.ic-form-content.is-loading { opacity: .45; pointer-events: none; }
.internal-consumption-dialog { overflow-y: auto; }
.ic-tabs { display:flex; gap:8px; padding:12px 18px 0; }
.ic-tabs button, .ic-history-filters button, .ic-history-card button { padding:9px 13px; border:1px solid var(--border-color); border-radius:9px; background:var(--bg-header); color:var(--text-primary); cursor:pointer; font-weight:700; }
.ic-tabs button[aria-pressed="true"] { background:#087f5b; color:#fff; }
.internal-consumption-dialog button:disabled { opacity:.5; cursor:not-allowed; }
#ic-history { padding:16px 18px; }
.ic-history-filters { display:flex; align-items:end; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.ic-history-filters label { display:flex; flex:1; min-width:150px; flex-direction:column; gap:5px; font-size:12px; }
.ic-history-filters input, .ic-history-filters select { padding:9px; border:1px solid var(--border-color); border-radius:8px; background:var(--input-bg); color:var(--text-primary); min-width:0; }
#ic-history-results { min-height:100px; max-height:55vh; overflow-y:auto; }
.ic-history-card { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid var(--border-color); font-size:13px; }
.ic-history-card p { margin:5px 0; overflow-wrap:anywhere; }
.ic-history-card small { color:var(--text-secondary); }
.ic-history-card button { flex-shrink:0; }
.ic-edit-info { padding:10px; background:var(--bg-header); border-left:3px solid #20c997; font-size:13px; }
#ic-corrections { margin-top:12px; font-size:12px; overflow-wrap:anywhere; }
#ic-corrections summary { cursor:pointer; }
#ic-override-label { flex-direction:row; align-items:center; margin-top:12px; }
#ic-override { width:18px; height:18px; flex-shrink:0; }
.ic-form-content label { display: flex; flex-direction: column; gap: 5px; min-width: 0; color: var(--text-secondary); font-size: 11px; font-weight: 750; }
.ic-form-content input, .ic-form-content select { width: 100%; height: 38px; min-width: 0; padding: 0 10px; border: 1px solid var(--border-color); border-radius: 9px; background: var(--input-bg); color: var(--text-primary); outline: none; }
.ic-form-content input:focus, .ic-form-content select:focus { border-color: #20c997; box-shadow: 0 0 0 2px rgba(32,201,151,.14); }
.ic-top-grid { display: grid; grid-template-columns: 145px minmax(240px,1fr) 170px; gap: 10px; }
.ic-inline { display: flex; gap: 6px; }
.ic-inline select { flex: 1 1 auto; }
#ic-manage-departments { width: 112px; flex: 0 0 112px; border: 1px solid #20c997; border-radius: 9px; background: rgba(32,201,151,.12); color: #20c997; display: none; align-items: center; justify-content: center; gap: 6px; cursor: pointer; font-size: 11px; font-weight: 800; }
#ic-manage-departments:hover { background: rgba(32,201,151,.2); }
.ic-product-row { display: grid; grid-template-columns: minmax(280px,1fr) 100px 135px 110px; gap: 10px; align-items: end; margin-top: 12px; }
#ic-add-item { height: 38px; border: 0; border-radius: 9px; background: #20c997; color: #062d26; font-weight: 800; cursor: pointer; }
.ic-items-wrap { position: relative; margin-top: 12px; height: 205px; overflow: auto; border: 1px solid var(--border-color); border-radius: 11px; background: var(--bg-header); }
.ic-items-wrap table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ic-items-wrap th { position: sticky; top: 0; z-index: 1; padding: 8px 10px; text-align: left; background: var(--bg-header); color: var(--text-secondary); border-bottom: 1px solid var(--border-color); }
.ic-items-wrap td { padding: 8px 10px; border-bottom: 1px solid var(--border-color); vertical-align: middle; }
.ic-items-wrap td:first-child { width: 45%; }
.ic-items-wrap small { display: block; margin-top: 2px; color: var(--text-secondary); }
#ic-items-empty { position: absolute; inset: 34px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--text-secondary); }
#ic-items-empty i { font-size: 28px; opacity: .55; }
.ic-remove { width: 28px; height: 28px; border: 1px solid rgba(241,92,109,.4); border-radius: 7px; background: rgba(241,92,109,.08); color: #f15c6d; cursor: pointer; }
.ic-bottom-row { display: grid; grid-template-columns: 1fr 170px; gap: 12px; margin-top: 12px; align-items: end; }
.ic-total-box { height: 52px; padding: 8px 12px; border: 1px solid rgba(32,201,151,.45); border-radius: 10px; background: rgba(32,201,151,.1); display: flex; align-items: center; justify-content: space-between; }
.ic-total-box span { font-size: 11px; color: var(--text-secondary); }
.ic-total-box strong { font-size: 18px; color: #20c997; }
.internal-consumption-dialog footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.internal-consumption-dialog footer button { height: 39px; padding: 0 16px; border-radius: 9px; cursor: pointer; font-weight: 800; }
.ic-cancel { border: 1px solid var(--border-color); background: transparent; color: var(--text-primary); }
#ic-submit { border: 0; background: #20c997; color: #062d26; }
#ic-submit:disabled { opacity: .6; cursor: wait; }

/* ADMINISTRADOR DE DEPARTAMENTOS · disponible únicamente para admin */
.icdm-overlay { display: none; position: fixed; inset: 0; z-index: 5350; padding: 16px; background: rgba(3,12,17,.78); align-items: center; justify-content: center; }
.icdm-overlay.is-open { display: flex; }
.icdm-dialog { position: relative; display: flex; flex-direction: column; width: min(660px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: hidden; border: 1px solid var(--border-color); border-radius: 16px; background: var(--bg-sidebar); color: var(--text-primary); box-shadow: 0 24px 70px rgba(0,0,0,.46); }
.icdm-dialog > header { flex-shrink: 0; min-height: 68px; padding: 12px 16px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid var(--border-color); background: var(--bg-header); }
.icdm-title-icon { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border-radius: 11px; background: rgba(32,201,151,.14); color: #20c997; font-size: 18px; }
.icdm-dialog h3 { margin: 0; font-size: 18px; }
.icdm-dialog header p { margin: 3px 0 0; color: var(--text-secondary); font-size: 11.5px; }
.icdm-close { margin-left: auto; width: 34px; height: 34px; border: 1px solid var(--border-color); border-radius: 9px; background: transparent; color: var(--text-primary); cursor: pointer; }
.icdm-close:hover { background: var(--btn-hover); }
.icdm-content { min-height: 0; overflow-y: auto; padding: 14px 16px 15px; }
.icdm-scope-row { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: end; }
.icdm-scope-row label, .icdm-editor label { display: flex; flex-direction: column; gap: 5px; color: var(--text-secondary); font-size: 11px; font-weight: 800; }
.icdm-scope-row select, .icdm-editor input { width: 100%; height: 38px; min-width: 0; padding: 0 10px; border: 1px solid var(--border-color); border-radius: 9px; background: var(--input-bg); color: var(--text-primary); outline: none; }
.icdm-scope-row select:focus, .icdm-editor input:focus { border-color: #20c997; box-shadow: 0 0 0 2px rgba(32,201,151,.14); }
.icdm-counters { min-height: 38px; display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.icdm-counters span { height: 30px; padding: 0 9px; border: 1px solid var(--border-color); border-radius: 999px; background: var(--bg-header); color: var(--text-secondary); display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; }
.icdm-counters span:first-child i, .icdm-counters span:first-child strong { color: #20c997; }
.icdm-counters span:last-child i, .icdm-counters span:last-child strong { color: #f0a44a; }
.icdm-editor { margin-top: 12px; padding: 11px; display: grid; grid-template-columns: minmax(0,1fr) 125px auto; gap: 7px; align-items: end; border: 1px solid var(--border-color); border-radius: 11px; background: var(--bg-header); }
.icdm-editor label { min-width: 0; }
.icdm-editor-actions { display: flex; justify-content: flex-end; gap: 7px; }
.icdm-editor button { height: 38px; padding: 0 13px; border-radius: 9px; cursor: pointer; font-size: 11px; font-weight: 800; }
.icdm-cancel-edit { border: 1px solid var(--border-color); background: transparent; color: var(--text-primary); }
.icdm-cancel-edit[hidden] { display: none; }
#icdm-save { min-width: 92px; border: 0; background: #20c997; color: #062d26; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.icdm-list { position: relative; height: min(292px, calc(100vh - 295px)); min-height: 165px; margin-top: 12px; padding: 5px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--border-color); border-radius: 11px; background: var(--bg-header); }
.icdm-row { min-height: 58px; padding: 8px 9px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; border: 1px solid transparent; border-bottom-color: var(--border-color); border-radius: 9px; }
.icdm-row:last-child { border-bottom-color: transparent; }
.icdm-row:hover { border-color: rgba(32,201,151,.28); background: rgba(32,201,151,.05); }
.icdm-row.is-inactive { opacity: .68; }
.icdm-row-main { min-width: 0; }
.icdm-name-line { min-width: 0; display: flex; align-items: center; gap: 7px; }
.icdm-name-line strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.icdm-row-main small { display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); font-size: 9.5px; }
.icdm-status { height: 20px; flex: 0 0 auto; padding: 0 7px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 9px; font-weight: 850; }
.icdm-status.is-active { border: 1px solid rgba(32,201,151,.35); background: rgba(32,201,151,.1); color: #20c997; }
.icdm-status.is-inactive { border: 1px solid rgba(240,164,74,.38); background: rgba(240,164,74,.1); color: #d88b32; }
.icdm-row-actions { display: flex; align-items: center; gap: 6px; }
.icdm-row-actions button { height: 32px; padding: 0 9px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; cursor: pointer; font-size: 10px; font-weight: 800; }
.icdm-edit { border: 1px solid var(--border-color); background: transparent; color: var(--text-primary); }
.icdm-deactivate { border: 1px solid rgba(241,92,109,.42); background: rgba(241,92,109,.08); color: #f15c6d; }
.icdm-reactivate { border: 1px solid rgba(32,201,151,.42); background: rgba(32,201,151,.09); color: #20c997; }
.icdm-row-actions button:hover { filter: brightness(1.08); }
.icdm-loading, .icdm-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; color: var(--text-secondary); font-size: 11px; text-align: center; }
.icdm-loading i, .icdm-empty i { font-size: 25px; opacity: .65; }
.icdm-empty.is-error { color: #f15c6d; }
.icdm-note { min-height: 34px; margin-top: 10px; padding: 7px 10px; border: 1px solid rgba(52,152,219,.3); border-radius: 9px; background: rgba(52,152,219,.07); color: var(--text-secondary); display: flex; align-items: center; gap: 8px; font-size: 9.5px; line-height: 1.3; }
.icdm-note i { color: #5dade2; font-size: 14px; }
.icdm-overlay.is-busy .icdm-row-actions { opacity: .45; pointer-events: none; }
.icdm-overlay.is-busy #icdm-list { cursor: wait; }
.icdm-confirm { display: none; position: absolute; inset: 0; z-index: 2; padding: 18px; background: rgba(3,12,17,.78); align-items: center; justify-content: center; }
.icdm-confirm.is-open { display: flex; }
.icdm-confirm > section { width: min(390px, 100%); padding: 20px; border: 1px solid var(--border-color); border-radius: 14px; background: var(--bg-sidebar); box-shadow: 0 18px 48px rgba(0,0,0,.38); text-align: center; }
.icdm-confirm-icon { width: 44px; height: 44px; margin: 0 auto 10px; display: grid; place-items: center; border-radius: 50%; background: rgba(241,92,109,.1); color: #f15c6d; font-size: 18px; }
.icdm-confirm h4 { margin: 0; font-size: 16px; }
.icdm-confirm p { margin: 8px 0 16px; color: var(--text-secondary); font-size: 11px; line-height: 1.45; }
.icdm-confirm > section > div:last-child { display: flex; justify-content: center; gap: 8px; }
.icdm-confirm button { height: 36px; padding: 0 15px; border-radius: 9px; cursor: pointer; font-weight: 800; }
.icdm-confirm-cancel { border: 1px solid var(--border-color); background: transparent; color: var(--text-primary); }
.icdm-confirm-accept { border: 0; background: #f15c6d; color: #fff; }
@media (max-width: 620px) {
    .icdm-overlay { padding: 8px; }
    .icdm-dialog { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
    .icdm-content { padding: 11px; }
    .icdm-scope-row { grid-template-columns: 125px 1fr; }
    .icdm-editor { grid-template-columns: minmax(0,1fr); }
    .icdm-list { height: min(270px, calc(100vh - 335px)); }
    .icdm-row { grid-template-columns: minmax(0,1fr); }
    .icdm-row-actions { justify-content: flex-end; }
}
@media (max-height: 690px) {
    .internal-consumption-overlay { padding: 8px; }
    .internal-consumption-dialog { max-height: calc(100vh - 16px); }
    .internal-consumption-dialog > header { min-height: 58px; padding: 9px 14px; }
    .ic-form-content { padding: 10px 14px 12px; }
    .ic-items-wrap { height: 150px; }
    .ic-product-row, .ic-bottom-row { margin-top: 8px; }
    .internal-consumption-dialog footer { margin-top: 9px; }
    .icdm-dialog > header { min-height: 56px; padding: 8px 13px; }
    .icdm-content { padding: 10px 13px 11px; }
    .icdm-editor { margin-top: 8px; padding: 8px; }
    .icdm-list { height: min(230px, calc(100vh - 252px)); margin-top: 8px; }
    .icdm-note { margin-top: 7px; }
}
.agent-status-buttons { min-height: 30px; display: flex; align-items: center; gap: 5px; width: 100%; margin-top: 0; }
#status-left-icons { gap: 5px !important; margin-right: 0 !important; }
.btn-dark-toggle { width: 30px; height: 30px; flex: 0 0 30px; padding: 0; border: 1px solid var(--sidebar-control-border); border-radius: 8px; background: var(--sidebar-control-bg); box-shadow: var(--sidebar-control-shadow); color: var(--text-secondary); display: grid; place-items: center; cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease; }
.btn-dark-toggle:hover { border-color: rgba(0, 168, 132, 0.52); background: var(--sidebar-accent-soft); color: var(--text-primary); }
#dark-mode-icon { font-size: 13px; }
#dark-mode-icon.fa-sun { color: #f0b94a; }
#dark-mode-icon.fa-moon { color: #71869a; }
.sidebar-agent-state-group { width: 146px; height: 30px; margin-left: auto; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid var(--sidebar-control-border); border-radius: 8px; background: var(--sidebar-control-bg); box-shadow: var(--sidebar-control-shadow); }
.btn-status-ctrl { min-width: 0; height: 100%; padding: 0 7px; border: 0; border-radius: 0; background: transparent; color: var(--text-secondary); display: flex; align-items: center; justify-content: center; gap: 5px; cursor: pointer; font-size: 10.5px; font-weight: 700; transition: background .18s ease, color .18s ease, box-shadow .18s ease; }
.btn-status-ctrl + .btn-status-ctrl { border-left: 1px solid var(--sidebar-control-border); }
.btn-status-ctrl:hover { background: var(--btn-hover); color: var(--text-primary); }
.btn-status-ctrl.active-mode { font-weight: 800; }

/* Notificaciones administrativas · pedidos anulados por agentes */
.admin-cancel-notifications { position: relative; flex: 0 0 30px; width: 30px; height: 30px; }
.admin-cancel-notifications[hidden] { display: none !important; }
.admin-cancel-notifications-toggle { position: relative; width: 30px; height: 30px; padding: 0; display: grid; place-items: center; border: 1px solid var(--sidebar-control-border); border-radius: 8px; background: var(--sidebar-control-bg); box-shadow: var(--sidebar-control-shadow); color: var(--text-secondary); cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease; }
.admin-cancel-notifications-toggle:hover, .admin-cancel-notifications.is-open .admin-cancel-notifications-toggle { border-color: rgba(239,68,68,.62); background: rgba(239,68,68,.10); color: #ef4444; transform: translateY(-1px); }
.admin-cancel-notifications-toggle.has-unread { border-color: rgba(239,68,68,.58); color: #ef4444; }
.admin-cancel-notifications-toggle:focus-visible, .admin-cancel-notifications-panel button:focus-visible { outline: 2px solid rgba(239,68,68,.40); outline-offset: 2px; }
.admin-cancel-notifications-badge { position: absolute; top: -7px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--bg-header); border-radius: 999px; background: #ef4444; color: #fff; font-size: 8.5px; line-height: 1; font-weight: 900; box-shadow: 0 3px 10px rgba(239,68,68,.36); }
.admin-cancel-notifications-badge[hidden] { display: none !important; }
.admin-cancel-notifications-panel { position: absolute; z-index: 2250; top: 38px; left: 0; width: min(300px, calc(100vw - 20px)); max-height: min(530px, calc(100vh - 124px)); overflow: hidden; border: 1px solid var(--sidebar-control-border); border-radius: 13px; background: var(--bg-sidebar); color: var(--text-primary); box-shadow: 0 18px 48px rgba(0,0,0,.34); }
.admin-cancel-notifications-panel[hidden] { display: none !important; }
.admin-cancel-notifications-header { min-height: 59px; padding: 10px 11px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--border-color); background: var(--bg-header); }
.admin-cancel-notifications-header > div { min-width: 0; }
.admin-cancel-notifications-header strong { display: block; font-size: 13px; line-height: 1.15; }
.admin-cancel-notifications-header small { display: block; margin-top: 3px; color: var(--text-secondary); font-size: 9.5px; }
.admin-cancel-notifications-read-all { flex: 0 0 auto; height: 28px; padding: 0 8px; border: 1px solid var(--border-color); border-radius: 7px; background: transparent; color: var(--text-secondary); cursor: pointer; font-size: 9px; font-weight: 800; }
.admin-cancel-notifications-read-all:hover { border-color: rgba(0,168,132,.48); color: var(--text-primary); background: var(--sidebar-accent-soft); }
.admin-cancel-notifications-list { max-height: min(465px, calc(100vh - 184px)); padding: 6px; overflow-y: auto; overscroll-behavior: contain; }
.admin-cancel-notification-item { position: relative; padding: 10px; border: 1px solid transparent; border-bottom-color: var(--border-color); border-radius: 9px; background: transparent; }
.admin-cancel-notification-item:last-child { border-bottom-color: transparent; }
.admin-cancel-notification-item.is-unread { border-color: rgba(239,68,68,.28); background: rgba(239,68,68,.07); }
.admin-cancel-notification-item.is-unread::before { content: ''; position: absolute; top: 12px; left: 4px; width: 4px; height: 4px; border-radius: 50%; background: #ef4444; }
.admin-cancel-notification-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 7px; }
.admin-cancel-notification-top strong { color: #ef4444; font-size: 11.5px; }
.admin-cancel-notification-top time { flex: 0 0 auto; color: var(--text-secondary); font-size: 8.5px; }
.admin-cancel-notification-actor { margin-top: 3px; color: var(--text-secondary); font-size: 9.5px; font-weight: 750; }
.admin-cancel-notification-client { margin-top: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 850; }
.admin-cancel-notification-details { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); font-size: 9px; text-transform: capitalize; }
.admin-cancel-notification-reason { margin: 7px 0 0; color: var(--text-primary); font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
.admin-cancel-notification-actions { margin-top: 8px; display: flex; justify-content: flex-end; gap: 6px; }
.admin-cancel-notification-actions button { min-height: 28px; padding: 0 8px; border-radius: 7px; cursor: pointer; font-size: 9px; font-weight: 850; }
.admin-cancel-notification-open-chat { display: inline-flex; align-items: center; gap: 5px; border: 1px solid rgba(0,168,132,.48); background: rgba(0,168,132,.09); color: var(--primary-color); }
.admin-cancel-notification-open-chat:disabled { opacity: .45; cursor: not-allowed; }
.admin-cancel-notification-mark-read { border: 1px solid var(--border-color); background: transparent; color: var(--text-secondary); }
.admin-cancel-notification-actions button:not(:disabled):hover { filter: brightness(1.08); background-color: var(--btn-hover); }
.admin-cancel-notifications-empty { min-height: 150px; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--text-secondary); text-align: center; font-size: 10.5px; line-height: 1.35; }
.admin-cancel-notifications-empty i { font-size: 24px; opacity: .62; }
.admin-cancel-notifications-empty.is-error { color: #ef4444; }
@media (max-width: 520px) {
    .admin-cancel-notifications-panel { position: fixed; top: 88px; left: 10px; width: calc(100vw - 20px); max-height: calc(100vh - 105px); }
    .admin-cancel-notifications-list { max-height: calc(100vh - 174px); }
}

/* FILTROS VERTICALES TIPO TARJETA */
.filter-bar { display: flex; padding: 8px 6px; background: var(--bg-sidebar); border-bottom: 1px solid var(--border-color); gap: 4px; overflow: hidden; }
.filter-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 2px; border: 1px solid var(--border-color); background: var(--bg-header); color: var(--text-secondary); border-radius: 8px; cursor: pointer; font-size: 10px; font-weight: 600; text-align: center; transition: all 0.2s ease; line-height: 1.2; }
.filter-btn span { font-size: 13px; font-weight: 800; margin-top: 3px; color: var(--text-primary); }
.contact-item-internal { border-left-color: #20c997 !important; background-image: linear-gradient(90deg, rgba(32,201,151,.08), transparent 55%); }
.contact-item-internal .avatar { background: rgba(32,201,151,.16); color: #20c997; }
.contact-item-internal .contact-name { color: #20c997; }
/* UI-FILTERS-HEIGHT-FIX-01
   Objetivo: evitar que el bloque de filtros (y sus botones) cambie de altura
   al seleccionar "TODOS". La altura queda fija como cuando "NUEVOS" está activo.
   Ajuste manual: cambia solo --filters-bar-height / --filters-btn-height (px).
*/
:root{ --filters-bar-height: 62px; --filters-btn-height: 46px; }
.filter-bar{
    height: var(--filters-bar-height) !important;
    min-height: var(--filters-bar-height) !important;
    padding: 8px 6px !important;
    box-sizing: border-box;
    align-items: center;
}
.filter-bar .filter-btn{
    height: var(--filters-btn-height) !important;
    min-height: var(--filters-btn-height) !important;
    padding: 6px 2px !important;
    box-sizing: border-box;
}
.filter-bar .filter-btn span{ margin-top: 3px !important; }
#filter-all.active span{ color: white; }

/* COLORES ESTADOS ACTIVOS */
#filter-all.active { background: #4b5563; color: white; border-color: #374151; }
#filter-nuevo.active { background: #3498db; color: white; border-color: #2980b9; } #filter-nuevo.active span { color: white; }
#filter-pendiente.active { background: #e74c3c; color: white; border-color: #c0392b; } #filter-pendiente.active span { color: white; }
#filter-seguimiento.active { background: #0dcaf0; color: white; border-color: #0aa2c0; text-shadow: 0 1px 2px rgba(0,0,0,0.1); } #filter-seguimiento.active span { color: white; }
#filter-concluido.active { background: #2c3e50; color: white; border-color: #1a252f; } #filter-concluido i { font-size: 16px; margin: 4px 0; }
body.dark-mode .filter-btn { background: var(--bg-sidebar); }

.sidebar-search-order-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 55px;
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
    box-sizing: border-box;
}
.sidebar-global-search {
    flex: 1 1 auto;
    min-width: 0;
    height: 34px;
    padding: 8px 11px;
    border: 1px solid var(--border-color);
    border-radius: 15px;
    background: var(--input-bg);
    color: var(--text-primary);
    outline: none;
    box-sizing: border-box;
}
.sidebar-global-search:focus {
    border-color: rgba(0, 168, 132, 0.68);
    box-shadow: 0 0 0 2px rgba(0, 168, 132, 0.10);
}
.chat-order-toggle {
    width: 92px;
    min-width: 92px;
    max-width: 92px;
    height: 34px;
    flex: 0 0 92px;
    padding: 0 8px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-header);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 10.5px;
    font-weight: 800;
    white-space: nowrap;
}
.chat-order-toggle:hover {
    border-color: rgba(0, 168, 132, 0.55);
    color: var(--text-primary);
}
.chat-order-toggle.is-oldest {
    border-color: #d99116;
    background: rgba(217, 145, 22, 0.14);
    color: #b66e00;
}
body.dark-mode .chat-order-toggle.is-oldest {
    color: #ffc35c;
}
.chat-order-toggle[hidden],
.chat-order-admin-menu[hidden] {
    display: none !important;
}
.chat-order-admin-menu {
    position: absolute;
    top: calc(100% - 5px);
    right: 10px;
    z-index: 80;
    width: 232px;
    padding: 11px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-sidebar);
    color: var(--text-primary);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
    box-sizing: border-box;
}
.chat-order-admin-menu label {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 800;
}
.chat-order-admin-menu select {
    width: 100%;
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text-primary);
    box-sizing: border-box;
}
.chat-order-admin-menu button {
    width: 100%;
    height: 32px;
    margin-top: 8px;
    border: 0;
    border-radius: 8px;
    background: #00a884;
    color: #fff;
    cursor: pointer;
    font-size: 11px;
    font-weight: 800;
}
.chat-order-admin-menu button:disabled {
    opacity: 0.6;
    cursor: wait;
}
.chat-order-admin-menu small {
    display: block;
    margin-top: 7px;
    color: var(--text-secondary);
    font-size: 9.5px;
    line-height: 1.35;
}

.contact-list { flex-grow: 1; overflow-y: auto; }
.contact-item { display: flex; align-items: center; padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--border-color); position: relative; border-left: 4px solid transparent; }
.contact-item:hover { background-color: var(--btn-hover); }
.contact-item.active { background-color: var(--btn-hover); }
.avatar { width: 34px; height: 34px; background: #ddd; border-radius: 50%; margin-right: 12px; display: flex; justify-content: center; align-items: center; font-size: 16px; flex-shrink: 0; }
.contact-name { font-weight: 500; font-size: 14.5px; color: var(--text-primary); }
.contact-last-msg { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.contact-time { font-size: 10px; color: var(--text-secondary); }

/* ESTADOS VISUALES */
.contact-item.state-nuevo { border-left-color: #3498db; background-color: rgba(52, 152, 219, 0.05); }
.contact-item.state-nuevo .contact-time { color: #3498db; font-weight: bold; }
.contact-item.state-nuevo .contact-last-msg { font-weight: 700; color: var(--text-primary); }
.unread-badge { background: #3498db; color: white; border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; margin-left: auto; }


/* Badge del botón "Programados" (chats programados con no leídos) */
#btn-programados { position: relative; }
.programados-badge{
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: #e74c3c;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Programados: badge por fila en el modal */
.programados-row-title{
  display: flex;
  align-items: center;
  gap: 8px;
}
.programados-row-badge{
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: #e74c3c;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* UI: botón compacto de Programados (ícono de reloj) */
.programados-icon-row{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 6px 10px;
  background: var(--bg-sidebar);
}

.btn-programados-icon{
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 8px;
  border: 1px solid var(--sidebar-control-border);
  background: var(--sidebar-control-bg);
  box-shadow: var(--sidebar-control-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.btn-programados-icon i{
  color: #20c997;
  font-size: 13px;
}

.btn-programados-icon:hover{ border-color: rgba(0, 168, 132, 0.52); background: var(--sidebar-accent-soft); transform: translateY(-1px); }

.contact-item.state-pendiente { border-left-color: #e74c3c; background-color: rgba(231, 76, 60, 0.08); }
.contact-item.state-pendiente .contact-time { color: #e74c3c; font-weight: bold; }
.contact-item.state-pendiente .contact-name::after { content: " ⚠️"; font-size: 10px; }

.contact-item.state-seguimiento { border-left-color: #0dcaf0; background-color: rgba(13, 202, 240, 0.08); }
.contact-item.state-seguimiento .contact-time { color: #0aa2c0; font-weight: bold; }
.contact-item.state-seguimiento .contact-name::after { content: " ⏳"; font-size: 10px; }

.contact-item.state-concluido { border-left-color: #2c3e50; opacity: 0.7; background-color: rgba(44, 62, 80, 0.05); }
.contact-item.state-concluido .contact-name { text-decoration: line-through; color: var(--text-secondary); }

.contact-info { flex-grow: 1; overflow: hidden; }

/* CHAT AREA */
.chat-area { flex-grow: 1; display: flex; flex-direction: column; background-color: var(--bg-chat); position: relative; min-width: 0; min-height: 0; }
.chat-area::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.4; background-image: url("https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png"); pointer-events: none; z-index: 0; }
body.dark-mode .chat-area::before { opacity: 0.1; }
.chat-header { min-height: 100px; background: var(--bg-header); padding: 10px 16px; display: flex; flex-direction: column; justify-content: center; gap: 8px; border-bottom: 1px solid var(--border-color); z-index: 2; position:relative; flex-shrink: 0; }
.header-top-row { display: flex; align-items: center; width: 100%; gap: 15px; }
.tag-controls { display: flex; gap: 8px; align-items: center; flex-wrap: width: 100%; }
.chip-group { display: flex; gap: 5px; background: var(--bg-sidebar); padding: 3px; border-radius: 15px; border: 1px solid var(--border-color); }
.chip { padding: 4px 10px; border-radius: 12px; font-size: 11px; cursor: pointer; color: var(--text-secondary); }
.chip.active { background: #00a884; color: white; font-weight: bold; }
.tag-select { padding: 3px; font-size: 11px; border-radius: 4px; border: 1px solid var(--border-color); background: var(--bg-sidebar); color: var(--text-primary); }
.messages-container { flex-grow: 1; min-height: 0; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; z-index: 1; position: relative; scroll-behavior: smooth; overflow-x: hidden; }
.message { max-width: 50%; padding: 6px 7px 8px 10px; border-radius: 7.5px; font-size: 14.2px; position: relative; box-shadow: 0 1px 0.5px var(--msg-shadow); word-wrap: break-word; color: var(--text-primary); white-space: pre-wrap; line-height: 19px;margin-bottom: 8px; /* AGREGADO: Separación entre burbujas */
 overflow-wrap: anywhere;
}
.msg-in { align-self: flex-start; background: var(--msg-in-bg); border-top-left-radius: 0; }
.msg-out { align-self: flex-end; background: var(--msg-out-bg); border-top-right-radius: 0; }
.msg-meta { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--text-secondary); margin-top: 4px; gap: 5px; }
.agent-tag { font-weight: bold; color: #00a884; font-size: 10px; }
.media-container { max-width: 330px; min-width: 200px; border-radius: 6px; overflow: hidden; margin-bottom: 5px; cursor: pointer; }
.media-preview { width: 100%; height: auto; object-fit: cover; border-radius: 6px; display: block; }
.download-btn { display: flex; align-items: center; gap: 10px; background: #f0f2f5; padding: 12px; border-radius: 8px; text-decoration: none; color: var(--text-primary); font-weight: 600; font-size: 13px; border: 1px solid rgba(0,0,0,0.1); margin-bottom: 5px; max-width: 300px; transition: background 0.2s; }
body.dark-mode .download-btn { background: #2a3942; border-color: rgba(255,255,255,0.1); }
.download-btn:hover { background: #d1d7db; }
.download-btn i { font-size: 28px; color: #e74c3c; }
audio { height: 40px; margin-top: 5px; max-width: 100%; }
.chat-input-area { background: var(--bg-header); padding: 10px 16px; display: flex; align-items: flex-end; gap: 10px; z-index: 2; position: relative; min-width: 0; max-width: 100%; overflow-x: hidden; flex-shrink: 0; }
.input-box { flex-grow: 1; min-height: 40px; max-height: 120px; border-radius: 8px; border: 1px solid var(--border-color); padding: 10px 15px; font-size: 15px; outline: none; background: var(--input-bg); color: var(--text-primary); resize: none; min-width: 0; overflow-y: auto; overflow-x: hidden; overflow-wrap: anywhere; font-family: inherit; }
.input-box::placeholder { color: var(--text-secondary); opacity: 1; }

.btn-icon { background: none; border: none; font-size: 24px; color: var(--text-secondary); cursor: pointer; }

/* --- Enviar inline dentro del textarea (aparece solo con texto) --- */
.input-send-wrap{
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: stretch;
}
.input-send-wrap .input-box{
    padding-right: 58px; /* espacio para el botón */
}
.btn-send-inline{
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: none;
    background: var(--primary-color);
    color: #fff;
    display: none; /* se activa por JS */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.btn-send-inline:hover{ filter: brightness(0.97); }
.btn-send-inline:active{ transform: translateY(-50%) scale(0.98); }
.btn-send-inline:disabled{ opacity: .5; cursor: default; }
body.dark-mode .btn-send-inline{ box-shadow: 0 1px 3px rgba(0,0,0,0.55); }
.btn-send-inline i{ font-size: 16px; line-height: 1; }



/* --- Saludo rápido (footer) --- */
.btn-saludo{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-sidebar);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
    position: relative;
    line-height: 1;
}
.btn-saludo i{
    font-size: 16px;
    color: #00a884;
}
.btn-saludo:hover{ background: var(--btn-hover); }
body.dark-mode .btn-saludo{ background: var(--bg-header); }
body.dark-mode .btn-saludo:hover{ background: var(--btn-hover); }

/* Tooltip/preview del saludo (capa superior, no se recorta por paneles) */
.greet-tooltip{
    position: fixed;
    z-index: 100000;
    display: none;
    background: var(--bg-sidebar);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    white-space: normal;
    max-width: min(320px, 80vw);
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    pointer-events: none; /* no bloquear clicks */
}
.greet-tooltip.visible{ display: block; }
.greet-tooltip::after{
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
}
.greet-tooltip[data-place="top"]::after{
    top: 100%;
    border-top-color: var(--border-color);
}
.greet-tooltip[data-place="bottom"]::after{
    bottom: 100%;
    border-bottom-color: var(--border-color);
}

/* Accesibilidad: solo para lectores de pantalla */
.sr-only{
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.quick-sidebar { width: 240px; border-left: 1px solid var(--border-color); display: flex; flex-direction: column; background: var(--bg-sidebar); flex-shrink: 0; position: relative; --quick-header-h: 30px; --quick-tabs-grow: calc(var(--quick-header-h) * 0.75); }
.quick-header {
    /* Ocultar header "Respuestas Rápidas" y reutilizar su altura para los tabs (menos 25%) */
    display: none;
    height: 0;
    padding: 0;
    border: none;
}
.quick-tabs {
    display: flex;
    background: var(--bg-header);
    /* Tabs fijos abajo del panel */
    order: 3;
    margin-top: auto;
    flex-shrink: 0;
    border-bottom: none;
    border-top: 1px solid var(--border-color);
    overflow-x: hidden;
    scrollbar-width: none;
}
.tab-btn {
    flex: 0 0 auto;
    /* Tabs más delgados para que entren 4 en el panel */
    padding: 8px 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 9.5px;
    font-weight: 700;
    color: var(--text-secondary);
    border-bottom: 3px solid transparent;
    line-height: 1.1;
    min-width: 54px;
    user-select: none;
}
.tab-btn.active { color: #00a884; border-bottom: 3px solid #00a884; background: var(--bg-sidebar); }
.tab-btn.draggable { cursor: grab; }
.tab-btn.dragging { opacity: 0.65; cursor: grabbing; }
.quick-list { order: 2; flex: 1 1 auto; min-height: 0; padding: 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; }
.quick-bubble { background: var(--bg-sidebar); padding: 8px; border-radius: 6px; box-shadow: 0 1px 1px rgba(0,0,0,0.1); cursor: pointer; font-size: 11px; color: var(--text-primary); border-left: 4px solid #00a884; border: 1px solid var(--border-color); }
.quick-footer { position: absolute; bottom: 0; left: 0; width: 100%; padding: 10px; background: var(--bg-header); border-top: 1px solid var(--border-color); z-index: 10; display: none; }
.fixed-btn { width: 100%; background: #dcf8c6; border: 1px solid #00a884; color: #005c4b; padding: 10px; border-radius: 6px; cursor: pointer; }
body.dark-mode .fixed-btn { background: #005c4b; color: #fff; border-color: #00a884; }

/* UI-TABS-HEIGHT-SIMPLE-01
   Objetivo: que los tabs Speech 1/2/3/FIN se vean TAN ALTOS como el contenedor
   de la izquierda donde está el botón de saludo (input-area), sin depender de padding.
   Ajuste manual: cambia solo --speech-tabs-height (px).
*/
:root{ --speech-tabs-height: 60px; }
.quick-sidebar .quick-tabs{
    height: var(--speech-tabs-height) !important;
    min-height: var(--speech-tabs-height) !important;
    align-items: stretch !important;
}
.quick-sidebar .quick-tabs .tab-btn{
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 0 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.quick-sidebar .quick-tabs::-webkit-scrollbar{ display: none; }

/* --- ADMIN: Editor de Respuestas Rápidas --- */
.qr-editor { display: grid; grid-template-columns: 280px 1fr; gap: 15px; }
.qr-cat-list { display: flex; flex-direction: column; gap: 8px; }
.qr-cat-item { display: flex; gap: 8px; align-items: center; padding: 10px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-header); cursor: pointer; }
.qr-cat-item.active { border-color: #00a884; box-shadow: 0 0 0 1px rgba(0,168,132,0.15) inset; }
.qr-cat-name { flex: 1; border: none; outline: none; background: transparent; color: var(--text-primary); font-weight: 700; font-size: 13px; }
.qr-icon-btn { background: transparent; border: 1px solid var(--border-color); color: var(--text-secondary); border-radius: 8px; padding: 6px 8px; cursor: pointer; }
.qr-cat-actions { display: flex; gap: 6px; flex-shrink: 0; }
.qr-cat-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr-cat-list { max-height: 45vh; overflow: auto; padding-right: 4px; }
.qr-item-list { max-height: 55vh; overflow: auto; padding-right: 4px; }

.qr-add-row { display: flex; gap: 10px; margin-top: 10px; }
.qr-input { flex: 1; border: 1px solid var(--border-color); border-radius: 10px; padding: 10px 12px; background: var(--bg-sidebar); color: var(--text-primary); }
.qr-select { border: 1px solid var(--border-color); border-radius: 10px; padding: 10px 12px; background: var(--bg-sidebar); color: var(--text-primary); }
.qr-textarea { width: 100%; border: 1px solid var(--border-color); border-radius: 10px; padding: 10px 12px; background: var(--bg-sidebar); color: var(--text-primary); resize: vertical; }
.qr-items-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.qr-item-list { display: flex; flex-direction: column; gap: 12px; }
.qr-item { border: 1px solid var(--border-color); border-radius: 12px; padding: 12px; background: var(--bg-header); }
.qr-item-top { display: grid; grid-template-columns: 1fr 170px 44px; gap: 10px; align-items: center; }
.qr-item-title { width: 100%; border: 1px solid var(--border-color); border-radius: 10px; padding: 10px 12px; background: var(--bg-sidebar); color: var(--text-primary); font-weight: 700; }
.qr-item-text { margin-top: 8px; }
.qr-add-item { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-color); }
.qr-add-item-row { display: grid; grid-template-columns: 1fr 220px auto; gap: 10px; align-items: center; margin-bottom: 10px; }

@media (max-width: 1100px) {
    .qr-editor { grid-template-columns: 1fr; }
}

/* ADMIN & MODALS */
.admin-sidebar { width: 160px; background: var(--admin-bg); color: var(--admin-text); display: none; flex-direction: column; flex-shrink: 0; }
.admin-header { padding: 15px; border-bottom: 1px solid #374045; }
.modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); }
.modal-content { background-color: var(--bg-sidebar); margin: 5% auto; padding: 25px; border-radius: 12px; width: 90%; max-width: 950px; color: var(--text-primary); }

/* Registrar venta: comparador estable y acción siempre accesible. */
#sales-modal {
    padding: 16px;
    overflow-y: auto;
}

#sales-modal .sales-modal-content {
    width: min(520px, 100%) !important;
    max-width: 960px;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    margin: 0 auto;
    padding: 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

#sales-modal .sales-modal-content.sale-mode-modification {
    width: min(960px, 100%) !important;
}

#sales-modal .sale-comparison-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
    margin: 10px 0 12px;
}

#sales-modal .sales-modal-content.sale-mode-modification .sale-comparison-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#sales-modal #sale-quote-box,
#sales-modal #sale-prev-order-box {
    min-width: 0;
    height: 100%;
    margin: 0 !important;
}

#sales-modal #sale-quote-items,
#sales-modal #sale-prev-order-content {
    max-height: min(34vh, 300px) !important;
    overflow: auto;
    padding-right: 4px;
    scrollbar-gutter: stable;
}

#sales-modal .sale-confirm-footer {
    position: sticky;
    z-index: 5;
    bottom: 0;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-sidebar);
    box-shadow: 0 -10px 18px rgba(0, 0, 0, 0.12);
}

#sales-modal .sale-confirm-footer .login-btn {
    margin: 0;
}

@media (max-width: 820px) {
    #sales-modal {
        padding: 10px;
    }

    #sales-modal .sales-modal-content,
    #sales-modal .sales-modal-content.sale-mode-modification {
        width: 100% !important;
        max-height: calc(100vh - 20px);
        max-height: calc(100dvh - 20px);
        padding: 14px;
    }

    #sales-modal .sales-modal-content.sale-mode-modification .sale-comparison-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    #sales-modal #sale-mode-box {
        align-items: stretch !important;
        flex-direction: column;
    }

    #sales-modal #sale-mode-box > div:last-child {
        width: 100%;
        flex-wrap: wrap;
    }
}

/* --- MODALES GRANDES (Paneles Admin/Ventas/Agentes/Marketing) ---
   Mantiene el modal estándar igual, pero ensancha solo los paneles tipo dashboard
   para que la información no se vea tan colapsada.
*/
.modal-content.admin-dashboard-layout,
.modal-content.panel-dashboard-layout {
    width: 96%;
    max-width: 1400px;
}

@media (max-width: 1100px) {
    .modal-content.admin-dashboard-layout,
    .modal-content.panel-dashboard-layout {
        width: 98%;
        max-width: 98vw;
    }
}

.status-dot { width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; border: 1px solid rgba(255,255,255,0.2); }
.status-dot.online { background: #2ecc71; box-shadow: 0 0 5px #2ecc71; }
.status-dot.ausente { background: #9b59b6; } .status-dot.almuerzo { background: #e67e22; } .status-dot.inactive { background: #e74c3c; }

.btn-load-more { display: block; margin: 0 auto 15px auto; padding: 8px 15px; background: var(--bg-header); border: none; border-radius: 15px; color: var(--text-secondary); cursor: pointer; font-weight: bold; }
.welcome-screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg-header); z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-secondary); }

/* --- ADMIN DASHBOARD --- */
.admin-dashboard-layout { display: flex; flex-direction: column; height: 85vh; padding: 0 !important; overflow: hidden; background: var(--bg-sidebar); }
.admin-modal-header { padding: 15px 20px; background: var(--bg-header); border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
.admin-modal-header h2 { margin: 0; font-size: 18px; color: var(--text-primary); }
.close-modal { font-size: 20px; cursor: pointer; color: var(--text-secondary); }

.modal-close-text {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 7px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 700;
    letter-spacing: 0.4px;
}

.modal-close-text:hover { background: var(--btn-hover); color: var(--text-primary); }
.admin-container { display: flex; flex-grow: 1; overflow: hidden; }
.admin-nav { width: 220px; background: var(--bg-header); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; padding: 10px; gap: 5px; }
.admin-tab-btn { display: flex; align-items: center; gap: 10px; padding: 12px 15px; border: none; background: transparent; color: var(--text-secondary); border-radius: 8px; cursor: pointer; text-align: left; font-weight: 600; transition: all 0.2s; font-size: 14px; }
.admin-tab-btn:hover { background: var(--btn-hover); color: var(--text-primary); }
.admin-tab-btn.active { background: var(--primary-color); color: white; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.admin-tab-btn i { font-size: 16px; width: 20px; text-align: center; }
.admin-body { flex-grow: 1; padding: 25px; overflow-y: auto; background: var(--bg-app); }
.modal-page { display: none; }
.modal-page.active { display: block; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* --- PANEL LAYOUT (VENTAS / AGENTES) --- */
.panel-dashboard-layout { display: flex; flex-direction: column; height: 85vh; padding: 0 !important; overflow: hidden; background: var(--bg-sidebar); }

/* Reportes aprovecha casi toda el área útil sin alterar los demás paneles. */
#sales-dashboard-modal {
    padding: 16px;
}

#sales-dashboard-modal > .panel-dashboard-layout {
    width: min(96vw, 1840px);
    max-width: none;
    height: calc(100vh - 32px);
    height: calc(100dvh - 32px);
    margin: 0 auto;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 22px 65px rgba(0, 0, 0, .34);
}

#sales-dashboard-modal .sales-results-view {
    max-width: none;
}

@media (max-width: 900px) {
    #sales-dashboard-modal {
        padding: 8px;
    }

    #sales-dashboard-modal > .panel-dashboard-layout {
        width: 100%;
        height: calc(100vh - 16px);
        height: calc(100dvh - 16px);
        border-radius: 10px;
    }
}

.panel-modal-header { padding: 15px 20px; background: var(--bg-header); border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
.panel-modal-header h2 { margin: 0; font-size: 18px; color: var(--text-primary); display: flex; align-items: center; gap: 10px; }
#sales-dashboard-modal .panel-modal-header { gap: 12px; flex-wrap: wrap; }
.sales-monthly-report-controls { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; max-width: 100%; }
.sales-monthly-report-controls button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; }
.sales-monthly-report-controls button:disabled { opacity: .65; cursor: wait; }
.sales-monthly-report-controls small { color: var(--text-secondary); font-size: 11px; text-align: right; max-width: 440px; }
.sales-monthly-report-controls small[data-error="true"] { color: #ef6b6b; }
@media (max-width: 600px) {
    .sales-monthly-report-controls { order: 3; width: 100%; align-items: stretch; }
    .sales-monthly-report-controls small { text-align: left; }
    #sales-dashboard-modal .panel-modal-header > .modal-close-text { margin-left: auto; }
}
.panel-container { display: flex; flex-grow: 1; overflow: hidden; }
.panel-nav { width: 220px; background: var(--bg-header); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; padding: 10px; gap: 5px; }
.panel-tab-btn { display: flex; align-items: center; gap: 10px; padding: 12px 15px; border: none; background: transparent; color: var(--text-secondary); border-radius: 8px; cursor: pointer; text-align: left; font-weight: 600; transition: all 0.2s; font-size: 14px; }
.panel-tab-btn:hover { background: var(--btn-hover); color: var(--text-primary); }
.panel-tab-btn.active { background: var(--primary-color); color: white; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.panel-tab-btn i { font-size: 16px; width: 20px; text-align: center; }
.panel-body { flex-grow: 1; padding: 25px; overflow-y: auto; background: var(--bg-app); }
.panel-page { display: none; }
.panel-page.active { display: block; animation: fadeIn 0.3s ease; }
.admin-card { background: var(--card-bg); border-radius: 10px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); margin-bottom: 20px; border: 1px solid var(--border-color); }
.admin-card h3 { margin-top: 0; margin-bottom: 15px; font-size: 16px; color: var(--text-primary); border-bottom: 1px solid var(--border-color); padding-bottom: 10px; }
.input-group-row { display: flex; gap: 15px; align-items: center; flex-wrap: wrap; }
.input-wrapper { position: relative; flex-grow: 1; }
.input-wrapper i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); font-size: 14px; }
.input-wrapper input, .input-wrapper select { width: 100%; padding: 10px 10px 10px 35px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--input-bg); color: var(--text-primary); outline: none; font-size: 14px; }
.input-wrapper input:focus, .input-wrapper select:focus { border-color: var(--primary-color); }
/* Contraseñas de usuarios: controles compactos del panel administrativo. */
.user-password-create-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:15px; align-items:end; margin-top:15px; }
.user-password-field { display:flex; flex-direction:column; gap:6px; margin:0; font-size:13px; font-weight:600; color:var(--text-primary); }
.user-password-field input { box-sizing:border-box; width:100%; padding:10px; border:1px solid var(--border-color); border-radius:6px; background:var(--input-bg); color:var(--text-primary); font-size:14px; }
.user-password-field input:focus { outline:2px solid var(--primary-color); outline-offset:1px; }
.user-password-show { display:inline-flex; align-items:center; gap:7px; margin-top:12px; font-size:12px; color:var(--text-secondary); cursor:pointer; }
.user-password-show input { margin:0; }
.user-password-hint { margin:8px 0 0; color:var(--text-secondary); font-size:12px; line-height:1.45; }
.user-password-status { min-height:18px; margin:8px 0 0; color:var(--text-primary); font-size:13px; }
.user-password-status.is-error { color:var(--danger-color); }
.user-credential-row-actions { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
.user-credential-row-actions button { font-size:12px; }
#page-users .table-responsive { overflow-x:auto; }
.user-password-modal { z-index:3200; overflow-y:auto; }
.user-password-content { box-sizing:border-box; width:min(480px,calc(100vw - 28px)); max-width:480px; margin:8vh auto; }
.user-password-content h3 { margin:0 0 8px; font-size:19px; }
.user-password-name { margin:0 0 20px; overflow-wrap:anywhere; font-weight:600; color:var(--text-secondary); }
.user-password-content .user-password-field + .user-password-field { margin-top:15px; }
.user-password-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; margin-top:18px; }
#new-agent-form [disabled], #edit-user-password-form [disabled] { cursor:wait; opacity:0.65; }
@media (max-width:760px) {
    .user-password-create-row { grid-template-columns:minmax(0,1fr); }
    .user-password-create-row .btn-primary { justify-content:center; }
}
.btn-primary { background: var(--primary-color); color: white; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; font-weight: bold; display: flex; align-items: center; gap: 8px; transition: background 0.2s; white-space: nowrap; }
.btn-primary:hover { filter: brightness(90%); }
.btn-danger { background: var(--danger-color); color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; transition: 0.2s; }
.btn-danger:hover { background: #dc2626; }
.table-responsive { overflow-x: hidden; }
.modern-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.modern-table th { text-align: left; padding: 12px 15px; background: var(--table-header); color: var(--text-secondary); font-weight: 600; border-bottom: 2px solid var(--table-border); }
.modern-table td { padding: 12px 15px; border-bottom: 1px solid var(--table-border); color: var(--text-primary); vertical-align: middle; }
.modern-table tr:hover { background: var(--btn-hover); }
.modern-table tr:last-child td { border-bottom: none; }
.badge-role { padding: 4px 8px; border-radius: 12px; font-size: 11px; font-weight: bold; text-transform: uppercase; }
.badge-role.admin { background: #fee2e2; color: #991b1b; }
.badge-role.agente { background: #d1fae5; color: #065f46; }
.badge-role.observador { background: #e0f2fe; color: #075985; }
.badge-role.vendedor_crm { background: #ede9fe; color: #5b21b6; }

/* El vendedor CRM gestiona pedidos propios; no participa en estados de
   atención de la bandeja global. Conserva el selector de tema. */
body.role-vendedor-crm .sidebar-agent-state-group { display: none; }
body.role-vendedor-crm .agent-status-buttons { justify-content: flex-end; }
body.role-vendedor-crm .btn-dark-toggle { margin-left: auto; }

/* --- NUEVO DASHBOARD VENTAS (V24 - MODIFICADO FLEXBOX COMPACTO) --- */
.sales-header-controls {
    background: var(--bg-header);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.report-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.toolbar-label { font-weight: 600; color: var(--text-secondary); font-size: 13px; }
.toolbar-separator { color: var(--text-secondary); font-weight: bold; }

.date-input {
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
}

.sales-report-controls {
    margin-bottom: 22px;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 13px;
    background: color-mix(in srgb, var(--card-bg) 86%, transparent);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

.sales-report-period-row {
    display: grid;
    grid-template-columns: minmax(280px, .8fr) minmax(430px, 1.2fr);
    gap: 12px;
}

.sales-report-control-section {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid color-mix(in srgb, var(--border-color) 86%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--input-bg) 90%, transparent);
}

.sales-report-control-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sales-report-control-title i {
    color: var(--primary-color);
}

.sales-report-quick-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(82px, 1fr));
    gap: 8px;
}

.sales-report-quick-filters .filter-btn {
    min-height: 36px;
    margin: 0;
}

.sales-report-toolbar {
    display: grid;
    grid-template-columns: minmax(125px, .55fr) minmax(240px, 1.15fr) minmax(185px, .9fr) minmax(200px, .95fr) auto;
    align-items: end;
    gap: 10px;
    margin-top: 12px;
}

.sales-report-range-group {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    min-width: 0;
}

.sales-report-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 800;
}

.sales-report-field > span {
    padding-left: 2px;
}

.sales-report-field .date-input {
    min-height: 36px;
}

.sales-report-range-group .sales-report-field {
    flex: 1 1 130px;
}

.sales-report-apply-button {
    min-height: 36px;
    padding: 8px 14px;
    white-space: nowrap;
}

.sales-report-branch-field {
    min-width: 0;
}

.sales-report-branch-field select {
    width: 100%;
}

.sales-report-sellers-button {
    width: 100%;
    min-width: 0;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 11px;
    cursor: pointer;
    text-align: left;
}

.sales-report-sellers-button > span:first-child {
    font-weight: 800;
}

.sales-report-sellers-button #sales-report-sellers-summary {
    opacity: .78;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.sales-report-option-control {
    width: 100%;
    min-width: 0;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 11px;
    cursor: pointer;
    user-select: none;
    transition: transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.sales-report-option-control:hover {
    border-color: var(--primary-color);
    transform: translateY(-1px);
}

.sales-report-option-control[data-active="true"] {
    border-color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 12%, var(--input-bg));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary-color) 25%, transparent);
}

.sales-report-view-control[data-active="true"] {
    border-color: #38bdf8;
    background: color-mix(in srgb, #0ea5e9 14%, var(--input-bg));
    box-shadow: 0 0 0 1px color-mix(in srgb, #38bdf8 26%, transparent);
}

.sales-report-option-control input {
    width: 18px;
    height: 18px;
    margin: 0;
    flex: 0 0 auto;
    accent-color: var(--primary-color);
    cursor: pointer;
}

.sales-report-option-control > span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.15;
}

.sales-report-option-control strong {
    color: var(--text-primary);
    font-size: 12px;
}

.sales-report-option-control small {
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
}

.sales-report-toolbar-footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.sales-report-scope-status {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 800;
}

.sales-report-scope-status[data-scope="all"] {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 9%, var(--input-bg));
}

.sales-report-excel-button {
    min-height: 52px;
    padding: 9px 16px;
    font-size: 13px;
    white-space: nowrap;
}

.sales-report-view-status {
    color: #38bdf8;
}

.sales-results-view {
    max-width: 1180px;
    margin: 0 auto;
}

.sales-results-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 13px;
}

.sales-results-heading h3 {
    margin: 0 0 3px;
    color: var(--text-primary);
    font-size: 16px;
}

.sales-results-heading p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 11px;
}

.sales-results-count {
    padding: 5px 9px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-secondary);
    background: var(--input-bg);
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.sales-overview-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    gap: 11px;
}

.sales-overview-card {
    --sales-card-accent: #38bdf8;
    position: relative;
    min-width: 0;
    min-height: 148px;
    padding: 16px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--sales-card-accent) 45%, var(--border-color));
    border-radius: 13px;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--sales-card-accent) 17%, var(--card-bg)), var(--card-bg) 66%);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
}

.sales-overview-card::after {
    content: '';
    position: absolute;
    inset: auto -28px -42px auto;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--sales-card-accent) 14%, transparent);
}

.sales-card-base { --sales-card-accent: #38bdf8; }
.sales-card-facebook { --sales-card-accent: #c084fc; }
.sales-card-other { --sales-card-accent: #fb923c; }
.sales-card-new { --sales-card-accent: #2dd4bf; }
.sales-card-total { --sales-card-accent: #facc15; }

.sales-overview-icon {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    border-radius: 9px;
    color: var(--sales-card-accent);
    background: color-mix(in srgb, var(--sales-card-accent) 18%, transparent);
    font-size: 14px;
}

.sales-overview-label {
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.sales-overview-amount {
    position: relative;
    z-index: 1;
    margin-top: 5px;
    color: var(--text-primary);
    font-size: clamp(18px, 1.65vw, 24px);
    font-weight: 900;
    line-height: 1.2;
}

.sales-overview-count {
    position: relative;
    z-index: 1;
    margin-top: 9px;
    color: var(--text-secondary);
    font-size: 11px;
}

.sales-overview-count strong {
    color: var(--sales-card-accent);
    font-size: 14px;
}

.sales-seller-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(190px, 1fr));
    gap: 12px;
}

.sales-seller-result-card {
    --seller-card-accent: #38bdf8;
    min-width: 0;
    min-height: 178px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--seller-card-accent) 42%, var(--border-color));
    border-top: 4px solid var(--seller-card-accent);
    border-radius: 12px;
    background: linear-gradient(155deg, color-mix(in srgb, var(--seller-card-accent) 12%, var(--card-bg)), var(--card-bg) 62%);
    box-shadow: 0 7px 18px rgba(0, 0, 0, .1);
}

.sales-seller-result-card[data-accent="1"] { --seller-card-accent: #a78bfa; }
.sales-seller-result-card[data-accent="2"] { --seller-card-accent: #34d399; }
.sales-seller-result-card[data-accent="3"] { --seller-card-accent: #fb923c; }
.sales-seller-result-card[data-accent="4"] { --seller-card-accent: #f472b6; }
.sales-seller-result-card[data-accent="5"] { --seller-card-accent: #facc15; }

.sales-seller-result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.sales-seller-result-rank,
.sales-seller-result-icon {
    min-width: 29px;
    height: 29px;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    color: var(--seller-card-accent);
    background: color-mix(in srgb, var(--seller-card-accent) 16%, transparent);
    font-size: 10px;
    font-weight: 900;
}

.sales-seller-result-name {
    min-height: 34px;
    margin: 12px 0 5px;
    overflow: hidden;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.28;
}

.sales-seller-result-type {
    width: max-content;
    max-width: 100%;
    margin: 0 0 9px;
    padding: 3px 7px;
    overflow: hidden;
    border-radius: 999px;
    color: var(--seller-card-accent);
    background: color-mix(in srgb, var(--seller-card-accent) 13%, transparent);
    font-size: 9px;
    font-weight: 800;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sales-seller-result-amount {
    color: var(--seller-card-accent);
    font-size: 23px;
    font-weight: 950;
    line-height: 1.2;
}

.sales-seller-result-footer {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
    padding-top: 9px;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
}

.sales-seller-cards-empty {
    grid-column: 1 / -1;
    padding: 28px 18px;
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--input-bg) 80%, transparent);
    text-align: center;
    font-size: 12px;
}

@media (max-width: 1160px) {
    .sales-report-toolbar {
        grid-template-columns: minmax(120px, .55fr) minmax(230px, 1fr) repeat(2, minmax(185px, .85fr));
    }

    .sales-report-excel-button {
        grid-column: 1 / -1;
        min-height: 40px;
    }

    .sales-overview-grid {
        grid-template-columns: repeat(3, minmax(155px, 1fr));
    }

    .sales-seller-cards-grid {
        grid-template-columns: repeat(3, minmax(180px, 1fr));
    }
}

@media (max-width: 900px) {
    .sales-report-period-row {
        grid-template-columns: 1fr;
    }

    .sales-report-toolbar {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    .sales-report-excel-button {
        grid-column: auto;
        min-height: 52px;
    }

    .sales-overview-grid,
    .sales-seller-cards-grid {
        grid-template-columns: repeat(2, minmax(170px, 1fr));
    }
}

@media (max-width: 580px) {
    .sales-report-controls {
        padding: 10px;
    }

    .sales-report-range-group,
    .sales-report-toolbar {
        display: grid;
        grid-template-columns: 1fr;
    }

    .sales-report-quick-filters,
    .sales-overview-grid,
    .sales-seller-cards-grid {
        grid-template-columns: 1fr;
    }

    .sales-report-scope-status,
    .sales-report-excel-button {
        width: 100%;
        justify-content: center;
    }
}

.sales-external-sellers-check {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

.sales-external-sellers-check:hover {
    border-color: var(--primary-color);
    color: var(--text-primary);
}

.sales-external-sellers-check input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--primary-color);
    cursor: pointer;
}

.sales-external-sellers-check span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
}

.sales-external-sellers-check input:checked + span {
    color: var(--primary-color);
}

.sales-external-sellers-check:has(input:checked) {
    border-color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 10%, var(--input-bg));
}

.sales-external-sellers-check:focus-within {
    outline: 2px solid color-mix(in srgb, var(--primary-color) 38%, transparent);
    outline-offset: 2px;
}

.section-title {
    margin: 0 0 15px 0;
    font-size: 15px;
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 8px;
    display: inline-block;
}

/* GRIDS Y TARJETAS COMPACTAS (AJUSTE SOLICITADO) */
.dash-grid-row {
    display: flex;             /* Cambiado a Flex para control total */
    justify-content: center;   /* Centrado */
    gap: 10px;                 /* Espacio reducido a 10px */
    flex-wrap: wrap;           
    margin-bottom: 10px;       /* Separación de filas reducida a 10px */
}

.dash-card-v2 {
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border: 1px solid transparent; 
    
    /* TAMAÑO FIJO CUADRADO */
    width: 145px;   
    height: 145px;  
    margin: 0;
}

.card-label {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    opacity: 0.9;
    line-height: 1.3;
    font-weight: 600;
}

.card-value {
    font-size: 20px;
    font-weight: 800;
}

/* COLORES FILA 1 (SÓLIDOS) */
.card-blue { background: #3498db; color: white; }
.card-purple { background: #9b59b6; color: white; }
.card-orange { background: #e67e22; color: white; }
.card-teal { background: #1abc9c; color: white; }
.card-dark { background: #2c3e50; color: white; }

/* COLORES FILA 2 (OUTLINES) */
.dash-card-v2.card-blue-outline { background: var(--card-bg); border-color: #3498db; color: #3498db; }
.dash-card-v2.card-blue-outline .card-label { color: var(--text-secondary); }

.dash-card-v2.card-purple-outline { background: var(--card-bg); border-color: #9b59b6; color: #9b59b6; }
.dash-card-v2.card-purple-outline .card-label { color: var(--text-secondary); }

.dash-card-v2.card-orange-outline { background: var(--card-bg); border-color: #e67e22; color: #e67e22; }
.dash-card-v2.card-orange-outline .card-label { color: var(--text-secondary); }

.dash-card-v2.card-teal-outline { background: var(--card-bg); border-color: #1abc9c; color: #1abc9c; }
.dash-card-v2.card-teal-outline .card-label { color: var(--text-secondary); }

.dash-card-v2.card-dark-outline { background: var(--card-bg); border-color: #2c3e50; color: #2c3e50; }
.dash-card-v2.card-dark-outline .card-label { color: var(--text-secondary); }

/* FORZAR BLANCO EN LISTA DE AGENTES */
#admin-status-list div { color: #fff !important; }

/* --- INDICADOR VISOR (OJO) - CORREGIDO PARA EVITAR CHOQUES --- */
.viewer-badge {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%); /* Centered vertically */
    background: rgba(255, 152, 0, 0.15); /* Naranja suave */
    color: #e67e22; /* Naranja fuerte */
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(230, 126, 34, 0.3);
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 5;
    animation: fadeIn 0.3s ease;
}
.viewer-badge i { font-size: 11px; }

/* Responsive */
@media (max-width: 1000px) {
    .dash-grid-row { justify-content: space-around; }
}
/* --- COTIZADOR: PANEL LATERAL (DRAWER) --- */
/* Sobrescribimos el comportamiento del modal solo para este ID */
#cotizacion-modal {
    background-color: transparent !important; /* Quita el fondo negro */
    pointer-events: none; /* PERMITE hacer clic en el chat de atrás */
    display: none; 
    padding: 0 !important; /* Quita el padding del modal base */
    justify-content: flex-end; /* Alinea el contenido a la derecha */
}

/* Ajustamos el contenido para que sea una barra lateral */
#cotizacion-modal .modal-content {
    pointer-events: auto; /* Reactiva los clics dentro del cotizador */
    margin: 0 0 0 auto !important; /* Lo empuja totalmente a la derecha */
    height: 100vh; /* Ocupa toda la altura */
    width: 450px !important; /* Ancho fijo cómodo */
    max-width: 90vw;
    border-radius: 0 !important; /* Quita bordes redondeados */
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    border-left: 1px solid var(--border-color);
    animation: slideInRight 0.3s ease-out;
    display: flex;
    flex-direction: column;
    /* Más espacio útil para la lista */
    padding: 18px;
}

/* Cabecera modular del cotizador */
#cotizacion-modal .cot-modal-topbar {
    position: relative;
    margin: 0 0 8px 0;
}

#cotizacion-modal .cot-modal-topbar .cot-modal-close {
    position: absolute;
    top: 9px;
    right: 9px;
    z-index: 3;
    display: inline-flex;
    min-width: 34px;
    height: 34px;
    padding: 0 9px;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-header) 88%, transparent);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    transition: border-color .16s ease, color .16s ease, background .16s ease, transform .16s ease;
}

#cotizacion-modal .cot-modal-topbar .cot-modal-close > span[aria-hidden="true"] {
    font-size: 25px;
    font-weight: 400;
    transform: translateY(-1px);
}

#cotizacion-modal .cot-modal-topbar .cot-modal-close:hover {
    border-color: #00d1b2;
    background: rgba(0, 209, 178, .1);
    color: var(--text-primary);
    transform: translateY(-1px);
}

#cotizacion-modal .cot-modal-topbar #cot-pedido-mode-box {
    min-width: 0;
    margin: 0 !important;
    padding: 10px 52px 10px 10px;
    border: 1px solid var(--border-color);
    border-radius: 13px;
    background: var(--bg-header);
    color: var(--text-primary);
}

#cotizacion-modal .cot-control-modules-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.22fr) minmax(116px, .76fr);
    gap: 8px;
    align-items: stretch;
}

#cotizacion-modal .cot-control-module {
    min-width: 0;
    padding: 8px;
    border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
    border-radius: 11px;
    background: color-mix(in srgb, var(--bg-secondary) 68%, transparent);
}

#cotizacion-modal .cot-control-module-title {
    margin: 0 0 6px 2px;
    color: var(--text-secondary);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .055em;
    line-height: 1;
    white-space: nowrap;
}

#cotizacion-modal .cot-control-module-actions {
    display: flex;
    min-width: 0;
    gap: 5px;
}

#cotizacion-modal .cot-control-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 35px;
    padding: 7px 6px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: transparent;
    color: var(--text-primary);
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
}

#cotizacion-modal .cot-control-btn:hover:not(:disabled) {
    border-color: color-mix(in srgb, #00d1b2 62%, var(--border-color));
    background: rgba(0, 209, 178, .07);
    transform: translateY(-1px);
}

#cotizacion-modal .cot-control-module-box .cot-control-btn {
    width: 100%;
    font-size: 11px;
}

#cotizacion-modal .cot-control-btn:focus-visible,
#cotizacion-modal .cot-modal-close:focus-visible {
    outline: 2px solid #00d1b2;
    outline-offset: 2px;
}


#cotizacion-modal .cot-modal-topbar .cot-modal-title {
    display: none !important;
    margin: 0;
    height: 0;
    padding: 0;
    line-height: 0;
}

/* La lista del cotizador debe ocupar el alto disponible (sin el límite de 300px) */
#cotizacion-modal .table-responsive {
    /* La lista usa solo el espacio restante. Su contenido, aunque sea muy largo,
       no puede reducir ni cubrir el panel de botones del cotizador. */
    flex: 1 1 0;
    min-height: 0;
    max-height: none !important;
    overflow-y: auto !important;
    margin-bottom: 12px !important;
}


/* UI-COTI-05: Evitar que el texto de ayuda crezca en altura */
#cotizacion-modal #cot-pedido-mode-box > div:first-child {
    min-width: 0;
}
#cotizacion-modal #cot-pedido-mode-hint {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* UI-COTI-05: Footer de cotización sin wrap (preparado para botón PDF) */
#cotizacion-modal .modal-content > div:last-of-type {
    flex-wrap: nowrap;
    gap: 12px;
}
#cotizacion-modal .modal-content > div:last-of-type > div:last-of-type {
    flex-wrap: nowrap;
    align-items: center;
}
#cotizacion-modal .modal-content > div:last-of-type > div:last-of-type button {
    white-space: nowrap;
}

/* Cabecera de tabla más delgada y en una sola línea */
#cotizacion-modal #cotizacion-table thead th {
    padding: 7px 10px;
    font-size: 12px;
    line-height: 1.1;
    white-space: nowrap;
}

/* La cantidad debe mostrar valores por millar sin ocultarlos tras los controles numéricos. */
#cotizacion-modal #cotizacion-table th:nth-child(4),
#cotizacion-modal #cotizacion-table td:nth-child(4) {
    width: 120px !important;
    min-width: 120px;
}

#cotizacion-modal #cotizacion-table td:nth-child(4) .input-editable {
    min-width: 90px;
    padding-left: 8px;
    padding-right: 8px;
    font-variant-numeric: tabular-nums;
}

/* Animación suave de entrada desde la derecha */
@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0.5; }
    to { transform: translateX(0); opacity: 1; }
}

/* Ajuste responsive para móviles */
@media (max-width: 768px) {
    #cotizacion-modal .modal-content { width: 100% !important; }
}

@media (max-width: 560px) {
    #cotizacion-modal .cot-modal-topbar #cot-pedido-mode-box {
        padding: 10px 48px 10px 10px;
    }
    #cotizacion-modal .cot-control-modules-grid {
        grid-template-columns: 1fr;
    }
    #cotizacion-modal .cot-control-module-title {
        font-size: 9px;
    }
    #cotizacion-modal .cot-control-btn {
        min-height: 38px;
        font-size: 11.5px;
    }
}
/* --- PERSONALIZACIÓN DE ESTADOS DE AGENTE (CORREGIDO) --- */

/* Estado "Comer" -> acento naranja, visible sin ruido visual */
#btn-almuerzo.active-mode {
    background-color: rgba(249, 115, 22, 0.16) !important;
    color: #c2410c !important;
    box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.55) !important;
    text-shadow: none;
    font-weight: 800;
    transform: none;
}
body.dark-mode #btn-almuerzo.active-mode { color: #fdba74 !important; }

/* Estado "Ausente" -> acento morado, visible sin efecto neón */
#btn-ausente.active-mode {
    background-color: rgba(168, 85, 247, 0.15) !important;
    color: #7e22ce !important;
    box-shadow: inset 0 0 0 1px rgba(168, 85, 247, 0.52) !important;
    text-shadow: none;
    font-weight: 800;
    transform: none;
}
body.dark-mode #btn-ausente.active-mode { color: #d8b4fe !important; }

/* --- INDICADOR DE CARGA (SPINNER) --- */
/* Ocultar elementos */
.hidden { display: none !important; }

#loadingIndicator {
    display: flex;
    align-items: center;
}

/* El círculo que gira */
.spinner {
    width: 20px;
    height: 20px;
    border: 3px solid #f3f3f3; /* Gris claro */
    border-top: 3px solid #3498db; /* Azul */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ==========================================
   Editor de Imágenes (estilo tipo WhatsApp Web)
   ========================================== */
#editor-modal { align-items: center; justify-content: center; }
#editor-modal .editor-content {
    width: min(980px, 94vw);
    height: min(720px, 90vh);
    background-color: var(--bg-sidebar);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: var(--text-primary);
}

#editor-modal .editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
#editor-modal .editor-title { font-weight: 600; }
#editor-modal .editor-header-actions { display: flex; gap: 8px; }

#editor-modal .btn-editor-action {
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(0,0,0,0.20);
    color: var(--text-primary);
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
}
#editor-modal .btn-editor-action:hover { background: rgba(255,255,255,0.08); }
#editor-modal .btn-editor-primary {
    background: rgba(46, 204, 113, 0.18);
    border-color: rgba(46, 204, 113, 0.35);
}
#editor-modal .btn-editor-primary:hover { background: rgba(46, 204, 113, 0.28); }

#editor-modal .editor-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-wrap: wrap;
}
#editor-modal .editor-toolgroup { display: flex; align-items: center; gap: 6px; }
#editor-modal .editor-sep { width: 1px; height: 28px; background: rgba(255,255,255,0.12); }

#editor-modal .btn-editor-tool {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(0,0,0,0.18);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
#editor-modal .btn-editor-tool:hover { background: rgba(255,255,255,0.08); }
#editor-modal .btn-editor-tool.is-active {
    border-color: rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.10);
}

#editor-modal .editor-select {
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(0,0,0,0.18);
    color: var(--text-primary);
    padding: 7px 10px;
    border-radius: 10px;
    outline: none;
}

#editor-modal .editor-range {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 6px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    height: 34px;
    background: rgba(0,0,0,0.18);
}
#editor-modal .editor-range span { font-size: 12px; opacity: 0.85; }
#editor-modal .editor-range input[type="range"] { width: 120px; }

#editor-modal .editor-body { flex: 1; padding: 10px; min-height: 0; }
#editor-modal .editor-stage {
    width: 100%;
    height: 100%;
    min-height: 0;
    background: rgba(0,0,0,0.55);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

#editor-modal .editor-loading {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    background: rgba(10, 18, 24, 0.86);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    padding: 20px;
}

#editor-modal.editor-is-loading .editor-toolbar {
    opacity: 0.5;
    pointer-events: none;
}

#editor-modal.editor-load-error .editor-loading .spinner {
    display: none;
}

#editor-modal .btn-editor-action:disabled,
#editor-modal .btn-editor-tool:disabled,
#editor-modal .editor-select:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

#editor-modal .editor-stage-inner{
    position: absolute;
    inset: 14px;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#editor-modal #image-to-crop { max-width: 100%; max-height: 100%; display: block; }
#editor-modal .editor-stage .cropper-container { width: 100% !important; height: 100% !important; }
/* Al abrir el editor, ocultamos el Crop Box y el sombreado hasta que el usuario presione "Recortar" */
#editor-modal.cropbox-hidden .cropper-crop-box,
#editor-modal.cropbox-hidden .cropper-view-box,
#editor-modal.cropbox-hidden .cropper-dashed,
#editor-modal.cropbox-hidden .cropper-face,
#editor-modal.cropbox-hidden .cropper-line,
#editor-modal.cropbox-hidden .cropper-point {
    display: none !important;
}
#editor-modal.cropbox-hidden .cropper-modal {
    opacity: 0 !important;
    background-color: transparent !important;
    pointer-events: none !important;
}
#editor-modal #editor-canvas {
    max-width: 100%;
    max-height: 100%;
    display: block;
    touch-action: none;
}
#editor-modal .editor-selection {
    position: absolute;
    border: 2px dashed rgba(255,255,255,0.90);
    background: rgba(255,255,255,0.12);
    pointer-events: none;
    box-sizing: border-box;
}

/* --- COTIZADOR: CONTRASTE EN MODO OSCURO (PRODUCTO / PRECIO / CANTIDAD) --- */
body.dark-mode #cotizacion-modal .input-editable,
body.dark-mode #cotizacion-modal .table-select,
body.dark-mode #cotizacion-modal #cotizacion-table input,
body.dark-mode #cotizacion-modal #cotizacion-table select {
    color: #ffffff !important;
}


/* --- CHAT: Separadores y "Nuevos mensajes" (estilo WhatsApp Web) --- */
.date-separator, .unread-separator {
    align-self: center;
    margin: 10px 0 12px;
    z-index: 2;
}

.date-separator span, .unread-separator span {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    background: rgba(240, 242, 245, 0.9);
    color: var(--text-secondary);
    border: 1px solid rgba(0,0,0,0.08);
}

.unread-separator span {
    background: rgba(37, 211, 102, 0.14);
    color: #0a7a3e;
}

body.dark-mode .date-separator span, 
body.dark-mode .unread-separator span {
    background: rgba(42, 57, 66, 0.9);
    border-color: rgba(255,255,255,0.08);
    color: var(--text-secondary);
}

body.dark-mode .unread-separator span {
    background: rgba(37, 211, 102, 0.18);
    color: #a7f3d0;
}

.new-msg-indicator {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 82px; /* encima del input */
    background: var(--bg-sidebar);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.18);
    z-index: 60;
    user-select: none;
}

.new-msg-indicator:hover { background: var(--btn-hover); }

.empty-chat-list {
    padding: 18px;
    color: var(--text-secondary);
    font-size: 13px;
    text-align: center;
}

/* --- COTIZADOR: Mejoras Modo Oscuro para inputs editables --- */
body.dark-mode .input-editable {
    background: transparent;
    color: var(--text-primary);
}

body.dark-mode .input-editable:hover {
    background: #0b141a;
}

body.dark-mode .input-editable:focus {
    background: #111b21;
    color: var(--text-primary);
}

body.dark-mode .table-select {
    background: var(--bg-sidebar);
    color: var(--text-primary);
    border-color: var(--border-color);
}



/* === UI/Productividad: Toast, Compacto, Pin, Teclado === */
.toast-container{
  position: fixed;
  /*
    UX: mover los toasts lejos del panel de Respuestas Rápidas (lado derecho)
    para que no “tapen” tabs/botones.
    Los mostramos arriba-centro.
  */
  left: 50%;
  top: 14px;
  right: auto;
  bottom: auto;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Siempre por encima de paneles laterales (historial/nuevo cliente) */
  z-index: 2147483647;
  pointer-events: none;
}
.toast{
  pointer-events: none;
  background: rgba(0,0,0,0.80);
  color: #fff;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  max-width: 320px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  animation: toast-in 180ms ease-out;
}
@keyframes toast-in{ from{ transform: translateY(-8px); opacity: 0;} to{ transform: translateY(0); opacity: 1;} }

/* salida suave */
.toast.toast-out{ animation: toast-out 220ms ease-in forwards; }
@keyframes toast-out{ from{ transform: translateY(0); opacity: 1;} to{ transform: translateY(-6px); opacity: 0;} }

/* en pantallas pequeñas, que no se pegue al borde */
@media (max-width: 520px){
  .toast-container{ top: 10px; left: 50%; }
  .toast{ max-width: calc(100vw - 24px); }
}
body.dark-mode .toast{ background: rgba(15,20,24,0.90); }

/* Compact mode */
body.compact-mode .contact-item{ padding: 6px 8px; }
body.compact-mode .avatar{ width: 28px; height: 28px; font-size: 14px; }
body.compact-mode .contact-name{ font-size: 13.5px; }
body.compact-mode .contact-last-msg{ font-size: 11px; max-width: 165px; }
body.compact-mode .contact-time{ font-size: 9px; }

/* Pin button */
.chat-pin-btn{
  border: none;
  background: transparent;
  color: var(--text-secondary);
  padding: 4px 6px;
  border-radius: 8px;
  cursor: pointer;
}
.chat-pin-btn:hover{ background: var(--btn-hover); color: var(--text-primary); }
.chat-pin-btn.pinned{ color: #f1c40f; }

/* Keyboard focus on chat items */
.contact-item.kb-focus{ outline: 2px solid rgba(108,92,231,0.55); outline-offset: -2px; }

/* Chat header actions */
.header-info-text{ flex: 1; }
.header-actions{ margin-left: auto; display: flex; gap: 8px; }

/* ================================
   HEADER-UI-01 (Punto Seguro pendiente)
   - Oculta avatar en header
   - Número arriba (estilo título) y nombre abajo (estilo secundario)
   - Click en número copia +51 xxx xxx xxx
   - Oculta botón copiar número
================================== */
.header-top-row .avatar{ display:none !important; }
.header-info-text{ display:flex; flex-direction:column; gap:2px; }
#header-number{ order:-1; cursor:pointer; }
#header-number:hover{ text-decoration: underline; }
.header-info-text #header-number{ font-weight: bold !important; font-size: 16px !important; color: var(--text-primary) !important; }
.header-info-text #header-name{ font-size: 14px !important; color: var(--text-secondary) !important; font-weight: 500 !important; }
#btn-copy-number{ display:none !important; }

/* ================================
   UI-02 + UI-04A (Punto Seguro posterior a UI-01)
   - Respuestas rápidas alineadas abajo
   - Altura configurable de botones (CSS var)
   Cambia --qr-btn-height para ajustar.
================================== */
:root{
  --qr-btn-height: 38px;
}

.quick-list{
  justify-content: flex-end;
  padding: 3px 8px; gap: 2px; }

.quick-bubble{
  height: var(--qr-btn-height);
  min-height: var(--qr-btn-height);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 2px 8px; gap: 0px; overflow: hidden;
}

.quick-bubble strong,
.quick-bubble > div{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quick-bubble strong{ display: block; line-height: 1.03; margin: 0; }
.quick-bubble > div{ margin: 0; }
.quick-bubble > div{ line-height: 1.03; }

/* DnD visual (UI-03) */
.quick-bubble[draggable="true"]{ cursor: grab; }
.quick-bubble.qr-dragging{ opacity: 0.7; cursor: grabbing; }


/* FEAT-TYPING-01 */
.header-typing{
    font-size: 12px;
    opacity: 0.85;
    margin-top: 2px;
}

/* FEAT-PEDIDOS-01 */
.orders-pre{
    background: rgba(0,0,0,0.15);
    padding: 10px;
    border-radius: 12px;
    max-height: 220px;
    overflow: auto;
    margin: 10px 0;
    font-size: 12px;
}
.pedido-status{
    display:inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}
.pedido-status.activo{
    background: rgba(46, 204, 113, 0.15);
    color: #2ecc71;
}
.pedido-status.anulado{
    background: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
}
.btn-secondary{
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.18);
    color: inherit;
    padding: 6px 10px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 700;
}
.btn-secondary:hover{
    filter: brightness(1.08);
}

/* === PEDIDOS: detalle ordenado (UI-PEDIDOS-DETAIL-02) === */
#orders-detail, #orders-anulaciones {
    white-space: normal !important;
    word-break: break-word !important;
}

.orders-detail-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.orders-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.orders-detail-title-main {
    font-weight: 800;
    font-size: 14px;
    line-height: 1.2;
}

.orders-detail-title-sub {
    opacity: .8;
    font-size: 12px;
    line-height: 1.2;
}

.orders-detail-two-col {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}

@media (max-width: 900px) {
    .orders-detail-two-col { grid-template-columns: minmax(0, 1fr); }
}

.orders-kv {
    padding: 10px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    background: rgba(255,255,255,.02);
}

.orders-kv-label {
    opacity: .72;
    font-size: 12px;
    margin-bottom: 4px;
}

.orders-kv-value {
    font-weight: 700;
}

.orders-kv-value.strong {
    font-weight: 900;
    font-size: 16px;
}

.orders-kv-value.big {
    font-weight: 800;
    font-size: 15px;
}

.orders-detail-section-title {
    font-weight: 800;
    margin-top: 4px;
    margin-bottom: 8px;
}

.orders-detail-table-wrap {
    overflow: auto;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
}

.orders-detail-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 520px;
}

.orders-detail-table th {
    padding: 8px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    opacity: .85;
    text-align: left;
    white-space: nowrap;
}

.orders-detail-table td {
    padding: 8px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.orders-detail-table td.center,
.orders-detail-table th.center { text-align: center; }

.orders-detail-table td.right,
.orders-detail-table th.right { text-align: right; }



/* --- Historial (Ficha): líneas + acciones modernas (iconos a la derecha) --- */
#historial-ficha .historial-ficha-lines .hist-line{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    padding: 7px 0;
    border-top: 1px solid var(--border-color);
}
#historial-ficha .historial-ficha-lines .hist-line:first-of-type{
    border-top: none;
}

#historial-ficha .historial-ficha-lines .hist-line-value{
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 650;
    color: var(--text-primary);
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;
}

/* Link de Google Maps */
#historial-ficha a#historial-maps{
    color: var(--accent);
    text-decoration: none;
}
#historial-ficha a#historial-maps:hover{
    text-decoration: underline;
}
#historial-ficha a#historial-maps:visited{
    color: var(--accent);
}

/* Celeste en modo oscuro */
body.dark-mode #historial-ficha a#historial-maps,
body.dark-mode #historial-ficha a#historial-maps:visited{
    color: #5bc0ff;
}

#historial-ficha .historial-ficha-lines .hist-line-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
    flex-shrink:0;
}

#historial-ficha .hist-icon-btn{
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.05s ease;
}

#historial-ficha .hist-icon-btn:hover{
    background: var(--btn-hover);
    border-color: var(--border-color);
    color: var(--text-primary);
}

#historial-ficha .hist-icon-btn:active{
    transform: scale(0.98);
}

#historial-ficha .hist-icon-btn:disabled{
    opacity: 0.55;
    cursor: default;
}

#historial-ficha .hist-icon{
    width: 16px;
    height: 16px;
}

/* Evitar "fondos blancos" por estilos del navegador */
body.dark-mode #historial-ficha .hist-icon-btn{
    background: transparent;
}

/* --- HISTORIAL: Vínculos (Admin) - texto visible en dark mode --- */
body.dark-mode #historial-links-list button{
    color: #fff !important;
}

/* --- HISTORIAL: drawer comercial, compacto y con jerarquía operativa --- */
#historial-drawer.historial-modern-drawer {
    padding: 12px !important;
    background: var(--historial-drawer-bg) !important;
}

#historial-drawer .historial-drawer-header {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 2px 10px;
    border-bottom: 1px solid var(--border-color);
}

#historial-drawer .historial-drawer-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

#historial-drawer .historial-drawer-title-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border-color);
    border-radius: 11px;
    background: var(--bg-header);
    color: var(--text-primary);
}

#historial-drawer .historial-drawer-heading {
    font-size: 17px;
    font-weight: 900;
    line-height: 1.05;
}

#historial-drawer #historial-body {
    scrollbar-gutter: stable;
    padding: 10px 2px 2px !important;
}

#historial-drawer #historial-ficha,
#historial-drawer #historial-pack-actions {
    border: 1px solid var(--border-color) !important;
    border-radius: 14px !important;
    background: var(--bg-header) !important;
    box-shadow: 0 7px 22px rgba(0, 0, 0, .08);
}

#historial-drawer #historial-ficha {
    padding: 12px !important;
    margin-bottom: 10px !important;
}

#historial-drawer .historial-customer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

#historial-drawer .historial-customer-identity {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

#historial-drawer #historial-nombre {
    min-width: 0;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px !important;
    font-weight: 900 !important;
}

#historial-drawer #historial-phone {
    display: none;
}

#historial-drawer .historial-link-badge,
#historial-drawer #historial-links-head-status {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 9px !important;
    border: 1px solid rgba(0, 168, 132, .26);
    border-radius: 999px !important;
    background: rgba(0, 168, 132, .13) !important;
    color: #17b991 !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    white-space: nowrap;
}

#historial-drawer .historial-link-badge[data-state="unlinked"],
#historial-drawer #historial-links-head-status[data-state="unlinked"] {
    border-color: rgba(245, 158, 11, .30);
    background: rgba(245, 158, 11, .12) !important;
    color: #d97706 !important;
}

body.dark-mode #historial-drawer .historial-link-badge,
body.dark-mode #historial-drawer #historial-links-head-status {
    color: #65e2bd !important;
}

body.dark-mode #historial-drawer .historial-link-badge[data-state="unlinked"],
body.dark-mode #historial-drawer #historial-links-head-status[data-state="unlinked"] {
    color: #fbbf24 !important;
}

#historial-drawer .historial-copy-data-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 7px 11px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
    font-size: 12px !important;
}

#historial-drawer #historial-profile-box {
    margin-top: 11px !important;
    padding: 9px 10px;
    border: 1px solid var(--border-color);
    border-radius: 11px;
    background: var(--bg-primary);
}

#historial-drawer .historial-profile-label {
    display: block;
    margin-bottom: 5px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 850;
}

#historial-drawer #historial-profile-select {
    width: 100%;
    min-height: 36px;
    padding: 7px 10px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 9px !important;
    outline: none;
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    font-size: 12px !important;
    font-weight: 750;
}

#historial-drawer #historial-profile-select:focus-visible {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 2px rgba(0, 168, 132, .18);
}

#historial-drawer .historial-ficha-lines {
    margin-top: 8px !important;
}

#historial-drawer #historial-ficha .historial-ficha-lines .hist-line {
    align-items: center;
    min-height: 48px;
    padding: 7px 0;
    gap: 8px;
}

#historial-drawer .hist-line-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-primary);
    color: var(--text-secondary);
}

#historial-drawer .hist-line-content {
    flex: 1 1 auto;
    min-width: 0;
}

#historial-drawer .hist-line-label {
    display: block;
    margin-bottom: 2px;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 850;
    line-height: 1.15;
}

#historial-drawer #historial-ficha .historial-ficha-lines .hist-line-value {
    font-size: 12.5px;
    font-weight: 720;
}

#historial-drawer #historial-ficha .hist-icon-btn {
    width: 29px;
    height: 29px;
    border-radius: 8px;
}

#historial-drawer #historial-row-maps .hist-line-value {
    color: var(--accent);
}

#historial-drawer #historial-links-box {
    margin: 10px 0 0 !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 11px !important;
    background: var(--bg-primary) !important;
    box-shadow: none;
}

#historial-drawer .historial-links-head {
    min-height: 48px;
    padding: 7px 9px !important;
}

#historial-drawer #historial-links-head-phone {
    color: var(--text-secondary);
    font-size: 11px !important;
    font-weight: 850 !important;
}

#historial-drawer .historial-links-toggle-btn {
    min-height: 34px;
    padding: 6px 10px !important;
    border: 1px solid var(--primary-color) !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: var(--primary-color) !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 850;
}

#historial-drawer #historial-pack-actions {
    display: none !important;
    padding: 12px !important;
    margin: 0 0 12px !important;
}

#historial-drawer .historial-pack-title {
    color: var(--primary-color);
    font-size: 13px;
    font-weight: 950;
    letter-spacing: .015em;
    line-height: 1.3;
    text-transform: uppercase;
}

#historial-drawer .historial-pack-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 10px;
}

#historial-drawer .historial-pack-action-btn {
    min-width: 0;
    min-height: 54px !important;
    padding: 7px 6px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px !important;
}

#historial-drawer .historial-pack-action-btn > i {
    flex: 0 0 auto;
}

#historial-drawer .historial-province-btn {
    border: 1px solid rgba(255, 255, 255, .12) !important;
    background: #f97316 !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(249, 115, 22, .18) !important;
}

#historial-drawer .historial-holiday-btn {
    border-color: rgba(45, 212, 191, .65) !important;
}

#historial-drawer .historial-op-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    line-height: 1.12;
    text-align: center;
}

#historial-drawer .historial-op-copy .historial-op-main {
    font-weight: 900;
    white-space: nowrap;
}

#historial-drawer .historial-op-date {
    min-height: 12px;
    font-size: 9px;
    font-weight: 700;
    opacity: .82;
}

#historial-drawer .historial-orders-heading {
    display: flex;
    align-items: center;
    min-height: 30px;
    margin: 1px 2px 8px;
    font-size: 16px;
    font-weight: 900;
}

#historial-drawer #historial-list {
    gap: 13px !important;
}

#historial-drawer .historial-order-card {
    padding: 10px !important;
    border: 1px solid var(--historial-order-card-border) !important;
    border-radius: 12px !important;
    background: var(--historial-order-card-bg) !important;
    box-shadow: var(--historial-order-card-shadow);
}

#historial-drawer .historial-order-summary {
    display: block;
    min-width: 0;
}

#historial-drawer .historial-order-topline {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(96px, .8fr) auto;
    align-items: center;
    gap: 9px;
}

#historial-drawer .historial-order-identity,
#historial-drawer .historial-order-amount {
    min-width: 0;
}

#historial-drawer .historial-order-id,
#historial-drawer .historial-order-total-label {
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
}

#historial-drawer .historial-order-id {
    margin-bottom: 3px;
}

#historial-drawer .historial-erp-reference-button {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    margin: 0 0 3px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: .01em;
    text-align: left;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
    cursor: pointer;
}

#historial-drawer .historial-erp-reference-button[data-reference-state="erp"] {
    color: #20bfa3;
}

#historial-drawer .historial-erp-reference-button:hover,
#historial-drawer .historial-erp-reference-button:focus-visible {
    color: var(--accent-color, #00a884);
    text-decoration-style: solid;
    outline: none;
}

.historial-erp-detail-overlay {
    position: fixed;
    inset: 0;
    z-index: 100220;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 12px;
    background: rgba(2, 10, 19, .78);
    backdrop-filter: blur(2px);
}

.historial-erp-detail-dialog {
    display: flex;
    flex-direction: column;
    width: min(1180px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    overflow: hidden;
    border: 1px solid var(--border-color, #2d4051);
    border-radius: 15px;
    background: var(--bg-primary, #0b1724);
    color: var(--text-primary, #e8eef4);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .48);
}

.historial-erp-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 72px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color, #2d4051);
    background: var(--bg-sidebar, #111c39);
}

.historial-erp-detail-heading {
    min-width: 0;
}

.historial-erp-detail-heading h2 {
    margin: 0;
    overflow: hidden;
    color: var(--text-primary, #f4f7fb);
    font-size: 20px;
    font-weight: 900;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#historial-erp-detail-subtitle {
    margin-top: 5px;
    overflow: hidden;
    color: var(--text-secondary, #a9b8c8);
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.historial-erp-detail-close {
    display: inline-flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary, #b8c4cf);
    font-size: 26px;
    cursor: pointer;
}

.historial-erp-detail-close:hover,
.historial-erp-detail-close:focus-visible {
    background: rgba(255, 255, 255, .08);
    color: var(--text-primary, #fff);
    outline: 2px solid rgba(32, 191, 163, .55);
    outline-offset: 1px;
}

.historial-erp-detail-body {
    flex: 1;
    min-height: 180px;
    overflow: auto;
    padding: 12px;
}

.historial-erp-detail-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 260px;
    color: var(--text-secondary, #9fb0c0);
    font-size: 14px;
    font-weight: 800;
}

.historial-erp-detail-message {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(59, 130, 246, .38);
    border-radius: 10px;
    background: rgba(59, 130, 246, .10);
    color: var(--text-primary, #dbe8f4);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.historial-erp-detail-message.is-warning {
    border-color: rgba(245, 158, 11, .42);
    background: rgba(245, 158, 11, .11);
}

.historial-erp-detail-message.is-error {
    align-items: center;
    justify-content: center;
    min-height: 210px;
    border-color: rgba(239, 68, 68, .42);
    background: rgba(239, 68, 68, .10);
    color: #ef7777;
    font-size: 14px;
}

.historial-erp-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(380px, .85fr);
    align-items: start;
    gap: 10px;
}

.historial-erp-detail-column {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 10px;
}

.historial-erp-detail-card {
    overflow: hidden;
    border: 1px solid var(--border-color, #2b4055);
    border-radius: 12px;
    background: var(--bg-secondary, #0d1b2b);
    padding: 11px;
}

.historial-erp-detail-card h3 {
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color, #2b4055);
    color: var(--text-secondary, #9eafc1);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .01em;
    text-transform: uppercase;
}

.historial-erp-detail-card.is-cancelled {
    border-color: rgba(239, 68, 68, .55);
}

.historial-erp-detail-card.is-cancelled h3,
.historial-erp-detail-card.is-cancelled .historial-erp-observations {
    color: #ef7777;
}

.historial-erp-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px;
}

.historial-erp-info {
    min-width: 0;
}

.historial-erp-info.is-wide {
    grid-column: 1 / -1;
}

.historial-erp-info-label {
    margin-bottom: 3px;
    color: var(--text-secondary, #8194a7);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.historial-erp-info-value {
    overflow-wrap: anywhere;
    color: var(--text-primary, #e2e9f0);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    white-space: pre-wrap;
}

.historial-erp-observations {
    overflow-wrap: anywhere;
    color: var(--text-primary, #e2e9f0);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
    white-space: pre-wrap;
}

.historial-erp-products-wrap {
    overflow-x: auto;
}

.historial-erp-products-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--text-primary, #e2e9f0);
    font-size: 11px;
}

.historial-erp-products-table th,
.historial-erp-products-table td {
    padding: 8px 7px;
    border-bottom: 1px solid var(--border-color, #2b4055);
    text-align: left;
    vertical-align: middle;
}

.historial-erp-products-table th {
    color: var(--text-secondary, #90a2b5);
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
}

.historial-erp-products-table .is-center {
    text-align: center;
}

.historial-erp-products-table .is-money {
    text-align: right;
    white-space: nowrap;
}

.historial-erp-products-table .is-strong {
    font-weight: 900;
}

.historial-erp-products-empty {
    padding-block: 24px !important;
    color: var(--text-secondary, #90a2b5);
    text-align: center !important;
}

.historial-erp-detail-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 7px 2px;
    font-size: 16px;
    font-weight: 900;
}

.historial-erp-detail-total strong {
    color: #16a36a;
    font-size: 20px;
    white-space: nowrap;
}

.historial-erp-detail-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px 12px;
    min-height: 48px;
    padding: 9px 18px;
    border-top: 1px solid var(--border-color, #2b4055);
    background: var(--bg-sidebar, #101d2b);
    color: var(--text-secondary, #94a4b4);
    font-size: 11px;
}

.historial-erp-detail-footer[hidden] {
    display: none;
}

.historial-erp-audit-line {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.historial-erp-audit-badge {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #d29319;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
}

.historial-erp-audit-badge.is-procesado {
    background: #168a5d;
}

.historial-erp-audit-badge.is-anulado {
    background: #697586;
}

.historial-erp-audit-badge.is-modificado {
    background: #b87812;
}

@media (max-width: 880px) {
    .historial-erp-detail-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .historial-erp-detail-dialog {
        width: min(760px, calc(100vw - 18px));
        max-height: calc(100vh - 18px);
    }
}

@media (max-width: 560px) {
    .historial-erp-detail-overlay {
        padding: 5px;
    }

    .historial-erp-detail-dialog {
        width: calc(100vw - 10px);
        max-height: calc(100vh - 10px);
        border-radius: 11px;
    }

    .historial-erp-detail-header {
        min-height: 60px;
        padding: 10px 12px;
    }

    .historial-erp-detail-heading h2 {
        font-size: 17px;
    }

    .historial-erp-detail-body {
        padding: 7px;
    }

    .historial-erp-info-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .historial-erp-info.is-wide {
        grid-column: auto;
    }

    .historial-erp-detail-footer {
        padding-inline: 10px;
    }
}

#historial-drawer .historial-order-date {
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
    white-space: nowrap;
}

#historial-drawer .historial-order-total {
    margin-top: 3px;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
    white-space: nowrap;
}

#historial-drawer .historial-order-statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin: 8px -10px 0;
    padding: 7px 10px;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-header);
}

#historial-drawer .historial-order-pills {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
    margin: 0;
}

#historial-drawer .historial-order-pill {
    display: inline-flex;
    align-items: center;
    min-height: 21px;
    padding: 2px 7px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-header);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    text-transform: none;
}

#historial-drawer .historial-order-pill.is-active,
#historial-drawer .historial-order-pill.is-editable {
    border-color: rgba(0, 168, 132, .25);
    background: rgba(0, 168, 132, .13);
    color: #168d72;
}

#historial-drawer .historial-order-pill.is-editable {
    gap: 5px;
    margin-left: auto;
}

body.dark-mode #historial-drawer .historial-order-pill.is-active,
body.dark-mode #historial-drawer .historial-order-pill.is-editable {
    color: #65e2bd;
}

#historial-drawer .historial-order-pill.is-editable::before {
    content: none;
}

#historial-drawer .historial-order-pill.is-order-unprocessed,
#historial-drawer .historial-order-pill.is-order-processed,
#historial-drawer .historial-order-pill.is-order-warehouse,
#historial-drawer .historial-order-pill.is-order-preparation,
#historial-drawer .historial-order-pill.is-order-ready,
#historial-drawer .historial-order-pill.is-order-loaded,
#historial-drawer .historial-order-pill.is-order-route,
#historial-drawer .historial-order-pill.is-order-route-alert,
#historial-drawer .historial-order-pill.is-order-return,
#historial-drawer .historial-order-pill.is-order-delivered,
#historial-drawer .historial-order-pill.is-order-cancelled {
    color: #fff;
    font-weight: 950;
    box-shadow: 0 0 0 2px rgba(15, 23, 42, .1);
}

#historial-drawer .historial-order-pill.is-order-unprocessed {
    border-color: #dc2626;
    background: #dc2626;
}

#historial-drawer .historial-order-pill.is-order-processed {
    border-color: #0891b2;
    background: #0891b2;
}

#historial-drawer .historial-order-pill.is-order-warehouse {
    border-color: #ea580c;
    background: #ea580c;
}

#historial-drawer .historial-order-pill.is-order-preparation {
    border-color: #d97706;
    background: #d97706;
}

#historial-drawer .historial-order-pill.is-order-ready {
    border-color: #15803d;
    background: #15803d;
}

#historial-drawer .historial-order-pill.is-order-loaded {
    border-color: #7c3aed;
    background: #7c3aed;
}

#historial-drawer .historial-order-pill.is-order-route {
    border-color: #4f46e5;
    background: #4f46e5;
}

#historial-drawer .historial-order-pill.is-order-route-alert,
#historial-drawer .historial-order-pill.is-order-return {
    border-color: #c2410c;
    background: #c2410c;
}

#historial-drawer .historial-order-pill.is-order-delivered {
    border-color: #2563eb;
    background: #2563eb;
}

#historial-drawer .historial-order-pill.is-order-cancelled {
    border-color: #b91c1c;
    background: #b91c1c;
}

#historial-drawer .historial-order-pill.is-order-loading,
#historial-drawer .historial-order-pill.is-order-unavailable {
    opacity: .72;
    font-weight: 800;
}

#historial-drawer .historial-order-pill.is-billing-processed {
    border-color: #0f9f78;
    background: #0f9f78;
    color: #fff;
    box-shadow: 0 0 0 2px rgba(15, 159, 120, .16);
    font-weight: 950;
}

#historial-drawer .historial-order-pill.is-billing-pending,
#historial-drawer .historial-order-pill.is-billing-reprocess {
    border-color: rgba(217, 139, 0, .55);
    background: rgba(245, 158, 11, .16);
    color: #a96400;
    font-weight: 900;
}

body.dark-mode #historial-drawer .historial-order-pill.is-billing-pending,
body.dark-mode #historial-drawer .historial-order-pill.is-billing-reprocess {
    color: #ffd166;
}

#historial-drawer .historial-order-pill.is-billing-cancelled {
    border-color: rgba(220, 38, 38, .46);
    background: rgba(220, 38, 38, .14);
    color: #c72535;
    font-weight: 900;
}

body.dark-mode #historial-drawer .historial-order-pill.is-billing-cancelled {
    color: #ff8f9a;
}

#historial-drawer .historial-order-pill.is-billing-loading,
#historial-drawer .historial-order-pill.is-billing-unavailable {
    opacity: .72;
    font-weight: 800;
}

#historial-drawer .historial-order-linked-phone {
    color: var(--text-secondary);
    font-size: 11px;
}

#historial-drawer .historial-order-context {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
}

#historial-drawer .historial-order-cancellation {
    color: #f87171;
    font-size: 11px;
    line-height: 1.4;
}

#historial-drawer .historial-order-cancellation span {
    color: var(--text-secondary);
}

#historial-drawer .historial-order-detail {
    min-height: 34px;
    padding: 6px 9px !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border-color) !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
    font-size: 11px !important;
    font-weight: 850;
    white-space: nowrap;
}

#historial-drawer .historial-edit-closed {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    color: var(--text-secondary);
    font-size: 10.5px;
    font-weight: 700;
}

#historial-drawer .historial-pedido-edit-actions {
    margin-top: 9px !important;
}

#historial-drawer .historial-order-actions-heading {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

#historial-drawer .historial-order-actions-title {
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 950;
    line-height: 1.15;
}

#historial-drawer .historial-pedido-annul {
    min-height: 32px;
    padding: 6px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
    border: 1px solid #ef4444;
    border-radius: 9px !important;
    background: rgba(239, 68, 68, .07);
    color: #ef4444;
    box-shadow: none;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

#historial-drawer .historial-pedido-annul:hover,
#historial-drawer .historial-pedido-annul:focus-visible {
    background: rgba(239, 68, 68, .13);
}

#historial-drawer .historial-order-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 7px;
}

#historial-drawer .historial-pedido-edit-products,
#historial-drawer .historial-pedido-edit-delivery,
#historial-drawer .historial-pedido-edit-important,
#historial-drawer .historial-pedido-edit-location {
    box-sizing: border-box;
    min-width: 0;
    min-height: 78px;
    padding: 8px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(0, 168, 132, .78) !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
    text-align: left;
    cursor: pointer;
}

#historial-drawer .historial-pedido-edit-location {
    border-color: #2f80ed !important;
}

#historial-drawer .historial-pedido-edit-important {
    border-color: #d69b20 !important;
}

#historial-drawer .historial-pedido-edit-important .historial-order-action-icon {
    color: #d69b20;
}

#historial-drawer .historial-pedido-edit-important:hover,
#historial-drawer .historial-pedido-edit-important:focus-visible {
    background: rgba(214, 155, 32, .1) !important;
}

#historial-drawer .historial-pedido-edit-products:hover,
#historial-drawer .historial-pedido-edit-products:focus-visible,
#historial-drawer .historial-pedido-edit-delivery:hover,
#historial-drawer .historial-pedido-edit-delivery:focus-visible {
    background: rgba(0, 168, 132, .07) !important;
}

#historial-drawer .historial-pedido-edit-location:hover,
#historial-drawer .historial-pedido-edit-location:focus-visible {
    background: rgba(47, 128, 237, .08) !important;
}

#historial-drawer .historial-order-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0f9f78;
    font-size: 25px;
    line-height: 1;
}

#historial-drawer .historial-pedido-edit-location .historial-order-action-icon {
    color: #2f80ed;
}

#historial-drawer .historial-order-action-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#historial-drawer .historial-order-action-title {
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 950;
    line-height: 1.15;
}

#historial-drawer .historial-order-action-subtitle {
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
}

#historial-drawer .historial-order-detail-panel {
    margin-top: 9px !important;
    padding-top: 9px !important;
}

@media (max-width: 620px) {
    #historial-drawer.historial-modern-drawer {
        padding: 10px !important;
    }
    #historial-drawer #historial-nombre {
        max-width: 210px;
    }
    #historial-drawer .historial-customer-head {
        align-items: flex-start;
    }
    #historial-drawer .historial-order-topline {
        grid-template-columns: minmax(0, 1.2fr) minmax(88px, .8fr) auto;
        gap: 7px;
    }
    #historial-drawer .historial-pedido-edit-products,
    #historial-drawer .historial-pedido-edit-delivery,
    #historial-drawer .historial-pedido-edit-important,
    #historial-drawer .historial-pedido-edit-location {
        grid-template-columns: 27px minmax(0, 1fr);
        gap: 6px;
        padding: 7px;
    }
    #historial-drawer .historial-order-action-icon {
        font-size: 22px;
    }
}

@media (max-width: 430px) {
    #historial-drawer .historial-order-id,
    #historial-drawer .historial-order-total-label {
        font-size: 9px;
    }
    #historial-drawer .historial-order-date,
    #historial-drawer .historial-order-total {
        font-size: 11.5px;
    }
    #historial-drawer .historial-order-detail {
        min-height: 32px;
        padding: 5px 7px !important;
        font-size: 10px !important;
    }
    #historial-drawer .historial-order-statusbar {
        padding-block: 6px;
    }
    #historial-drawer .historial-pedido-edit-products,
    #historial-drawer .historial-pedido-edit-delivery,
    #historial-drawer .historial-pedido-edit-important,
    #historial-drawer .historial-pedido-edit-location {
        min-height: 66px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        text-align: center;
    }
    #historial-drawer .historial-order-action-subtitle {
        display: none;
    }
}

/* --- ADMIN: Combos / Promos - selects legibles en modo oscuro --- */
body.dark-mode #page-combos select.combo-item-product{
    background: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border-color: rgba(255,255,255,0.12) !important;
}
body.dark-mode #page-combos select.combo-item-product option{
    background: var(--bg-sidebar);
    color: var(--text-primary);
}

/* META-24H (WhatsApp Session Window) */
.header-24h-window{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 11px;
}
.header-24h-pill{
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,0.06);
    color: var(--text-secondary);
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}
.header-24h-pill.ok{
    background: rgba(46, 204, 113, 0.15);
    color: #2ecc71;
    border-color: rgba(46, 204, 113, 0.28);
}
.header-24h-pill.bad{
    background: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
    border-color: rgba(231, 76, 60, 0.28);
}
.header-24h-sub{
    opacity: 0.85;
    font-weight: 700;
    white-space: nowrap;
}

/* MULTI-SUCURSAL: Badge de sucursal en el header */
.header-branch-badge{
    display: inline-flex;
    align-items: center;
    align-self: flex-start; /* evita que se estire a todo el ancho (flex column default: stretch) */
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,0.06);
    color: var(--text-secondary);
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    margin-top: 4px;
    font-size: 11px;
    letter-spacing: 0.2px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.12);
}

.header-branch-badge::before{
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.9;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.08);
}
.header-branch-badge.lima{
    background: rgba(52, 152, 219, 0.14);
    color: #3498db;
    border-color: rgba(52, 152, 219, 0.28);
}
.header-branch-badge.arequipa{
    background: rgba(155, 89, 182, 0.14);
    color: #9b59b6;
    border-color: rgba(155, 89, 182, 0.28);
}
.header-branch-badge.unassigned{
    background:rgba(148,163,184,.12);
    color:var(--text-muted);
    border-color:rgba(148,163,184,.28);
}
.header-branch-badge.is-transferable{
    cursor:pointer;
}
.header-branch-badge.is-transferable:hover,
.header-branch-badge.is-transferable:focus-visible{
    transform:translateY(-1px);
    filter:brightness(1.12);
    outline:2px solid rgba(45,212,191,.32);
    outline-offset:2px;
}
.header-branch-badge.is-busy{
    cursor:wait;
    opacity:.65 !important;
    pointer-events:none;
}



/* HIDE-OPTIN-LEGACY-UI-01 */
/* Oculta solo la UI legacy/ruidosa en Marketing > Opt-in (sin borrar DOM, sin romper JS). */
/* Mantiene visible la Config Opt-in + botones/export que el CRM inserta por JS. */
#marketing-page-optin #mk-optin-report-box{
  display:none !important;
}

/* Legacy (toolbar + tarjetas + tabla) si aún existen en DOM (por fallback HTML). */
#marketing-page-optin .report-toolbar,
#marketing-page-optin .dash-card-v2,
#marketing-page-optin .table-responsive,
#marketing-page-optin #mk-optin-table{
  display:none !important;
}

/* FIX-OPTIN-KPIS-VISIBLE-01 */
/* Permite mostrar solo las tarjetas KPI nuevas dentro del bloque de rango Opt-in */
#marketing-page-optin #mk-optin-simple-range-box .dash-card-v2{
  display:flex !important;
}


/* ============================
   COTIZADOR (Familias) - UI POS táctil (drill-down)
   ============================ */
#cot-familias-panel.cot-pos{
  /* Ajustes rápidos POS (puedes editar estos valores sin tocar JS) */
  --pos-grid-min: 105px;     /* ancho mínimo de cada botón en la grilla (↓ = más botones por fila) */
  --pos-grid-gap: 2px;       /* espacio entre botones (↓ = más compacto) */
  --pos-grid-pad: 2px;       /* padding interno de la grilla */
  --pos-btn-minh: 56px;      /* alto mínimo del botón */
  --pos-btn-font: 9px;      /* tamaño de texto del botón */
  --pos-btn-pad-y: 10px;
  --pos-btn-pad-x: 8px;

  /* Altura natural según los botones de la vista activa. En un panel flex no se
     permite que una cotización larga lo comprima; si supera el límite de la
     pantalla, este panel conserva su propio desplazamiento. */
  flex:0 0 auto;
  height:auto;
  min-height:0;
  max-height:min(56vh, 520px);
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
}

#cot-familias-panel.cot-pos .cot-pos-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--pos-grid-gap);
  margin-bottom:8px;
}

#cot-familias-panel.cot-pos .cot-pos-back{
  display:none; /* se activa en vista productos */
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border-color);
  background:transparent;
  color:var(--text-primary);
  font-weight:900;
  cursor:pointer;
  user-select:none;
  touch-action:manipulation;
  flex:0 0 auto;
  white-space:nowrap;
}

#cot-familias-panel.cot-pos .cot-pos-titlebox{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  flex:1 1 auto;
}

#cot-familias-panel.cot-pos .cot-quote-profile-label{
  font-size:10px;
  line-height:1.1;
  font-weight:900;
  color:var(--text-secondary);
  text-transform:uppercase;
  letter-spacing:.03em;
}

#cot-familias-panel.cot-pos .cot-quote-profile-select{
  width:100%;
  min-height:30px;
  padding:5px 28px 5px 8px;
  border:1px solid var(--border-color);
  border-radius:8px;
  background:var(--bg-secondary);
  color:var(--text-primary);
  font-size:12px;
  font-weight:800;
}

#cot-familias-panel.cot-pos .cot-pos-title{
  font-size:16px;
  font-weight:1000;
  line-height:1.1;
  letter-spacing:0.2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#cot-familias-panel.cot-pos .cot-pos-status{
  font-size:12px;
  color:var(--text-secondary);
  min-height:14px;
}

#cot-familias-panel.cot-pos .cot-pos-pricemode{
  display:flex;
  gap:6px;
  flex:0 0 auto;
  flex-wrap:wrap;
  justify-content:flex-end;
}

#cot-familias-panel.cot-pos .cot-pos-pill{
  min-height:36px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--border-color);
  background:var(--bg-sidebar);
  color:var(--text-primary);
  font-weight:900;
  cursor:pointer;
  user-select:none;
  touch-action:manipulation;
}

#cot-familias-panel.cot-pos .cot-pos-pill.is-active{
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.18);
}

#cot-familias-panel.cot-pos .cot-pos-reorder{
  min-height:36px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--border-color);
  background:var(--bg-sidebar);
  color:var(--text-primary);
  font-weight:900;
  cursor:pointer;
  user-select:none;
  touch-action:manipulation;
}

#cot-familias-panel.cot-pos .cot-pos-reorder.is-active{
  box-shadow: inset 0 0 0 2px var(--accent-color);
}

#cot-familias-panel.cot-pos .cot-pos-drag-handle{
  display:none;
  position:absolute;
  top:6px;
  right:8px;
  font-size:12px;
  opacity:0.6;
  pointer-events:none;
}

#cot-familias-panel.cot-pos.cot-pos--reorder .cot-pos-drag-handle{
  display:block;
}

#cot-familias-panel.cot-pos.cot-pos--reorder .cot-pos-btn{
  cursor:grab;
  position:relative;
}

#cot-familias-panel.cot-pos.cot-pos--reorder .cot-pos-btn:active{
  transform:none;
}

#cot-familias-panel.cot-pos .cot-pos-btn.is-dragging{
  opacity:0.65;
}

#cot-familias-panel.cot-pos .cot-pos-subfamily-path{
  margin: 6px 0 10px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
#cot-familias-panel.cot-pos .cot-pos-hint{
  font-size:11px;
  color:var(--text-secondary);
  margin:4px 0 6px 0;
}

#cot-familias-panel.cot-pos .cot-pos-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(var(--pos-grid-min), 1fr));
  gap:var(--pos-grid-gap);
  padding:var(--pos-grid-pad);
  border-radius:12px;
  border:1px dashed rgba(255,255,255,0.08);
}

#cot-familias-panel.cot-pos.cot-pos--familias .cot-pos-grid{
  background: rgba(0, 209, 178, 0.08); /* color distinto: familias */
}

#cot-familias-panel.cot-pos.cot-pos--productos .cot-pos-grid{
  background: rgba(185, 92, 255, 0.10); /* color distinto: productos */
}

#cot-familias-panel.cot-pos .cot-pos-btn{
  min-height:var(--pos-btn-minh);
  padding:var(--pos-btn-pad-y) var(--pos-btn-pad-x);
  border-radius:14px;
  border:1px solid var(--border-color);
  background:var(--bg-sidebar);
  color:var(--text-primary);
  font-weight:1000;
  font-size:var(--pos-btn-font);
  line-height:1.1;
  text-align:center;
  cursor:pointer;
  user-select:none;
  touch-action:manipulation;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
}


#cot-familias-panel.cot-pos .cot-pos-btn:active{
  transform:scale(0.99);
}

#cot-familias-panel.cot-pos .cot-pos-name{
  display:block;
  width:100%;
  overflow:hidden;

  /* ✅ Permite hasta 2 líneas para el nombre (sin romper la grilla) */
  white-space:normal;
  word-break:break-word;
  line-height:1.1;

  /* Fallback (si no hay soporte para line-clamp): corta a ~2 líneas */
  max-height:2.2em;
}

/* Soporte real de ellipsis multi-línea (Chrome/Edge/Safari) */
@supports (-webkit-line-clamp: 2){
  #cot-familias-panel.cot-pos .cot-pos-name{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    max-height:none;
  }
}

#cot-familias-panel.cot-pos .cot-pos-sub{
  display:block;
  font-size:11px;
  font-weight:900;
  color:var(--text-secondary);
}

#cot-familias-panel.cot-pos .cot-pos-empty{
  grid-column:1 / -1;
  text-align:center;
  padding:18px 12px;
  color:var(--text-secondary);
  font-weight:900;
}

/* PATCH-COTI-FAM-READABLE-DARK-01
   Mejora legibilidad en modo oscuro (solo Cotizador > Familias)
*/
body.dark-mode #cot-familias-panel.cot-pos{
  --pos-btn-font: 10px; /* +1-2px para lectura */
}

body.dark-mode #cot-familias-panel.cot-pos .cot-pos-btn{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.14);
  font-weight: 500; /* menos bold */
}

body.dark-mode #cot-familias-panel.cot-pos .cot-pos-btn:hover{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.22);
}

body.dark-mode #cot-familias-panel.cot-pos .cot-pos-name{
  text-shadow: 0 1px 0 rgba(0,0,0,0.55);
}

body.dark-mode #cot-familias-panel.cot-pos .cot-pos-hint,
body.dark-mode #cot-familias-panel.cot-pos .cot-pos-sub{
  color: rgba(255,255,255,0.70);
}

@media (max-width: 520px){
  #cot-familias-panel.cot-pos .cot-pos-grid{
    grid-template-columns:repeat(auto-fill, minmax(110px, 1fr));
  }
}

/* ============================
   POS (Cotizador por familia) - Editor de texto por clic derecho (Admin)
   ============================ */
.cot-pos-label-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:14px;
  background:rgba(0,0,0,0.55);
  z-index:9999;
}

.cot-pos-label-card{
  width:min(460px, 92vw);
  border-radius:16px;
  border:1px solid var(--border-color);
  background:var(--bg-sidebar);
  color:var(--text-primary);
  box-shadow:0 18px 40px rgba(0,0,0,0.35);
  padding:14px;
}

.cot-pos-label-title{
  font-weight:1000;
  font-size:14px;
  margin-bottom:6px;
}

.cot-pos-label-meta{
  font-size:11px;
  color:var(--text-secondary);
  margin-bottom:10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.cot-pos-label-input{
  width:100%;
  border:1px solid var(--border-color);
  background:var(--bg-header);
  color:var(--text-primary);
  border-radius:12px;
  padding:12px;
  font-weight:900;
  font-size:13px;
  outline:none;
}

.cot-pos-label-actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  margin-top:12px;
  flex-wrap:wrap;
}

.cot-pos-label-btn{
  border:1px solid var(--border-color);
  background:var(--bg-header);
  color:var(--text-primary);
  border-radius:12px;
  padding:10px 12px;
  font-weight:1000;
  cursor:pointer;
  user-select:none;
  touch-action:manipulation;
}

.cot-pos-label-btn--ghost{
  opacity:0.95;
}

.cot-pos-label-btn--primary{
  box-shadow: inset 0 0 0 2px var(--accent-color);
}

/* UI-CROP-HANDLES-10PX-CIRCLE-01: CropperJS handles 10px circulares (solo editor) */
#editor-modal .cropper-point{
  width: 10px !important;
  height: 10px !important;
  border-radius: 999px !important;
  opacity: 1 !important;
  /* Mejor visibilidad sin cambiar colores del tema */
  box-shadow: 0 0 0 2px rgba(0,0,0,.12);
}
/* Esquinas */
#editor-modal .cropper-point.point-nw{ top: -5px !important; left: -5px !important; }
#editor-modal .cropper-point.point-ne{ top: -5px !important; right: -5px !important; }
#editor-modal .cropper-point.point-sw{ bottom: -5px !important; left: -5px !important; }
#editor-modal .cropper-point.point-se{ bottom: -5px !important; right: -5px !important; }
/* Lados */
#editor-modal .cropper-point.point-n{ top: -5px !important; left: 50% !important; margin-left: -5px !important; }
#editor-modal .cropper-point.point-s{ bottom: -5px !important; left: 50% !important; margin-left: -5px !important; }
#editor-modal .cropper-point.point-e{ right: -5px !important; top: 50% !important; margin-top: -5px !important; }
#editor-modal .cropper-point.point-w{ left: -5px !important; top: 50% !important; margin-top: -5px !important; }


/* =========================
   PROGRAMADOS (Chat scheduler)
   ========================= */

.chat-context-menu{
    position: fixed;
    z-index: 5000;
    min-width: 190px;
    background: var(--bg-sidebar);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    padding: 6px;
}

.chat-context-menu .ccm-item{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    color: var(--text-primary);
    font-weight: 800;
    font-size: 13px;
}

.chat-context-menu .ccm-item i{
    width: 16px;
    text-align: center;
    opacity: 0.9;
}

.chat-context-menu .ccm-item:hover{
    background: var(--btn-hover);
}

.programados-table{
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.programados-table th{
    text-align: left;
    font-size: 12px;
    color: var(--text-secondary);
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
}

.programados-table td{
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 13px;
    vertical-align: top;
}

.programados-table tr:last-child td{
    border-bottom: none;
}

.programados-empty{
    text-align: center;
    color: var(--text-secondary);
    padding: 18px 10px;
}

/* Emoji panel: barra de recientes (abajo) */
#emoji-panel .emoji-recent-wrap{
    /* el panel en sí usa estilos inline; aquí solo afinamos la barra */
    user-select: none;
}

#emoji-panel .emoji-recent-grid{
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: hidden;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}

#emoji-panel .emoji-recent-grid button{
    flex: 0 0 auto;
}

#emoji-panel .emoji-recent-grid::-webkit-scrollbar{
    height: 6px;
}

#emoji-panel .emoji-recent-grid::-webkit-scrollbar-thumb{
    border-radius: 10px;
    background: rgba(128,128,128,0.35);
}



/* ===== Visor PDF de catálogo (clic derecho en QR PDF) ===== */
#pdf-catalog-modal { align-items:center; justify-content:center; }
#pdf-catalog-modal .pdf-catalog-content {
  width: min(1180px, 96vw);
  height: min(92vh, 920px);
  background: var(--bg-chat);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  overflow: hidden;
  display:flex;
  flex-direction:column;
  box-shadow: 0 24px 64px rgba(0,0,0,.35);
}
#pdf-catalog-modal .pdf-catalog-header {
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding: 14px 16px 12px; background: var(--bg-header); border-bottom:1px solid var(--border-color);
}
#pdf-catalog-modal .pdf-catalog-title-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
#pdf-catalog-modal .pdf-catalog-title { font-size: 18px; font-weight: 700; }
#pdf-catalog-modal .pdf-catalog-meta { font-size: 12px; color: var(--text-secondary); }
#pdf-catalog-modal .pdf-catalog-subtitle { margin-top:4px; font-size: 12px; color: var(--text-secondary); }
#pdf-catalog-modal .pdf-catalog-header-actions { display:flex; gap:8px; }
#pdf-catalog-modal .pdf-catalog-toolbar {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding: 10px 14px; background: var(--bg-sidebar); border-bottom:1px solid var(--border-color);
}
#pdf-catalog-modal .pdf-catalog-toolgroup { display:flex; align-items:center; gap:8px; }
#pdf-catalog-modal .pdf-catalog-toolbar-sep { width:1px; height:28px; background: var(--border-color); }
#pdf-catalog-modal .pdf-catalog-toolbar-spacer { flex:1; }
#pdf-catalog-modal .pdf-catalog-hint { font-size: 12px; color: var(--text-secondary); }
#pdf-catalog-modal .pdf-catalog-zoom-label { min-width: 56px; text-align:center; font-size: 12px; color: var(--text-secondary); }
#pdf-catalog-modal .pdf-catalog-body { position:relative; flex:1; min-height:0; background:#0f1115; }
#pdf-catalog-modal .pdf-catalog-status {
  position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:3;
  background: rgba(15,17,21,.86); color:#fff; padding:7px 12px; border-radius: 999px;
  font-size:12px; display:none; box-shadow:0 4px 16px rgba(0,0,0,.3);
}
#pdf-catalog-modal .pdf-catalog-pages {
  position:absolute;
  inset:0;
  overflow:auto;
  padding: 18px 16px 30px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}
#pdf-catalog-modal .pdf-page-wrap {
  position:relative;
  flex:0 0 auto;
  background:#fff;
  border-radius: 10px;
  box-shadow:0 10px 26px rgba(0,0,0,.28);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}
#pdf-catalog-modal .pdf-page-head { display:none; }
#pdf-catalog-modal .pdf-page-canvas-wrap {
  position:relative;
  display:block;
  line-height:0;
  background:#fff;
  overflow:hidden;
}
#pdf-catalog-modal .pdf-page-canvas-wrap.is-loading {
  min-width:240px;
  min-height:320px;
}
#pdf-catalog-modal .pdf-page-canvas-wrap.is-loading::before {
  content: 'Renderizando página...';
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #475569; font-size: 13px; background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  z-index: 0;
}
#pdf-catalog-modal .pdf-page-image {
  display:block;
  width:100%;
  height:100%;
  background:#fff;
  user-select:none;
  pointer-events:none;
}
#pdf-catalog-modal .pdf-page-overlay {
  position:absolute;
  inset:0;
  z-index: 2;
  cursor:crosshair;
  user-select:none;
  touch-action:none;
}
#pdf-catalog-modal .pdf-selection-box {
  position:absolute; border:2px solid #2ecc71; background: rgba(46,204,113,.18);
  box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset; display:none; z-index: 3;
  pointer-events:none;
}
#pdf-catalog-modal .pdf-page-wrap.is-selected { box-shadow:0 0 0 2px rgba(46,204,113,.55), 0 10px 26px rgba(0,0,0,.28); }
#pdf-catalog-modal .pdf-page-error {
  display: none;
  padding: 14px 16px;
  color: #991b1b;
  background: #fef2f2;
  border-top: 1px solid #fecaca;
  font-size: 13px;
}
#pdf-catalog-modal .pdf-page-wrap.has-error .pdf-page-error { display: block; }
@media (max-width: 900px) {
  #pdf-catalog-modal .pdf-catalog-content { width: 98vw; height: 94vh; border-radius: 14px; }
  #pdf-catalog-modal .pdf-catalog-toolbar { gap:8px; }
  #pdf-catalog-modal .pdf-catalog-toolbar-spacer { display:none; }
}


/* PATCH-HEADER-COMPACT-FICHA-01
   Header compacto + ficha activa visible (UI-only). */
.chat-header{
  min-height: 76px !important;
  padding: 7px 14px 8px !important;
  gap: 6px !important;
  justify-content: flex-start !important;
}
.header-top-row{
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-width: 0 !important;
}
.header-info-text{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: 1px !important;
}
.header-info-text #header-number{
  font-size: 16px !important;
  line-height: 1.15 !important;
  letter-spacing: .2px !important;
}
.header-info-text #header-name{
  font-size: 13px !important;
  line-height: 1.15 !important;
  max-width: 360px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#header-fbads-line{
  max-width: 560px !important;
  margin-top: 2px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.header-status-row{
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px 6px !important;
  margin-top: 4px !important;
  min-height: 20px !important;
  max-width: 100% !important;
}
.header-branch-badge,
#header-bsuid-badge,
.header-24h-window,
.header-ficha-badge{
  margin-top: 0 !important;
  align-self: center !important;
}
.header-branch-badge,
#header-bsuid-badge,
.header-ficha-badge,
.header-24h-pill{
  min-height: 19px !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  font-size: 10.5px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  box-sizing: border-box !important;
}
#header-bsuid-badge{
  width: auto !important;
  max-width: 210px !important;
  border-color: rgba(251, 146, 60, .38) !important;
  background: rgba(251, 146, 60, .13) !important;
  color: #fb923c !important;
}
.header-ficha-badge{
  display: inline-flex;
  align-items: center;
  max-width: 260px;
  border: 1px solid rgba(148, 163, 184, .30);
  background: rgba(148, 163, 184, .12);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header-24h-window{
  gap: 5px !important;
  font-size: 10.5px !important;
}
.header-24h-sub{
  font-size: 10.5px !important;
  line-height: 1.15 !important;
}
.header-actions{
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  gap: 7px !important;
  margin-left: 10px !important;
  max-width: 48% !important;
  flex-wrap: wrap !important;
}
#doc-type-selector,
#ship-type-selector{
  gap: 5px !important;
  margin-right: 4px !important;
  flex-wrap: nowrap !important;
}
#doc-type-selector button,
#ship-type-selector button{
  padding: 5px 10px !important;
  min-height: 26px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  box-shadow: none !important;
}
.header-actions .btn-icon{
  min-width: 30px !important;
  width: 30px !important;
  height: 30px !important;
  font-size: 18px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#btn-bsuid-request-contact{
  width: auto !important;
  height: 30px !important;
  padding: 0 8px !important;
  font-size: 13px !important;
}
.tag-controls{
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
}
.tag-controls .chip-group{
  flex: 0 0 auto !important;
}
.tag-controls .chip{
  padding: 5px 12px !important;
  min-height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}
.tag-controls .tag-select{
  flex: 0 1 260px !important;
  min-width: 170px !important;
  height: 25px !important;
  padding: 2px 8px !important;
}
.tag-controls .btn-save{
  min-height: 25px !important;
}

@media (max-width: 1150px){
  .header-actions{ max-width: 55% !important; gap: 5px !important; }
  #doc-type-selector button,
  #ship-type-selector button{ padding: 5px 7px !important; font-size: 10.5px !important; }
  .header-ficha-badge{ max-width: 190px; }
  #header-fbads-line{ max-width: 380px !important; }
}

/* PATCH-HEADER-RIGHT-ACTIONS-02
   Mejora visual del bloque derecho del header.
   - Agrupa comprobante/envio/iconos en una sola zona compacta.
   - Aumenta los 2 botones frecuentes: crear cliente e historial.
   UI-only: no cambia eventos ni logica. */
.chat-header .header-top-row{
  align-items: flex-start !important;
}
.chat-header .header-actions{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 7px !important;
  flex-wrap: nowrap !important;
  max-width: none !important;
  margin-left: 12px !important;
  padding: 5px 8px !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  border-radius: 18px !important;
  background: rgba(15, 23, 42, .16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important;
}
#doc-type-selector,
#ship-type-selector{
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-right: 0 !important;
  padding: 2px !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, .13) !important;
  border: 1px solid rgba(148, 163, 184, .12) !important;
  flex-wrap: nowrap !important;
}
#doc-type-selector button,
#ship-type-selector button{
  min-height: 27px !important;
  padding: 6px 11px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  letter-spacing: .15px !important;
  line-height: 1 !important;
}
#btn-cliente-nuevo,
#btn-historial{
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  font-size: 22px !important;
  color: var(--text-secondary) !important;
  background: rgba(148, 163, 184, .10) !important;
  border: 1px solid rgba(148, 163, 184, .16) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: .98 !important;
  transition: background .15s ease, color .15s ease, transform .12s ease, border-color .15s ease !important;
}
#btn-cliente-nuevo{
  margin-left: 4px !important;
}
#btn-cliente-nuevo:hover,
#btn-historial:hover{
  color: var(--text-primary) !important;
  background: rgba(0, 168, 132, .16) !important;
  border-color: rgba(0, 168, 132, .30) !important;
  transform: translateY(-1px) !important;
}
#btn-cliente-nuevo i,
#btn-historial i{
  font-size: 22px !important;
  line-height: 1 !important;
}
#btn-copy-number{
  display: none !important;
}

@media (max-width: 1280px){
  .chat-header .header-actions{
    gap: 5px !important;
    padding: 4px 6px !important;
  }
  #doc-type-selector button,
  #ship-type-selector button{
    padding: 6px 8px !important;
    font-size: 10.5px !important;
  }
  #btn-cliente-nuevo,
  #btn-historial{
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    font-size: 20px !important;
  }
  #btn-cliente-nuevo i,
  #btn-historial i{
    font-size: 20px !important;
  }
}

/* PATCH-HEADER-ACTION-BUTTONS-03
   Igualar los 3 botones frecuentes del header con color pastel.
   UI-only: no cambia eventos ni logica. */
.chat-header .header-actions #btn-cliente-nuevo,
.chat-header .header-actions #btn-historial,
.chat-header .header-actions #btn-copy-number{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  border-radius: 14px !important;
  border: 1px solid rgba(148, 163, 184, .24) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 2px rgba(0,0,0,.12) !important;
  opacity: .98 !important;
  transition: background .15s ease, color .15s ease, transform .12s ease, border-color .15s ease, box-shadow .15s ease !important;
}
.chat-header .header-actions #btn-cliente-nuevo{
  margin-left: 4px !important;
  color: #8fd8c8 !important;
  background: rgba(143, 216, 200, .15) !important;
  border-color: rgba(143, 216, 200, .26) !important;
}
.chat-header .header-actions #btn-historial{
  color: #9bbcf2 !important;
  background: rgba(155, 188, 242, .14) !important;
  border-color: rgba(155, 188, 242, .25) !important;
}
.chat-header .header-actions #btn-copy-number{
  color: #c7a7ee !important;
  background: rgba(199, 167, 238, .14) !important;
  border-color: rgba(199, 167, 238, .25) !important;
}
.chat-header .header-actions #btn-cliente-nuevo:hover,
.chat-header .header-actions #btn-historial:hover,
.chat-header .header-actions #btn-copy-number:hover{
  color: var(--text-primary) !important;
  transform: translateY(-1px) !important;
  border-color: rgba(255,255,255,.26) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 3px 7px rgba(0,0,0,.18) !important;
}
.chat-header .header-actions #btn-cliente-nuevo:hover{
  background: rgba(143, 216, 200, .23) !important;
}
.chat-header .header-actions #btn-historial:hover{
  background: rgba(155, 188, 242, .22) !important;
}
.chat-header .header-actions #btn-copy-number:hover{
  background: rgba(199, 167, 238, .22) !important;
}
.chat-header .header-actions #btn-cliente-nuevo i,
.chat-header .header-actions #btn-historial i,
.chat-header .header-actions #btn-copy-number i{
  font-size: 21px !important;
  line-height: 1 !important;
}

@media (max-width: 1280px){
  .chat-header .header-actions #btn-cliente-nuevo,
  .chat-header .header-actions #btn-historial,
  .chat-header .header-actions #btn-copy-number{
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    border-radius: 13px !important;
  }
  .chat-header .header-actions #btn-cliente-nuevo i,
  .chat-header .header-actions #btn-historial i,
  .chat-header .header-actions #btn-copy-number i{
    font-size: 20px !important;
  }
}


/* PATCH-HEADER-ACTION-BUTTONS-04-FIX-HISTORIAL-STATE
   Corrige el botón visible de Packs, vuelve a ocultar copiar número
   y colorea Historial según pedidos previos. UI-only. */
.chat-header .header-actions #btn-copy-number{
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.chat-header .header-actions #btn-cliente-nuevo,
.chat-header .header-actions #btn-historial,
.chat-header .header-actions #btn-packs-header{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  border-radius: 14px !important;
  border: 1px solid rgba(148, 163, 184, .24) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 2px rgba(0,0,0,.12) !important;
  opacity: .98 !important;
  transition: background .15s ease, color .15s ease, transform .12s ease, border-color .15s ease, box-shadow .15s ease !important;
}
.chat-header .header-actions #btn-cliente-nuevo{
  margin-left: 4px !important;
  color: #8fd8c8 !important;
  background: rgba(143, 216, 200, .15) !important;
  border-color: rgba(143, 216, 200, .26) !important;
}
.chat-header .header-actions #btn-historial{
  color: #b7c3d7 !important;
  background: rgba(148, 163, 184, .12) !important;
  border-color: rgba(148, 163, 184, .24) !important;
}
.chat-header .header-actions #btn-historial.historial-state-has{
  color: #94c8ff !important;
  background: rgba(59, 130, 246, .20) !important;
  border-color: rgba(96, 165, 250, .42) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(96,165,250,.10), 0 2px 7px rgba(37,99,235,.16) !important;
}
.chat-header .header-actions #btn-historial.historial-state-none{
  color: #ffb4b4 !important;
  background: rgba(239, 68, 68, .18) !important;
  border-color: rgba(248, 113, 113, .42) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(248,113,113,.08), 0 2px 7px rgba(185,28,28,.13) !important;
}
.chat-header .header-actions #btn-historial.historial-state-checking{
  color: #c7d2fe !important;
  background: rgba(129, 140, 248, .13) !important;
  border-color: rgba(165, 180, 252, .25) !important;
}
.chat-header .header-actions #btn-packs-header{
  color: #f4c989 !important;
  background: rgba(244, 201, 137, .15) !important;
  border-color: rgba(244, 201, 137, .28) !important;
}
.chat-header .header-actions #btn-cliente-nuevo:hover,
.chat-header .header-actions #btn-historial:hover,
.chat-header .header-actions #btn-packs-header:hover{
  color: var(--text-primary) !important;
  transform: translateY(-1px) !important;
  border-color: rgba(255,255,255,.28) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 3px 7px rgba(0,0,0,.18) !important;
}
.chat-header .header-actions #btn-cliente-nuevo:hover{
  background: rgba(143, 216, 200, .23) !important;
}
.chat-header .header-actions #btn-historial.historial-state-has:hover{
  background: rgba(59, 130, 246, .29) !important;
}
.chat-header .header-actions #btn-historial.historial-state-none:hover{
  background: rgba(239, 68, 68, .26) !important;
}
.chat-header .header-actions #btn-historial.historial-state-checking:hover,
.chat-header .header-actions #btn-historial:hover{
  background: rgba(129, 140, 248, .20) !important;
}
.chat-header .header-actions #btn-packs-header:hover{
  background: rgba(244, 201, 137, .24) !important;
}
.chat-header .header-actions #btn-cliente-nuevo i,
.chat-header .header-actions #btn-historial i,
.chat-header .header-actions #btn-packs-header i{
  font-size: 21px !important;
  line-height: 1 !important;
}

@media (max-width: 1280px){
  .chat-header .header-actions #btn-cliente-nuevo,
  .chat-header .header-actions #btn-historial,
  .chat-header .header-actions #btn-packs-header{
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    border-radius: 13px !important;
  }
  .chat-header .header-actions #btn-cliente-nuevo i,
  .chat-header .header-actions #btn-historial i,
  .chat-header .header-actions #btn-packs-header i{
    font-size: 20px !important;
  }
}

/* PATCH-HISTORIAL-BUTTON-NEON-05
   Intensifica el estado visual del botón Historial.
   UI-only: no cambia eventos ni lógica. */
.chat-header .header-actions #btn-copy-number{
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.chat-header .header-actions #btn-historial.historial-state-has{
  color: #e8f7ff !important;
  background: linear-gradient(135deg, rgba(0, 180, 255, .55), rgba(37, 99, 235, .42)) !important;
  border-color: rgba(56, 189, 248, .88) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 0 0 1px rgba(56,189,248,.26),
    0 0 10px rgba(56,189,248,.42),
    0 3px 8px rgba(0,0,0,.22) !important;
}
.chat-header .header-actions #btn-historial.historial-state-has i{
  color: #e8f7ff !important;
  text-shadow: 0 0 6px rgba(125, 211, 252, .75) !important;
}
.chat-header .header-actions #btn-historial.historial-state-none{
  color: #fff1f2 !important;
  background: linear-gradient(135deg, rgba(255, 46, 99, .55), rgba(220, 38, 38, .42)) !important;
  border-color: rgba(251, 113, 133, .88) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 0 0 1px rgba(251,113,133,.24),
    0 0 10px rgba(251,113,133,.40),
    0 3px 8px rgba(0,0,0,.22) !important;
}
.chat-header .header-actions #btn-historial.historial-state-none i{
  color: #fff1f2 !important;
  text-shadow: 0 0 6px rgba(251, 113, 133, .72) !important;
}
.chat-header .header-actions #btn-historial.historial-state-checking{
  color: #dbe4ff !important;
  background: rgba(129, 140, 248, .18) !important;
  border-color: rgba(165, 180, 252, .34) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 1px 4px rgba(0,0,0,.16) !important;
}
.chat-header .header-actions #btn-historial.historial-state-has:hover{
  background: linear-gradient(135deg, rgba(0, 198, 255, .66), rgba(37, 99, 235, .52)) !important;
  border-color: rgba(125, 211, 252, .96) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 0 0 1px rgba(125,211,252,.30),
    0 0 13px rgba(56,189,248,.50),
    0 4px 10px rgba(0,0,0,.24) !important;
}
.chat-header .header-actions #btn-historial.historial-state-none:hover{
  background: linear-gradient(135deg, rgba(255, 64, 129, .66), rgba(220, 38, 38, .52)) !important;
  border-color: rgba(253, 164, 175, .96) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 0 0 1px rgba(253,164,175,.28),
    0 0 13px rgba(251,113,133,.48),
    0 4px 10px rgba(0,0,0,.24) !important;
}

/* PATCH-BSUID-PHONE-ICON-01
   La solicitud de teléfono usa el mismo formato cuadrado de las demás
   acciones del encabezado. La visibilidad continúa controlada por chat.js. */
.chat-header .header-actions #btn-bsuid-request-contact{
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  gap: 0 !important;
  border-radius: 14px !important;
  color: #9dd8ea !important;
  background: rgba(56, 189, 248, .14) !important;
  border: 1px solid rgba(125, 211, 252, .30) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 2px rgba(0,0,0,.12) !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .15s ease, color .15s ease, transform .12s ease, border-color .15s ease, box-shadow .15s ease !important;
}
.chat-header .header-actions #btn-bsuid-request-contact i{
  font-size: 21px !important;
  line-height: 1 !important;
}
.chat-header .header-actions #btn-bsuid-request-contact:hover:not(:disabled){
  color: var(--text-primary) !important;
  background: rgba(56, 189, 248, .23) !important;
  border-color: rgba(125, 211, 252, .48) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 3px 7px rgba(0,0,0,.18) !important;
  transform: translateY(-1px) !important;
}
.chat-header .header-actions #btn-bsuid-request-contact:disabled{
  opacity: .55 !important;
  cursor: not-allowed !important;
  transform: none !important;
}
@media (max-width: 1280px){
  .chat-header .header-actions #btn-bsuid-request-contact{
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    border-radius: 13px !important;
  }
  .chat-header .header-actions #btn-bsuid-request-contact i{
    font-size: 20px !important;
  }
}

/* PATCH-HEADER-FICHA-SYNC-02: ficha activa con mayor énfasis visual */
.header-ficha-badge{
  border-color: rgba(250, 204, 21, .62) !important;
  background: linear-gradient(135deg, rgba(250, 204, 21, .22), rgba(245, 158, 11, .15)) !important;
  color: #fde68a !important;
  font-weight: 950 !important;
  letter-spacing: .35px !important;
  min-height: 22px !important;
  padding: 3px 10px !important;
  box-shadow: 0 0 0 1px rgba(250, 204, 21, .16), 0 0 12px rgba(250, 204, 21, .20) !important;
}
.header-ficha-badge::before{
  content: '📌';
  display: inline-flex;
  align-items: center;
  margin-right: 5px;
  font-size: 11px;
  line-height: 1;
}
body:not(.dark-mode) .header-ficha-badge{
  color: #92400e !important;
  background: linear-gradient(135deg, rgba(254, 243, 199, .98), rgba(253, 230, 138, .78)) !important;
  border-color: rgba(217, 119, 6, .42) !important;
  box-shadow: 0 0 0 1px rgba(217, 119, 6, .10), 0 0 10px rgba(217, 119, 6, .16) !important;
}


/* PATCH-HEADER-BADGES-QUIET-03: baja ruido de BSUID, ficha amarillo pastel y resalta sucursal */
.header-status-row{
  gap: 3px 5px !important;
  margin-top: 3px !important;
}
#header-bsuid-badge.bsuid-confirmed{
  max-width: 62px !important;
  min-height: 17px !important;
  padding: 1px 6px !important;
  border-color: rgba(148, 163, 184, .22) !important;
  background: rgba(148, 163, 184, .07) !important;
  color: var(--text-secondary) !important;
  opacity: .72 !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: .1px !important;
  box-shadow: none !important;
}
#header-bsuid-badge.bsuid-unconfirmed{
  max-width: 230px !important;
  min-height: 19px !important;
  padding: 2px 8px !important;
  border-color: rgba(251, 146, 60, .52) !important;
  background: rgba(251, 146, 60, .15) !important;
  color: #fb923c !important;
  opacity: 1 !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
}
.header-ficha-badge{
  max-width: 210px !important;
  min-height: 18px !important;
  padding: 2px 8px !important;
  border-color: rgba(250, 204, 21, .38) !important;
  background: linear-gradient(135deg, rgba(254, 240, 138, .18), rgba(251, 191, 36, .10)) !important;
  color: #fde68a !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  letter-spacing: .05px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important;
}
.header-ficha-badge::before{
  content: none !important;
  display: none !important;
}
body:not(.dark-mode) .header-ficha-badge{
  color: #854d0e !important;
  background: linear-gradient(135deg, rgba(254, 243, 199, .98), rgba(253, 230, 138, .76)) !important;
  border-color: rgba(245, 158, 11, .34) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.70) !important;
}
.header-branch-badge{
  min-height: 20px !important;
  padding: 2px 9px !important;
  font-size: 10.8px !important;
  font-weight: 900 !important;
  letter-spacing: .25px !important;
  opacity: 1 !important;
  border-width: 1px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 0 1px rgba(255,255,255,.04),
    0 0 10px rgba(56,189,248,.18) !important;
}
.header-branch-badge::before{
  opacity: 1 !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,.08), 0 0 8px currentColor !important;
}
.header-branch-badge.lima{
  background: linear-gradient(135deg, rgba(14, 165, 233, .30), rgba(37, 99, 235, .18)) !important;
  color: #7dd3fc !important;
  border-color: rgba(125, 211, 252, .56) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 0 0 1px rgba(125,211,252,.10),
    0 0 12px rgba(56,189,248,.28) !important;
}
.header-branch-badge.arequipa{
  background: linear-gradient(135deg, rgba(168, 85, 247, .32), rgba(126, 34, 206, .20)) !important;
  color: #d8b4fe !important;
  border-color: rgba(216, 180, 254, .58) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 0 0 1px rgba(216,180,254,.10),
    0 0 12px rgba(192,132,252,.28) !important;
}
body:not(.dark-mode) .header-branch-badge.lima{
  background: linear-gradient(135deg, rgba(186, 230, 253, .98), rgba(147, 197, 253, .74)) !important;
  color: #075985 !important;
  border-color: rgba(14, 116, 144, .38) !important;
}
body:not(.dark-mode) .header-branch-badge.arequipa{
  background: linear-gradient(135deg, rgba(233, 213, 255, .98), rgba(216, 180, 254, .74)) !important;
  color: #6b21a8 !important;
  border-color: rgba(126, 34, 206, .38) !important;
}
.header-branch-badge.is-busy{
  opacity:.65 !important;
}


/* =========================================================
   Panel App > Cotizador: editor visual del catálogo público
   ========================================================= */
.appcat-shell{
  display:flex;
  flex-direction:column;
  gap:14px;
  color:var(--text-main);
}
.appcat-head{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
  background:var(--bg-header);
  border:1px solid var(--border-color);
  border-radius:12px;
  padding:14px 16px;
}
.appcat-head h3{
  margin:0 0 6px 0;
  font-size:18px;
  color:var(--text-main);
}
.appcat-head p{
  margin:0;
  color:var(--text-secondary);
  font-size:13px;
  line-height:1.45;
  max-width:760px;
}
.appcat-status{
  min-width:210px;
  padding:8px 10px;
  border-radius:10px;
  background:rgba(32,201,151,.10);
  border:1px solid rgba(32,201,151,.24);
  color:#9ff4d5;
  font-size:12px;
  line-height:1.35;
}
.appcat-toolbar{
  display:flex;
  gap:10px;
  align-items:flex-end;
  flex-wrap:wrap;
  background:rgba(15,23,42,.22);
  border:1px solid var(--border-color);
  border-radius:12px;
  padding:12px;
}
.appcat-toolbar label,
.appcat-field{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.appcat-toolbar span,
.appcat-field span,
.appcat-upload-box label{
  font-size:11px;
  font-weight:800;
  color:var(--text-secondary);
  text-transform:uppercase;
  letter-spacing:.35px;
}
.appcat-field small{display:block;margin-top:5px;color:var(--text-muted);font-size:11px;line-height:1.35;}
.appcat-toolbar select,
.appcat-toolbar input,
.appcat-field input,
.appcat-field textarea,
.appcat-upload-box input{
  background:var(--bg-input);
  color:var(--text-main);
  border:1px solid var(--border-color);
  border-radius:10px;
  padding:10px 12px;
  outline:none;
}
.appcat-search-wrap{ flex:1; min-width:240px; }
.appcat-shared-scope{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:42px;
  padding:7px 11px;
  border:1px solid rgba(45,212,191,.28);
  border-radius:10px;
  background:rgba(20,184,166,.08);
  color:#99f6e4;
}
.appcat-shared-scope>i{font-size:15px;}
.appcat-shared-scope span,.appcat-shared-scope b,.appcat-shared-scope small{display:block;text-transform:none;letter-spacing:0;}
.appcat-shared-scope b{font-size:11px;color:#ccfbf1;}
.appcat-shared-scope small{margin-top:2px;font-size:9px;color:var(--text-muted);font-weight:600;}
.appcat-admin-split{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.appcat-admin-split article{display:flex;align-items:center;gap:10px;padding:12px 13px;border:1px solid var(--border-color);border-radius:12px;background:rgba(15,23,42,.22);}
.appcat-admin-split article>i{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:rgba(59,130,246,.12);color:#93c5fd;}
.appcat-admin-split b,.appcat-admin-split span{display:block;}
.appcat-admin-split b{color:var(--text-main);font-size:12px;}
.appcat-admin-split span{margin-top:3px;color:var(--text-muted);font-size:10px;line-height:1.35;}
@media(max-width:700px){.appcat-admin-split{grid-template-columns:1fr;}.appcat-shared-scope{width:100%;}}
.appcat-layout{
  display:grid;
  grid-template-columns:minmax(360px, 1fr) minmax(340px, 430px);
  gap:14px;
  min-height:520px;
}
.appcat-list-panel,
.appcat-editor-panel{
  background:var(--bg-header);
  border:1px solid var(--border-color);
  border-radius:14px;
  overflow:hidden;
}
.appcat-list-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 14px;
  border-bottom:1px solid var(--border-color);
  color:var(--text-main);
}
.appcat-list-title span{
  color:var(--text-secondary);
  font-size:12px;
}
.appcat-list{
  max-height:590px;
  overflow:auto;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.appcat-empty,
.appcat-editor-empty{
  color:var(--text-secondary);
  font-size:13px;
  padding:28px 14px;
  text-align:center;
}
.appcat-editor-empty{
  min-height:360px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:8px;
}
.appcat-editor-empty i{
  font-size:34px;
  color:#20c997;
}
.appcat-card{
  display:grid;
  grid-template-columns:54px 1fr auto;
  gap:10px;
  align-items:center;
  padding:10px;
  border:1px solid rgba(148,163,184,.20);
  border-radius:14px;
  background:rgba(255,255,255,.035);
}
.appcat-card.is-hidden{
  opacity:.62;
  filter:grayscale(.2);
}
.appcat-card-img{
  width:54px;
  height:54px;
  border-radius:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(32,201,151,.10);
  color:#9ff4d5;
  overflow:hidden;
  border:1px solid rgba(32,201,151,.18);
}
.appcat-card-img img,
.appcat-img-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.appcat-card-title{
  font-weight:900;
  color:var(--text-main);
  font-size:13px;
  line-height:1.2;
}
.appcat-card-meta,
.appcat-card-internal{
  margin-top:3px;
  color:var(--text-secondary);
  font-size:11.5px;
  line-height:1.25;
}
.appcat-card-internal{
  opacity:.72;
}
.appcat-card-chips{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:7px;
}
.appcat-chip{
  font-size:10px;
  font-weight:900;
  border-radius:999px;
  padding:3px 7px;
  border:1px solid rgba(148,163,184,.24);
  color:var(--text-secondary);
  background:rgba(148,163,184,.10);
}
.appcat-chip.visible{ color:#86efac; border-color:rgba(34,197,94,.35); background:rgba(34,197,94,.10); }
.appcat-chip.hidden{ color:#fca5a5; border-color:rgba(239,68,68,.35); background:rgba(239,68,68,.10); }
.appcat-chip.featured{ color:#fde68a; border-color:rgba(245,158,11,.35); background:rgba(245,158,11,.11); }
.appcat-chip.price{ color:#bfdbfe; border-color:rgba(59,130,246,.30); background:rgba(59,130,246,.10); }
.appcat-chip.inactive{ color:#fdba74; border-color:rgba(249,115,22,.38); background:rgba(249,115,22,.12); }
.appcat-chip.pending{ color:#c4b5fd; border-color:rgba(139,92,246,.34); background:rgba(139,92,246,.11); }
.appcat-card-actions{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.appcat-card-actions .btn-secondary{
  padding:7px 10px;
  font-size:12px;
  white-space:nowrap;
}
.appcat-editor{
  padding:14px;
}
.appcat-editor-title{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  border-bottom:1px solid var(--border-color);
  padding-bottom:12px;
  margin-bottom:14px;
}
.appcat-editor-title b{
  display:block;
  color:var(--text-main);
  font-size:16px;
}
.appcat-editor-title span{
  display:block;
  color:var(--text-secondary);
  font-size:12px;
  margin-top:3px;
}
.appcat-preview-row{
  display:grid;
  grid-template-columns:92px 1fr;
  gap:12px;
  align-items:center;
  margin-bottom:12px;
}
.appcat-img-preview{
  width:92px;
  height:92px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#9ff4d5;
  background:rgba(32,201,151,.10);
  border:1px solid rgba(32,201,151,.24);
  overflow:hidden;
  font-size:26px;
}
.appcat-upload-box{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.appcat-upload-actions,
.appcat-editor-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.appcat-grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  align-items:end;
}
.appcat-checks{
  display:flex;
  flex-direction:column;
  gap:9px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border-color);
  background:rgba(255,255,255,.03);
  color:var(--text-main);
  font-size:13px;
}
.appcat-checks label{
  display:flex;
  align-items:center;
  gap:8px;
}
.appcat-editor-actions{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--border-color);
}
@media (max-width: 1100px){
  .appcat-layout{ grid-template-columns:1fr; }
  .appcat-list{ max-height:390px; }
}

.appcat-card.is-master-inactive{
  border-color:rgba(249,115,22,.24);
  background:linear-gradient(135deg, rgba(249,115,22,.055), rgba(15,23,42,.38));
}
.appcat-card.is-master-inactive .appcat-card-title::after{
  content:' · inactivo';
  color:#fdba74;
  font-size:11px;
  font-weight:800;
}

/* CRM-PANEL-APP-GRUPOS-CONFIGURABLES-10D15 */
.appcat-family-group-settings{
  display:none;
  margin:12px 0;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(32,201,151,.22);
  background:linear-gradient(135deg, rgba(32,201,151,.075), rgba(59,130,246,.045));
}
.appcat-family-group-settings .appcat-field{ margin-top:10px; }
.appcat-subpanel-title{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:2px;
}
.appcat-subpanel-title b{
  color:var(--text-main);
  font-size:13px;
}
.appcat-subpanel-title small{
  color:var(--text-secondary);
  font-size:12px;
  line-height:1.35;
}
.appcat-card-meta strong,
.appcat-card-internal strong{ color:#9ff4d5; }

.appcat-check-inline{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin:10px 0 4px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(255,255,255,.035);
  color:var(--text-main);
  font-size:13px;
  line-height:1.3;
}
.appcat-check-inline input{ margin-top:2px; }
.appcat-check-inline span{ color:var(--text-main); font-weight:800; }

/* CRM-PANEL-APP-NIVELES-CONFIGURABLES-10D17 */
.appcat-subpanel-title-nested{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.10);
}
#appcat-group-level2-name-wrap{
  border-left:3px solid rgba(59,130,246,.45);
  padding-left:10px;
}

/* 10D25 - Panel App > Textos editables */
.apptexts-shell{
    display:flex;
    flex-direction:column;
    gap:14px;
}
.apptexts-toolbar{
    align-items:flex-end;
}
.apptexts-list{
    display:flex;
    flex-direction:column;
    gap:12px;
    max-height:calc(100vh - 290px);
    overflow:auto;
    padding:2px 4px 8px;
}
.apptexts-group-title{
    position:sticky;
    top:0;
    z-index:2;
    padding:10px 12px;
    border-radius:14px;
    background:linear-gradient(135deg,#0f766e,#0ea5e9);
    color:#fff;
    font-weight:900;
    box-shadow:0 10px 24px rgba(15,118,110,.16);
}
.apptexts-row{
    background:#fff;
    border:1px solid #e5eef5;
    border-radius:16px;
    padding:13px;
    box-shadow:0 8px 24px rgba(15,23,42,.045);
}
.apptexts-row.is-dirty{
    border-color:#f59e0b;
    box-shadow:0 0 0 3px rgba(245,158,11,.10),0 8px 24px rgba(15,23,42,.045);
}
.apptexts-row-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:9px;
}
.apptexts-row-head b{
    display:block;
    color:#0f172a;
    font-size:14px;
}
.apptexts-row-head span{
    display:block;
    margin-top:3px;
    color:#64748b;
    font-size:11px;
    font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
}
.apptexts-row textarea{
    width:100%;
    min-height:48px;
    border:1px solid #dbe7ef;
    border-radius:12px;
    padding:10px 11px;
    resize:vertical;
    font-size:13px;
    line-height:1.35;
    color:#0f172a;
    background:#f8fafc;
}
.apptexts-row textarea:focus{
    outline:none;
    border-color:#14b8a6;
    box-shadow:0 0 0 3px rgba(20,184,166,.12);
    background:#fff;
}
.apptexts-row small{
    display:block;
    margin-top:7px;
    color:#64748b;
    font-size:11px;
    line-height:1.35;
}
.apptexts-pending{
    color:#b45309;
}
@media (max-width:900px){
    .apptexts-list{max-height:none;}
    .apptexts-row-head{flex-direction:column;}
}

/* 10D31 - Panel App: precios por cantidad / packs */
.appcat-price-options-panel{
  margin:12px 0 14px;
  padding:14px;
  border:1px solid rgba(148,163,184,.18);
  border-radius:18px;
  background:rgba(15,23,42,.22);
}
.appcat-price-options-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:10px 0 12px;
}
.appcat-price-options-empty{
  color:#9fb3c8;
  font-size:12px;
  line-height:1.35;
  padding:10px 12px;
  border-radius:12px;
  border:1px dashed rgba(148,163,184,.22);
  background:rgba(15,23,42,.22);
}
.appcat-price-option-row{
  display:grid;
  grid-template-columns: minmax(150px,1.25fr) minmax(86px,.6fr) minmax(92px,.65fr) minmax(74px,.45fr) auto auto;
  gap:8px;
  align-items:end;
  padding:10px;
  border:1px solid rgba(148,163,184,.16);
  border-radius:14px;
  background:rgba(2,6,23,.16);
}
.appcat-price-option-row label{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin:0;
}
.appcat-price-option-row label span{
  color:#9fb3c8;
  font-size:10.5px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.35px;
}
.appcat-price-option-row input[type="text"],
.appcat-price-option-row input[type="number"]{
  width:100%;
  min-height:38px;
  border-radius:11px;
}
.appcat-price-option-hidden{
  align-self:center;
  flex-direction:row !important;
  align-items:center;
  gap:6px !important;
  color:#dceaf3;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}
.appcat-price-option-hidden input{width:auto;min-height:auto;}
.appcat-price-option-remove{min-height:38px;}
.appcat-add-price-option{width:100%;justify-content:center;}
@media (max-width:1100px){
  .appcat-price-option-row{
    grid-template-columns:1fr 1fr;
  }
  .appcat-price-option-hidden,
  .appcat-price-option-remove{align-self:stretch;}
}

/* 10D31B - Panel App: packs legibles dentro del editor lateral */
.appcat-price-options-panel{
  overflow:visible;
}
.appcat-price-options-list{
  width:100%;
  min-width:0;
}
.appcat-price-option-row{
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:10px !important;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow:visible;
}
.appcat-price-option-row label{
  min-width:0;
}
.appcat-price-option-row label:first-child{
  grid-column:1 / -1;
}
.appcat-price-option-row input[type="text"],
.appcat-price-option-row input[type="number"]{
  min-width:0;
  width:100%;
  box-sizing:border-box;
}
.appcat-price-option-hidden{
  grid-column:1 / 2;
  min-height:38px;
  justify-content:flex-start;
}
.appcat-price-option-remove{
  grid-column:2 / -1;
  width:100%;
  justify-content:center;
}
@media (max-width:640px){
  .appcat-price-option-row{
    grid-template-columns:1fr 1fr !important;
  }
  .appcat-price-option-row label:first-child,
  .appcat-price-option-remove{
    grid-column:1 / -1;
  }
  .appcat-price-option-hidden{
    grid-column:1 / -1;
  }
}

/* 10D32C - Panel App constructor independiente de Combos & promociones */
.appcombo-shell{display:flex;flex-direction:column;gap:14px;min-height:0}
.appcombo-layout{display:grid;grid-template-columns:minmax(260px, .92fr) minmax(420px, 1.45fr);gap:14px;align-items:start;min-height:0}
.appcombo-list-panel,.appcombo-editor-panel{background:rgba(255,255,255,.035);border:1px solid var(--border-color);border-radius:16px;padding:14px;min-width:0}
.appcombo-editor-panel{display:flex;flex-direction:column;gap:14px}
.appcombo-editor-title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border-bottom:1px solid var(--border-color);padding-bottom:12px}
.appcombo-editor-title b{display:block;color:var(--text-main);font-size:18px}
.appcombo-editor-title span{display:block;color:var(--text-secondary);font-size:12px;margin-top:3px}
.appcombo-form-grid{display:grid;grid-template-columns:1.1fr .5fr 1.2fr .35fr;gap:10px;align-items:end}
.appcombo-image-row{display:grid;grid-template-columns:86px minmax(0,1fr);gap:12px;align-items:center}
.appcombo-flags{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px;border:1px solid var(--border-color);border-radius:12px;background:rgba(255,255,255,.025)}
.appcombo-flags label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--text-main)}
.appcombo-help-card{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:14px;border:1px solid rgba(32,201,151,.25);background:rgba(32,201,151,.075);color:var(--text-main)}
.appcombo-help-card span{font-size:12px;color:var(--text-secondary);line-height:1.35}
.appcombo-section{border:1px solid var(--border-color);border-radius:16px;padding:12px;background:rgba(0,0,0,.08)}
.appcombo-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.appcombo-section-head b{display:block;color:var(--text-main);font-size:14px}
.appcombo-section-head span{display:block;color:var(--text-secondary);font-size:12px;line-height:1.35;margin-top:3px}
.appcombo-rows{display:flex;flex-direction:column;gap:10px}
.appcombo-row{display:grid;grid-template-columns:minmax(170px,1.1fr) minmax(150px,1fr) minmax(110px,.75fr) 80px 90px 70px 72px;gap:8px;align-items:end;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:10px;background:rgba(255,255,255,.035)}
.appcombo-row .appcombo-wide{grid-column:auto}
.appcombo-row label{display:flex;flex-direction:column;gap:5px;margin:0;min-width:0}
.appcombo-row label span{font-size:10.5px;font-weight:900;text-transform:uppercase;color:#9ec2df;line-height:1.1}
.appcombo-row input{width:100%;min-width:0;border:1px solid var(--border-color);border-radius:10px;padding:9px 10px;background:var(--bg-sidebar);color:var(--text-main);font-size:13px}
.appcombo-row-remove{height:38px;align-self:end}
.appcombo-empty-row{font-size:12px;color:var(--text-secondary);padding:10px;border:1px dashed var(--border-color);border-radius:12px;text-align:center}
.appcombo-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;border-top:1px solid var(--border-color);padding-top:12px}
.appcombo-summary{display:none;border:1px solid var(--border-color);border-radius:14px;padding:12px;background:rgba(255,255,255,.025);color:var(--text-secondary);font-size:12px;line-height:1.35}
.appcombo-summary:not(:empty){display:block}
.appcombo-summary b{display:block;color:var(--text-main);margin-bottom:6px}
.appcombo-summary ul{margin:6px 0 8px 18px;padding:0}
.appcombo-card-list.selected{border-color:rgba(32,201,151,.65);box-shadow:0 0 0 1px rgba(32,201,151,.2)}
@media(max-width:1100px){.appcombo-layout{grid-template-columns:1fr}.appcombo-form-grid{grid-template-columns:1fr 1fr}.appcombo-row{grid-template-columns:1fr 1fr}.appcombo-row-remove{width:100%}}
@media(max-width:720px){.appcombo-form-grid,.appcombo-image-row,.appcombo-row{grid-template-columns:1fr}.appcombo-section-head{flex-direction:column}.appcombo-actions{justify-content:stretch}.appcombo-actions button{width:100%}}

/* 10D32D - Ajuste responsive del constructor Combos & promociones App */
.appcombo-layout,
.appcombo-list-panel,
.appcombo-editor-panel,
.appcombo-section,
.appcombo-rows,
.appcombo-row{
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}
.appcombo-editor-panel,
.appcombo-section{
  overflow:hidden;
}
.appcombo-row{
  grid-template-columns:minmax(0,1.25fr) minmax(0,1.05fr) minmax(0,.9fr);
  gap:10px;
  align-items:end;
}
.appcombo-row .appcombo-wide{
  grid-column:auto;
}
.appcombo-row label,
.appcombo-row input,
.appcombo-row button{
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}
.appcombo-row-remove{
  width:100%;
  min-height:38px;
  white-space:nowrap;
}

/* Panel App · Obsequios por monto */
.appgift-admin-shell{display:flex;flex-direction:column;gap:14px;min-width:0}
.appgift-admin-toolbar{display:flex;align-items:end;gap:10px;flex-wrap:wrap}
.appgift-admin-card{border:1px solid var(--border-color);border-radius:16px;padding:14px;background:rgba(255,255,255,.03);display:flex;flex-direction:column;gap:12px;min-width:0}
.appgift-admin-card-head,.appgift-admin-subsection-head,.appgift-admin-footer{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.appgift-admin-card-head b,.appgift-admin-subsection-head b{display:block;color:var(--text-main);font-size:15px}
.appgift-admin-card-head span,.appgift-admin-subsection-head span{display:block;color:var(--text-secondary);font-size:12px;line-height:1.4;margin-top:3px}
.appgift-admin-switch,.appgift-admin-check{display:flex!important;flex-direction:row!important;align-items:center;gap:7px;color:var(--text-main);font-size:12px;font-weight:800;white-space:nowrap}
.appgift-admin-grid{display:grid;grid-template-columns:minmax(220px,1fr) minmax(170px,.6fr) minmax(170px,.6fr);gap:10px}
.appgift-admin-grid label,.appgift-admin-rule label,.appgift-admin-subrule label{display:flex;flex-direction:column;gap:5px;min-width:0}
.appgift-admin-grid label>span,.appgift-admin-rule label>span,.appgift-admin-subrule label>span{font-size:10.5px;font-weight:900;text-transform:uppercase;color:#9ec2df}
.appgift-admin-grid input,.appgift-admin-rule input,.appgift-admin-rule select,.appgift-admin-subrule input,.appgift-admin-subrule select{width:100%;min-width:0;box-sizing:border-box;border:1px solid var(--border-color);border-radius:10px;padding:9px 10px;background:var(--bg-sidebar);color:var(--text-main);font-size:13px}
.appgift-admin-wide{grid-column:1/-1}
.appgift-admin-list{display:flex;flex-direction:column;gap:12px;min-width:0}
.appgift-admin-rule{border:1px solid rgba(255,255,255,.09);border-radius:15px;padding:12px;background:rgba(0,0,0,.1);display:flex;flex-direction:column;gap:12px;min-width:0}
.appgift-admin-rule-grid{display:grid;grid-template-columns:minmax(150px,.5fr) minmax(220px,1fr) auto auto;gap:10px;align-items:end}
.appgift-admin-special-head{grid-template-columns:minmax(210px,1fr) minmax(200px,1fr) 90px auto auto}
.appgift-admin-products select{min-height:112px;padding:6px}
.appgift-admin-products small{color:var(--text-secondary);font-size:11px}
.appgift-admin-subsection{border-top:1px solid var(--border-color);padding-top:12px;display:flex;flex-direction:column;gap:10px}
.appgift-admin-subrule{display:grid;grid-template-columns:160px minmax(190px,.75fr) minmax(260px,1.35fr) auto auto;gap:9px;align-items:end;padding:10px;border:1px solid rgba(255,255,255,.07);border-radius:12px;background:rgba(255,255,255,.025)}
.appgift-admin-empty{padding:14px;border:1px dashed var(--border-color);border-radius:12px;color:var(--text-secondary);font-size:12px;text-align:center}
.appgift-admin-footer{align-items:center;border-top:1px solid var(--border-color);padding-top:12px;color:var(--text-secondary);font-size:12px}
.appcat-status.is-error{border-color:rgba(255,92,112,.5);color:#ffb2bd}.appcat-status.is-success{border-color:rgba(32,201,151,.45);color:#83f5d2}

.appcat-excel-manager{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px 18px;
  margin:0 0 14px;
  padding:14px;
  border:1px solid rgba(45,212,191,.24);
  border-radius:14px;
  background:linear-gradient(135deg,rgba(13,148,136,.10),rgba(14,165,233,.06));
}
.appcat-excel-copy{display:flex;align-items:center;gap:12px;min-width:0;}
.appcat-excel-copy b{display:block;color:var(--text-main);font-size:14px;}
.appcat-excel-copy small{display:block;margin-top:3px;color:var(--text-muted);line-height:1.35;}
.appcat-excel-icon{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;border-radius:11px;background:rgba(16,185,129,.16);color:#6ee7b7;font-size:18px;}
.appcat-excel-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;}
.appcat-excel-status{grid-column:1/-1;padding:9px 11px;border-radius:10px;background:rgba(15,23,42,.38);color:var(--text-muted);font-size:12px;}
.appcat-excel-status.is-loading{color:#bae6fd;border:1px solid rgba(56,189,248,.25);}
.appcat-excel-status.is-success{color:#a7f3d0;border:1px solid rgba(52,211,153,.28);}
.appcat-excel-status.is-error{color:#fecdd3;border:1px solid rgba(251,113,133,.32);}
.appcat-excel-preview{grid-column:1/-1;display:grid;gap:10px;padding-top:2px;}
.appcat-excel-preview[hidden]{display:none;}
.appcat-excel-summary{display:grid;grid-template-columns:repeat(4,minmax(110px,1fr));gap:8px;}
.appcat-excel-summary-card{padding:10px;border:1px solid rgba(148,163,184,.18);border-radius:10px;background:rgba(2,15,23,.36);}
.appcat-excel-summary-card span{display:block;color:var(--text-muted);font-size:10px;text-transform:uppercase;font-weight:800;letter-spacing:.04em;}
.appcat-excel-summary-card b{display:block;margin-top:3px;color:var(--text-main);font-size:18px;}
.appcat-excel-issues{display:grid;gap:6px;}
.appcat-excel-issue{padding:8px 10px;border-radius:9px;font-size:12px;line-height:1.35;}
.appcat-excel-issue.is-error{background:rgba(244,63,94,.11);border:1px solid rgba(244,63,94,.25);color:#fecdd3;}
.appcat-excel-issue.is-warning{background:rgba(245,158,11,.10);border:1px solid rgba(245,158,11,.24);color:#fde68a;}
.appcat-excel-changes{max-height:240px;overflow:auto;display:grid;gap:7px;}
.appcat-excel-change{padding:9px 10px;border:1px solid rgba(148,163,184,.17);border-radius:10px;background:rgba(2,15,23,.30);}
.appcat-excel-change b{display:block;color:#ccfbf1;font-size:12px;}
.appcat-excel-change small{display:block;margin-top:3px;color:var(--text-muted);line-height:1.4;}
.appcat-excel-preview-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;}
@media(max-width:780px){
  .appcat-excel-manager{grid-template-columns:1fr;}
  .appcat-excel-actions{justify-content:stretch;}
  .appcat-excel-actions button{flex:1;}
  .appcat-excel-summary{grid-template-columns:repeat(2,minmax(100px,1fr));}
}

/* Configurador guiado del catálogo: revisión y publicación controlada. */
.appcat-structure-owner-note{
    display:flex;
    gap:10px;
    align-items:flex-start;
    margin:0 0 14px;
    padding:12px 14px;
    border:1px solid rgba(76, 175, 255, .32);
    border-radius:12px;
    background:rgba(76, 175, 255, .08);
    color:var(--text-secondary);
    font-size:12px;
    line-height:1.45;
}
.appcat-structure-owner-note i{ color:#4cafff; margin-top:2px; }
.appstruct-launch{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:0 0 14px;
  padding:14px;
  border:1px solid rgba(96,165,250,.28);
  border-radius:14px;
  background:linear-gradient(135deg,rgba(37,99,235,.10),rgba(14,165,233,.055));
}
.appstruct-launch-copy,.appstruct-launch-actions{display:flex;align-items:center;gap:11px;min-width:0;}
.appstruct-launch-copy b{display:block;color:var(--text-main);font-size:14px;}
.appstruct-launch-copy small{display:block;margin-top:3px;color:var(--text-muted);line-height:1.35;}
.appstruct-icon{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;border-radius:11px;background:rgba(59,130,246,.16);color:#93c5fd;font-size:17px;}
.appstruct-safe-badge,.appstruct-draft-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border:1px solid rgba(147,197,253,.30);border-radius:999px;background:rgba(59,130,246,.10);color:#bfdbfe;font-size:10px;font-weight:900;white-space:nowrap;}
.appstruct-workspace{display:flex;flex-direction:column;gap:12px;margin:0 0 14px;padding:14px;border:1px solid rgba(96,165,250,.34);border-radius:15px;background:linear-gradient(155deg,rgba(15,23,42,.56),rgba(8,47,73,.22));}
.appstruct-workspace[hidden]{display:none;}
.appstruct-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;}
.appstruct-title{color:var(--text-main);font-size:16px;font-weight:950;}
.appstruct-title i{color:#60a5fa;margin-right:5px;}
.appstruct-head p{margin:5px 0 0;color:var(--text-secondary);font-size:12px;}
.appstruct-head p.is-error{color:#fecaca;}
.appstruct-head-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap;}
.appstruct-safety{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border:1px solid rgba(45,212,191,.28);border-radius:11px;background:rgba(13,148,136,.09);color:#b7f7e7;font-size:12px;line-height:1.4;}
.appstruct-safety i{margin-top:2px;}
.appstruct-summary{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.appstruct-summary-group{min-width:0;padding:9px;border:1px solid rgba(148,163,184,.18);border-radius:12px;background:rgba(2,15,23,.24);}
.appstruct-summary-group.is-current{border-color:rgba(148,163,184,.22);}.appstruct-summary-group.is-draft{border-color:rgba(45,212,191,.27);}
.appstruct-summary-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 1px 8px;}.appstruct-summary-heading b{color:var(--text-main);font-size:12px;}.appstruct-summary-heading span{color:var(--text-muted);font-size:9px;text-align:right;}
.appstruct-summary-cards{display:grid;grid-template-columns:repeat(5,minmax(82px,1fr));gap:7px;}
.appstruct-summary-empty{padding:12px;border:1px dashed rgba(148,163,184,.25);border-radius:9px;color:var(--text-muted);font-size:11px;line-height:1.4;}
.appstruct-summary-card{padding:10px;border:1px solid rgba(148,163,184,.17);border-radius:11px;background:rgba(2,15,23,.34);}
.appstruct-summary-card span{display:block;min-height:26px;color:var(--text-muted);font-size:10px;line-height:1.25;text-transform:uppercase;font-weight:850;letter-spacing:.03em;}
.appstruct-summary-card b{display:block;margin-top:3px;color:var(--text-main);font-size:19px;}
.appstruct-summary-card.is-main{border-color:rgba(96,165,250,.30);}
.appstruct-summary-card.is-ok{border-color:rgba(52,211,153,.28);}
.appstruct-summary-card.is-warning{border-color:rgba(251,191,36,.35);background:rgba(245,158,11,.075);}
.appstruct-issues{display:grid;grid-template-columns:1fr 1fr;gap:9px;align-items:start;}
.appstruct-issue-section{min-width:0;padding:8px;border:1px solid rgba(148,163,184,.17);border-radius:11px;background:rgba(2,15,23,.22);}.appstruct-issue-section.is-draft{border-color:rgba(45,212,191,.22);}
.appstruct-issue-heading{display:flex;justify-content:space-between;gap:8px;padding:1px 3px 8px;}.appstruct-issue-heading b{color:var(--text-main);font-size:11px;}.appstruct-issue-heading span{color:var(--text-muted);font-size:9px;text-align:right;}
.appstruct-issues details{border:1px solid rgba(251,191,36,.28);border-radius:9px;background:rgba(245,158,11,.065);overflow:hidden;}
.appstruct-issues summary{padding:10px 12px;color:#fde68a;font-size:12px;font-weight:900;cursor:pointer;}
.appstruct-issue-list{display:grid;gap:6px;padding:0 10px 10px;}
.appstruct-issue{display:grid;grid-template-columns:110px minmax(0,1fr);gap:4px 8px;padding:8px;border-radius:8px;background:rgba(2,15,23,.30);font-size:11px;}
.appstruct-issue b{color:#fcd34d;}.appstruct-issue span{color:var(--text-main);}.appstruct-issue small{grid-column:2;color:var(--text-muted);line-height:1.35;}
.appstruct-no-issues{display:flex;align-items:center;gap:7px;padding:10px 12px;border:1px solid rgba(52,211,153,.25);border-radius:11px;background:rgba(16,185,129,.07);color:#a7f3d0;font-size:12px;}
.appstruct-layout{display:grid;grid-template-columns:minmax(235px,280px) minmax(0,1fr);gap:12px;min-height:520px;}
.appstruct-families,.appstruct-editor,.appstruct-history,.appstruct-comparison,.appstruct-customer-preview{border:1px solid var(--border-color);border-radius:13px;background:var(--bg-header);overflow:hidden;}
.appstruct-comparison[hidden],.appstruct-customer-preview[hidden],.appstruct-history[hidden]{display:none;}
.appstruct-panel-title{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border-color);color:var(--text-main);font-size:12px;}
.appstruct-panel-title span{color:var(--text-muted);font-size:10px;}
.appstruct-family-list{display:flex;flex-direction:column;gap:7px;padding:8px;max-height:690px;overflow:auto;}
.appstruct-family-card{display:flex;flex-direction:column;gap:3px;width:100%;padding:10px;border:1px solid rgba(148,163,184,.17);border-radius:10px;background:rgba(255,255,255,.025);color:var(--text-main);text-align:left;cursor:pointer;}
.appstruct-family-card:hover,.appstruct-family-card.is-active{border-color:rgba(96,165,250,.55);background:rgba(59,130,246,.10);}
.appstruct-family-card b{font-size:12px;}.appstruct-family-card span{color:#bfdbfe;font-size:10.5px;}.appstruct-family-card small{color:var(--text-muted);font-size:10px;}
.appstruct-editor{padding:12px;overflow:auto;}
.appstruct-editor-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--border-color);}
.appstruct-editor-head b{display:block;color:var(--text-main);font-size:15px;}.appstruct-editor-head span:not(.appstruct-draft-chip){display:block;margin-top:3px;color:var(--text-muted);font-size:11px;}
.appstruct-editor-head-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap;}
.appstruct-check-control{display:flex!important;align-items:center;justify-content:space-between;gap:12px;min-height:58px;}
.appstruct-check-control input,.appstruct-products-table input[type="checkbox"]{width:18px;height:18px;accent-color:#0ea5e9;cursor:pointer;}
.appstruct-group-visibility{display:grid;gap:9px;margin:10px 0 12px;padding:11px;border:1px solid rgba(56,189,248,.24);border-radius:12px;background:rgba(14,165,233,.06);}
.appstruct-group-visibility section>b{display:block;margin-bottom:7px;color:var(--text-main);font-size:11px;}
.appstruct-group-visibility section>div{display:flex;gap:7px;flex-wrap:wrap;}
.appstruct-group-visibility label{display:flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid var(--border-color);border-radius:999px;background:var(--panel-bg);color:var(--text-main);font-size:10px;cursor:pointer;}
.appstruct-group-visibility input{width:15px;height:15px;accent-color:#0ea5e9;}
.appstruct-controls{display:grid;grid-template-columns:repeat(3,minmax(150px,1fr));gap:9px;margin:11px 0;}
.appstruct-controls label{display:flex;flex-direction:column;gap:5px;}.appstruct-controls label>span{color:var(--text-secondary);font-size:10px;font-weight:900;text-transform:uppercase;}
.appstruct-controls input,.appstruct-controls select,.appstruct-products-table input,.appstruct-products-table select{width:100%;box-sizing:border-box;padding:8px 9px;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-input);color:var(--text-main);font-size:12px;}
.appstruct-controls select option{background:#fff;color:#111827;}
.appstruct-products-table select option{background:#fff;color:#111827;}
.appstruct-selected-guide{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.55fr);gap:12px;align-items:center;margin:-1px 0 9px;padding:9px 11px;border:1px solid rgba(96,165,250,.22);border-radius:9px;background:rgba(59,130,246,.065);}
.appstruct-selected-guide span{display:block;color:#93c5fd;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.03em;}.appstruct-selected-guide p{margin:3px 0 0;color:var(--text-main);font-size:11px;line-height:1.4;}.appstruct-selected-guide small{color:var(--text-secondary);font-size:10px;line-height:1.4;}.appstruct-selected-guide strong{color:#bfdbfe;}
.appstruct-route-guide{margin:0 0 10px;border:1px solid rgba(148,163,184,.20);border-radius:9px;background:rgba(2,15,23,.23);overflow:hidden;}
.appstruct-route-guide summary{padding:9px 11px;color:#bfdbfe;font-size:11px;font-weight:900;cursor:pointer;}.appstruct-route-guide summary i{margin-right:5px;color:#60a5fa;}
.appstruct-guide-rule{margin:0 9px 8px;padding:8px 9px;border-radius:7px;background:rgba(45,212,191,.075);color:#b7f7e7;font-size:10px;line-height:1.4;}.appstruct-guide-rule b{color:#5eead4;}
.appstruct-guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:0 9px 9px;}
.appstruct-guide-card{padding:9px;border:1px solid rgba(148,163,184,.15);border-radius:8px;background:rgba(255,255,255,.025);}.appstruct-guide-card.is-custom{border-color:rgba(167,139,250,.22);}.appstruct-guide-card b{display:block;color:var(--text-main);font-size:10.5px;}.appstruct-guide-card p{margin:4px 0;color:var(--text-secondary);font-size:9.5px;line-height:1.35;}.appstruct-guide-card small{display:block;color:var(--text-muted);font-size:9px;line-height:1.35;}.appstruct-guide-card strong{color:#bfdbfe;}
.appstruct-products-table-wrap{overflow:auto;border:1px solid var(--border-color);border-radius:10px;}
.appstruct-products-table{width:100%;min-width:750px;border-collapse:collapse;font-size:11px;}
.appstruct-products-table th{padding:8px;background:rgba(59,130,246,.08);color:#bfdbfe;text-align:left;font-size:10px;text-transform:uppercase;}
.appstruct-products-table td{padding:8px;border-top:1px solid var(--border-color);vertical-align:middle;color:var(--text-main);}
.appstruct-products-table td:first-child{min-width:210px;}.appstruct-products-table td b{display:block;font-size:11px;}.appstruct-products-table td small{display:block;margin-top:3px;max-width:230px;overflow:hidden;text-overflow:ellipsis;color:var(--text-muted);font-size:8px;white-space:nowrap;}
.appstruct-visibility{display:inline-block;padding:4px 7px;border-radius:999px;font-size:9px;font-weight:900;white-space:nowrap;}.appstruct-visibility.is-visible{background:rgba(16,185,129,.11);color:#a7f3d0;}.appstruct-visibility.is-missing{background:rgba(245,158,11,.12);color:#fde68a;}
.appstruct-preview-wrap{margin-top:12px;border:1px solid var(--border-color);border-radius:10px;overflow:hidden;}
.appstruct-preview{display:grid;gap:6px;padding:9px;max-height:230px;overflow:auto;}
.appstruct-route{display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,.45fr);gap:8px;align-items:center;padding:8px;border-radius:8px;background:rgba(255,255,255,.025);}
.appstruct-route span{color:#dbeafe;font-size:11px;line-height:1.35;}.appstruct-route span i{margin:0 4px;color:#60a5fa;font-size:9px;}.appstruct-route small{color:var(--text-muted);font-size:9px;text-align:right;}
.appstruct-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border-color);}.appstruct-footer>span{color:var(--text-muted);font-size:11px;}.appstruct-footer-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;}.appstruct-publish:not(:disabled){box-shadow:0 0 0 2px rgba(45,212,191,.12);}.appstruct-publish:disabled{cursor:not-allowed;opacity:.48;}
.appstruct-comparison,.appstruct-customer-preview{padding:10px;}.appstruct-comparison>.appstruct-panel-title,.appstruct-customer-preview>.appstruct-panel-title{margin:-10px -10px 10px;}
.appstruct-compare-summary{display:grid;grid-template-columns:repeat(4,minmax(110px,1fr));gap:7px;margin-bottom:8px;}.appstruct-compare-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:310px;overflow:auto;}.appstruct-compare-list article{padding:9px;border:1px solid rgba(148,163,184,.17);border-radius:9px;background:rgba(2,15,23,.30);}.appstruct-compare-list article>b{display:block;margin-bottom:6px;color:var(--text-main);font-size:11px;}.appstruct-compare-list article div{display:grid;grid-template-columns:54px minmax(0,1fr);gap:7px;margin-top:4px;}.appstruct-compare-list article span{color:#93c5fd;font-size:9px;font-weight:900;text-transform:uppercase;}.appstruct-compare-list article p{margin:0;color:var(--text-secondary);font-size:10px;line-height:1.35;overflow-wrap:anywhere;}
.appstruct-customer-shell{max-width:940px;margin:0 auto;padding:13px;border:1px solid rgba(45,212,191,.22);border-radius:14px;background:linear-gradient(160deg,rgba(3,46,48,.55),rgba(2,15,23,.72));}.appstruct-customer-shell section+section{margin-top:13px;padding-top:12px;border-top:1px solid rgba(148,163,184,.15);}.appstruct-customer-step{display:block;margin-bottom:7px;color:#99f6e4;font-size:10px;font-weight:950;text-transform:uppercase;letter-spacing:.04em;}.appstruct-customer-choices{display:flex;gap:7px;overflow:auto;padding-bottom:2px;}.appstruct-customer-choice{flex:0 0 auto;padding:8px 11px;border:1px solid rgba(148,163,184,.22);border-radius:999px;background:rgba(255,255,255,.035);color:var(--text-main);font-size:10px;font-weight:850;cursor:pointer;}.appstruct-customer-choice:hover,.appstruct-customer-choice.is-active{border-color:#2dd4bf;background:rgba(20,184,166,.18);color:#ccfbf1;}.appstruct-customer-products{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:8px;}.appstruct-customer-products article{display:flex;flex-direction:column;gap:4px;min-height:84px;padding:11px;border:1px solid rgba(45,212,191,.2);border-radius:11px;background:rgba(255,255,255,.045);}.appstruct-customer-products i{color:#5eead4;font-size:17px;}.appstruct-customer-products b{color:var(--text-main);font-size:11px;line-height:1.3;}.appstruct-customer-products small{color:var(--text-muted);font-size:9px;line-height:1.3;}
.appstruct-history{padding:10px;}.appstruct-history-columns{display:grid;grid-template-columns:1fr 1fr;gap:10px;}.appstruct-history-columns>section{min-width:0;border:1px solid rgba(148,163,184,.17);border-radius:10px;overflow:hidden;}.appstruct-history-list{display:grid;grid-template-columns:repeat(2,minmax(160px,1fr));gap:7px;padding:9px;}.appstruct-history-list>div{padding:9px;border:1px solid rgba(148,163,184,.17);border-radius:9px;background:rgba(2,15,23,.30);}.appstruct-history-list b,.appstruct-history-list span,.appstruct-history-list small{display:block;}.appstruct-history-list b{color:#bfdbfe;font-size:12px;}.appstruct-history-list span{margin-top:3px;color:var(--text-main);font-size:10px;}.appstruct-history-list small{margin-top:3px;color:var(--text-muted);font-size:9px;}.appstruct-release button{width:100%;margin-top:8px;font-size:9px;}
.appstruct-empty{padding:24px;text-align:center;color:var(--text-muted);font-size:12px;}
@media(max-width:1180px){.appstruct-summary{grid-template-columns:1fr;}.appstruct-summary-cards{grid-template-columns:repeat(5,minmax(86px,1fr));}.appstruct-layout{grid-template-columns:230px minmax(0,1fr);}.appstruct-controls{grid-template-columns:1fr 1fr;}.appstruct-selected-guide{grid-template-columns:1fr;gap:5px;}.appstruct-history-columns{grid-template-columns:1fr;}.appstruct-customer-products{grid-template-columns:repeat(3,minmax(120px,1fr));}}
@media(max-width:820px){.appstruct-launch,.appstruct-head,.appstruct-footer{align-items:stretch;flex-direction:column;}.appstruct-launch-actions,.appstruct-head-actions,.appstruct-footer-actions{justify-content:flex-start;}.appstruct-layout{grid-template-columns:1fr;}.appstruct-family-list{max-height:230px;}.appstruct-summary-cards{grid-template-columns:repeat(2,minmax(100px,1fr));}.appstruct-issues{grid-template-columns:1fr;}.appstruct-controls{grid-template-columns:1fr;}.appstruct-guide-grid{grid-template-columns:1fr;}.appstruct-route{grid-template-columns:1fr;}.appstruct-route small{text-align:left;}.appstruct-history-list,.appstruct-compare-list{grid-template-columns:1fr;}.appstruct-compare-summary{grid-template-columns:repeat(2,minmax(100px,1fr));}.appstruct-customer-products{grid-template-columns:repeat(2,minmax(110px,1fr));}}
@media(max-width:1050px){.appgift-admin-grid,.appgift-admin-rule-grid,.appgift-admin-special-head,.appgift-admin-subrule{grid-template-columns:1fr 1fr}.appgift-admin-products{grid-column:1/-1}}
@media(max-width:700px){.appgift-admin-grid,.appgift-admin-rule-grid,.appgift-admin-special-head,.appgift-admin-subrule{grid-template-columns:1fr}.appgift-admin-card-head,.appgift-admin-subsection-head,.appgift-admin-footer{flex-direction:column}.appgift-admin-card-head button,.appgift-admin-subsection-head button,.appgift-admin-footer button{width:100%}.appgift-admin-products{grid-column:auto}}
.appcombo-form-grid{
  grid-template-columns:minmax(0,1.05fr) minmax(120px,.5fr) minmax(0,1fr) minmax(84px,.34fr);
  max-width:100%;
}
.appcombo-image-row{
  max-width:100%;
}
@media(max-width:1500px){
  .appcombo-layout{
    grid-template-columns:1fr;
  }
  .appcombo-list-panel{
    max-height:280px;
    overflow:auto;
  }
}
@media(max-width:980px){
  .appcombo-form-grid,
  .appcombo-image-row,
  .appcombo-row{
    grid-template-columns:1fr 1fr;
  }
  .appcombo-row-remove{
    grid-column:1 / -1;
  }
}
@media(max-width:640px){
  .appcombo-form-grid,
  .appcombo-image-row,
  .appcombo-row{
    grid-template-columns:1fr;
  }
  .appcombo-section-head{
    flex-direction:column;
    align-items:stretch;
  }
  .appcombo-section-head button{
    width:100%;
  }
}

/* Registro directo desde una cotización enviada en el chat. */
.quote-registration-panel{
    display:flex;
    flex-direction:column;
    gap:7px;
    margin:-1px -1px 8px;
    padding:8px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:9px;
    background:rgba(2,31,35,.2);
    white-space:normal;
}
.quote-branch-transfer-notice{
    display:flex;
    align-items:flex-start;
    gap:7px;
    padding:7px 8px;
    border:1px solid rgba(245,158,11,.42);
    border-radius:8px;
    background:rgba(245,158,11,.14);
    color:#fef3c7;
    font-size:10px;
    font-weight:800;
    line-height:1.3;
}
.quote-branch-transfer-notice > i{
    flex:0 0 auto;
    margin-top:1px;
}
.quote-branch-transfer-notice.is-ready{
    border-color:rgba(34,197,94,.42);
    background:rgba(34,197,94,.14);
    color:#d1fae5;
}
body:not(.dark-mode) .quote-branch-transfer-notice{
    color:#854d0e;
    background:rgba(254,243,199,.92);
}
body:not(.dark-mode) .quote-branch-transfer-notice.is-ready{
    color:#166534;
    background:rgba(220,252,231,.94);
}
.quote-profile-detail{
    font-size:12px;
    line-height:1.35;
    overflow-wrap:anywhere;
    padding:4px 0 8px;
    opacity:.9;
}
.quote-registration-profile{
    display:grid;
    grid-template-columns:minmax(118px,.8fr) minmax(150px,1.2fr);
    align-items:center;
    gap:7px;
    font-size:10px;
    font-weight:900;
    line-height:1.2;
}
.quote-registration-profile > span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.quote-registration-profile select{
    width:100%;
    min-width:0;
    height:28px;
    padding:3px 7px;
    border:1px solid rgba(255,255,255,.24);
    border-radius:7px;
    background:var(--bg-secondary);
    color:var(--text-primary);
    font-size:10px;
    font-weight:800;
}
.quote-registration-actions{
    display:grid;
    grid-template-columns:minmax(0,1fr) 76px;
    gap:5px;
    align-items:stretch;
}
.quote-registration-fin-grid{
    display:grid;
    min-width:0;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:5px;
}
.quote-registration-actions button{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    min-width:0;
    min-height:35px;
    padding:5px 4px;
    border:0;
    border-radius:7px;
    background:#00a884;
    color:#fff;
    cursor:pointer;
    font-size:9px;
    font-weight:900;
    line-height:1.05;
}
.quote-registration-actions button.quote-fin-province{
    background:#ff7a18;
}
.quote-registration-actions button.quote-register-order{
    height:100%;
    min-height:75px;
    flex-direction:column;
    gap:7px;
    padding:6px 4px;
    background:#ff7a18;
    font-size:10px;
}
.quote-registration-actions button.quote-register-order > i{
    font-size:15px;
}
.quote-registration-actions button.quote-register-order small{
    min-height:0;
    margin-top:1px;
    font-size:9px;
    opacity:1;
}
.quote-registration-actions button span{
    display:flex;
    min-width:0;
    flex-direction:column;
    align-items:center;
}
.quote-registration-actions button small{
    display:block;
    min-height:9px;
    margin-top:2px;
    font-size:8px;
    opacity:.88;
}
.quote-registration-actions button:disabled{
    opacity:.5;
    cursor:not-allowed;
}
.quote-registration-actions button.is-busy{
    filter:saturate(.55);
}
.quote-registration-complete{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    margin:-1px -1px 8px;
    padding:7px 9px;
    border:1px solid rgba(34,197,94,.45);
    border-radius:8px;
    background:rgba(34,197,94,.15);
    color:#d1fae5;
    font-size:11px;
    font-weight:900;
    line-height:1.2;
    white-space:normal;
}
@media(max-width:720px){
    .quote-registration-profile{
        grid-template-columns:1fr;
    }
    .quote-registration-actions{
        grid-template-columns:minmax(0,1fr) 68px;
    }
    .quote-registration-actions button{
        gap:3px;
        font-size:8px;
    }
}

/* --- VENTAS > PRODUCTOS · RESUMEN EJECUTIVO VISUAL --- */
#sales-page-productos {
    --prod-surface: color-mix(in srgb, var(--card-bg) 94%, transparent);
    --prod-surface-muted: color-mix(in srgb, var(--bg-header) 86%, var(--card-bg));
    --prod-line: color-mix(in srgb, var(--border-color) 82%, transparent);
    --prod-soft: rgba(148, 163, 184, .16);
    min-width: 0;
}

#sales-page-productos .prod-report-controls {
    position: sticky;
    z-index: 12;
    top: -25px;
    margin: -10px 0 14px;
    padding: 12px 14px;
    border-radius: 12px;
    box-shadow: 0 9px 24px rgba(15, 23, 42, .10);
}

#sales-page-productos .prod-report-toolbar {
    gap: 9px;
    margin-top: 0;
}

#sales-page-productos .prod-toolbar-spacer {
    flex: 1 1 24px;
}

#sales-page-productos .prod-report-toolbar .action-btn {
    min-height: 36px;
    padding: 8px 14px;
    border-radius: 7px;
    font-size: 13px;
    white-space: nowrap;
}

#sales-page-productos .prod-monthly-download {
    border-color: #1976d2;
    background: #1976d2;
    color: #fff;
}

.prod-report-page {
    min-width: 0;
}

.prod-report-state {
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 28px;
    border: 1px dashed color-mix(in srgb, var(--text-secondary) 38%, transparent);
    border-radius: 16px;
    background: var(--prod-surface);
    color: var(--text-secondary);
    text-align: left;
}

.prod-report-state-icon {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: rgba(37, 99, 235, .11);
    color: #2563eb;
    font-size: 24px;
}

.prod-report-state strong,
.prod-report-state span {
    display: block;
}

.prod-report-state strong {
    margin-bottom: 5px;
    color: var(--text-primary);
    font-size: 17px;
}

.prod-report-state.is-loading .prod-report-state-icon {
    background: rgba(13, 148, 136, .12);
    color: #0d9488;
}

.prod-report-state.is-empty .prod-report-state-icon {
    background: rgba(245, 158, 11, .13);
    color: #d97706;
}

.prod-report-overview {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    margin-bottom: 11px;
    padding: 9px 11px;
    border: 1px solid var(--prod-line);
    border-radius: 12px;
    background: var(--prod-surface);
    box-shadow: 0 4px 13px rgba(15, 23, 42, .06);
}

.prod-overview-period {
    min-width: 180px;
    margin-right: auto;
}

.prod-overview-period span,
.prod-overview-period strong {
    display: block;
}

.prod-overview-period span {
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.prod-overview-period strong {
    margin-top: 2px;
    color: var(--text-primary);
    font-size: 14px;
}

.prod-overview-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--prod-surface-muted);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 750;
    white-space: nowrap;
}

.prod-overview-stat i {
    color: #0d9488;
}

.prod-overview-stat.is-warning {
    background: rgba(245, 158, 11, .14);
    color: #b45309;
}

.prod-overview-stat.is-warning i {
    color: #d97706;
}

.prod-family-tabs {
    display: flex;
    gap: 8px;
    min-width: 0;
    margin-bottom: 12px;
    padding: 3px 2px 7px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.prod-family-tab {
    min-width: 185px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 11px;
    border: 1px solid var(--prod-line);
    border-radius: 11px;
    background: var(--prod-surface);
    color: var(--text-primary);
    box-shadow: 0 3px 10px rgba(15, 23, 42, .05);
    cursor: pointer;
    text-align: left;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.prod-family-tab:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--prod-tab-accent, #0d9488) 54%, var(--prod-line));
}

.prod-family-tab.active {
    border-color: var(--prod-tab-accent, #0d9488);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--prod-tab-accent, #0d9488) 17%, transparent), 0 5px 14px rgba(15, 23, 42, .08);
}

.prod-family-tab-icon {
    --prod-tab-accent: var(--prod-accent);
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--prod-accent-soft);
    color: var(--prod-accent);
}

.prod-family-tab > span:last-child {
    min-width: 0;
}

.prod-family-tab strong,
.prod-family-tab small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prod-family-tab strong {
    max-width: 128px;
    font-size: 12px;
}

.prod-family-tab small {
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: 10px;
}

.prod-family-dashboard,
.prod-family-tab-icon {
    --prod-accent: #0b57d0;
    --prod-accent-2: #0f9a9a;
    --prod-accent-soft: rgba(11, 87, 208, .11);
    --prod-accent-soft-2: rgba(15, 154, 154, .11);
}

.prod-theme-0 { --prod-accent:#0b57d0; --prod-accent-2:#0f9a9a; --prod-accent-soft:rgba(11,87,208,.11); --prod-accent-soft-2:rgba(15,154,154,.11); --prod-tab-accent:#0b57d0; }
.prod-theme-1 { --prod-accent:#6d28d9; --prod-accent-2:#c026d3; --prod-accent-soft:rgba(109,40,217,.11); --prod-accent-soft-2:rgba(192,38,211,.11); --prod-tab-accent:#6d28d9; }
.prod-theme-2 { --prod-accent:#c2410c; --prod-accent-2:#dc2626; --prod-accent-soft:rgba(194,65,12,.11); --prod-accent-soft-2:rgba(220,38,38,.10); --prod-tab-accent:#c2410c; }
.prod-theme-3 { --prod-accent:#047857; --prod-accent-2:#65a30d; --prod-accent-soft:rgba(4,120,87,.11); --prod-accent-soft-2:rgba(101,163,13,.11); --prod-tab-accent:#047857; }
.prod-theme-4 { --prod-accent:#1d4ed8; --prod-accent-2:#0284c7; --prod-accent-soft:rgba(29,78,216,.11); --prod-accent-soft-2:rgba(2,132,199,.11); --prod-tab-accent:#1d4ed8; }
.prod-theme-5 { --prod-accent:#be123c; --prod-accent-2:#db2777; --prod-accent-soft:rgba(190,18,60,.11); --prod-accent-soft-2:rgba(219,39,119,.11); --prod-tab-accent:#be123c; }
.prod-theme-6 { --prod-accent:#a16207; --prod-accent-2:#65a30d; --prod-accent-soft:rgba(161,98,7,.12); --prod-accent-soft-2:rgba(101,163,13,.11); --prod-tab-accent:#a16207; }
.prod-theme-7 { --prod-accent:#0f766e; --prod-accent-2:#155e75; --prod-accent-soft:rgba(15,118,110,.11); --prod-accent-soft-2:rgba(21,94,117,.11); --prod-tab-accent:#0f766e; }
.prod-theme-8 { --prod-accent:#4338ca; --prod-accent-2:#7e22ce; --prod-accent-soft:rgba(67,56,202,.11); --prod-accent-soft-2:rgba(126,34,206,.11); --prod-tab-accent:#4338ca; }
.prod-theme-9 { --prod-accent:#334155; --prod-accent-2:#0f766e; --prod-accent-soft:rgba(51,65,85,.11); --prod-accent-soft-2:rgba(15,118,110,.11); --prod-tab-accent:#334155; }

.prod-family-dashboard {
    min-width: 0;
    padding: 15px;
    border: 1px solid color-mix(in srgb, var(--prod-accent) 22%, var(--prod-line));
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0, var(--prod-accent-soft), transparent 28%),
        var(--prod-surface);
    box-shadow: 0 11px 32px rgba(15, 23, 42, .10);
}

.prod-family-header {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    margin-bottom: 13px;
}

.prod-family-main-icon {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    display: grid;
    place-items: center;
    border: 2px solid color-mix(in srgb, var(--prod-accent) 70%, transparent);
    border-radius: 50%;
    background: var(--prod-accent-soft);
    color: var(--prod-accent);
    font-size: 22px;
}

.prod-family-header h2 {
    margin: 0;
    color: var(--prod-accent);
    font-size: clamp(22px, 2vw, 34px);
    line-height: 1.05;
    letter-spacing: -.025em;
}

.prod-family-header p {
    margin: 4px 0 0;
    color: var(--text-secondary);
    font-size: 13px;
}

.prod-coverage-note {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    color: #b45309;
    font-size: 10px;
    font-weight: 700;
}

.prod-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 10px;
}

.prod-kpi-card {
    min-width: 0;
    min-height: 74px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--prod-line);
    border-left: 4px solid var(--prod-accent);
    border-radius: 11px;
    background: color-mix(in srgb, var(--card-bg) 96%, transparent);
    box-shadow: 0 3px 10px rgba(15, 23, 42, .05);
}

.prod-kpi-card:nth-child(even) {
    border-left-color: var(--prod-accent-2);
}

.prod-kpi-card > i {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--prod-accent-soft);
    color: var(--prod-accent);
    font-size: 16px;
}

.prod-kpi-card:nth-child(even) > i {
    background: var(--prod-accent-soft-2);
    color: var(--prod-accent-2);
}

.prod-kpi-card span,
.prod-kpi-card small,
.prod-kpi-card strong {
    display: block;
    min-width: 0;
}

.prod-kpi-card small {
    margin-bottom: 3px;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 800;
}

.prod-kpi-card strong {
    overflow: hidden;
    color: var(--prod-accent);
    font-size: clamp(15px, 1.4vw, 22px);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prod-report-grid {
    display: grid;
    grid-template-columns: minmax(370px, .95fr) minmax(520px, 1.2fr);
    gap: 10px;
}

.prod-report-card {
    min-width: 0;
    padding: 11px 13px;
    border: 1px solid var(--prod-line);
    border-radius: 11px;
    background: color-mix(in srgb, var(--card-bg) 97%, transparent);
}

.prod-report-card h3,
.prod-insights-card h3 {
    margin: 0 0 9px;
    color: var(--prod-accent);
    font-size: 14px;
    line-height: 1.2;
}

.prod-participation-layout {
    display: grid;
    grid-template-columns: minmax(150px, .72fr) minmax(220px, 1.28fr);
    align-items: center;
    gap: 12px;
}

.prod-donut-wrap {
    display: grid;
    place-items: center;
}

.prod-donut {
    width: min(170px, 100%);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}

.prod-donut > div {
    width: 50%;
    height: 50%;
    display: grid;
    place-items: center;
    align-content: center;
    border-radius: 50%;
    background: var(--card-bg);
    box-shadow: 0 2px 9px rgba(15, 23, 42, .13);
    color: var(--prod-accent);
    text-align: center;
}

.prod-donut i,
.prod-donut strong,
.prod-donut span {
    display: block;
}

.prod-donut i { font-size: 19px; }
.prod-donut strong { max-width: 95%; margin-top: 2px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.prod-donut span { color: var(--text-secondary); font-size: 9px; font-weight: 800; }

.prod-participation-list {
    max-height: 190px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.prod-participation-row {
    display: grid;
    grid-template-columns: 9px minmax(80px, 1fr) auto 45px;
    align-items: center;
    gap: 7px;
    min-height: 25px;
    border-bottom: 1px solid var(--prod-line);
    font-size: 10px;
}

.prod-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.prod-participation-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prod-participation-row > strong {
    color: var(--text-primary);
    white-space: nowrap;
}

.prod-participation-row > span:last-child {
    color: var(--prod-accent);
    font-weight: 800;
    text-align: right;
}

.prod-evolution-layout {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) minmax(145px, .32fr);
    gap: 12px;
    min-height: 205px;
}

.prod-month-chart {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(44px, 1fr);
    align-items: end;
    gap: clamp(6px, 1vw, 14px);
    min-width: 0;
    padding: 18px 5px 0;
    overflow-x: auto;
    border-bottom: 1px solid color-mix(in srgb, var(--text-secondary) 48%, transparent);
    background: repeating-linear-gradient(to top, transparent 0, transparent 44px, color-mix(in srgb, var(--border-color) 62%, transparent) 45px);
}

.prod-month-bar {
    height: 178px;
    min-width: 44px;
    display: grid;
    grid-template-rows: 26px 1fr 23px;
    align-items: end;
    text-align: center;
}

.prod-month-bar > strong {
    align-self: start;
    overflow: hidden;
    color: var(--text-primary);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prod-month-bar-track {
    height: 126px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.prod-month-bar-track span {
    width: min(42px, 72%);
    min-height: 0;
    border-radius: 6px 6px 1px 1px;
    background: linear-gradient(180deg, var(--prod-accent), color-mix(in srgb, var(--prod-accent) 78%, #001b3d));
    box-shadow: 0 3px 8px color-mix(in srgb, var(--prod-accent) 22%, transparent);
    transition: height .35s ease;
}

.prod-month-bar small {
    align-self: center;
    color: var(--text-secondary);
    font-size: 9px;
    white-space: nowrap;
}

.prod-variations {
    align-self: center;
    border: 1px solid color-mix(in srgb, var(--prod-accent) 24%, var(--prod-line));
    border-radius: 9px;
    overflow: hidden;
}

.prod-variations > strong {
    display: block;
    padding: 9px;
    background: var(--prod-accent-soft);
    color: var(--prod-accent);
    font-size: 11px;
    text-align: center;
}

.prod-variations > div {
    max-height: 153px;
    overflow-y: auto;
}

.prod-variation-row {
    display: flex;
    justify-content: space-between;
    gap: 7px;
    padding: 8px;
    border-top: 1px solid var(--prod-line);
    color: var(--text-secondary);
    font-size: 9px;
}

.prod-variation-row strong { white-space: nowrap; }
.prod-variation-row.is-up strong { color:#059669; }
.prod-variation-row.is-down strong { color:#dc2626; }
.prod-variation-row.is-new strong { color:#d97706; }

.prod-table-wrap {
    overflow-x: auto;
}

.prod-top-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid var(--prod-line);
    border-radius: 8px;
    font-size: 10px;
}

.prod-top-table th {
    padding: 6px 8px;
    background: var(--prod-accent);
    color: #fff;
    font-weight: 800;
    text-align: left;
}

.prod-top-table th:first-child,
.prod-top-table td:first-child { width: 42px; text-align: center; }
.prod-top-table th:nth-child(3),
.prod-top-table th:nth-child(4),
.prod-top-table td:nth-child(3),
.prod-top-table td:nth-child(4) { text-align: right; }

.prod-top-table td {
    padding: 6px 8px;
    border-top: 1px solid var(--prod-line);
    color: var(--text-primary);
}

.prod-top-table tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--prod-accent-soft) 46%, transparent);
}

.prod-growth-head,
.prod-growth-row {
    display: grid;
    grid-template-columns: minmax(105px, .7fr) minmax(120px, 1fr) 86px 76px;
    align-items: center;
    gap: 8px;
}

.prod-growth-head {
    margin-bottom: 3px;
    color: var(--text-secondary);
    font-size: 8px;
    font-weight: 800;
    text-align: right;
}

.prod-growth-list {
    max-height: 210px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.prod-growth-row {
    min-height: 28px;
    border-top: 1px solid var(--prod-line);
    font-size: 9px;
}

.prod-growth-row > strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prod-growth-track {
    height: 8px;
    border-radius: 999px;
    background: var(--prod-soft);
    overflow: hidden;
}

.prod-growth-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--prod-accent);
}

.prod-growth-row > span,
.prod-growth-row > b {
    text-align: right;
    white-space: nowrap;
}

.prod-growth-row.is-up > b { color:#059669; }
.prod-growth-row.is-down > b { color:#dc2626; }
.prod-growth-row.is-down .prod-growth-track span { background:#dc2626; }

.prod-insights-card {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 10px 13px;
    border: 1px solid color-mix(in srgb, var(--prod-accent-2) 25%, var(--prod-line));
    border-radius: 11px;
    background: linear-gradient(90deg, var(--prod-accent-soft-2), transparent 72%);
}

.prod-insights-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border: 2px solid var(--prod-accent-2);
    border-radius: 50%;
    color: var(--prod-accent-2);
    font-size: 15px;
}

.prod-insights-card h3 {
    margin-bottom: 4px;
    color: var(--prod-accent-2);
}

.prod-insights-card ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.prod-insights-card li {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: var(--text-primary);
    font-size: 9.5px;
    line-height: 1.3;
}

.prod-insights-card li i {
    margin-top: 1px;
    color: var(--prod-accent-2);
}

.prod-muted {
    color: var(--text-secondary);
    font-size: 10px;
}

.prod-detail-mode-tabs {
    display: inline-flex;
    gap: 4px;
    margin: 0 0 11px 66px;
    padding: 4px;
    border: 1px solid var(--prod-line);
    border-radius: 10px;
    background: var(--prod-surface-muted);
}

.prod-detail-mode-tabs button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 32px;
    padding: 6px 13px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 850;
    cursor: pointer;
}

.prod-detail-mode-tabs button.active {
    background: var(--prod-accent);
    color: #fff;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--prod-accent) 25%, transparent);
}

.prod-detail-mode-tabs button:disabled {
    cursor: not-allowed;
    opacity: .45;
}

.prod-family-view-content {
    min-width: 0;
}

.prod-weekly-panel {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.prod-weekly-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.prod-weekly-kpis > div {
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--prod-line);
    border-top: 3px solid var(--prod-accent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--card-bg) 96%, transparent);
}

.prod-weekly-kpis > div:nth-child(even) {
    border-top-color: var(--prod-accent-2);
}

.prod-weekly-kpis span,
.prod-weekly-kpis strong {
    display: block;
    min-width: 0;
}

.prod-weekly-kpis span {
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 9px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prod-weekly-kpis strong {
    margin-top: 4px;
    overflow: hidden;
    color: var(--prod-accent);
    font-size: clamp(14px, 1.25vw, 20px);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prod-weekly-evolution-card {
    min-width: 0;
    padding: 11px 13px 9px;
    overflow: hidden;
    border: 1px solid var(--prod-line);
    border-radius: 11px;
    background: color-mix(in srgb, var(--card-bg) 97%, transparent);
}

.prod-weekly-evolution-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 7px;
}

.prod-weekly-evolution-head h3,
.prod-weekly-evolution-head p {
    margin: 0;
}

.prod-weekly-evolution-head h3 {
    color: var(--prod-accent);
    font-size: 14px;
}

.prod-weekly-evolution-head p {
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 9.5px;
}

.prod-weekly-evolution-head > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--prod-accent-soft);
    color: var(--prod-accent);
    font-size: 9.5px;
    font-weight: 850;
    white-space: nowrap;
}

.prod-weekly-evolution-scroll {
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

.prod-weekly-evolution-chart {
    height: 218px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(78px, 1fr);
    align-items: end;
    gap: 8px;
    padding: 9px 10px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--text-secondary) 48%, transparent);
    background: repeating-linear-gradient(to top, transparent 0, transparent 43px, color-mix(in srgb, var(--border-color) 62%, transparent) 44px);
}

.prod-weekly-evolution-bar {
    height: 208px;
    min-width: 78px;
    display: grid;
    grid-template-rows: 25px 18px 1fr 43px;
    align-items: end;
    text-align: center;
}

.prod-weekly-evolution-bar > strong {
    align-self: center;
    overflow: hidden;
    color: var(--text-primary);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prod-weekly-evolution-change {
    align-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--text-secondary);
    font-size: 8.5px;
    font-weight: 800;
}

.prod-weekly-evolution-bar.is-up .prod-weekly-evolution-change { color:#059669; }
.prod-weekly-evolution-bar.is-down .prod-weekly-evolution-change { color:#dc2626; }

.prod-weekly-evolution-track {
    height: 120px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.prod-weekly-evolution-track > span {
    width: min(46px, 62%);
    min-height: 0;
    border-radius: 6px 6px 1px 1px;
    background: linear-gradient(180deg, var(--prod-accent), color-mix(in srgb, var(--prod-accent) 78%, #001b3d));
    box-shadow: 0 3px 8px color-mix(in srgb, var(--prod-accent) 22%, transparent);
    transition: height .35s ease;
}

.prod-weekly-evolution-bar.is-best .prod-weekly-evolution-track > span {
    background: linear-gradient(180deg, var(--prod-accent-2), color-mix(in srgb, var(--prod-accent-2) 78%, #00332f));
    box-shadow: 0 3px 10px color-mix(in srgb, var(--prod-accent-2) 28%, transparent);
}

.prod-weekly-evolution-bar > small {
    align-self: center;
    display: block;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 8.5px;
    font-weight: 750;
    line-height: 1.18;
}

.prod-weekly-evolution-bar > small em {
    display: block;
    margin-top: 2px;
    color: #b45309;
    font-size: 7.5px;
    font-style: normal;
    font-weight: 850;
}

.prod-weekly-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 12px;
    border: 1px solid var(--prod-line);
    border-radius: 10px;
    background: var(--prod-surface-muted);
}

.prod-weekly-toolbar h3,
.prod-weekly-toolbar p {
    margin: 0;
}

.prod-weekly-toolbar h3 {
    color: var(--text-primary);
    font-size: 13px;
}

.prod-weekly-toolbar p {
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 9.5px;
}

.prod-weekly-toolbar label {
    min-width: 210px;
    display: grid;
    gap: 4px;
    color: var(--text-secondary);
    font-size: 9px;
    font-weight: 800;
}

.prod-weekly-toolbar select {
    width: 100%;
    min-height: 34px;
    padding: 6px 28px 6px 10px;
    border: 1px solid color-mix(in srgb, var(--prod-accent) 35%, var(--prod-line));
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 800;
}

.prod-weekly-table-wrap {
    max-height: min(55vh, 560px);
    min-width: 0;
    overflow: auto;
    border: 1px solid var(--prod-line);
    border-radius: 11px;
    background: var(--card-bg);
    scrollbar-width: thin;
}

.prod-weekly-table {
    width: 100%;
    min-width: max-content;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--text-primary);
    font-size: 10px;
}

.prod-weekly-table th,
.prod-weekly-table td {
    min-width: 92px;
    height: 38px;
    padding: 7px 9px;
    border-right: 1px solid var(--prod-line);
    border-bottom: 1px solid var(--prod-line);
    text-align: right;
    white-space: nowrap;
}

.prod-weekly-table thead th {
    position: sticky;
    z-index: 3;
    top: 0;
    background: color-mix(in srgb, var(--prod-accent) 88%, #10202d);
    color: #fff;
    font-size: 10px;
    font-weight: 850;
}

.prod-weekly-table thead th small,
.prod-weekly-table tbody th small {
    display: block;
    margin-top: 2px;
    opacity: .78;
    font-size: 8px;
    font-weight: 650;
}

.prod-weekly-table thead th:first-child,
.prod-weekly-table tbody th:first-child,
.prod-weekly-table tfoot th:first-child {
    position: sticky;
    z-index: 2;
    left: 0;
    min-width: 145px;
    text-align: left;
}

.prod-weekly-table thead th:first-child {
    z-index: 4;
}

.prod-weekly-table tbody th:first-child {
    background: var(--card-bg);
}

.prod-weekly-table tbody tr:nth-child(even) td,
.prod-weekly-table tbody tr:nth-child(even) th:first-child {
    background: color-mix(in srgb, var(--prod-accent-soft) 38%, var(--card-bg));
}

.prod-weekly-table .prod-weekly-highlight {
    background: color-mix(in srgb, var(--prod-accent-soft) 72%, var(--card-bg));
    color: var(--prod-accent);
    font-weight: 900;
}

.prod-weekly-table thead .prod-weekly-highlight {
    background: color-mix(in srgb, var(--prod-accent-2) 84%, #10202d);
    color: #fff;
}

.prod-weekly-table .prod-weekly-physical {
    color: #047857;
    font-weight: 900;
}

.prod-weekly-table thead .prod-weekly-physical {
    background: #047857;
    color: #fff;
}

.prod-weekly-table tfoot th,
.prod-weekly-table tfoot td {
    position: sticky;
    z-index: 2;
    bottom: 0;
    border-bottom: 0;
    background: var(--prod-surface-muted);
    color: var(--text-primary);
    font-weight: 900;
}

.prod-weekly-table tfoot th:first-child {
    z-index: 3;
}

.prod-weekly-empty {
    min-height: 210px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 7px;
    border: 1px dashed var(--prod-line);
    border-radius: 12px;
    color: var(--text-secondary);
    text-align: center;
}

.prod-weekly-empty i {
    color: var(--prod-accent);
    font-size: 28px;
}

.prod-weekly-empty strong {
    color: var(--text-primary);
}

body.dark-mode .prod-family-dashboard,
body.dark-mode .prod-report-overview,
body.dark-mode .prod-family-tab,
body.dark-mode .prod-report-state {
    box-shadow: 0 8px 22px rgba(0, 0, 0, .24);
}

body.dark-mode .prod-kpi-card,
body.dark-mode .prod-report-card,
body.dark-mode .prod-weekly-evolution-card,
body.dark-mode .prod-weekly-kpis > div {
    background: color-mix(in srgb, var(--card-bg) 91%, #0b141a);
}

body.dark-mode .prod-donut > div {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

@media (max-width: 1380px) {
    .prod-report-grid {
        grid-template-columns: minmax(330px, .9fr) minmax(430px, 1.1fr);
    }
    .prod-participation-layout {
        grid-template-columns: 130px minmax(190px, 1fr);
    }
    .prod-evolution-layout {
        grid-template-columns: minmax(280px, 1fr) 135px;
    }
}

@media (max-width: 1120px) {
    .prod-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .prod-report-grid { grid-template-columns: 1fr; }
    .prod-insights-card { grid-column: auto; }
    .prod-overview-stat:nth-last-child(-n+2) { display:none; }
    .prod-weekly-kpis { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    #sales-page-productos .prod-report-controls { top:-25px; }
    #sales-page-productos .prod-toolbar-spacer { display:none; }
    #sales-page-productos .prod-report-toolbar .action-btn,
    #sales-page-productos .prod-report-toolbar .btn-primary { flex:1 1 180px; justify-content:center; }
    .prod-report-overview { align-items:flex-start; flex-wrap:wrap; }
    .prod-overview-period { flex:1 0 100%; }
    .prod-family-dashboard { padding:11px; }
    .prod-family-header h2 { font-size:23px; }
    .prod-detail-mode-tabs { margin-left:0; width:100%; }
    .prod-detail-mode-tabs button { flex:1; }
    .prod-weekly-kpis { grid-template-columns:1fr; }
    .prod-weekly-evolution-head { align-items:stretch; flex-direction:column; }
    .prod-weekly-evolution-head > span { align-self:flex-start; }
    .prod-weekly-toolbar { align-items:stretch; flex-direction:column; }
    .prod-weekly-toolbar label { min-width:0; }
    .prod-kpi-grid { grid-template-columns:1fr; }
    .prod-participation-layout,
    .prod-evolution-layout { grid-template-columns:1fr; }
    .prod-month-chart { min-height:200px; }
    .prod-growth-head { display:none; }
    .prod-growth-row { grid-template-columns:minmax(95px,.8fr) minmax(95px,1fr) 72px; }
    .prod-growth-row > b { display:none; }
    .prod-insights-card ul { grid-template-columns:1fr; }
}

/* Panel App · selector genérico de obsequios por familia y volumen */
.appgift-admin-products{display:flex;flex-direction:column;gap:9px;min-width:0}
.appgift-admin-products-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.appgift-admin-products-title>span{font-size:11px;font-weight:800;text-transform:uppercase;color:#9ec2df}
.appgift-admin-products-title>small{max-width:720px;text-align:right;line-height:1.35}
.appgift-admin-picker{border:1px solid rgba(111,230,236,.22);border-radius:13px;background:rgba(5,27,33,.42);overflow:hidden}
.appgift-admin-picker-search{display:flex!important;align-items:center;gap:8px;padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025)}
.appgift-admin-picker-search>i{color:#77e5d2;font-size:12px}
.appgift-admin-picker-search>input{border:0!important;background:transparent!important;padding:3px 0!important;border-radius:0!important;box-shadow:none!important;outline:0;color:var(--text-main)}
.appgift-admin-picker-search>input::placeholder{color:var(--text-secondary)}
.appgift-admin-family-list{display:flex;flex-direction:column;gap:8px;max-height:360px;overflow:auto;padding:9px;scrollbar-gutter:stable}
.appgift-admin-family{display:flex;flex-direction:column;gap:7px;padding:9px;border:1px solid rgba(255,255,255,.07);border-radius:11px;background:rgba(255,255,255,.025)}
.appgift-admin-family-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 2px}
.appgift-admin-family-head>b{font-size:12px;color:#8ce9d5}
.appgift-admin-family-head>span{font-size:10px;color:var(--text-secondary)}
.appgift-admin-choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:7px}
.appgift-admin-choice{display:grid!important;grid-template-columns:18px minmax(0,1fr);align-items:center;gap:8px;min-width:0;padding:9px 10px;border:1px solid rgba(255,255,255,.09);border-radius:10px;background:rgba(0,0,0,.13);cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .15s ease}
.appgift-admin-choice:hover{border-color:rgba(111,230,236,.38);background:rgba(33,128,139,.12)}
.appgift-admin-choice:has(input:checked){border-color:rgba(80,220,194,.58);background:rgba(24,164,139,.15);box-shadow:0 0 0 1px rgba(80,220,194,.12) inset}
.appgift-admin-choice input[type="checkbox"]{width:18px!important;height:18px;min-width:18px;padding:0!important;margin:0;accent-color:#35d3b5;cursor:pointer}
.appgift-admin-choice-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.appgift-admin-choice-copy>b{font-size:12px;line-height:1.25;color:var(--text-main);overflow-wrap:anywhere}
.appgift-admin-choice-copy>small{font-size:10px;line-height:1.25;color:var(--text-secondary)}
.appgift-admin-picker-empty{padding:18px;text-align:center;color:var(--text-secondary);font-size:11px}
.appgift-admin-selection-summary{align-self:flex-start;padding:5px 9px;border:1px solid rgba(80,220,194,.3);border-radius:999px;background:rgba(24,164,139,.12);color:#8ce9d5;font-size:10.5px;font-weight:800}
.appgift-admin-selection-summary.is-empty{border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.025);color:var(--text-secondary)}
.appgift-admin-migration-note,.appgift-admin-legacy-note{display:flex;align-items:flex-start;gap:7px;padding:8px 10px;border-radius:9px;font-size:10.5px;line-height:1.35}
.appgift-admin-migration-note{border:1px solid rgba(80,220,194,.24);background:rgba(24,164,139,.1);color:#a9f1e2}
.appgift-admin-legacy-note{border:1px solid rgba(255,191,71,.25);background:rgba(255,191,71,.08);color:#f4cf8b}
.appgift-admin-cover-list{display:flex;flex-direction:column;gap:8px}
.appgift-admin-cover-details{border:1px solid rgba(255,255,255,.09);border-radius:11px;background:rgba(255,255,255,.02);overflow:hidden}
.appgift-admin-cover-details>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 11px;cursor:pointer;list-style:none}
.appgift-admin-cover-details>summary::-webkit-details-marker{display:none}
.appgift-admin-cover-details>summary>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.appgift-admin-cover-details>summary b{font-size:11.5px;color:var(--text-main)}
.appgift-admin-cover-details>summary small{font-size:10px;color:var(--text-secondary)}
.appgift-admin-cover-details>summary em{min-width:25px;padding:3px 7px;border-radius:999px;background:rgba(80,220,194,.13);color:#8ce9d5;font-size:10px;font-style:normal;font-weight:800;text-align:center}
.appgift-admin-cover-editors{display:flex;flex-direction:column;gap:8px;padding:0 9px 9px}
.appgift-admin-cover{display:grid;grid-template-columns:84px minmax(0,1fr);gap:10px;padding:9px;border:1px solid rgba(111,230,236,.22);border-radius:12px;background:rgba(17,61,69,.28);align-items:center}
.appgift-admin-cover-preview{width:84px;height:84px;border:1px solid rgba(255,255,255,.12);border-radius:11px;background:rgba(0,0,0,.18);display:grid;place-items:center;overflow:hidden;color:#77e5d2;font-size:25px}
.appgift-admin-cover-preview img{width:100%;height:100%;display:block;object-fit:contain;background:#fff}
.appgift-admin-cover-fields{display:flex;flex-direction:column;gap:5px;min-width:0}
.appgift-admin-cover-fields>b{font-size:12px;color:var(--text-main)}
.appgift-admin-cover-fields>small{font-size:10.5px;color:var(--text-secondary)}
.appgift-admin-cover-fields input[type="url"]{width:100%;box-sizing:border-box;border:1px solid var(--border-color);border-radius:9px;padding:8px 9px;background:var(--bg-sidebar);color:var(--text-main);font-size:12px}
.appgift-admin-cover-actions{display:flex;gap:7px;flex-wrap:wrap}
.appgift-admin-cover-actions button{min-height:32px;padding:6px 9px;font-size:11px}
@media(max-width:700px){
  .appgift-admin-products-title{align-items:flex-start;flex-direction:column}
  .appgift-admin-products-title>small{text-align:left}
  .appgift-admin-family-list{max-height:320px}
  .appgift-admin-choice-grid{grid-template-columns:1fr}
  .appgift-admin-cover{grid-template-columns:64px minmax(0,1fr)}
  .appgift-admin-cover-preview{width:64px;height:64px}
}

/* =============================
   Panel App > Club Sol Clean
============================= */
.appclub-shell{
    display:flex;
    flex-direction:column;
    gap:16px;
    min-height:0;
}
.appclub-grid{
    display:grid;
    grid-template-columns:minmax(320px, 1fr) minmax(320px, 1fr);
    gap:16px;
    align-items:start;
}
.appclub-card{
    background:var(--bg-card, #111827);
    border:1px solid var(--border-color, rgba(148,163,184,.25));
    border-radius:16px;
    padding:16px;
    min-width:0;
    box-shadow:0 14px 35px rgba(0,0,0,.14);
}
.appclub-card-head{
    display:flex;
    flex-direction:column;
    gap:3px;
    margin-bottom:12px;
}
.appclub-card-head b{
    color:var(--text-main, #f8fafc);
    font-size:15px;
}
.appclub-card-head span,
.appclub-visible-rules li{
    color:var(--text-secondary, #94a3b8);
    font-size:12px;
    line-height:1.45;
}
.appclub-form-grid,
.appclub-reward-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
}
.appclub-form-grid label,
.appclub-reward-grid label,
.appclub-wide-field{
    display:flex;
    flex-direction:column;
    gap:5px;
    min-width:0;
}
.appclub-form-grid span,
.appclub-reward-grid span,
.appclub-wide-field span{
    font-size:11px;
    color:var(--text-secondary, #94a3b8);
    font-weight:700;
}
.appclub-form-grid input,
.appclub-form-grid select,
.appclub-reward-grid input,
.appclub-reward-grid select,
.appclub-wide-field input,
.appclub-wide-field textarea,
.appclub-customer-toolbar input{
    width:100%;
    box-sizing:border-box;
    border:1px solid var(--border-color, rgba(148,163,184,.25));
    border-radius:10px;
    background:var(--bg-sidebar, #0f172a);
    color:var(--text-main, #f8fafc);
    padding:9px 10px;
    outline:none;
}
.appclub-visible-rules{
    margin-top:12px;
    padding:12px;
    border-radius:12px;
    background:rgba(34,197,94,.08);
    border:1px solid rgba(34,197,94,.18);
}
.appclub-visible-rules b{
    display:block;
    margin-bottom:5px;
    color:#86efac;
}
.appclub-visible-rules ul{
    margin:0;
    padding-left:18px;
}

.appclub-terms-editor{
    margin-top:12px;
    padding:12px;
    border-radius:12px;
    background:rgba(59,130,246,.08);
    border:1px solid rgba(59,130,246,.18);
}
.appclub-terms-field textarea{
    min-height:150px;
    resize:vertical;
    line-height:1.42;
    font-size:12px;
}
.appclub-terms-editor small{
    display:block;
    margin-top:7px;
    color:var(--text-secondary, #94a3b8);
    font-size:11.5px;
    line-height:1.35;
}
.appclub-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:12px;
    justify-content:flex-end;
}
.appclub-rewards-list{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-bottom:12px;
}
.appclub-reward-row{
    border:1px solid var(--border-color, rgba(148,163,184,.25));
    border-radius:14px;
    padding:12px;
    background:rgba(15,23,42,.42);
    display:flex;
    flex-direction:column;
    gap:10px;
}
.appclub-reward-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}
.appclub-reward-top b{
    color:var(--text-main, #f8fafc);
}
.appclub-customer-card{
    margin-top:0;
}
.appclub-customer-toolbar{
    display:grid;
    grid-template-columns:180px auto 120px minmax(220px,1fr) auto;
    gap:10px;
    align-items:center;
}
.appclub-customer-result{
    margin-top:14px;
    min-width:0;
}
.appclub-customer-summary{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:10px;
    margin-bottom:14px;
}
.appclub-customer-summary > div{
    background:rgba(15,23,42,.5);
    border:1px solid var(--border-color, rgba(148,163,184,.25));
    border-radius:12px;
    padding:12px;
    min-width:0;
}
.appclub-customer-summary span,
.appclub-customer-summary small{
    display:block;
    color:var(--text-secondary, #94a3b8);
    font-size:11px;
    overflow:hidden;
    text-overflow:ellipsis;
}
.appclub-customer-summary b{
    display:block;
    color:var(--text-main, #f8fafc);
    font-size:15px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.appclub-tables{
    display:flex;
    flex-direction:column;
    gap:16px;
}
.appclub-tables h4{
    margin:0 0 8px 0;
    color:var(--text-main, #f8fafc);
    font-size:13px;
}
.appclub-table{
    width:100%;
    border-collapse:collapse;
    font-size:12px;
    overflow:hidden;
    border-radius:12px;
}
.appclub-table th,
.appclub-table td{
    border:1px solid var(--border-color, rgba(148,163,184,.18));
    padding:8px;
    text-align:left;
    color:var(--text-secondary, #cbd5e1);
    vertical-align:top;
}
.appclub-table th{
    color:var(--text-main, #f8fafc);
    background:rgba(15,23,42,.75);
}
.appclub-pos{
    color:#86efac !important;
    font-weight:800;
}
.appclub-neg{
    color:#fca5a5 !important;
    font-weight:800;
}
@media (max-width: 1100px){
    .appclub-grid{ grid-template-columns:1fr; }
    .appclub-customer-toolbar{ grid-template-columns:1fr 1fr; }
    .appclub-customer-summary{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 700px){
    .appclub-form-grid,
    .appclub-reward-grid,
    .appclub-customer-toolbar,
    .appclub-customer-summary{ grid-template-columns:1fr; }
    .appclub-card{ padding:12px; }
}

/* 10D33C - Panel App > Club Sol Clean > Solicitudes de canje */
.appclub-redemptions-card{ margin-top:0; }
.appclub-redemption-toolbar{
    display:grid;
    grid-template-columns:180px minmax(180px, 1fr) auto;
    gap:10px;
    align-items:center;
    margin-bottom:12px;
}
.appclub-redemption-toolbar input,
.appclub-redemption-toolbar select{
    width:100%;
    box-sizing:border-box;
    border:1px solid var(--border-color, rgba(148,163,184,.25));
    border-radius:10px;
    background:var(--bg-sidebar, #0f172a);
    color:var(--text-main, #f8fafc);
    padding:9px 10px;
    outline:none;
}
.appclub-redemptions-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.appclub-redemption-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:12px;
    align-items:center;
    border:1px solid var(--border-color, rgba(148,163,184,.22));
    border-radius:14px;
    background:rgba(15,23,42,.42);
    padding:12px;
}
.appclub-redemption-main{
    display:flex;
    flex-direction:column;
    gap:3px;
    min-width:0;
}
.appclub-redemption-main b{
    color:var(--text-main, #f8fafc);
    font-size:14px;
}
.appclub-redemption-main span,
.appclub-redemption-main small,
.appclub-redemption-main em{
    color:var(--text-secondary, #94a3b8);
    font-size:12px;
    line-height:1.35;
    font-style:normal;
    overflow-wrap:anywhere;
}
.appclub-redemption-main em{
    color:#cbd5e1;
}
.appclub-redemption-actions{
    display:flex;
    gap:8px;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
}
.appclub-redemption-actions span{
    color:var(--text-secondary, #94a3b8);
    font-size:12px;
}
@media (max-width: 900px){
    .appclub-redemption-toolbar,
    .appclub-redemption-row{ grid-template-columns:1fr; }
    .appclub-redemption-actions{ justify-content:flex-start; }
}


/* 10D33E - Panel App > Club Sol Clean > Referidos auditables */
.appclub-referrals-card{ margin-top:0; }
.appclub-referral-toolbar{
    display:grid;
    grid-template-columns:190px minmax(180px, 1fr) minmax(180px, 1fr) auto;
    gap:10px;
    align-items:center;
    margin-bottom:12px;
}
.appclub-referral-toolbar input,
.appclub-referral-toolbar select{
    width:100%;
    box-sizing:border-box;
    border:1px solid var(--border-color, rgba(148,163,184,.25));
    border-radius:10px;
    background:var(--bg-sidebar, #0f172a);
    color:var(--text-main, #f8fafc);
    padding:9px 10px;
    outline:none;
}
.appclub-referrals-list{display:flex;flex-direction:column;gap:10px;}
.appclub-referral-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:12px;
    align-items:center;
    border:1px solid var(--border-color, rgba(148,163,184,.22));
    border-radius:14px;
    background:rgba(15,23,42,.42);
    padding:12px;
}
.appclub-referral-main{display:flex;flex-direction:column;gap:3px;min-width:0;}
.appclub-referral-main b{color:var(--text-main, #f8fafc);font-size:14px;overflow-wrap:anywhere;}
.appclub-referral-main span,
.appclub-referral-main small,
.appclub-referral-main em{color:var(--text-secondary, #94a3b8);font-size:12px;line-height:1.35;font-style:normal;overflow-wrap:anywhere;}
.appclub-referral-main em{color:#cbd5e1;}
.appclub-referral-side{display:flex;flex-direction:column;gap:7px;align-items:flex-end;}
.appclub-referral-side strong{color:var(--text-main, #f8fafc);font-size:12px;}
.appclub-ref-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:5px 8px;font-size:11px;font-weight:900;white-space:nowrap;}
.appclub-ref-pending{background:#ffefb8;color:#503700;}
.appclub-ref-success{background:#c9ffe9;color:#07343b;}
.appclub-ref-warning{background:#fef3c7;color:#78350f;}
.appclub-ref-danger{background:#ffd2d2;color:#5a1010;}
@media (max-width: 950px){
    .appclub-referral-toolbar,
    .appclub-referral-row{grid-template-columns:1fr;}
    .appclub-referral-side{align-items:flex-start;}
}

/* Club Sol Clean 10D33I: configuración visible de niveles, rachas y novedades */
.appclub-advanced-editor{
    margin-top:12px;
    padding:12px;
    border-radius:12px;
    background:rgba(168,85,247,.08);
    border:1px solid rgba(168,85,247,.18);
    display:flex;
    flex-direction:column;
    gap:10px;
}
.appclub-subhead{ margin-bottom:2px; }
.appclub-notification-templates{
    display:flex;
    flex-direction:column;
    gap:8px;
    border-top:1px solid rgba(148,163,184,.18);
    padding-top:10px;
}
.appclub-notification-templates > b{
    color:var(--text-main, #f8fafc);
    font-size:13px;
}
.appclub-notification-templates small{
    color:var(--text-secondary, #94a3b8);
    font-size:11.5px;
    line-height:1.35;
}
.appclub-template-grid,
.appclub-level-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
}
.appclub-template-grid label,
.appclub-level-grid label{
    display:flex;
    flex-direction:column;
    gap:5px;
    min-width:0;
}
.appclub-template-grid span,
.appclub-level-grid span{
    font-size:11px;
    color:var(--text-secondary, #94a3b8);
    font-weight:700;
}
.appclub-template-grid input,
.appclub-level-grid input{
    width:100%;
    box-sizing:border-box;
    border:1px solid var(--border-color, rgba(148,163,184,.25));
    border-radius:10px;
    background:var(--bg-sidebar, #0f172a);
    color:var(--text-main, #f8fafc);
    padding:9px 10px;
    outline:none;
}
.appclub-levels-card{ grid-column:1 / -1; }
.appclub-levels-list{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
}
.appclub-level-row{
    border:1px solid var(--border-color, rgba(148,163,184,.25));
    border-radius:14px;
    padding:12px;
    background:rgba(15,23,42,.42);
    display:flex;
    flex-direction:column;
    gap:10px;
    min-width:0;
}
@media(max-width:900px){
    .appclub-template-grid,
    .appclub-level-grid,
    .appclub-levels-list{grid-template-columns:1fr;}
    .appclub-levels-card{grid-column:auto;}
}


.appclub-metrics-card{grid-column:1 / -1;margin-bottom:14px;}
.appclub-metrics-card .appclub-card-head{align-items:flex-start;gap:12px;}
.appclub-metrics-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
.appclub-metrics-toolbar select{min-width:150px;padding:8px 10px;border-radius:10px;border:1px solid var(--border-color, rgba(148,163,184,.25));background:var(--bg-input, rgba(15,23,42,.55));color:var(--text-main, #f8fafc);}
.appclub-metrics-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px;}
.appclub-metric-card{border:1px solid rgba(148,163,184,.22);border-radius:14px;background:rgba(15,23,42,.42);padding:12px;display:flex;flex-direction:column;gap:5px;min-height:92px;}
.appclub-metric-card span{font-size:12px;color:var(--text-secondary,#94a3b8);font-weight:800;text-transform:uppercase;letter-spacing:.02em;}
.appclub-metric-card b{font-size:24px;color:var(--text-main,#f8fafc);line-height:1.1;}
.appclub-metric-card small{font-size:12px;color:var(--text-secondary,#94a3b8);line-height:1.35;}
.appclub-metric-blue{background:linear-gradient(135deg,rgba(59,130,246,.18),rgba(15,23,42,.48));}
.appclub-metric-green{background:linear-gradient(135deg,rgba(16,185,129,.18),rgba(15,23,42,.48));}
.appclub-metric-purple{background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(15,23,42,.48));}
.appclub-metric-orange{background:linear-gradient(135deg,rgba(245,158,11,.18),rgba(15,23,42,.48));}
.appclub-metrics-detail{display:flex;flex-direction:column;gap:12px;margin-top:14px;}
.appclub-metrics-columns{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.appclub-metric-table-wrap{border:1px solid rgba(148,163,184,.16);border-radius:14px;background:rgba(15,23,42,.28);padding:10px;overflow:auto;}
.appclub-metric-table-wrap h4{margin:0 0 8px;color:var(--text-main,#f8fafc);font-size:14px;}
.appclub-metric-table{min-width:620px;}
.appclub-metric-table td{max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media (max-width:1100px){
    .appclub-metrics-summary{grid-template-columns:repeat(2,minmax(0,1fr));}
    .appclub-metrics-columns{grid-template-columns:1fr;}
}
@media (max-width:650px){
    .appclub-metrics-summary{grid-template-columns:1fr;}
    .appclub-metrics-toolbar{justify-content:flex-start;width:100%;}
}

.appclub-integrity-card{grid-column:1 / -1;margin-bottom:14px;}
.appclub-integrity-result{display:flex;flex-direction:column;gap:12px;margin-top:10px;}
.appclub-integrity-summary{border:1px solid rgba(148,163,184,.2);border-radius:14px;padding:12px;background:rgba(15,23,42,.42);display:flex;flex-direction:column;gap:4px;}
.appclub-integrity-summary b{font-size:16px;color:var(--text-main,#f8fafc);}
.appclub-integrity-summary span,.appclub-integrity-summary small{font-size:12px;color:var(--text-secondary,#94a3b8);}
.appclub-integrity-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.appclub-integrity-check{border:1px solid rgba(148,163,184,.18);border-radius:13px;background:rgba(15,23,42,.34);padding:11px;display:flex;flex-direction:column;gap:5px;min-height:92px;}
.appclub-integrity-check strong{font-size:13px;color:var(--text-main,#f8fafc);}
.appclub-integrity-check span,.appclub-integrity-check small{font-size:12px;color:var(--text-secondary,#94a3b8);line-height:1.35;}
.appclub-integrity-ok{border-color:rgba(34,197,94,.35);background:linear-gradient(135deg,rgba(34,197,94,.12),rgba(15,23,42,.34));}
.appclub-integrity-warning{border-color:rgba(245,158,11,.45);background:linear-gradient(135deg,rgba(245,158,11,.14),rgba(15,23,42,.34));}
.appclub-integrity-critical{border-color:rgba(239,68,68,.5);background:linear-gradient(135deg,rgba(239,68,68,.16),rgba(15,23,42,.34));}
@media (max-width:1100px){.appclub-integrity-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:650px){.appclub-integrity-grid{grid-template-columns:1fr;}}

/* 01JUL - Panel Web independiente (WordPress / WooCommerce) */
.web-panel-layout .panel-modal-header h2 i{color:#36d399;}
.web-panel-body{background:var(--bg-app);}
.websync-hero{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    background:linear-gradient(135deg, rgba(32,201,151,.16), rgba(13,202,240,.08));
    border:1px solid rgba(54,211,153,.24);
    border-radius:16px;
    padding:18px;
    margin-bottom:18px;
}
.websync-hero h3{
    margin:0 0 8px;
    color:var(--text-primary);
    font-size:19px;
    display:flex;
    align-items:center;
    gap:10px;
}
.websync-hero p{
    margin:0;
    color:var(--text-secondary);
    line-height:1.45;
    max-width:850px;
}
.websync-badge{
    display:inline-flex;
    align-items:center;
    gap:7px;
    flex:0 0 auto;
    padding:8px 11px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    white-space:nowrap;
}
.websync-badge-safe{
    background:rgba(54,211,153,.14);
    border:1px solid rgba(54,211,153,.35);
    color:#9ff4d0;
}
.websync-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    margin-bottom:18px;
}
.websync-card,
.websync-section{
    background:var(--card-bg);
    border:1px solid var(--border-color);
    border-radius:14px;
    padding:16px;
    box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.websync-card-icon{
    width:42px;
    height:42px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(54,211,153,.13);
    color:#36d399;
    margin-bottom:10px;
    font-size:18px;
}
.websync-card h4,
.websync-section h4,
.websync-section h3{
    margin:0 0 9px;
    color:var(--text-primary);
}
.websync-card p,
.websync-section p{
    margin:0;
    color:var(--text-secondary);
    line-height:1.42;
    font-size:13px;
}
.websync-steps{
    margin:10px 0 0 18px;
    padding:0;
    color:var(--text-secondary);
    line-height:1.55;
}
.websync-steps li{margin-bottom:7px;}
.websync-steps b{color:var(--text-primary);}
.websync-empty{
    min-height:180px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    text-align:center;
    color:var(--text-secondary);
    border:1px dashed var(--border-color);
    border-radius:14px;
    background:rgba(255,255,255,.025);
    margin-top:14px;
    padding:22px;
}
.websync-empty i{font-size:30px;color:#36d399;opacity:.9;}
.websync-empty b{color:var(--text-primary);font-size:15px;}
.websync-empty span{max-width:520px;line-height:1.35;}
.websync-table .websync-muted-cell{
    text-align:center;
    color:var(--text-secondary);
    padding:28px 15px;
    font-style:italic;
}
@media (max-width: 980px){
    .websync-grid{grid-template-columns:1fr;}
    .websync-hero{flex-direction:column;}
}

/* 01JUL - Panel Web fase 2: conexión y lectura WooCommerce */
.websync-status-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin-bottom:14px;
}
.websync-status-card{
    background:var(--card-bg);
    border:1px solid var(--border-color);
    border-radius:14px;
    padding:14px;
    min-height:92px;
    display:flex;
    flex-direction:column;
    gap:5px;
}
.websync-status-card.is-ok{border-color:rgba(54,211,153,.42);box-shadow:0 0 0 1px rgba(54,211,153,.08) inset;}
.websync-status-card.is-bad{border-color:rgba(255,99,132,.36);box-shadow:0 0 0 1px rgba(255,99,132,.08) inset;}
.websync-status-card.is-pending{border-color:rgba(255,193,7,.26);}
.websync-status-label{
    color:var(--text-secondary);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.06em;
    font-weight:800;
}
.websync-status-card b{
    color:var(--text-primary);
    font-size:18px;
    line-height:1.12;
}
.websync-status-card small{
    color:var(--text-secondary);
    line-height:1.3;
}
.websync-actions-row{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin:4px 0 18px;
}
.websync-env-list{
    margin-top:12px;
    display:grid;
    gap:8px;
}
.websync-env-list code,
.websync-table code{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    border-radius:8px;
    padding:4px 7px;
    color:#dff7ff;
    font-size:12px;
}
.websync-section-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    margin-bottom:12px;
}
.websync-section-head h3{margin-bottom:6px;}
.websync-inline-status{
    background:rgba(54,211,153,.08);
    border:1px solid rgba(54,211,153,.18);
    color:var(--text-secondary);
    border-radius:12px;
    padding:10px 12px;
    margin:12px 0;
    font-size:13px;
    line-height:1.35;
}
.websync-products-table-wrap{max-height:52vh;overflow:auto;}
.websync-table td b{display:block;color:var(--text-primary);margin-bottom:3px;}
.websync-table td small{display:block;color:var(--text-secondary);line-height:1.35;}
.websync-muted{color:var(--text-secondary);opacity:.8;}
.websync-pill{
    display:inline-flex;
    align-items:center;
    padding:5px 9px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.045);
    color:var(--text-secondary);
    font-size:12px;
    font-weight:800;
    white-space:nowrap;
}
.websync-pill-ok{background:rgba(54,211,153,.13);border-color:rgba(54,211,153,.30);color:#9ff4d0;}
.websync-pill-bad{background:rgba(255,99,132,.12);border-color:rgba(255,99,132,.30);color:#ffb4c1;}
.websync-pill-warn{background:rgba(255,193,7,.12);border-color:rgba(255,193,7,.28);color:#ffe08a;}
@media(max-width:900px){
    .websync-status-grid{grid-template-columns:1fr;}
    .websync-section-head{flex-direction:column;}
}

/* 01JUL - Panel Web fase 3: mapeo manual CRM ↔ WooCommerce */
.websync-map-table th,
.websync-map-table td{vertical-align:top;}
.websync-select{
    width:100%;
    min-width:260px;
    background:var(--input-bg, rgba(255,255,255,.06));
    border:1px solid var(--border-color);
    color:var(--text-primary);
    border-radius:10px;
    padding:9px 10px;
    font-size:13px;
    line-height:1.2;
    outline:none;
}
.websync-select:focus{
    border-color:rgba(54,211,153,.55);
    box-shadow:0 0 0 3px rgba(54,211,153,.08);
}
.websync-select option{background:#102328;color:#f3fbfd;}
.websync-check{
    display:flex;
    align-items:center;
    gap:7px;
    color:var(--text-secondary);
    font-size:12px;
    font-weight:800;
    line-height:1.2;
    margin:0 0 7px;
    white-space:nowrap;
}
.websync-check input{accent-color:#36d399;}
.websync-map-table .btn-primary-small,
.websync-map-table .btn-secondary-small{margin:0 4px 6px 0;}
@media(max-width:900px){
    .websync-select{min-width:220px;}
}

/* 01JUL - Panel Web: selector explícito de sucursal para mapeo */
.websync-branch-control{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    justify-content:flex-end;
}
.websync-branch-control label{
    color:var(--text-secondary);
    font-size:12px;
    font-weight:800;
    white-space:nowrap;
}
.websync-branch-select{
    width:auto;
    min-width:150px;
    max-width:190px;
    padding:8px 10px;
}
@media(max-width:900px){
    .websync-branch-control{
        justify-content:flex-start;
        width:100%;
    }
    .websync-branch-select{
        width:100%;
        max-width:none;
    }
}

/* 01JUL - Panel Web fase 4: simulación segura CRM ↔ WooCommerce */
.websync-simulation-cards{
    display:grid;
    grid-template-columns:repeat(5, minmax(110px, 1fr));
    gap:10px;
    margin:10px 0 12px;
}
.websync-sim-card{
    border:1px solid rgba(255,255,255,.09);
    border-radius:14px;
    padding:12px;
    background:rgba(255,255,255,.045);
    min-height:70px;
}
.websync-sim-card span{
    display:block;
    color:var(--text-secondary);
    font-size:12px;
    font-weight:800;
    margin-bottom:6px;
}
.websync-sim-card b{
    color:var(--text-primary);
    font-size:22px;
    line-height:1;
}
.websync-diff{
    display:inline-flex;
    align-items:center;
    flex-wrap:wrap;
    gap:7px;
    color:var(--text-primary);
}
.websync-diff b{
    display:inline-block;
    margin:0;
}
.websync-diff i{
    color:#36d399;
    font-size:12px;
}
.websync-safe-note{
    display:flex;
    gap:10px;
    align-items:flex-start;
    margin-top:12px;
    padding:12px 14px;
    border-radius:14px;
    border:1px solid rgba(54,211,153,.18);
    background:rgba(54,211,153,.07);
    color:var(--text-secondary);
    font-weight:750;
    line-height:1.35;
}
.websync-safe-note i{color:#36d399;margin-top:2px;}
.websync-simulation-table td{vertical-align:top;}
@media (max-width:900px){
    .websync-simulation-cards{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (max-width:520px){
    .websync-simulation-cards{grid-template-columns:1fr;}
}

/* 01JUL - Panel Web fase 5: sincronización manual e historial */
.websync-actions-right{
    margin:0;
    justify-content:flex-end;
    flex:0 0 auto;
}
.websync-sync-btn{
    background:linear-gradient(135deg,#22c55e,#16a34a) !important;
    border-color:rgba(34,197,94,.45) !important;
    color:#fff !important;
    box-shadow:0 8px 18px rgba(34,197,94,.18);
}
.websync-sync-btn:disabled,
.websync-actions-row button:disabled{
    opacity:.65;
    cursor:not-allowed;
    transform:none !important;
}
.websync-history-table td{vertical-align:top;}
.websync-history-table td br{display:block;margin-bottom:3px;}
@media(max-width:900px){
    .websync-actions-right{
        width:100%;
        justify-content:flex-start;
    }
}


/* 01JUL - Panel Web: actualización automática controlada */
.websync-auto-section{
    border:1px solid rgba(0,168,132,.18);
    background:linear-gradient(135deg, rgba(0,168,132,.06), rgba(54,211,153,.04));
}
.websync-auto-section.is-auto-on{
    border-color:rgba(0,168,132,.32);
    box-shadow:0 12px 30px rgba(0,168,132,.08);
}
.websync-auto-head{
    align-items:center;
}
.websync-auto-toggle{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border:1px solid var(--table-border);
    border-radius:999px;
    background:var(--card-bg);
    color:var(--text-primary);
    cursor:pointer;
    user-select:none;
    white-space:nowrap;
}
.websync-auto-toggle input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}
.websync-auto-switch{
    width:46px;
    height:26px;
    border-radius:999px;
    background:#cbd5e1;
    position:relative;
    transition:background .18s ease;
    flex:0 0 auto;
}
.websync-auto-switch::after{
    content:"";
    position:absolute;
    top:3px;
    left:3px;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 2px 8px rgba(0,0,0,.22);
    transition:transform .18s ease;
}
.websync-auto-toggle input:checked + .websync-auto-switch{
    background:#00a884;
}
.websync-auto-toggle input:checked + .websync-auto-switch::after{
    transform:translateX(20px);
}
.websync-auto-toggle b{
    font-size:13px;
}
.websync-auto-note{
    margin-top:10px;
}
@media (max-width: 720px){
    .websync-auto-head{
        align-items:flex-start;
    }
    .websync-auto-toggle{
        width:100%;
        justify-content:space-between;
    }
}

/* Panel Admin a pantalla completa: solo afecta al modal de configuración. */
#admin-modal {
    overflow: hidden;
}

#admin-modal > .modal-content.admin-dashboard-layout {
    width: 100vw;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
    box-sizing: border-box;
}

#admin-modal .admin-modal-header,
#admin-modal #admin-branch-bar {
    flex-shrink: 0;
}

#admin-modal .admin-container {
    min-width: 0;
    min-height: 0;
}

#admin-modal .admin-nav {
    min-height: 0;
    overflow-y: auto;
}

#admin-modal .admin-body {
    min-width: 0;
    min-height: 0;
}

/* Panel App: administración segura del menú, políticas y contacto. */
.appmenu-admin-shell{
    display:flex;
    flex-direction:column;
    gap:14px;
    min-width:0;
    padding-bottom:12px;
}
.appmenu-admin-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    min-width:0;
}
.appmenu-admin-card{
    display:flex;
    flex-direction:column;
    gap:12px;
    min-width:0;
    padding:15px;
    border:1px solid var(--border-color);
    border-radius:16px;
    background:rgba(255,255,255,.035);
    box-sizing:border-box;
}
.appmenu-admin-card-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}
.appmenu-admin-card-head b{
    display:block;
    color:var(--text-main);
    font-size:16px;
}
.appmenu-admin-card-head span{
    display:block;
    margin-top:3px;
    color:var(--text-secondary);
    font-size:12px;
    line-height:1.4;
}
.appmenu-admin-card .appcat-field{
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:0;
    margin:0;
}
.appmenu-admin-card .appcat-field > span{
    color:var(--text-secondary);
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
}
.appmenu-admin-card .appcat-field input,
.appmenu-admin-card .appcat-field textarea,
.appmenu-admin-card .appcat-field select{
    width:100%;
    min-width:0;
    padding:10px 11px;
    border:1px solid var(--border-color);
    border-radius:11px;
    background:var(--bg-sidebar);
    color:var(--text-main);
    font:inherit;
    font-size:13px;
    box-sizing:border-box;
}
.appmenu-admin-card .appcat-field textarea{
    resize:vertical;
    line-height:1.45;
}
.appmenu-admin-card .appcat-field small{
    color:var(--text-secondary);
    font-size:11px;
    line-height:1.35;
}
.appmenu-admin-check,
.appmenu-visible-check{
    display:flex;
    align-items:center;
    gap:9px;
    color:var(--text-main);
    font-size:13px;
    font-weight:750;
}
.appmenu-admin-check input,
.appmenu-visible-check input{
    width:17px;
    height:17px;
    accent-color:#00a884;
}
.appmenu-admin-sections{
    display:flex;
    flex-direction:column;
    gap:12px;
}
.appmenu-section-editor{
    display:flex;
    flex-direction:column;
    gap:12px;
    min-width:0;
    padding:13px;
    border:1px solid var(--border-color);
    border-radius:14px;
    background:rgba(0,0,0,.09);
}
.appmenu-section-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding-bottom:10px;
    border-bottom:1px solid var(--border-color);
}
.appmenu-section-heading{
    min-width:0;
}
.appmenu-section-heading b{
    display:block;
    overflow:hidden;
    color:var(--text-main);
    font-size:15px;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.appmenu-section-heading span{
    display:block;
    margin-top:3px;
    color:var(--text-secondary);
    font-size:11px;
}
.appmenu-section-controls{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:7px;
    flex-wrap:wrap;
}
.appmenu-order-btn{
    width:36px;
    min-width:36px;
    height:34px;
    padding:0;
    justify-content:center;
    font-size:17px;
}
.appmenu-system-badge{
    padding:7px 9px;
    border:1px solid rgba(32,201,151,.28);
    border-radius:999px;
    background:rgba(32,201,151,.09);
    color:#56d9b5;
    font-size:10px;
    font-weight:850;
}
.appmenu-remove-btn{
    min-height:34px;
    padding:7px 10px;
}
.appmenu-section-grid{
    display:grid;
    grid-template-columns:90px minmax(180px,.75fr) minmax(240px,1.25fr);
    gap:10px;
    min-width:0;
}
.appmenu-section-links{
    display:grid;
    grid-template-columns:minmax(180px,.7fr) minmax(280px,1.3fr);
    gap:10px;
    min-width:0;
}
.appmenu-admin-publish{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:15px;
    border:1px solid rgba(32,201,151,.28);
    border-radius:16px;
    background:rgba(32,201,151,.07);
}
.appmenu-admin-publish-copy{
    display:flex;
    flex-direction:column;
    gap:5px;
    min-width:0;
}
.appmenu-admin-publish-copy > small,
.appmenu-admin-meta{
    color:var(--text-secondary);
    font-size:11px;
    line-height:1.4;
}
.appmenu-admin-meta{
    margin-top:4px;
    font-weight:650;
}
.appmenu-admin-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:wrap;
    flex:0 0 auto;
}
#appmenu-admin-status.is-error{
    color:#ff6b7a;
    border-color:rgba(255,107,122,.35);
}
#appmenu-admin-status.is-success{
    color:#56d9b5;
    border-color:rgba(32,201,151,.35);
}
@media(max-width:1000px){
    .appmenu-admin-grid,
    .appmenu-section-grid,
    .appmenu-section-links{
        grid-template-columns:1fr;
    }
    .appmenu-admin-publish{
        align-items:flex-start;
        flex-direction:column;
    }
    .appmenu-admin-actions{
        width:100%;
        justify-content:stretch;
    }
    .appmenu-admin-actions button{
        flex:1 1 180px;
    }
}
@media(max-width:640px){
    .appmenu-admin-card-head,
    .appmenu-section-head{
        flex-direction:column;
    }
    .appmenu-section-controls{
        width:100%;
        justify-content:flex-start;
    }
    .appmenu-admin-actions button{
        width:100%;
        flex-basis:100%;
    }
}

/* Catalog provenance and price buttons: scoped to the CRM quote editor. */
#cot-familias-panel.cot-pos .cot-pos-header{flex-wrap:wrap;align-items:flex-start}
#cot-familias-panel.cot-pos .cot-pos-titlebox{min-width:180px;flex:1 1 180px}
.quote-catalog-origin{padding:7px 10px;margin:5px 0 8px;border:1px solid var(--border-color);border-radius:8px;font-size:12px;font-weight:700;color:var(--text-primary);background:var(--bg-header);overflow-wrap:anywhere}
#cot-familias-panel.cot-pos .cot-pos-pricemode,
#cotizacion-modal .price-selector-group{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap:8px;
  min-width:0;
}
#cot-familias-panel.cot-pos .cot-pos-pricemode{flex:1 0 100%;width:100%}
#cotizacion-modal .cot-price-group{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:4px;
  min-width:0;
  align-content:start;
}
#cotizacion-modal .cot-price-group--app{grid-template-columns:repeat(2,minmax(0,1fr))}
#cotizacion-modal .cot-price-group>span{
  grid-column:1/-1;
  font-size:10px;
  font-weight:800;
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--text-secondary);
}
#cot-familias-panel.cot-pos .cot-pos-pill,
#cotizacion-modal .price-radio-label{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-width:0;
  min-height:30px;
  padding:4px 6px;
  border-radius:6px;
  font-size:12px;
  line-height:1.2;
  text-align:center;
  white-space:normal;
}
#cot-familias-panel.cot-pos .cot-pos-pill.is-active{border-color:#00bfa5;background:rgba(0,191,165,.16);box-shadow:inset 0 0 0 1px #00bfa5}
#cot-familias-panel.cot-pos .cot-pos-status:empty{display:none}
#cotizacion-modal .price-selector-group{padding:0;margin-bottom:10px;background:transparent}
#cotizacion-modal .price-radio-label{color:var(--text-primary);background:var(--bg-sidebar);border:1px solid var(--border-color)}
#cotizacion-modal .price-radio-input:checked+.price-radio-label{color:var(--text-primary);border-color:#00bfa5;background:rgba(0,191,165,.16);box-shadow:inset 0 0 0 1px #00bfa5}

/* Envíos internos: los datos se conservan por pedido, no en la ficha de un cliente. */
#ic-shipping { margin:12px 0; padding:12px; border:1px solid #cbd5e1; border-radius:8px; }
#ic-shipping[hidden] { display:none; }
#ic-shipping legend { font-size:14px; font-weight:600; }
.ic-shipping-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
#ic-shipping-status { font-size:12px; margin:10px 0 0; }
@media(max-width:600px) { .ic-shipping-grid { grid-template-columns:1fr; } }