/* ============================================================
   Estilo Odoo sobre Bootstrap 5 — soporte-ctv
   Componentes: x-odoo.field, x-odoo.statusbar, x-odoo.form-layout, x-odoo.table-card
   ============================================================ */

:root {
    --o-primary: #714B67;      /* morado Odoo */
    --o-primary-2: #5b3c53;
    --o-thead-bg: #f4f5f7;
}

/* ---------- Statusbar (chevrons de estado) ---------- */
.o-statusbar { display: flex; flex-wrap: wrap; gap: 2px; }
.o-stage {
    position: relative;
    padding: .28rem .85rem .28rem 1.15rem;
    font-size: .72rem;
    font-weight: 600;
    color: #66707b;
    background: #f0f1f3;
    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%, 9px 50%);
    white-space: nowrap;
}
.o-stage:first-child { padding-left: .85rem; clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%); }
.o-stage.done { color: #5a6472; background: #e4e7eb; }
.o-stage.active { color: #fff; background: var(--o-primary); }
[data-bs-theme="dark"] .o-stage { background: #2b2f36; color: #9aa0aa; }
[data-bs-theme="dark"] .o-stage.done { background: #353a42; color: #c4c9d2; }
[data-bs-theme="dark"] .o-stage.active { background: #8f6580; color: #fff; }

/* ---------- Formulario Odoo (label izquierda / input derecha) ---------- */
.o-field-label {
    font-weight: 600;
    font-size: .8rem;
    color: #6c757d;
}
.o-form-sidebar { position: sticky; top: 1rem; }

/* ---------- Tablas Odoo (thead sticky) ---------- */
.o-table-wrap { max-height: 68vh; overflow: auto; }
.o-table-wrap table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--o-thead-bg) !important;
    border-bottom: 2px solid #e3e6ea;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #6c757d;
}
[data-bs-theme="dark"] .o-table-wrap table thead th { background: #20242b !important; color: #aeb4bd; border-bottom-color: #353a42; }
.o-num { text-align: right !important; font-variant-numeric: tabular-nums; }

/* ---------- Tarjeta de totales (arriba a la derecha) ---------- */
.o-totals .o-total-final { color: var(--o-primary); font-weight: 700; }
[data-bs-theme="dark"] .o-totals .o-total-final { color: #c79bb8; }

/* ---------- Formulario de documento estilo Odoo (toolbar + chatter) ---------- */
.o-doc-toolbar { background: var(--o-thead-bg); }
[data-bs-theme="dark"] .o-doc-toolbar { background: #20242b; }
.o-doc-title { font-size: .75rem; color: #66707b; text-transform: none; }
.o-doc-record { font-weight: 700; }
.o-doc-chatter { background: #f8f9fa; }
[data-bs-theme="dark"] .o-doc-chatter { background: #1a1d22; border-left-color: #2b2f36 !important; }
.o-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--o-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: .82rem; flex-shrink: 0;
}
.o-chatter-log { border-top: 1px solid #e3e6ea; padding-top: 1rem; }
[data-bs-theme="dark"] .o-chatter-log { border-top-color: #2b2f36; }
.o-chatter-day { position: relative; text-align: center; font-size: .72rem; color: #9aa0aa; margin: .5rem 0; }
/* Líneas de pedido estilo Odoo */
.o-lines-add a { font-size: .82rem; text-decoration: none; }
.o-lines-add a:hover { text-decoration: underline; }

/* Botón primario morado Odoo */
.o-btn-primary { background: var(--o-primary); border-color: var(--o-primary); color: #fff; }
.o-btn-primary:hover, .o-btn-primary:focus { background: var(--o-primary-2); border-color: var(--o-primary-2); color: #fff; }

/* ============================================================
   App de Código de Barras (Odoo Barcode) — soporte-ctv
   Replica fiel de https://<db>.odoo.com/odoo/barcode
   ============================================================ */

/* Romper el padding de .container-fluid para pantallas a sangre completa */
.o-bc-fullbleed { margin: -1rem calc(-1 * var(--bs-gutter-x, 1.5rem) / 2) 0; }

/* ---------- Pantalla 1: Lector (home) ---------- */
.o-bc-home {
    min-height: calc(100vh - 160px);
    margin: -1rem calc(-1 * var(--bs-gutter-x, 1.5rem) / 2) 0;
    padding: 3rem 1rem;
    display: flex; align-items: flex-start; justify-content: center;
    background:
        repeating-linear-gradient(135deg, rgba(113,75,103,.05) 0 2px, transparent 2px 26px),
        linear-gradient(160deg, #eceaf2 0%, #e6e3ef 100%);
}
[data-bs-theme="dark"] .o-bc-home {
    background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 2px, transparent 2px 26px),
        linear-gradient(160deg, #1a1d22 0%, #15181d 100%);
}
.o-bc-home-card { width: 100%; max-width: 470px; }
.o-bc-card { background: #fff; border-radius: 8px; box-shadow: 0 1px 14px rgba(0,0,0,.12); }
[data-bs-theme="dark"] .o-bc-card { background: #1c2026; }
.o-bc-title { color: var(--o-primary); font-weight: 600; }
[data-bs-theme="dark"] .o-bc-title { color: #c79bb8; }

/* Gráfico de código de barras realista con láser animado */
.o-bc-graphic { position: relative; max-width: 260px; margin: 0 auto; padding-top: .5rem; }
.o-bc-graphic .o-bc-bars { display: flex; align-items: stretch; justify-content: center; gap: 5px; height: 120px; }
.o-bc-graphic .o-bc-bars span { background: var(--o-primary); border-radius: 1px; }
.o-bc-graphic .o-bc-ticks { display: flex; align-items: flex-start; gap: 5px; height: 16px; margin-top: 4px; padding-right: 22px; }
.o-bc-graphic .o-bc-ticks span { background: var(--o-primary); width: 9px; height: 12px; border-radius: 1px; }
[data-bs-theme="dark"] .o-bc-graphic span { background: #8f6580; }
.o-bc-graphic .scanline {
    position: absolute;
    left: -2%; right: -2%; height: 2px; top: 0;
    background: linear-gradient(90deg, transparent, #ff3b3b 18%, #ff5a5a 50%, #ff3b3b 82%, transparent);
    border-radius: 2px;
    box-shadow: 0 0 10px 2px rgba(255,59,59,.75), 0 0 22px 4px rgba(255,59,59,.35);
    animation: o-bc-scan 2.4s cubic-bezier(.45,.05,.55,.95) infinite;
    will-change: transform, opacity;
}
@keyframes o-bc-scan {
    0%   { transform: translateY(8px);    opacity: 0; }
    8%   { opacity: 1; }
    50%  { transform: translateY(128px);  opacity: 1; }
    92%  { opacity: 1; }
    100% { transform: translateY(8px);    opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .o-bc-graphic .scanline { animation: none; top: 50%; }
}

/* Botones grandes del home */
.o-bc-bigbtn { display: block; width: 100%; border: none; border-radius: 4px; padding: .85rem; font-weight: 700; font-size: .95rem; text-align: center; }
.o-bc-bigbtn.primary { background: var(--o-primary); color: #fff; }
.o-bc-bigbtn.primary:hover { background: var(--o-primary-2); color: #fff; }
.o-bc-bigbtn.light { background: #e7e7e9; color: #374151; }
.o-bc-bigbtn.light:hover { background: #dadade; color: #374151; }
[data-bs-theme="dark"] .o-bc-bigbtn.light { background: #2b2f36; color: #c4c9d2; }

/* ---------- Cabecera de navegación (breadcrumb estilo Odoo) ---------- */
.o-bc-nav { display: flex; align-items: center; gap: 1rem; padding: .55rem .9rem; background: #fff; border-bottom: 1px solid #e3e6ea; min-height: 46px; }
[data-bs-theme="dark"] .o-bc-nav { background: #1c2026; border-bottom-color: #2b2f36; }
.o-bc-crumb { font-size: .82rem; line-height: 1.25; }
.o-bc-crumb a { color: var(--o-primary); text-decoration: none; }
.o-bc-crumb a:hover { text-decoration: underline; }
.o-bc-crumb .cur { color: #4b5563; font-weight: 500; }
[data-bs-theme="dark"] .o-bc-crumb .cur { color: #c4c9d2; }
.o-bc-search { flex: 1; max-width: 460px; }
.o-bc-newbtn { background: var(--o-primary); color: #fff; border: none; border-radius: 4px; padding: .35rem .85rem; font-weight: 600; font-size: .82rem; }
.o-bc-newbtn:hover { background: var(--o-primary-2); color: #fff; }

/* Chips de filtro (facetas de búsqueda Odoo) */
.o-bc-facet { display: inline-flex; align-items: center; gap: .35rem; background: #e9eef5; color: #3c5a7a; border: 1px solid #d3dded; border-radius: 4px; padding: .2rem .5rem; font-size: .78rem; font-weight: 500; cursor: pointer; }
.o-bc-facet .x { opacity: .6; }
.o-bc-facet:hover .x { opacity: 1; }
[data-bs-theme="dark"] .o-bc-facet { background: #233042; color: #9cc0e6; border-color: #2f4565; }

/* Tarjetas de operación (overview) */
.o-bc-op { background: #fff; border: 1px solid #e3e6ea; border-radius: 4px; padding: 1rem 1.1rem; cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.o-bc-op:hover { box-shadow: 0 2px 10px rgba(0,0,0,.08); border-color: var(--o-primary); }
[data-bs-theme="dark"] .o-bc-op { background: #1c2026; border-color: #2b2f36; }
.o-bc-op-title { font-weight: 700; text-transform: uppercase; font-size: .82rem; letter-spacing: .02em; color: #2c3340; }
[data-bs-theme="dark"] .o-bc-op-title { color: #dfe3e8; }
.o-bc-op-sub { color: #66707b; font-size: .78rem; margin-top: .15rem; }
.o-bc-op-count { min-width: 28px; height: 28px; padding: 0 .4rem; border-radius: 50px; background: #e7e9ec; color: #5a6472; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; }
.o-bc-op-count.has { background: var(--o-primary); color: #fff; }
[data-bs-theme="dark"] .o-bc-op-count { background: #2b2f36; color: #c4c9d2; }

/* Banner oscuro de escaneo (full width) */
.o-bc-banner {
    background: #1c2733; color: #cfd6df;
    padding: .85rem 1.25rem;
    display: flex; align-items: center; justify-content: center; gap: .6rem; font-weight: 500;
}
.o-bc-banner .o-bc-scanicon { position: absolute; right: 1.25rem; opacity: .85; }

/* Tarjetas de documento (lista) */
.o-bc-doc { background: #fff; border: 1px solid #e3e6ea; border-radius: 4px; padding: .75rem 1rem; cursor: pointer; transition: box-shadow .15s, border-color .15s; height: 100%; }
.o-bc-doc:hover { box-shadow: 0 2px 10px rgba(0,0,0,.08); border-color: var(--o-primary); }
[data-bs-theme="dark"] .o-bc-doc { background: #1c2026; border-color: #2b2f36; }
.o-bc-doc-ref { font-weight: 700; color: #2c3340; }
[data-bs-theme="dark"] .o-bc-doc-ref { color: #dfe3e8; }
.o-bc-doc-fav { color: #d7b500; }
.o-bc-doc-fav.off { color: #c7ccd3; }
.o-bc-doc-pill { font-size: .68rem; font-weight: 600; padding: .12rem .5rem; border-radius: 4px; white-space: nowrap; }

/* ---------- Pantalla de escaneo (recibir / contar) a sangre completa ---------- */
.o-bc-screen { display: flex; flex-direction: column; min-height: calc(100vh - 150px); background: #fff; }
[data-bs-theme="dark"] .o-bc-screen { background: #15181d; }
.o-bc-topbar { display: flex; align-items: center; gap: .6rem; padding: .5rem .85rem; background: #fff; border-bottom: 1px solid #e3e6ea; }
[data-bs-theme="dark"] .o-bc-topbar { background: #1c2026; border-bottom-color: #2b2f36; }
.o-bc-iconbtn { border: 1px solid #d8dce1; background: #f6f7f8; border-radius: 4px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; color: #4b5563; }
.o-bc-iconbtn:hover { background: #eceef1; color: #1f2937; }
[data-bs-theme="dark"] .o-bc-iconbtn { background: #2b2f36; border-color: #353a42; color: #c4c9d2; }

/* Líneas de producto de la pantalla de escaneo */
.o-bc-lines { flex: 0 0 auto; }
.o-bc-line { border-bottom: 1px solid #eceff1; padding: .8rem 1.1rem; background: #fff; }
[data-bs-theme="dark"] .o-bc-line { border-bottom-color: #2b2f36; background: #1c2026; }
.o-bc-line.activo { background: #f6f0f4; box-shadow: inset 3px 0 0 var(--o-primary); }
[data-bs-theme="dark"] .o-bc-line.activo { background: #262029; }
.o-bc-line.ok { background: #effbf3; box-shadow: inset 3px 0 0 #1ea672; }
[data-bs-theme="dark"] .o-bc-line.ok { background: #15251d; }
.o-bc-qty { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.o-bc-scanarea { flex: 1 1 auto; background: #e9ecef; min-height: 32vh; }
[data-bs-theme="dark"] .o-bc-scanarea { background: #20242b; }

/* ---- Código de barras en móvil: filas limpias en vez de todo apretado ---- */
@media (max-width: 768px) {
    /* Nav de documentos: fila 1 = botón Nuevo + migas; fila 2 = filtros
       (Por hacer / Listo); fila 3 = búsqueda a todo lo ancho */
    .o-bc-nav { flex-wrap: wrap; gap: .5rem .75rem; }
    .o-bc-nav .o-bc-crumb { flex: 1 1 0; min-width: 0; }
    .o-bc-nav > .ms-auto {
        margin-left: 0 !important; width: 100%;
        flex-direction: column; align-items: stretch !important;
        gap: .5rem !important;
    }
    .o-bc-nav > .ms-auto > .d-flex { justify-content: flex-start; }
    .o-bc-nav .o-bc-search { max-width: 100% !important; min-width: 0 !important; width: 100%; }
}

@media (max-width: 576px) {
    /* Topbar del documento: el badge de estado baja a su propia fila para
       que la clave y el proveedor no queden aplastados (el título con
       flex-grow consume la fila 1, así que el badge envuelve solo) */
    .o-bc-topbar { flex-wrap: wrap; row-gap: .4rem; }
    .o-bc-topbar > .badge {
        order: 10; flex: 0 1 auto;
        margin-left: calc(34px + .6rem); margin-right: auto;
    }

    /* Línea de producto: fila 1 = nombre + ubicación; fila 2 = controles
       (−1, cantidad, +1, editar, llenar) distribuidos */
    .o-bc-line > .d-flex { flex-wrap: wrap; gap: .5rem .6rem !important; }
    .o-bc-line > .d-flex > .flex-grow-1 { flex-basis: 100%; }
    .o-bc-line .o-bc-qty { flex: 1 1 auto; }
}

/* Barra de acciones inferior (pegada al fondo) */
.o-bc-actions { position: sticky; bottom: 0; display: flex; gap: 6px; padding: 6px; background: #f8f9fa; border-top: 1px solid #e3e6ea; z-index: 5; }
[data-bs-theme="dark"] .o-bc-actions { background: #15181d; border-top-color: #2b2f36; }
.o-bc-footer-btn { flex: 1; border: none; border-radius: 4px; padding: 1.05rem; font-weight: 700; background: #e7e7e9; color: #374151; }
.o-bc-footer-btn.validar { background: var(--o-primary); color: #fff; }
.o-bc-footer-btn:disabled { opacity: .55; }
.o-bc-footer-btn:not(:disabled):hover { filter: brightness(.97); }
[data-bs-theme="dark"] .o-bc-footer-btn { background: #2b2f36; color: #c4c9d2; }

/* ---------- Formulario "Agregar producto" (overlay a pantalla completa) ---------- */
.o-bc-formscreen { position: fixed; inset: 0; z-index: 1060; background: #fff; display: flex; flex-direction: column; }
[data-bs-theme="dark"] .o-bc-formscreen { background: #15181d; }
.o-bc-qtybox { border: 1px solid #d8dce1; border-radius: 4px; padding: .6rem 1rem; font-size: 1.6rem; font-weight: 700; text-align: right; background: #fff; }
[data-bs-theme="dark"] .o-bc-qtybox { background: #1c2026; border-color: #353a42; color: #e6e8eb; }
.o-bc-step { flex: 1; border: 1px solid #d8dce1; background: #eceef1; border-radius: 4px; padding: .7rem; font-weight: 600; color: #374151; }
.o-bc-step:hover { background: #e2e5e9; }
[data-bs-theme="dark"] .o-bc-step { background: #2b2f36; border-color: #353a42; color: #c4c9d2; }

/* ---------- Escáner de cámara (diálogo centrado tipo Odoo) ---------- */
.o-bc-camera { position: fixed; inset: 0; z-index: 1065; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.o-bc-camera-dialog { width: 100%; max-width: 440px; background: #15181d; border-radius: 12px; overflow: hidden; box-shadow: 0 12px 44px rgba(0,0,0,.5); display: flex; flex-direction: column; }
.o-bc-camera-stage { position: relative; width: 100%; aspect-ratio: 4 / 3; background: #000; overflow: hidden; }
.o-bc-camera-stage #readerBarcodes { position: absolute; inset: 0; width: 100%; height: 100%; }
.o-bc-camera-stage #readerBarcodes video,
.o-bc-camera-stage #readerBarcodes canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.o-bc-camera-close { position: absolute; top: 10px; right: 10px; z-index: 12; width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(0,0,0,.55); color: #fff; font-size: 1rem; }
.o-bc-camera-hint { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; color: #fff; font-size: .8rem; text-shadow: 0 1px 3px rgba(0,0,0,.85); z-index: 12; }
.o-bc-camera-controls { background: #15181d; color: #cfd6df; padding: .7rem 1rem; display: flex; gap: 1.25rem; align-items: center; }
.o-bc-camera-controls label { font-size: .72rem; opacity: .75; display: block; margin-bottom: .15rem; }
#scanner-guide { position: absolute; top: 50%; left: 50%; width: 80%; height: 38%; transform: translate(-50%, -50%); border: 3px solid #00ff88; border-radius: 12px; z-index: 10; box-shadow: 0 0 0 9999px rgba(0,0,0,.45), 0 0 15px rgba(0,255,136,.8); pointer-events: none; }
#scanner-guide::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: red; animation: o-bc-camscan 2s linear infinite; }
@keyframes o-bc-camscan { 0% { top: 0; } 100% { top: 100%; } }

/* En móvil, el escáner ocupa toda la pantalla (como Odoo móvil) */
@media (max-width: 575.98px) {
    .o-bc-camera { padding: 0; }
    .o-bc-camera-dialog { max-width: 100%; height: 100%; border-radius: 0; }
    .o-bc-camera-stage { flex: 1 1 auto; aspect-ratio: auto; }
}

/* ============================================================
   Kanban / Pipeline estilo Odoo — Ventas
   ============================================================ */
.o-kanban {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 12px;
    scrollbar-width: thin;
    align-items: stretch;
}
/* Columnas elásticas: crecen para llenar el ancho por igual, pero no bajan
   de min-width (ahí aparece el scroll horizontal). */
.o-kanban-col {
    flex: 1 1 0;
    min-width: 264px;
    background: #f4f5f7;
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-direction: column;
}
[data-bs-theme="dark"] .o-kanban-col { background: #181b20; }

/* La zona de drop ocupa el alto restante de la columna (mejor target de arrastre). */
.o-kanban-list { flex: 1 1 auto; }

/* Móvil: carrusel con scroll-snap; cada columna asoma la siguiente. */
@media (max-width: 575.98px) {
    .o-kanban { gap: 10px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
    .o-kanban-col { min-width: 85vw; scroll-snap-align: start; }
}

/* Encabezado de columna con acento de etapa */
.o-kanban-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .5rem .55rem;
    border-bottom: 2px solid var(--stage, #adb5bd);
    margin-bottom: .6rem;
}
.o-kanban-title {
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--stage, #5a6472);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.o-kanban-count {
    font-size: .68rem;
    font-weight: 700;
    color: #6c757d;
    background: rgba(0,0,0,.06);
    border-radius: 999px;
    padding: .05rem .45rem;
    flex-shrink: 0;
}
[data-bs-theme="dark"] .o-kanban-count { background: rgba(255,255,255,.08); color: #aeb4bd; }
.o-kanban-sum {
    margin-left: auto;
    font-size: .78rem;
    font-weight: 700;
    color: var(--stage, #5a6472);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Zona de tarjetas */
.o-kanban-list { min-height: 120px; }

/* Tarjeta */
.o-kanban-card {
    position: relative;
    background: #fff;
    border: 1px solid #e3e6ea;
    border-left: 3px solid var(--stage, #adb5bd);
    border-radius: 6px;
    padding: .55rem .65rem;
    margin-bottom: .45rem;
    cursor: grab;
    transition: box-shadow .15s, transform .15s;
}
.o-kanban-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,.10); transform: translateY(-1px); }
.o-kanban-card:active { cursor: grabbing; }
[data-bs-theme="dark"] .o-kanban-card { background: #1c2026; border-color: #2b2f36; border-left-color: var(--stage); }

.o-kanban-card-title {
    font-size: .82rem;
    font-weight: 700;
    color: #2c3138;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
[data-bs-theme="dark"] .o-kanban-card-title { color: #e6e8eb; }
.o-kanban-card-ref {
    font-size: .72rem;
    color: #66707b;
    font-variant-numeric: tabular-nums;
}
.o-kanban-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .68rem;
    font-weight: 600;
    color: var(--o-primary);
    background: rgba(113,75,103,.10);
    border-radius: 4px;
    padding: .1rem .4rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
[data-bs-theme="dark"] .o-kanban-chip { color: #c79bb8; background: rgba(199,155,184,.14); }
.o-kanban-amount {
    font-size: .92rem;
    font-weight: 700;
    color: #198754;
    font-variant-numeric: tabular-nums;
}
[data-bs-theme="dark"] .o-kanban-amount { color: #4ade80; }
.o-kanban-avatar {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--o-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .7rem; flex-shrink: 0;
}
.o-kanban-card-foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: .5rem;
}
.o-kanban-link {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .72rem; font-weight: 600; text-decoration: none;
    color: #198754;
}
.o-kanban-link:hover { text-decoration: underline; }

/* Estado vacío de columna */
.o-kanban-empty {
    text-align: center;
    color: #adb5bd;
    font-size: .76rem;
    padding: 1.4rem .5rem;
    border: 1px dashed #d4d8dd;
    border-radius: 6px;
}
[data-bs-theme="dark"] .o-kanban-empty { color: #6c757d; border-color: #353a42; }

/* Drag states */
.o-kanban-card.sortable-ghost { opacity: .35; }
.o-kanban-card.sortable-drag { box-shadow: 0 8px 24px rgba(0,0,0,.22); }

/* Toggle de vista (lista / kanban) */
.o-view-toggle .btn {
    border-color: #d4d8dd;
    color: #6c757d;
    background: #fff;
}
.o-view-toggle .btn.active {
    background: var(--o-primary);
    border-color: var(--o-primary);
    color: #fff;
}
[data-bs-theme="dark"] .o-view-toggle .btn { background: #1c2026; border-color: #353a42; color: #aeb4bd; }
[data-bs-theme="dark"] .o-view-toggle .btn.active { background: #8f6580; border-color: #8f6580; color: #fff; }

/* ---------- Banda de KPIs (cards separadas estilo Odoo) ---------- */
.o-kpi-band {
    gap: .75rem;
    align-items: stretch;
}
.o-kpi {
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 8px;
    padding: .7rem 1.4rem;
    text-align: center;
    min-width: 145px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: box-shadow .15s;
}
[data-bs-theme="dark"] .o-kpi { background: #1c2026; border-color: #2b2f36; }
.o-kpi:hover:not(.o-kpi-spacer) { box-shadow: 0 .25rem .65rem rgba(0,0,0,.08); }
.o-kpi-value { font-size: 1.5rem; font-weight: 700; line-height: 1.15; }
.o-kpi-label { font-size: .74rem; color: #66707b; margin-top: .15rem; }
.o-kpi-spacer { background: transparent; border: none; min-width: 0; padding: 0; box-shadow: none !important; }

/* KPIs en móvil: grid parejo de 2 columnas en vez de flex irregular */
@media (max-width: 768px) {
    .o-kpi-band {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem;
    }
    .o-kpi { min-width: 0; padding: .6rem .5rem; }
    .o-kpi-value { font-size: 1.2rem; }
    .o-kpi-label { font-size: .7rem; }
    .o-kpi-spacer { display: none; }
}

/* ---------- Smart buttons (botones estadística estilo Odoo) ---------- */
.o-stat-band { gap: .5rem; }
.o-stat-btn {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: #fff;
    border: 1px solid #d9dce1;
    border-radius: 6px;
    padding: .4rem .85rem;
    min-width: 120px;
    transition: box-shadow .15s, border-color .15s;
}
.o-stat-btn:hover { box-shadow: 0 .25rem .6rem rgba(0,0,0,.08); border-color: #b9bdc4; }
[data-bs-theme="dark"] .o-stat-btn { background: #1c2026; border-color: #2b2f36; }
.o-stat-icon { font-size: 1.3rem; color: #7a5c97; }
.o-stat-value { font-size: 1.15rem; font-weight: 700; line-height: 1.05; }
.o-stat-label { font-size: .72rem; color: #66707b; }

/* ============================================================
   Vista "Trabajos" estilo Planado — módulo Tickets
   Prefijo .pl-  (Planado-like)
   ============================================================ */
:root {
    --pl-green: #6aa84f;
    --pl-green-2: #5c9543;
    --pl-link: #2f74b5;
    --pl-toolbar: linear-gradient(135deg, #7a5270 0%, #5b3c53 100%);
    --pl-toolbar-2: #5b3c53;
    --pl-border: #e4e7ea;
    --pl-row-hover: #f3f8ee;
    --pl-group-bg: #f5f6f7;
    --pl-muted: #66707b;
}
[data-bs-theme="dark"] {
    --pl-toolbar: linear-gradient(135deg, #3b2b39 0%, #241a23 100%);
    --pl-toolbar-2: #241a23;
    --pl-border: #2b2f36;
    --pl-row-hover: #232a22;
    --pl-group-bg: #20242b;
    --pl-muted: #8b929b;
    --pl-link: #6fa8dc;
}

[x-cloak] { display: none !important; }

/* Pestañas de vista (Horario | Trabajos | Mapa) dentro de la barra superior */
.pl-viewtabs { display: inline-flex; gap: .2rem; background: rgba(255,255,255,.14); border-radius: 8px; padding: .2rem; }
.pl-viewtab {
    border: 0; background: transparent; color: rgba(255,255,255,.82);
    font-size: .82rem; font-weight: 600; padding: .35rem .8rem; border-radius: 6px;
    display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
}
.pl-viewtab:hover { color: #fff; background: rgba(255,255,255,.12); }
.pl-viewtab.active { background: #fff; color: var(--pl-toolbar-2); box-shadow: 0 1px 3px rgba(0,0,0,.18); }

.pl-jobs { border: 1px solid var(--pl-border); border-radius: 8px; overflow: hidden; background: var(--bs-body-bg); }
.pl-jobs .cursor-pointer { cursor: pointer; }

/* ---------- Barra superior oscura ---------- */
.pl-toolbar {
    background: var(--pl-toolbar);
    color: #eef1f4;
    display: flex; align-items: center; gap: .75rem;
    padding: .55rem .9rem;
}
.pl-toolbar .pl-title { font-size: 1.15rem; font-weight: 600; margin: 0; letter-spacing: .01em; }
.pl-toolbar .pl-refresh {
    background: transparent; border: 0; color: #cfd6df; padding: .15rem .35rem;
    border-radius: 5px; line-height: 1;
}
.pl-toolbar .pl-refresh:hover { background: rgba(255,255,255,.12); color: #fff; }
.pl-toolbar-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.pl-search { position: relative; }
.pl-search input {
    height: 31px; border: 0; border-radius: 5px; padding: .25rem .6rem .25rem 1.9rem;
    font-size: .82rem; min-width: 230px; background: #fff; color: #333;
}
.pl-search .bi { position: absolute; left: .55rem; top: 50%; transform: translateY(-50%); color: #66707b; font-size: .8rem; }
.pl-tbtn {
    height: 31px; display: inline-flex; align-items: center; gap: .35rem;
    background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
    color: #eef1f4; font-size: .8rem; font-weight: 500; padding: 0 .7rem; border-radius: 5px;
    white-space: nowrap; text-decoration: none;
}
.pl-tbtn:hover { background: rgba(255,255,255,.20); color: #fff; }
.pl-tbtn-green { background: var(--pl-green); border-color: var(--pl-green); }
.pl-tbtn-green:hover { background: var(--pl-green-2); border-color: var(--pl-green-2); color: #fff; }

/* ---------- Fila de pestañas ---------- */
.pl-tabs {
    display: flex; align-items: center; gap: 0;
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--pl-border);
    padding: 0 .25rem;
    overflow-x: auto;
}
.pl-tab {
    border: 0; background: transparent; cursor: pointer;
    font-size: .82rem; color: var(--bs-body-color); font-weight: 500;
    padding: .6rem .85rem; white-space: nowrap;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.pl-tab:hover { color: var(--pl-link); }
.pl-tab.active { color: var(--pl-link); border-bottom-color: var(--pl-link); font-weight: 600; }
.pl-tab-badge { display: inline-block; min-width: 18px; padding: 0 .35rem; margin-left: .2rem; font-size: .68rem; font-weight: 700; line-height: 1.5; text-align: center; border-radius: 9px; background: var(--bs-tertiary-bg); color: var(--pl-muted); }
.pl-tab.active .pl-tab-badge { background: color-mix(in srgb, var(--pl-link) 16%, transparent); color: var(--pl-link); }
.pl-tabs .pl-count { color: var(--pl-muted); font-size: .8rem; padding: 0 .5rem; border-left: 1px solid var(--pl-border); margin-left: .25rem; }
.pl-tabs-right { margin-left: auto; display: flex; align-items: center; gap: .35rem; padding-right: .35rem; }
.pl-itool { border: 1px solid var(--pl-border); background: var(--bs-body-bg); color: var(--bs-secondary-color); height: 30px; min-width: 32px; border-radius: 5px; font-size: .82rem; display: inline-flex; align-items: center; justify-content: center; gap: .3rem; padding: 0 .55rem; }
.pl-itool:hover { background: var(--bs-tertiary-bg); }

/* ---------- Cuerpo: sidebar + tabla ---------- */
.pl-body { display: flex; align-items: stretch; }
.pl-sidebar {
    width: 210px; flex: 0 0 210px;
    border-right: 1px solid var(--pl-border);
    background: var(--bs-body-bg);
    padding: .25rem 0;
}
.pl-fgroup { border-bottom: 1px solid var(--pl-border); }
.pl-fgroup > .pl-fhead {
    width: 100%; text-align: left; border: 0; background: transparent;
    display: flex; align-items: center; gap: .4rem;
    padding: .6rem .9rem; font-size: .82rem; font-weight: 600; color: var(--bs-body-color);
}
.pl-fgroup > .pl-fhead .bi-chevron-right { transition: transform .15s ease; font-size: .7rem; color: var(--pl-muted); }
.pl-fgroup.open > .pl-fhead .bi-chevron-right { transform: rotate(90deg); }
.pl-fbody { padding: 0 .9rem .7rem 1.4rem; }
.pl-fbody .form-check { margin-bottom: .25rem; }
.pl-fbody .form-check-label { font-size: .8rem; }
.pl-sidebar .pl-fapply { margin: .6rem .9rem; display: flex; gap: .4rem; }

.pl-main { flex: 1 1 auto; min-width: 0; overflow-x: auto; }
.pl-table { width: 100%; margin: 0; font-size: .82rem; border-collapse: collapse; }
.pl-table thead th {
    background: var(--bs-tertiary-bg); color: var(--pl-muted);
    font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em;
    padding: .5rem .65rem; border-bottom: 1px solid var(--pl-border); white-space: nowrap;
    position: sticky; top: 0; z-index: 2;
}
.pl-table tbody td { padding: .55rem .65rem; border-bottom: 1px solid var(--pl-border); vertical-align: middle; }
.pl-table tbody tr.pl-data:hover { background: var(--pl-row-hover); }
.pl-group-row td {
    background: var(--pl-group-bg); font-size: .76rem; font-weight: 600;
    color: var(--bs-secondary-color); text-transform: capitalize;
    padding: .4rem .9rem !important; border-bottom: 1px solid var(--pl-border);
}
.pl-group-row .pl-group-count { color: var(--pl-muted); font-weight: 500; font-style: italic; margin-left: .35rem; }
.pl-num-link { color: var(--pl-link); font-weight: 600; text-decoration: none; }
.pl-num-link:hover { text-decoration: underline; }
.pl-amount { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Estado tipo Planado (texto + icono) */
.pl-state { display: inline-flex; align-items: center; gap: .35rem; font-weight: 500; white-space: nowrap; }
.pl-state .bi { font-size: .95rem; }
.pl-state-ok { color: var(--pl-green); }
.pl-state-pending { color: #c79a3a; }
.pl-state-progress { color: var(--pl-link); }
.pl-state-cancel { color: #c0504d; }
.pl-state-muted { color: var(--pl-muted); }

/* ============================================================
   Formulario de Ticket estilo Planado (vista "Trabajo")
   ============================================================ */
.pl-doc { background: var(--bs-body-bg); border: 1px solid var(--pl-border); border-radius: 12px; overflow: hidden; box-shadow: 0 4px 22px rgba(0,0,0,.07); }
.pl-doc-head { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.25rem .85rem; border-bottom: 1px solid var(--pl-border); flex-wrap: wrap; }
.pl-doc-title { font-size: 1.2rem; font-weight: 700; margin: 0; line-height: 1.2; }
.pl-doc-title .pl-doc-state { font-weight: 500; color: var(--pl-muted); }
.pl-doc-sub { font-size: .76rem; color: var(--pl-muted); margin-top: .15rem; }
.pl-doc-badge { display: inline-block; margin-top: .4rem; font-size: .72rem; font-weight: 700; padding: .2rem .6rem; border-radius: 5px; background: color-mix(in srgb, var(--pl-green) 16%, transparent); color: var(--pl-green-2); }
.pl-doc-actions { margin-left: auto; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.pl-hbtn { height: 34px; display: inline-flex; align-items: center; gap: .35rem; padding: 0 .7rem; font-size: .82rem; font-weight: 600; border-radius: 7px; border: 1px solid var(--pl-border); background: var(--bs-body-bg); color: var(--bs-body-color); white-space: nowrap; }
.pl-hbtn:hover { background: var(--bs-tertiary-bg); }
.pl-hbtn-icon { width: 34px; justify-content: center; padding: 0; }
.pl-hbtn-primary { background: var(--pl-link); border-color: var(--pl-link); color: #fff; }
.pl-hbtn-primary:hover { background: #285f95; border-color: #285f95; color: #fff; }
.pl-hbtn-finish { background: var(--pl-green); border-color: var(--pl-green); color: #fff; }
.pl-hbtn-finish:hover { background: var(--pl-green-2); border-color: var(--pl-green-2); color: #fff; }
.pl-hbtn-warning { background: #f4b740; border-color: #f4b740; color: #5a4404; }
.pl-hbtn-warning:hover { background: #e6a92e; border-color: #e6a92e; color: #5a4404; }

/* Separador entre columnas del formulario (en pantallas grandes) */
@media (min-width: 992px) {
    .pl-doc .pl-leftcol { padding-right: 1.75rem; }
    .pl-doc .pl-rightcol { border-left: 1px solid var(--pl-border); padding-left: 1.75rem; }
}
.pl-hbtn:disabled { opacity: .5; }

.pl-doc-stats { display: flex; gap: 2.5rem; padding: .6rem 1.25rem; background: var(--bs-tertiary-bg); border-bottom: 1px solid var(--pl-border); font-size: .8rem; }
.pl-doc-stat .v { font-weight: 700; }
.pl-doc-stat .l { color: var(--pl-muted); font-size: .72rem; }

.pl-doc-body { padding: 1.25rem 1.5rem 1.75rem; }
.pl-flabel { display: block; font-size: .78rem; font-weight: 600; color: var(--bs-secondary-color); margin-bottom: .25rem; }
.pl-flabel .req { color: #c0504d; }
.pl-doc .form-control, .pl-doc .form-select, .pl-doc textarea { font-size: .86rem; border-color: var(--pl-border); }
.pl-doc .form-control:focus, .pl-doc .form-select:focus { border-color: var(--pl-link); box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--pl-link) 20%, transparent); }
.pl-fhint { font-size: .74rem; color: var(--pl-muted); }
.pl-link-sm { font-size: .78rem; text-decoration: none; color: var(--pl-link); }
.pl-link-sm:hover { text-decoration: underline; }
.pl-section { font-weight: 700; font-size: .92rem; margin: 1.25rem 0 .75rem; padding-bottom: .4rem; border-bottom: 1px solid var(--pl-border); }
.pl-contacts { background: var(--bs-tertiary-bg); border-radius: 9px; padding: .9rem 1rem; }
.pl-readbox { font-size: .86rem; padding: .45rem .6rem; background: var(--bs-tertiary-bg); border: 1px solid var(--pl-border); border-radius: 7px; min-height: 38px; }
.pl-timeline { position: relative; padding-left: 1rem; }
.pl-timeline li { position: relative; padding: 0 0 .7rem 1rem; border-left: 2px solid var(--pl-border); }
.pl-timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.pl-timeline li .dot { position: absolute; left: -7px; top: 2px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--bs-body-bg); }
.pl-timeline li b { display: block; font-size: .8rem; }

@media (max-width: 768px) {
    .pl-doc-actions { width: 100%; }
    .pl-hbtn span:not(.spinner-border) { display: none; }
    .pl-hbtn-primary span:not(.spinner-border), .pl-hbtn-close span { display: inline; }
    .pl-doc-stats { gap: 1.5rem; }
    .pl-doc-body { padding: 1rem; }
}

@media (max-width: 992px) {
    .pl-sidebar { display: none; }
    .pl-sidebar.pl-open { display: block; position: relative; width: 100%; flex-basis: 100%; border-right: 0; border-bottom: 1px solid var(--pl-border); }
    .pl-body { flex-direction: column; }

    /* Lista de tickets del Mapa: en móvil va debajo del mapa (no hay botón
       para abrirla, así que no puede quedar oculta) */
    .pl-sidebar.pl-maplist {
        display: block; order: 2; width: 100% !important; flex-basis: auto !important;
        max-height: 260px !important; border-right: 0;
        border-top: 1px solid var(--pl-border);
    }
}

/* ---------- Responsive de la barra superior ---------- */
@media (max-width: 768px) {
    .pl-toolbar { flex-wrap: wrap; row-gap: .5rem; padding: .6rem .7rem; }
    .pl-toolbar .pl-viewtabs {
        order: 0; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap; scrollbar-width: none;
    }
    .pl-toolbar .pl-viewtabs::-webkit-scrollbar { display: none; }
    .pl-toolbar .pl-viewtab { flex-shrink: 0; }
    .pl-toolbar-actions { margin-left: 0; width: 100%; flex-wrap: wrap; }
    .pl-search { flex: 1 1 100%; }
    .pl-search input { min-width: 0; width: 100%; }
    .pl-tbtn span:not(.spinner-border) { display: none; }   /* solo iconos en móvil */
    .pl-tbtn { padding: 0 .6rem; }
    .pl-tbtn-green span:not(.spinner-border) { display: inline; } /* mantener "Agregar" visible */

    /* Fila de pestañas en móvil: dos filas separadas en vez de todo apretado
       en una sola línea.
       Fila 1: chips de estado, con scroll horizontal propio.
       Fila 2: contador + botones de acción (columnas/reset/filtros), a todo
       lo ancho, para que respiren y no se corten ni se apilen encima de la tabla. */
    .pl-tabs { flex-wrap: wrap; row-gap: .4rem; padding: .5rem .25rem; }
    .pl-tabs-scroll {
        flex: 1 1 100%; order: 1; display: flex; gap: 0;
        overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .pl-tabs-scroll::-webkit-scrollbar { display: none; }
    .pl-tab { flex-shrink: 0; }
    .pl-tabs .pl-count {
        order: 2; flex: 1 1 auto; border-left: 0; padding-left: 0;
        font-size: .78rem;
    }
    .pl-tabs-right {
        order: 3; flex: 0 0 auto; flex-wrap: nowrap; margin-left: auto;
    }
    .pl-tabs-right .pl-itool { flex-shrink: 0; }
    .pl-tabs-right select.pl-itool { min-width: 46px; padding: 0 .35rem; }
}
@media (max-width: 576px) {
    .pl-jobs { border-radius: 6px; }
    .pl-table { font-size: .78rem; }
    .pl-table thead th, .pl-table tbody td { padding: .45rem .5rem; }
    .pl-tabs-right .pl-itool span { display: none; } /* solo icono, sin texto */
}

/* ---------- Calendario (Horario) bonito ---------- */
.pl-cal {
    --fc-border-color: var(--pl-border);
    --fc-page-bg-color: var(--bs-body-bg);
    --fc-neutral-bg-color: var(--bs-tertiary-bg);
    --fc-today-bg-color: color-mix(in srgb, var(--pl-link) 10%, transparent);
    --fc-now-indicator-color: var(--pl-green);
    color: var(--bs-body-color);
}
.pl-cal .fc { font-size: .85rem; }
.pl-cal .fc .fc-toolbar-title { font-size: 1.1rem; font-weight: 700; text-transform: capitalize; color: var(--bs-heading-color); }
.pl-cal .fc .fc-button {
    background: var(--bs-body-bg) !important; border: 1px solid var(--pl-border) !important;
    color: var(--bs-body-color) !important; box-shadow: none !important;
    border-radius: 7px !important; font-size: .8rem !important; font-weight: 600 !important;
    padding: .35rem .8rem !important; text-transform: capitalize; margin: 0 2px !important;
}
.pl-cal .fc .fc-button:hover { background: var(--bs-tertiary-bg) !important; }
.pl-cal .fc .fc-button-primary:not(:disabled).fc-button-active,
.pl-cal .fc .fc-button-primary:not(:disabled):active {
    background: var(--pl-toolbar-2) !important; border-color: var(--pl-toolbar-2) !important; color: #fff !important;
}
.pl-cal .fc .fc-col-header-cell-cushion { color: var(--pl-muted); text-decoration: none; font-weight: 600; text-transform: capitalize; padding: .5rem 0; }
.pl-cal .fc .fc-daygrid-day-number, .pl-cal .fc .fc-timegrid-slot-label-cushion { color: var(--bs-secondary-color); text-decoration: none; }
.pl-cal .fc .fc-day-today { background: var(--fc-today-bg-color) !important; }
.pl-cal .fc .fc-event {
    border: none !important; border-radius: 6px !important; padding: 2px 6px !important;
    font-size: .74rem !important; font-weight: 600 !important; cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.pl-cal .fc .fc-event:hover { filter: brightness(1.06); }
.pl-cal .fc .fc-scrollgrid { border-radius: 10px; overflow: hidden; }
.pl-cal .fc .fc-timegrid-now-indicator-line { border-color: var(--pl-green); }

/* Horario en móvil: toolbar apilado (título arriba, controles debajo) */
@media (max-width: 768px) {
    .pl-cal .fc .fc-toolbar { flex-direction: column; gap: .5rem; }
    .pl-cal .fc .fc-toolbar-chunk:nth-child(2) { order: -1; }
    .pl-cal .fc .fc-toolbar-chunk { display: flex; justify-content: center; flex-wrap: wrap; gap: .25rem; }
    .pl-cal .fc .fc-toolbar-title { font-size: 1rem; text-align: center; }
    .pl-cal .fc .fc-button { font-size: .75rem !important; padding: .3rem .6rem !important; }
}

/* ============================================================
   Vista "Línea de tiempo" (timeline/day estilo Planado)
   Prefijo .tl-
   ============================================================ */

/* Navegador de día */
.tl-daybar {
    display: flex; align-items: center; gap: .9rem;
    padding: .55rem .9rem; border-bottom: 1px solid var(--pl-border);
    background: var(--bs-body-bg);
}
.tl-daynav { display: inline-flex; align-items: center; gap: .3rem; }
.tl-navbtn, .tl-today {
    border: 1px solid var(--pl-border); background: var(--bs-body-bg);
    color: var(--bs-secondary-color); height: 30px; min-width: 30px;
    border-radius: 6px; font-size: .82rem; display: inline-flex;
    align-items: center; justify-content: center; padding: 0 .6rem; cursor: pointer;
}
.tl-navbtn:hover, .tl-today:hover { background: var(--bs-tertiary-bg); }
.tl-today { font-weight: 600; }
.tl-daylabel { font-size: .92rem; font-weight: 600; color: var(--bs-body-color); }

/* Layout: panel lateral + grilla */
.tl-layout { display: flex; align-items: stretch; min-height: 420px; }

/* Panel lateral de no asignados */
.tl-unassigned {
    flex: 0 0 270px; width: 270px; border-right: 1px solid var(--pl-border);
    background: var(--bs-tertiary-bg); display: flex; flex-direction: column;
}
.tl-unassigned-head {
    display: flex; align-items: center; gap: .45rem;
    padding: .7rem .9rem; font-weight: 600; font-size: .85rem;
    border-bottom: 1px solid var(--pl-border); color: var(--bs-body-color);
}
.tl-unassigned-body { overflow-y: auto; max-height: 70vh; padding: .6rem; display: flex; flex-direction: column; gap: .55rem; }
.tl-ucard {
    background: var(--bs-body-bg); border: 1px solid var(--pl-border);
    border-left: 4px solid var(--pl-muted); border-radius: 8px; padding: .55rem .6rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.tl-ucard-top { display: flex; align-items: center; justify-content: space-between; }
.tl-ucard-clave { color: var(--pl-link); font-weight: 700; font-size: .8rem; text-decoration: none; }
.tl-ucard-clave:hover { text-decoration: underline; }
.tl-ucard-cli { font-size: .82rem; font-weight: 600; margin-top: .15rem; color: var(--bs-body-color); }
.tl-ucard-asunto { font-size: .74rem; color: var(--pl-muted); margin-top: .1rem; }
.tl-ucard-dir { font-size: .72rem; color: var(--pl-muted); margin-top: .1rem; display: flex; gap: .2rem; }
.tl-ucard-actions { margin-top: .5rem; }
.tl-assign-select { font-size: .76rem; height: 28px; padding: 0 .4rem; }
.tl-empty { color: var(--pl-muted); font-size: .85rem; text-align: center; padding: 1.2rem .6rem; }

/* Grilla del timeline */
.tl-grid { flex: 1 1 auto; min-width: 0; overflow-x: auto; background: var(--bs-body-bg); }
.tl-scroll { min-width: calc(180px + var(--tl-hw) * var(--tl-hours)); }
.tl-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--pl-border); }
.tl-head-row { position: sticky; top: 0; z-index: 3; background: var(--pl-group-bg); }
.tl-resource {
    flex: 0 0 180px; width: 180px; padding: .6rem .8rem;
    border-right: 1px solid var(--pl-border); display: flex; align-items: center; gap: .45rem;
    position: sticky; left: 0; z-index: 2; background: var(--bs-body-bg);
}
.tl-head-row .tl-resource { background: var(--pl-group-bg); }
.tl-resource-head { font-weight: 700; font-size: .8rem; color: var(--pl-muted); text-transform: uppercase; letter-spacing: .03em; }
.tl-resource-name { font-size: .85rem; font-weight: 600; color: var(--bs-body-color); }

/* Pista (track) donde se posicionan los bloques */
.tl-track {
    position: relative; flex: 1 1 auto;
    min-width: calc(var(--tl-hw) * var(--tl-hours)); min-height: 64px;
}
.tl-track-head { min-height: 32px; }
.tl-hour {
    position: absolute; top: 0; height: 100%; padding: .45rem .35rem;
    font-size: .72rem; color: var(--pl-muted); font-variant-numeric: tabular-nums;
    border-left: 1px solid var(--pl-border);
}
.tl-gridline { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid var(--pl-border); }

/* Bloque de ticket */
.tl-block {
    position: absolute; top: 6px; bottom: 6px; min-width: 46px;
    border-radius: 6px; padding: .25rem .45rem; overflow: hidden;
    color: #fff; text-decoration: none; box-shadow: 0 1px 3px rgba(0,0,0,.22);
    display: flex; flex-direction: column; justify-content: center; line-height: 1.15;
}
.tl-block:hover { filter: brightness(1.07); color: #fff; z-index: 4; }
.tl-block-time { font-size: .66rem; opacity: .85; font-weight: 600; }
.tl-block-clave { font-size: .74rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-block-cli { font-size: .68rem; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 768px) {
    .tl-layout { flex-direction: column; }
    .tl-unassigned { flex-basis: auto; width: 100%; border-right: 0; border-bottom: 1px solid var(--pl-border); }
    .tl-unassigned-body { max-height: 240px; }

    /* Barra de día: permite envolver para que la fecha no quede aplastada
       cuando comparte fila con el toggle de modo y las flechas (Turnos) */
    .tl-daybar { flex-wrap: wrap; row-gap: .45rem; }
    .tl-daylabel { flex: 1 1 auto; white-space: nowrap; }

    /* Columna de técnicos más angosta para dejar espacio a la grilla */
    .tl-resource { flex-basis: 120px; width: 120px; padding-left: .6rem; padding-right: .5rem; }
    .tl-scroll { min-width: calc(120px + var(--tl-hw) * var(--tl-hours)); }
    .tl-resource-name { font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---------- Sub-pestañas (Informes: Trabajos | Empleados) ---------- */
.tl-subtabs { display: flex; gap: .3rem; padding: .55rem .9rem 0; border-bottom: 1px solid var(--pl-border); background: var(--bs-body-bg); }
.tl-subtab {
    border: 0; background: transparent; color: var(--pl-muted);
    font-size: .85rem; font-weight: 600; padding: .5rem .9rem; cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tl-subtab:hover { color: var(--pl-link); }
.tl-subtab.active { color: var(--pl-link); border-bottom-color: var(--pl-link); }

/* ---------- Barra de filtros de período (Informes) ---------- */
.tl-filterbar {
    display: flex; align-items: center; flex-wrap: wrap; gap: .75rem;
    padding: .65rem .9rem; border-bottom: 1px solid var(--pl-border); background: var(--bs-body-bg);
    font-size: .82rem;
}
.tl-filterlbl { color: var(--pl-muted); font-weight: 600; }
.tl-radio { display: inline-flex; align-items: center; gap: .3rem; margin: 0; color: var(--bs-body-color); }
.tl-daterange { display: inline-flex; align-items: center; gap: .35rem; }
.tl-daterange input[type=date] { width: 140px; }
.tl-total-badge { margin-left: auto; font-weight: 700; color: var(--pl-link); }

/* ---------- Tarjetas y gráficos de barras (Informes) ---------- */
.tl-charts-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem; padding: .9rem;
}
.tl-card { background: var(--bs-body-bg); border: 1px solid var(--pl-border); border-radius: 8px; overflow: hidden; }
.tl-card-head { padding: .6rem .9rem; font-weight: 600; font-size: .85rem; background: var(--pl-group-bg); border-bottom: 1px solid var(--pl-border); }
.tl-card-body { padding: .8rem .9rem; }
.tl-bar-row { display: flex; align-items: center; gap: .6rem; margin-bottom: .55rem; }
.tl-bar-row:last-child { margin-bottom: 0; }
.tl-bar-label {
    flex: 0 0 130px; width: 130px; font-size: .78rem; color: var(--bs-secondary-color);
    text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tl-bar-track { position: relative; flex: 1 1 auto; height: 20px; background: var(--bs-tertiary-bg); border-radius: 4px; display: flex; align-items: center; }
.tl-bar-fill { height: 100%; border-radius: 4px; min-width: 2px; transition: width .25s ease; }
.tl-bar-value { position: absolute; right: .5rem; font-size: .74rem; font-weight: 700; color: var(--bs-body-color); }

@media (max-width: 768px) {
    .tl-charts-grid { grid-template-columns: 1fr; gap: .7rem; padding: .7rem; }
    /* Etiquetas de barras más cortas para que la barra tenga espacio real */
    .tl-bar-label { flex-basis: 90px; width: 90px; font-size: .72rem; }
    .tl-total-badge { flex: 1 1 100%; margin-left: 0; text-align: right; }
}

/* ---------- Toggle de modo (Turnos) ---------- */
.tl-modetoggle { display: inline-flex; border: 1px solid var(--pl-border); border-radius: 7px; overflow: hidden; }
.tl-modebtn {
    border: 0; background: var(--bs-body-bg); color: var(--bs-secondary-color);
    font-size: .82rem; font-weight: 600; padding: .35rem .75rem; cursor: pointer;
    display: inline-flex; align-items: center; gap: .35rem;
}
.tl-modebtn + .tl-modebtn { border-left: 1px solid var(--pl-border); }
.tl-modebtn:hover { background: var(--bs-tertiary-bg); }
.tl-modebtn.active { background: var(--pl-toolbar-2); color: #fff; }

/* ---------- Grilla de turnos (trabajador × días) ---------- */
.tl-shifts { overflow-x: auto; background: var(--bs-body-bg); }
.tl-shifts-scroll { min-width: calc(180px + var(--tl-dw) * 14); }
.tl-srow { display: flex; border-bottom: 1px solid var(--pl-border); }
.tl-shead { position: sticky; top: 0; z-index: 3; background: var(--pl-group-bg); }
.tl-sresource {
    flex: 0 0 180px; width: 180px; padding: .55rem .8rem;
    border-right: 1px solid var(--pl-border); display: flex; align-items: center; gap: .45rem;
    position: sticky; left: 0; z-index: 2; background: var(--bs-body-bg);
}
.tl-shead .tl-sresource { background: var(--pl-group-bg); }
.tl-sresource-head { font-weight: 700; font-size: .78rem; color: var(--pl-muted); text-transform: uppercase; letter-spacing: .03em; }
.tl-sresource-name { font-size: .85rem; font-weight: 600; color: var(--bs-body-color); }
.tl-sday {
    flex: 0 0 var(--tl-dw); width: var(--tl-dw); padding: .35rem .3rem; text-align: center;
    border-left: 1px solid var(--pl-border); display: flex; flex-direction: column; line-height: 1.1;
}
.tl-sday-dow { font-size: .68rem; color: var(--pl-muted); }
.tl-sday-num { font-size: .9rem; font-weight: 700; color: var(--bs-body-color); }
.tl-sday-num small { font-size: .6rem; color: var(--pl-link); margin-left: .15rem; }
.tl-scell {
    flex: 0 0 var(--tl-dw); width: var(--tl-dw); min-height: 56px; padding: .25rem;
    border-left: 1px solid var(--pl-border); display: flex; flex-direction: column; gap: .2rem;
}
.tl-sday.finde, .tl-scell.finde { background: var(--bs-tertiary-bg); }
.tl-sday.hoy, .tl-scell.hoy { background: color-mix(in srgb, var(--pl-link) 8%, transparent); }
.tl-chip {
    display: block; color: #fff; text-decoration: none; font-size: .68rem; font-weight: 600;
    padding: .12rem .35rem; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tl-chip:hover { color: #fff; filter: brightness(1.08); }
.tl-chip b { font-weight: 700; opacity: .9; }

/* Turnos en móvil: columna de trabajadores más angosta (debe ir después de
   las reglas base de .tl-sresource para ganar por orden de cascada) */
@media (max-width: 768px) {
    .tl-sresource { flex-basis: 120px; width: 120px; padding-left: .6rem; padding-right: .5rem; }
    .tl-shifts-scroll { min-width: calc(120px + var(--tl-dw) * 14); }
    .tl-sresource-name { font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ===== Barra de menú de app estilo Odoo (Inventario / Compras) ===== */
.o-app-nav {
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
    margin-bottom: .5rem;
    position: sticky;
    top: 0;
    z-index: 20;
}
.o-app-nav-inner {
    display: flex;
    align-items: stretch;
    gap: .25rem;
    padding: 0 1rem;
    flex-wrap: wrap;
}
.o-app-nav-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    color: #714B67;
    text-decoration: none;
    padding: .6rem .9rem .6rem 0;
    margin-right: .5rem;
    border-right: 1px solid var(--bs-border-color);
}
.o-app-nav-brand i { font-size: 1.1rem; }
.o-app-nav-brand:hover { color: #5a3b52; }
.o-app-nav-items { display: flex; align-items: stretch; flex-wrap: wrap; }
.o-app-nav-link {
    display: inline-flex;
    align-items: center;
    padding: .6rem .85rem;
    color: var(--bs-body-color);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.o-app-nav-link:hover { color: #714B67; background: color-mix(in srgb, #714B67 6%, transparent); }
.o-app-nav-link.active {
    color: #714B67;
    font-weight: 600;
    border-bottom-color: #714B67;
}
.o-app-nav-link.dropdown-toggle::after { margin-left: .4rem; }
.o-app-nav .dropdown-menu { font-size: .9rem; min-width: 220px; }
.o-app-nav .dropdown-item.active,
.o-app-nav .dropdown-item:active {
    background: color-mix(in srgb, #714B67 12%, transparent);
    color: #714B67;
}

/* ===== Resumen de inventario (dashboard estilo Odoo) ===== */
.o-dash-title { color: #1f7a6d; font-weight: 700; font-size: 1.05rem; }
.o-dash-title:hover { color: #145a50; }
.o-dash-card { transition: box-shadow .15s; }
.o-dash-card:hover { box-shadow: 0 .5rem 1rem rgba(0,0,0,.1) !important; }
.o-dash-chart {
    display: flex; align-items: flex-end; gap: .5rem;
    height: 170px; padding-top: .5rem; border-top: 1px solid var(--bs-border-color); margin-top: .25rem;
}
.o-dash-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.o-dash-bar-val { font-size: .7rem; color: var(--bs-secondary-color); margin-bottom: 2px; min-height: 1em; }
.o-dash-bar {
    width: 70%; max-width: 46px; background: #e5e7eb; border-radius: 4px 4px 0 0;
    transition: background .15s;
}
.o-dash-bar-col:hover .o-dash-bar { background: #714B67; }
.o-dash-bar-lbl { font-size: .7rem; color: var(--bs-secondary-color); margin-top: .35rem; text-transform: capitalize; }

/* ===== Selector de tipos de vista (Odoo view switcher) ===== */
.o-view-switch .btn {
    border: 1px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
    background: var(--bs-body-bg);
}
.o-view-switch .btn.active {
    color: #714B67;
    background: color-mix(in srgb, #714B67 10%, transparent);
    border-color: #714B67;
}
/* ===== Vista Kanban por etapa ===== */
.o-kanban-wrap { min-height: 200px; }
.o-kanban-col {
    flex: 0 0 260px; max-width: 260px;
    background: var(--bs-tertiary-bg); border-radius: .5rem; padding: .5rem;
}
.o-kanban-head { padding: .25rem .5rem .5rem; border-bottom: 2px solid var(--bs-border-color); margin-bottom: .5rem; }
.o-kanban-body { display: flex; flex-direction: column; gap: .5rem; min-height: 40px; }
.o-kanban-card {
    display: block; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
    border-radius: .4rem; padding: .6rem .7rem; box-shadow: 0 1px 2px rgba(0,0,0,.04);
    transition: box-shadow .15s, transform .05s;
}
.o-kanban-card:hover { box-shadow: 0 .35rem .75rem rgba(0,0,0,.1); }

/* ===== Línea de tiempo de trazabilidad (serial) ===== */
.o-timeline { position: relative; padding-left: 1.25rem; }
.o-timeline::before {
    content: ""; position: absolute; left: 6px; top: 4px; bottom: 4px; width: 2px; background: var(--bs-border-color);
}
.o-tl-item { position: relative; padding-bottom: .75rem; }
.o-tl-dot {
    position: absolute; left: -1.25rem; top: 4px; width: 12px; height: 12px; border-radius: 50%;
    border: 2px solid var(--bs-body-bg); box-shadow: 0 0 0 1px var(--bs-border-color);
}
.o-tl-body { padding-left: .25rem; }

/* ===== Chatter: separador de día estilo Odoo ===== */
.o-chatter-day { position: relative; }
.o-chatter-day::before {
    content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--bs-border-color);
}
.o-chatter-day span { position: relative; z-index: 1; }

/* ============================================================
   Usabilidad táctil en móvil: área de toque mínima ~40-44px
   (los controles compactos de escritorio son difíciles de
   pulsar con el dedo) y fuente de 16px en campos para evitar
   el zoom automático de iOS al enfocar.
   ============================================================ */
@media (max-width: 768px) {
    /* Botonera Planado (tickets) */
    .pl-tbtn, .pl-itool, .pl-refresh { min-height: 40px; min-width: 40px; }
    .pl-search input { height: 40px; font-size: 16px; }
    .pl-viewtab { padding-top: .55rem; padding-bottom: .55rem; }
    .pl-tab { padding-top: .8rem; padding-bottom: .8rem; }

    /* Código de barras */
    .o-bc-iconbtn { width: 42px; height: 42px; }
    .o-bc-newbtn { padding: .5rem .9rem; }
    .o-bc-facet { padding: .4rem .6rem; }
    .o-bc-step { min-height: 44px; }
    .o-bc-search .form-control { font-size: 16px; height: 40px; }

    /* Vista lista/kanban (Compras) */
    .o-view-switch .btn { min-width: 42px; min-height: 40px; }
}

/* ============================================================
   MÓVIL: adaptación táctil de los componentes estilo Odoo /
   Planado / timeline. En móvil el área de toque manda sobre la
   densidad de escritorio (el desktop conserva su diseño).
   ============================================================ */
@media (max-width: 768px) {
    /* Cabecera de documento (formulario Planado de tickets) */
    .pl-hbtn { height: 44px; }
    .pl-hbtn-icon { width: 44px; }

    /* Navegador de día y toggles del timeline / turnos */
    .tl-navbtn, .tl-today { height: 42px; min-width: 42px; }
    .tl-modebtn { padding: .6rem .9rem; }
    .tl-subtab { padding: .75rem .9rem; }
    .tl-assign-select { height: 40px; font-size: 16px; }

    /* Documentos y tarjetas de operación (Código de barras) */
    .o-bc-op { padding: 1rem .9rem; }
    .o-bc-doc { padding: .85rem .8rem; }
    .o-bc-bigbtn { min-height: 52px; }
    .o-bc-footer-btn { min-height: 52px; }

    /* Botones del calendario FullCalendar */
    .pl-cal .fc .fc-button { min-height: 42px; }
    #calendar .fc-button { min-height: 42px; }

    /* Smart buttons y KPIs clicables */
    .o-stat-btn { min-height: 46px; }
    .o-kpi[wire\:click] { min-height: 56px; }

    /* Chips de turnos: legibles y pulsables */
    .tl-chip { font-size: .74rem; padding: .3rem .45rem; }
}

/* ============================================================
   Pulido visual estilo Odoo 17 — documentos de Compras/Inventario
   (Sección aditiva: refina .o-doc / .o-statusbar sin tocar lo previo)
   ============================================================ */

/* Hoja del documento: sombra más marcada, como el "sheet" de Odoo */
.o-doc { box-shadow: 0 1px 4px rgba(0, 0, 0, .08), 0 4px 18px rgba(0, 0, 0, .06) !important; }
[data-bs-theme="dark"] .o-doc { box-shadow: 0 1px 4px rgba(0, 0, 0, .4), 0 4px 18px rgba(0, 0, 0, .3) !important; }

/* Nombre del registro grande, tipografía Odoo */
.o-doc-record { font-size: 1.55rem; font-weight: 600; letter-spacing: -.01em; }

/* Toolbar con más aire lateral */
.o-doc-toolbar { padding-left: 1rem; padding-right: 1rem; }

/* Statusbar: chevrons más altos y legibles; etapas pasadas con tinte morado */
.o-stage {
    padding: .42rem 1.05rem .42rem 1.35rem;
    font-size: .76rem;
    letter-spacing: .02em;
    transition: background .15s ease, color .15s ease;
}
.o-stage:first-child { padding-left: 1.05rem; }
.o-stage.done { color: var(--o-primary); background: #f0e9ee; }
.o-stage.done::after { content: " ✓"; font-size: .68rem; opacity: .7; }
[data-bs-theme="dark"] .o-stage.done { color: #c79bb8; background: #2c2330; }

/* Etiquetas de campo (label gris pequeño, valor debajo/derecha) */
.o-field-label { text-transform: none; }

/* Filas de la tabla de líneas con hover sutil (bg-body-secondary de Bootstrap) */
.o-doc .table-hover > tbody > tr:hover > * { background-color: var(--bs-tertiary-bg); }

/* Chatter: burbuja de notas internas en amarillo suave como Odoo */
.o-chatter .bg-warning-subtle { border-color: var(--bs-warning-border-subtle) !important; }

/* ============================================================
   Inputs estilo Odoo dentro de documentos (.o-doc)
   Sin caja: solo línea inferior, morada al enfocar — como Odoo.
   ============================================================ */
.o-doc-main .form-control,
.o-doc-main .form-select {
    background: transparent;
    border: 1px solid transparent;
    border-bottom: 1px solid var(--bs-border-color);
    border-radius: 0;
    padding-left: .25rem;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.o-doc-main .form-control:hover,
.o-doc-main .form-select:hover { border-bottom-color: var(--o-primary); }
.o-doc-main .form-control:focus,
.o-doc-main .form-select:focus {
    background: transparent;
    border-bottom-color: var(--o-primary);
    box-shadow: 0 1px 0 0 var(--o-primary);
}
.o-doc-main .form-control.is-invalid,
.o-doc-main .form-select.is-invalid { border-bottom-color: var(--bs-form-invalid-border-color); }

/* Textareas conservan una caja suave (notas largas) */
.o-doc-main textarea.form-control {
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    background: var(--bs-body-bg);
}

/* Grupos con prefijo (Q, %, días): el addon se funde con la línea */
.o-doc-main .input-group-text {
    background: transparent;
    border: 1px solid transparent;
    border-bottom: 1px solid var(--bs-border-color);
    border-radius: 0;
    color: var(--bs-secondary-color);
}

/* Radios y checks mantienen su estilo Bootstrap (legibilidad) */
.o-doc-main .form-check-input { border: var(--bs-border-width) solid var(--bs-border-color); }

/* El título del producto (input grande) sin subrayado doble */
.o-doc-main .form-control-lg.border-0 { border-bottom: 1px solid var(--bs-border-color) !important; }

[data-bs-theme="dark"] .o-doc-main .form-control,
[data-bs-theme="dark"] .o-doc-main .form-select { color: var(--bs-body-color); }