html {
font-size: 14px;
}
/* ── DataTables: select de "Mostrar N registros" ── */
.dataTables_length select,
.dt-length select {
width: auto !important;
min-width: 60px;
}
/* ── Badge correo no leído (navbar) ────────────── */
#mailNavLink { padding: 8px 12px; }
#mailNavLink .navbar-badge { top: 4px; right: 4px; }
@keyframes mail-pulse {
0% { transform: scale(1); }
50% { transform: scale(1.25); }
100% { transform: scale(1); }
}
.mail-has-unread .fa-envelope {
animation: mail-pulse 2s ease-in-out infinite;
color: #dc3545;
}
/* ── Barra de búsqueda / filtros estilo Odoo ─── */
.ok-searchbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.ok-search-left { position: relative; flex: 1; max-width: 600px; }
.ok-search-right { display: flex; align-items: center; flex-shrink: 0; }
.ok-search-box {
display: flex;
align-items: center;
border: 2px solid #dee2e6;
border-radius: 6px;
padding: 4px 8px;
background: #fff;
flex-wrap: wrap;
gap: 4px;
min-height: 36px;
cursor: text;
}
.ok-search-box:focus-within { border-color: #00a09d; }
.ok-search-icon { color: #aaa; font-size: .85rem; flex-shrink: 0; }
.ok-search-input {
border: none;
outline: none;
flex: 1;
min-width: 120px;
font-size: .87rem;
padding: 0 4px;
}
.ok-search-dropdown-btn {
background: none;
border: none;
color: #aaa;
padding: 0 4px;
cursor: pointer;
flex-shrink: 0;
}
.ok-search-dropdown-btn:hover { color: #00a09d; }
/* Chips de filtros activos */
.ok-filter-chip {
display: inline-flex;
align-items: center;
gap: 5px;
background: #875a7b;
color: #fff;
border-radius: 20px;
padding: 2px 10px;
font-size: .77rem;
font-weight: 500;
}
.ok-chip-remove { cursor: pointer; opacity: .8; }
.ok-chip-remove:hover { opacity: 1; }
/* Panel de filtros desplegable */
.ok-filter-panel {
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 1050;
background: #fff;
border: 1px solid #dee2e6;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0,0,0,.12);
display: flex;
gap: 0;
min-width: 500px;
}
.ok-fp-col {
padding: 12px 16px;
min-width: 160px;
border-right: 1px solid #f0f0f0;
}
.ok-fp-col:last-child { border-right: none; }
.ok-fp-title {
font-size: .78rem;
font-weight: 700;
color: #875a7b;
text-transform: uppercase;
letter-spacing: .5px;
margin-bottom: 8px;
}
.ok-fp-item {
font-size: .85rem;
color: #00a09d;
padding: 4px 6px;
border-radius: 4px;
cursor: pointer;
transition: background .1s;
}
.ok-fp-item:hover { background: #f0fffe; }
.ok-fp-disabled { color: #bbb !important; cursor: default !important; }
.ok-fp-disabled:hover { background: none !important; }
.ok-fp-sep { height: 1px; background: #f0f0f0; margin: 6px 0; }
/* ── Facet search dropdown ───────────────────── */
.ok-facet-panel {
position: absolute;
top: calc(100% + 4px);
left: 0;
z-index: 1060;
background: #fff;
border: 1px solid #dee2e6;
border-radius: 8px;
box-shadow: 0 6px 24px rgba(0,0,0,.13);
min-width: 380px;
max-height: 400px;
overflow-y: auto;
}
.ok-facet-loading { padding: 12px 16px; color: #888; font-size: .85rem; }
.ok-facet-row {
padding: 8px 16px;
font-size: .85rem;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: background .1s;
border-bottom: 1px solid #f5f5f5;
}
.ok-facet-row:last-child { border-bottom: none; }
.ok-facet-main:hover { background: #f0fffe; }
.ok-facet-sug { padding-left: 32px; color: #00a09d; font-size: .83rem; }
.ok-facet-sug:hover { background: #f0fffe; }
.ok-facet-icon { color: #875a7b; font-size: .8rem; width: 14px; text-align: center; }
.ok-facet-sug-icon { color: #ccc; font-size: .75rem; width: 14px; }
/* Caret expandible ▶ */
.ok-facet-caret {
color: #aaa;
font-size: .75rem;
width: 14px;
text-align: center;
transition: transform .15s;
flex-shrink: 0;
}
.ok-facet-caret-open { transform: rotate(90deg); color: #875a7b; }
.ok-facet-expandable { cursor: pointer; }
.ok-facet-expandable:hover { background: #faf8fc; }
/* Sub-sugerencias indentadas */
.ok-facet-sugs .ok-facet-sug { padding-left: 32px; color: #00a09d; font-size: .83rem; }
.ok-facet-sugs .ok-facet-sug:hover { background: #f0fffe; }
/* "Filtro personalizado..." */
.ok-facet-custom {
padding: 9px 16px;
font-size: .83rem;
color: #00a09d;
cursor: pointer;
border-top: 1px solid #f0f0f0;
margin-top: 2px;
}
.ok-facet-custom:hover { background: #f0fffe; text-decoration: underline; }
/* ── Stepper tipo Odoo (chevron) ─────────────── */
.ticket-stepper-wrap {
margin-bottom: 12px;
}
.ticket-stepper {
display: flex;
flex-wrap: nowrap;
gap: 3px;
min-width: 100%;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.ticket-stepper::-webkit-scrollbar { display: none; }
.stepper-item {
display: flex;
align-items: center;
gap: 4px;
height: 26px;
padding: 0 11px;
font-size: .75rem;
cursor: pointer;
color: #888;
background: #f1f3f5;
white-space: nowrap;
flex-shrink: 0;
border-radius: 4px;
border: 1px solid #dee2e6;
transition: background .12s, color .12s;
}
.stepper-item:hover:not(.stepper-current) {
background: #e9ecef;
color: #444;
}
.stepper-current {
background: color-mix(in srgb, var(--etapa-color, #00a09d) 12%, white);
color: var(--etapa-color, #00a09d);
font-weight: 700;
cursor: default;
}
.stepper-pending { color: #bbb; }
.stepper-time {
font-size: .72rem;
color: #aaa;
font-weight: 400;
margin-left: 2px;
}
.stepper-loading { opacity: .5; }
/* ── Ticket Ver — layout sidebar ────────────── */
.ticket-ed-wrap {
display: flex;
align-items: flex-start;
gap: 0;
position: relative;
}
.ticket-ed-main {
flex-grow: 1;
min-width: 0;
padding-right: 0;
transition: padding-right .25s;
}
.ticket-ed-sidebar {
flex-shrink: 0;
width: 300px;
min-width: 300px;
overflow: hidden;
max-width: 580px;
transition: width .28s, min-width .28s, opacity .2s, padding .28s;
opacity: 1;
border-left: 1px solid #e9ecef;
padding-left: 10px;
margin-left: 0;
}
.ticket-ed-sidebar.sidebar-w2,
.tk-side-lv2 .ticket-ed-sidebar { width: 420px; min-width: 420px; }
.ticket-ed-sidebar.sidebar-w3,
.tk-side-lv3 .ticket-ed-sidebar {
position: fixed;
top: 0; right: 0; bottom: 0;
width: 72vw; min-width: 72vw;
height: 100vh;
overflow-y: auto;
z-index: 1040;
box-shadow: -4px 0 24px rgba(0,0,0,.18);
border-left: 2px solid #875a7b;
background: #fff;
padding-left: 16px;
padding-top: 12px;
}
#sideBackdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,.35);
z-index: 1039;
}
#sideBackdrop.open,
.tk-side-lv3 #sideBackdrop,
.tk-side-lv4 #sideBackdrop { display: block; }
.ticket-ed-sidebar.sidebar-w4,
.tk-side-lv4 .ticket-ed-sidebar {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
width: 100vw; min-width: 100vw;
height: 100vh;
overflow-y: auto;
z-index: 1040;
box-shadow: none;
border-left: none;
background: #fff;
}
.ticket-ed-sidebar.sidebar-hidden,
.tk-side-lv0 .ticket-ed-sidebar {
width: auto !important;
min-width: 0 !important;
padding-left: 0;
border-left: none;
overflow: hidden;
}
.ticket-ed-sidebar.sidebar-hidden > *:not(.side-size-btns),
.tk-side-lv0 .ticket-ed-sidebar > *:not(.side-size-btns) { display: none !important; }
.ticket-ed-sidebar.sidebar-hidden .side-size-btns,
.tk-side-lv0 .ticket-ed-sidebar .side-size-btns { border-right: none; }
/* ── Chat IA ── */
.ia-msg { display:flex; align-items:flex-start; gap:6px; font-size:.84rem; line-height:1.45; }
.ia-msg-bot { background:#f8f4fb; border-radius:8px; padding:8px 10px; align-self:flex-start; max-width:92%; }
.ia-msg-user { background:#e8f4fd; border-radius:8px; padding:8px 10px; align-self:flex-end; max-width:92%; flex-direction:row-reverse; }
.ia-msg-user i { color:#555; }
/* ── Panel solapas ticket ── */
.tk-tabs-panel { display:flex; flex-direction:column; }
.tk-tabs-nav { display:flex; border-bottom:2px solid #dee2e6; background:#f8f9fa; }
.tk-tab {
flex:1; padding:7px 4px; border:none; border-bottom:2px solid transparent;
background:transparent; font-size:.78rem; font-weight:600; color:#6c757d;
cursor:pointer; transition:color .15s, border-color .15s; white-space:nowrap;
margin-bottom:-2px;
}
.tk-tab:hover { color:#495057; }
.tk-tab.active { color:#875a7b; border-bottom-color:#875a7b; }
.tk-tab-pane { display:none; }
.tk-tab-pane.active { display:block; }
/* ── Chat IA inline ── */
#iaChat { min-height:120px; }
#pane-asistente.active { display:flex; flex-direction:column; }
#pane-asistente .tk-ia-body { flex:1; overflow-y:auto; }
/* Lightbox imagen actividad */
#lightboxOverlay {
display: none; position: fixed; inset: 0; z-index: 9999;
background: rgba(0,0,0,.82); align-items: center; justify-content: center;
}
#lightboxOverlay.open { display: flex; }
#lightboxOverlay img { max-width: 90vw; max-height: 90vh; border-radius: 6px; box-shadow: 0 8px 40px rgba(0,0,0,.6); }
#lightboxOverlay .lb-close {
position: absolute; top: 18px; right: 24px; font-size: 2rem; color: #fff;
cursor: pointer; line-height: 1; opacity: .8;
}
#lightboxOverlay .lb-close:hover { opacity: 1; }
/* Botones de tamaño del sidebar */
.side-size-btns {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 6px 4px;
border-right: 1px solid #eee;
float: left; /* columna a la izquierda del contenido */
height: 100%;
}
/* Cuando el sidebar está visible, los botones van a la izquierda y el resto ocupa el espacio */
#ticketSidebar { display: flex; flex-direction: row; }
#ticketSidebar > *:not(.side-size-btns) { flex: 1; min-width: 0; }
.side-sz {
border: 1px solid #c5b3d0;
border-radius: 3px;
background: transparent;
color: #875a7b;
font-size: .62rem;
font-weight: 700;
padding: 3px 4px;
cursor: pointer;
opacity: .45;
transition: opacity .15s, background .15s;
writing-mode: vertical-rl;
text-orientation: mixed;
white-space: nowrap;
line-height: 1;
width: 18px;
}
.side-sz[data-lv="0"] { writing-mode: horizontal-tb; font-size: .7rem; }
.side-sz:hover { opacity: .8; }
.side-sz.active { background: #875a7b; color: #fff; opacity: 1; border-color: #875a7b; }
.side-collapsed-info { display: none; }
.side-collapsed-label { display: none; }
/* Avatar estilo Odoo */
.odoo-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px; height: 28px;
border-radius: 50%;
color: #fff;
font-weight: 600;
font-size: .8rem;
flex-shrink: 0;
}
/* Sin width/height !important: le ganaban al style="width:50%" que pone el
redimensionar de Summernote y el 100/50/25% no hacia nada. El tope de ancho si
queda, para que una captura grande no desborde el ticket. */
.nota-content img, .summ-content img, .note-editable img { max-width: 100% !important; height: auto; display: block; border-radius: 4px; cursor: zoom-in; margin: 4px 0; }
.nota-content { overflow-wrap: break-word; word-break: break-word; }
.note-editable p, .summ-content p, .nota-content p { margin-bottom: 0; }
textarea, .note-editable { cursor: text; }
#lightboxModal .modal-dialog { max-width: 90vw; }
#lightboxModal img { max-width: 100%; max-height: 85vh; object-fit: contain; display: block; margin: auto; }
/* ── Ticket Ver — edición inline ─────────────── */
.tk-titulo-input {
font-size: 1.2rem;
font-weight: 700;
border: none;
border-bottom: 2px solid transparent;
border-radius: 0;
padding-left: 0;
padding-right: 0;
background: transparent;
transition: border-color .2s;
line-height: 1.3;
}
.tk-titulo-input:focus {
border-bottom-color: #875a7b;
box-shadow: none;
background: transparent;
outline: none;
}
.tk-titulo-input:hover:not(:focus) {
border-bottom-color: #dee2e6;
}
.tk-field-label {
font-size: .76rem;
color: #999;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
margin-bottom: 3px;
line-height: 1;
}
.tk-field-row {
margin-bottom: 7px;
}
.tk-field-control {
font-size: .87rem;
}
.tk-field-control.form-control-sm,
.tk-field-control .select2-container--bootstrap4 .select2-selection {
font-size: .87rem;
}
.tk-star { color: #ccc; cursor: pointer; font-size: .9rem; transition: color .1s; }
.tk-star.filled { color: #f6c23e; }
.tk-star:hover, .tk-star:hover ~ .tk-star { color: #ccc; }
.tk-stars:hover .tk-star { color: #f6c23e; }
.tk-stars .tk-star:hover ~ .tk-star { color: #ccc !important; }
/* Etiquetas select2 compacto */
#selEtiquetas + .select2-container .select2-selection--multiple {
min-height: 30px;
border: 1px solid #ced4da;
border-radius: 4px;
padding: 2px 4px;
}
#selEtiquetas + .select2-container .select2-selection__rendered {
display: flex;
flex-wrap: wrap;
gap: 3px;
padding: 0;
}
#selEtiquetas + .select2-container .select2-selection__choice {
border: none !important;
border-radius: 20px !important;
padding: 2px 8px !important;
margin: 2px 2px !important;
line-height: 1.4 !important;
color: #fff !important;
font-size: .76rem !important;
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
}
#selEtiquetas + .select2-container .select2-selection__choice__remove {
background: none !important;
border: none !important;
padding: 0 !important;
color: rgba(255,255,255,.8) !important;
font-size: .8rem !important;
line-height: 1 !important;
order: 1;
}
#selEtiquetas + .select2-container .select2-selection__choice__display {
padding: 0 !important;
}
#selEtiquetas + .select2-container .select2-search--inline {
float: none;
margin: 0;
}
#selEtiquetas + .select2-container .select2-search__field {
font-size: .82rem;
margin: 0;
min-width: 80px;
}
#saveStatus {
position: fixed;
top: 58px;
right: 20px;
z-index: 9999;
pointer-events: none;
transition: opacity .3s;
}
.tk-desc-label {
font-size: .76rem;
color: #999;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
margin-bottom: 6px;
}
/* Kanban "Todos" — sección por equipo */
.ok-team-section {
width: 100%;
margin-bottom: 28px;
}
.ok-team-header-bar {
display: flex;
align-items: center;
padding: 6px 0 8px 0;
border-bottom: 2px solid #dee2e6;
margin-bottom: 12px;
}
.ok-team-cols {
display: flex;
gap: 16px;
overflow-x: auto;
align-items: flex-start;
padding-bottom: 8px;
}
/* ── Kanban estilo Odoo ──────────────────────── */
.ok-col {
min-width: 280px;
max-width: 295px;
flex-shrink: 0;
display: flex;
flex-direction: column;
}
.ok-col-header {
padding: 14px 0 6px 0;
margin-bottom: 6px;
position: sticky;
top: 0;
z-index: 20;
background: #f4f6f9;
box-shadow: 0 2px 4px rgba(0,0,0,.06);
}
.ok-col-title-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
}
.ok-col-title {
font-weight: 700;
font-size: .9rem;
color: #212529;
}
.ok-col-actions {
display: flex;
align-items: center;
gap: 8px;
}
.ok-col-count {
font-size: .78rem;
color: #888;
font-weight: 600;
}
.ok-col-add {
color: #875a7b;
font-size: 1.1rem;
font-weight: 700;
text-decoration: none;
line-height: 1;
}
.ok-col-add:hover { color: #5d3d55; }
.ok-col-progress {
height: 4px;
background: #f0f0f0;
border-radius: 2px;
overflow: hidden;
}
.ok-col-progress-bar {
height: 100%;
border-radius: 2px;
transition: width .4s;
}
.ok-col-body {
flex: 1;
min-height: 200px;
padding-bottom: 8px;
}
/* Tarjeta Odoo */
.ok-card {
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 5px;
padding: 10px 12px;
margin-bottom: 8px;
cursor: pointer;
transition: box-shadow .15s, transform .1s;
position: relative;
}
.ok-card:hover {
box-shadow: 0 2px 10px rgba(0,0,0,.12);
transform: translateY(-1px);
}
.ok-card-title {
font-weight: 600;
font-size: .85rem;
color: #1a1a1a;
line-height: 1.35;
margin-bottom: 3px;
}
.ok-card-num {
font-weight: 400;
color: #888;
font-size: .8rem;
}
.ok-card-cliente {
font-size: .78rem;
color: #888;
margin-bottom: 5px;
}
.ok-tags {
display: flex;
flex-wrap: wrap;
gap: 3px;
margin-bottom: 6px;
}
.ok-tag {
padding: 2px 8px;
border-radius: 20px;
font-size: .73rem;
color: #fff;
font-weight: 500;
}
.ok-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 4px;
}
.ok-card-footer-left {
display: flex;
align-items: center;
gap: 2px;
}
.ok-card-footer-right {
display: flex;
align-items: center;
gap: 6px;
}
.ok-clock { color: #bbb; font-size: .78rem; }
.ok-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px; height: 24px;
border-radius: 50%;
color: #fff;
font-weight: 700;
font-size: .75rem;
}
.ok-done-circle {
display: inline-block;
width: 16px; height: 16px;
border-radius: 50%;
border: 2px solid #ccc;
cursor: pointer;
transition: border-color .15s, background .15s;
}
.ok-done-circle:hover { border-color: #5cb85c; background: #5cb85c22; }
.ok-dias-badge {
font-size: .7rem;
padding: 1px 5px;
border-radius: 10px;
margin-left: 4px;
font-weight: 600;
}
.ok-dias-badge.danger { background:#fde8e8; color:#d9534f; }
.ok-dias-badge.warn { background:#fff3cd; color:#d97706; }
.ok-ghost { opacity:.3; background:#f0f0f0 !important; }
.ok-col-collapsed { min-width: 48px !important; max-width: 48px !important; position: sticky; top: 0; align-self: flex-start; }
.ok-col-collapsed .ok-col-body,
.ok-col-collapsed .ok-col-footer,
.ok-col-collapsed .ok-col-progress,
.ok-col-collapsed .ok-col-count,
.ok-col-collapsed .ok-col-add { display: none !important; }
.ok-col-collapsed .ok-col-title { writing-mode: vertical-rl; text-orientation: mixed; font-size:.78rem; padding:8px 0; display:block; overflow:hidden; max-height:200px; }
.ok-col-collapsed .ok-col-header { position: relative; }
.ok-col-collapsed .ok-col-title-row { flex-direction: column; align-items: center; }
.ok-col-collapsed .ok-col-actions { position: absolute; top: 0; right: 0; }
.ok-col-collapsed .ok-col-actions > *:not(.ok-col-collapse-btn) { display: none !important; }
/* ── Kanban (antiguo, por compatibilidad) ─────── */
.kanban-col {
min-width: 230px;
max-width: 250px;
flex-shrink: 0;
background: #f4f6f9;
border-radius: 6px;
display: flex;
flex-direction: column;
}
.kanban-col-header {
padding: 8px 10px;
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
border-radius: 6px 6px 0 0;
}
.kanban-col-title {
font-weight: 600;
font-size: .82rem;
color: #333;
}
.kanban-col-body {
flex: 1;
min-height: 80px;
max-height: 72vh;
overflow-y: auto;
padding: 6px;
}
.kanban-col-footer {
padding: 4px 6px;
border-top: 1px solid #dee2e6;
background: #fff;
border-radius: 0 0 6px 6px;
}
.kanban-card {
background: #fff;
border-radius: 5px;
padding: 8px 10px;
margin-bottom: 6px;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0,0,0,.08);
transition: box-shadow .15s, transform .1s;
font-size: .82rem;
}
.kanban-card:hover {
box-shadow: 0 3px 10px rgba(0,0,0,.15);
transform: translateY(-1px);
}
.kanban-card:active { cursor: grabbing; }
.kanban-card-title {
font-weight: 600;
font-size: .83rem;
line-height: 1.3;
color: #333;
}
.kanban-ghost {
opacity: .3;
background: #e3e7ed !important;
}
@media (min-width: 768px) {
html { font-size: 16px; }
}
/* ══════════════════════════════════════════════════════
FORM CONTROLS — restyling global
Color de acento: #875a7b (violeta CerberusOP)
══════════════════════════════════════════════════════ */
/* Labels */
label,
.col-form-label {
font-size: .8rem;
font-weight: 600;
color: #4a4a5a;
margin-bottom: 3px;
letter-spacing: .01em;
}
/* Input, select, textarea */
.form-control {
border: 1px solid #d0d5dd;
border-radius: 6px;
font-size: .88rem;
padding: .42rem .75rem;
color: #212529;
background-color: #fff;
transition: border-color .15s ease, box-shadow .15s ease;
box-shadow: none;
}
.form-control:hover:not(:disabled):not([readonly]) {
border-color: #b0b4bb;
}
.form-control:focus {
border-color: #875a7b;
box-shadow: 0 0 0 3px rgba(135, 90, 123, .14);
outline: none;
color: #212529;
}
.form-control::placeholder {
color: #adb5bd;
font-style: italic;
font-size: .84rem;
}
.form-control:disabled,
.form-control[readonly] {
background-color: #f5f6f8;
color: #888;
border-color: #e4e7ec;
cursor: not-allowed;
}
/* Variantes de tamaño */
.form-control-sm {
font-size: .82rem;
padding: .26rem .58rem;
border-radius: 5px;
}
.form-control-lg {
font-size: 1rem;
padding: .55rem .9rem;
border-radius: 7px;
}
/* Select: cursor pointer */
select.form-control { cursor: pointer; }
/* Textarea: resize solo vertical */
textarea.form-control {
resize: vertical;
min-height: 80px;
line-height: 1.5;
}
/* Checkboxes y radios modernos */
.form-check-input {
width: 16px;
height: 16px;
cursor: pointer;
accent-color: #875a7b;
margin-top: .2rem;
}
.form-check-label {
cursor: pointer;
font-size: .87rem;
font-weight: 400;
color: #333;
}
/* Input groups */
.input-group .form-control:not(:last-child) { border-right: none; }
.input-group .form-control:not(:first-child) { border-left: none; }
.input-group-text {
border: 1px solid #d0d5dd;
border-radius: 6px;
background: #f8f9fa;
color: #6c757d;
font-size: .87rem;
}
.input-group > .form-control:focus { z-index: 1; }
/* Focus unificado para botones */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus {
box-shadow: 0 0 0 3px rgba(135, 90, 123, .18);
outline: none;
}
/* Select2 — alineado con el estilo */
.select2-container--bootstrap4 .select2-selection--single,
.select2-container--bootstrap4 .select2-selection--multiple {
border: 1px solid #d0d5dd !important;
border-radius: 6px !important;
font-size: .88rem !important;
min-height: 34px !important;
transition: border-color .15s ease, box-shadow .15s ease !important;
}
.select2-container--bootstrap4.select2-container--focus .select2-selection--single,
.select2-container--bootstrap4.select2-container--focus .select2-selection--multiple,
.select2-container--bootstrap4.select2-container--open .select2-selection--single,
.select2-container--bootstrap4.select2-container--open .select2-selection--multiple {
border-color: #875a7b !important;
box-shadow: 0 0 0 3px rgba(135, 90, 123, .14) !important;
}
.select2-container--bootstrap4 .select2-results__option--highlighted {
background-color: #875a7b !important;
}
.select2-container--bootstrap4 .select2-dropdown {
border: 1px solid #d0d5dd !important;
border-radius: 6px !important;
box-shadow: 0 4px 16px rgba(0,0,0,.1) !important;
margin-top: 2px;
}
/* Form group: separación más cómoda */
.form-group { margin-bottom: 1rem; }
/* Parpadeo del ícono de WhatsApp cuando hay mensajes sin leer */
@keyframes waParpadeo {
0%, 100% { opacity: 1; }
50% { opacity: .35; }
}
.wa-parpadeo {
animation: waParpadeo 1.4s ease-in-out infinite;
color: #25D366;
}
@media (prefers-reduced-motion: reduce) {
.wa-parpadeo { animation: none; }
}
/* Botones redondos del encabezado del chat de ATC */
.wa-hdr-btn {
color: rgba(255,255,255,.85);
background: rgba(255,255,255,.15);
border: none;
border-radius: 50%;
width: 34px;
height: 34px;
padding: 0;
line-height: 34px;
}
.wa-hdr-btn:hover { color: #fff; background: rgba(255,255,255,.28); }
/* ══ ATC: shell de alto fijo, scroll solo dentro del chat ══════════════ */
.atc-shell {
margin: 0; /* .row trae márgenes negativos que desbordan */
overflow: hidden; /* nada de scroll de página */
flex-wrap: nowrap; /* el panel en XL no debe bajar a otra línea */
}
.atc-shell > * { min-height: 0; } /* imprescindible para que el hijo con overflow scrollee */
/* ── Panel lateral de ATC: tamaños, mismo criterio que el sidebar del ticket ── */
#panelLateral {
display: flex;
flex-direction: row;
border-left: 1px solid #dee2e6;
background: #fafafa;
width: 25%;
flex-shrink: 0;
min-height: 0;
transition: width .2s;
}
.atc-side-body {
flex: 1;
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
}
/* El contenido de las pestañas es lo único que scrollea dentro del panel */
.atc-side-body > .tab-content {
flex: 1;
min-height: 0;
overflow-y: auto;
}
.atc-side-btns {
display: flex;
flex-direction: column;
gap: 3px;
padding: 6px 3px;
border-right: 1px solid #e9ecef;
flex-shrink: 0;
}
.atc-sz {
border: 1px solid #c5b3d0;
border-radius: 3px;
background: transparent;
color: #875a7b;
font-size: .62rem;
font-weight: 700;
padding: 3px 4px;
cursor: pointer;
opacity: .45;
transition: opacity .15s, background .15s;
writing-mode: vertical-rl;
text-orientation: mixed;
white-space: nowrap;
line-height: 1;
width: 18px;
}
.atc-sz[data-lv="0"] { writing-mode: horizontal-tb; font-size: .7rem; }
.atc-sz:hover { opacity: .8; }
.atc-sz.active { background: #875a7b; color: #fff; opacity: 1; border-color: #875a7b; }
#panelLateral.atc-side-w2 { width: 42%; }
/* L y XL salen del flujo: sin !important el position:relative de antes los rompía */
#panelLateral.atc-side-w3,
#panelLateral.atc-side-w4 {
position: fixed;
top: 0; right: 0; bottom: 0;
height: 100vh;
z-index: 1040;
background: #fff;
transition: none;
}
#panelLateral.atc-side-w3 {
width: 72vw;
border-left: 2px solid #875a7b;
box-shadow: -4px 0 24px rgba(0,0,0,.18);
}
#panelLateral.atc-side-w4 {
left: 0;
width: 100vw;
border-left: none;
}
#panelLateral.atc-side-hidden {
width: auto;
border-left: none;
}
#panelLateral.atc-side-hidden .atc-side-body { display: none !important; }
#panelLateral.atc-side-hidden .atc-side-btns { border-right: none; }
#atcBackdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,.35);
z-index: 1039;
}
#atcBackdrop.open { display: block; }
/* La pantalla de ATC no scrollea: el scroll vive dentro del chat y de la lista */
html.atc-sin-scroll,
html.atc-sin-scroll body,
html.atc-sin-scroll .content-wrapper {
overflow: hidden !important;
}
/* ── Ticket en pantalla chica ─────────────────
El sidebar es una columna fija de 300px al lado del contenido: en un celular
eso deja dos columnas angostas peleando por el ancho. Debajo de 992px se apila
abajo del ticket, a todo el ancho, y el riel de tamaños pasa a ser horizontal
(los niveles L y XL no tienen sentido cuando ya ocupa toda la pantalla). */
@media (max-width: 991.98px) {
.ticket-ed-wrap { flex-direction: column; }
.ticket-ed-main { width: 100%; padding-right: 0 !important; }
.ticket-ed-sidebar,
.ticket-ed-sidebar.sidebar-w2,
.ticket-ed-sidebar.sidebar-w3,
.ticket-ed-sidebar.sidebar-w4,
.tk-side-lv1 .ticket-ed-sidebar,
.tk-side-lv2 .ticket-ed-sidebar {
position: static;
width: 100%;
min-width: 0;
max-width: none;
height: auto;
flex-direction: column;
border-left: none;
border-top: 2px solid #e9ecef;
box-shadow: none;
padding-left: 0;
padding-top: 8px;
margin-top: 10px;
}
/* Oculta: solo queda el riel para poder volver a mostrarlo */
.ticket-ed-sidebar.sidebar-hidden,
.tk-side-lv0 .ticket-ed-sidebar { width: 100%; padding-top: 4px; }
/* El riel vertical no entra: se acuesta arriba del panel */
.side-size-btns {
flex-direction: row;
justify-content: flex-end;
float: none;
height: auto;
width: 100%;
border-right: none;
border-bottom: 1px solid #eee;
padding: 4px 2px;
}
.side-sz { margin-bottom: 0; }
/* Con el panel a todo el ancho, L y XL no aportan nada */
.side-sz[data-lv="3"], .side-sz[data-lv="4"] { display: none; }
#sideBackdrop, #sideBackdrop.open,
.tk-side-lv3 #sideBackdrop, .tk-side-lv4 #sideBackdrop { display: none; }
/* Gana por especificidad de id sobre la regla base #ticketSidebar{flex-direction:row} */
#ticketSidebar { flex-direction: column; }
.ticket-stepper { -webkit-overflow-scrolling: touch; }
}
/* ── ATC en pantalla chica ────────────────────
Las tres columnas (25% lista / chat / 25% panel) son inusables en un telefono.
Debajo de 992px se muestra una por vez, como WhatsApp Web en el celular: la
clase atc-m-* en el shell decide cual. En escritorio estas reglas no aplican. */
.atc-solo-movil { display: none; }
@media (max-width: 991.98px) {
.atc-solo-movil { display: inline-flex; }
#colLista, #panelChat, #panelLateral {
width: 100% !important;
max-width: 100% !important;
flex: 1 1 auto !important;
border-left: none !important;
border-right: none !important;
}
/* L y XL sacan el panel del flujo con position:fixed; acá siempre es una vista más */
#panelLateral, #panelLateral.atc-side-w2,
#panelLateral.atc-side-w3, #panelLateral.atc-side-w4,
#panelLateral.atc-side-hidden {
position: static;
width: 100% !important;
height: auto;
box-shadow: none;
}
#panelLateral.atc-side-hidden .atc-side-body { display: flex !important; }
/* El riel vertical de tamaños no tiene sentido: se navega con las flechas */
.atc-side-btns, #atcBackdrop, #atcBackdrop.open { display: none !important; }
/* Una vista por vez */
.atc-shell #colLista, .atc-shell #panelChat, .atc-shell #panelLateral { display: none !important; }
.atc-shell.atc-m-lista #colLista { display: flex !important; }
.atc-shell.atc-m-chat #panelChat { display: flex !important; }
.atc-shell.atc-m-ia #panelLateral { display: flex !important; }
}
/* ── Tablas en pantalla chica ─────────────────
14 de las 21 vistas con tabla no tienen contenedor con scroll: en un telefono
las columnas fijas (#, Equipo, Etapa, Fecha…) empujan la pagina y aparece scroll
horizontal de todo el sitio. Acá el scroll queda dentro de la tabla.
Se apunta al hijo directo del card-body y no al card-body entero a proposito:
un overflow ahi recortaria los desplegables y los Select2 que viven adentro. */
@media (max-width: 991.98px) {
.card-body > table.table,
.card-body > .dataTables_wrapper,
.card-body > .table-responsive {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.card-body > .dataTables_wrapper > .row { margin-left: 0; margin-right: 0; }
/* Las barras de filtros se apilan en vez de desbordar */
.card-header .d-flex, .card-tools { flex-wrap: wrap; }
}
/* ── Tableros kanban en pantalla chica ────────
Los dos tableros usan un alto fijo calc(100vh - N) pensado para el header de
escritorio. En un telefono las barras de filtros se apilan, ese N queda corto y
las columnas se cortan. Se libera el alto y el tablero scrollea con la pagina;
el desplazamiento horizontal entre columnas se mantiene, como en Trello. */
@media (max-width: 991.98px) {
#kanban-board, #kanban-tareas {
height: auto !important;
max-height: none !important;
overflow-y: visible;
}
#kanban-board .ok-col, #kanban-tareas .ok-col { min-width: 78vw; }
}
/* ── Reproductor de audio estilo WhatsApp ─────
Reemplaza al