/* =====================================================================
   WORKCONTROL PRO — Identidad visual
   Base: Bootstrap 5.3. Este archivo define la marca y los componentes
   propios (wc-*). Sin dependencias externas ni fuentes remotas.
   ===================================================================== */

:root {
    --wc-ink: #152342;          /* barra lateral */
    --wc-ink-2: #1D2F57;
    --wc-primary: #152342;
    --wc-primary-600: #0E1830;
    --wc-primary-50: #E8ECF4;
    --wc-teal: #0097A6;
    --wc-gold: #C09E58;
    --wc-gold-50: #F7F1E4;
    --wc-mint: #C09E58;   /* dorado Pantone 7407 C */
    --wc-bg: #F5F6FB;
    --wc-surface: #FFFFFF;
    --wc-border: #E6E8F0;
    --wc-text: #1F2433;
    --wc-muted: #6B7285;
    --wc-radius: 14px;
    --wc-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 4px 16px rgba(17, 24, 39, .05);
    --wc-sidebar-w: 248px;

    --bs-primary: var(--wc-primary);
    --bs-primary-rgb: 21, 35, 66;
    --bs-link-color: var(--wc-primary);
    --bs-link-color-rgb: 21, 35, 66;
    --bs-link-hover-color: var(--wc-primary-600);
    --bs-body-font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --bs-body-color: var(--wc-text);
    --bs-body-bg: var(--wc-bg);
    --bs-border-color: var(--wc-border);
    --bs-border-radius: 10px;
    --bs-border-radius-lg: 12px;
}

.btn-primary {
    --bs-btn-bg: var(--wc-primary);
    --bs-btn-border-color: var(--wc-primary);
    --bs-btn-hover-bg: var(--wc-primary-600);
    --bs-btn-hover-border-color: var(--wc-primary-600);
    --bs-btn-active-bg: var(--wc-primary-600);
    --bs-btn-active-border-color: var(--wc-primary-600);
    --bs-btn-disabled-bg: var(--wc-primary);
    --bs-btn-disabled-border-color: var(--wc-primary);
    font-weight: 600;
}
.btn-outline-primary {
    --bs-btn-color: var(--wc-primary);
    --bs-btn-border-color: #B9C2D6;
    --bs-btn-hover-bg: var(--wc-primary);
    --bs-btn-hover-border-color: var(--wc-primary);
    --bs-btn-active-bg: var(--wc-primary-600);
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: #8E9BB8;
    box-shadow: 0 0 0 .2rem rgba(21, 35, 66, .15);
}
.form-check-input:checked { background-color: var(--wc-primary); border-color: var(--wc-primary); }
.form-label { font-weight: 600; font-size: .875rem; color: #3B4256; }

/* ---------- Marca ---------- */
.wc-brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; }
.wc-brand-mark img { width: 34px; height: 34px; display: block; }
.wc-brand-text { font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }
.wc-brand-text strong { font-weight: 800; color: var(--wc-mint); margin-left: .25rem; font-size: .7rem; letter-spacing: .12em; vertical-align: super; }
.wc-brand-lg .wc-brand-mark img { width: 44px; height: 44px; }
.wc-brand-lg .wc-brand-text { font-size: 1.35rem; }

/* ---------- Estructura ---------- */
.wc-shell { display: flex; min-height: 100vh; }
.wc-sidebar {
    width: var(--wc-sidebar-w); flex: 0 0 var(--wc-sidebar-w);
    background: linear-gradient(180deg, var(--wc-ink) 0%, #0E1830 100%);
    color: #C5CCDB; display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 1040;
}
.wc-sidebar .wc-brand { color: #fff; padding: 1.25rem 1.25rem 1rem; }
.wc-nav { padding: .25rem .75rem 1rem; flex: 1; }
.wc-nav-section { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: #8C98B3; padding: 1rem .75rem .4rem; font-weight: 600; }
.wc-nav-link {
    display: flex; align-items: center; gap: .75rem; padding: .55rem .75rem; margin-bottom: 2px;
    border-radius: 10px; color: #DCE1EB; text-decoration: none; font-weight: 500; font-size: .925rem;
    transition: background .15s, color .15s;
}
.wc-nav-link i { font-size: 1.1rem; opacity: .85; }
.wc-nav-link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.wc-nav-link.active { background: var(--wc-teal); color: #fff; box-shadow: 0 6px 16px rgba(0, 151, 166, .35); }
.wc-nav-link.active i { opacity: 1; }
.wc-sidebar-foot { padding: .9rem 1.25rem; font-size: .75rem; color: #8C98B3; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255,255,255,.06); }
.wc-env-badge { background: #F5A524; color: #152342; border-radius: 999px; padding: .1rem .5rem; font-weight: 700; text-transform: uppercase; font-size: .65rem; letter-spacing: .05em; }

.wc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wc-topbar {
    display: flex; align-items: center; gap: .75rem; padding: .85rem 1.75rem;
    background: rgba(245, 246, 251, .85); backdrop-filter: blur(8px);
    position: sticky; top: 0; z-index: 1020; border-bottom: 1px solid var(--wc-border);
}
.wc-page-title { font-size: 1.25rem; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.wc-content { padding: 1.75rem; max-width: 1400px; width: 100%; }
.wc-icon-btn { font-size: 1.4rem; padding: .2rem .5rem; }
.wc-user-btn { display: flex; align-items: center; gap: .6rem; border: 1px solid transparent; border-radius: 12px; padding: .3rem .6rem; }
.wc-user-btn:hover, .wc-user-btn.show { background: #fff; border-color: var(--wc-border); }
.wc-backdrop { display: none; }

@media (max-width: 991.98px) {
    .wc-sidebar { position: fixed; left: 0; transform: translateX(-100%); transition: transform .2s ease; }
    .wc-sidebar.open { transform: translateX(0); }
    .wc-backdrop.open { display: block; position: fixed; inset: 0; background: rgba(14, 24, 48, .45); z-index: 1030; }
    .wc-content, .wc-topbar { padding-left: 1rem; padding-right: 1rem; }
}

/* ---------- Avatares ---------- */
.wc-avatar {
    --wc-avatar: var(--wc-primary);
    width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--wc-avatar); color: #fff; font-weight: 700; font-size: .8rem; flex: 0 0 auto;
}
.wc-avatar-xl { width: 84px; height: 84px; font-size: 1.75rem; }

/* ---------- Tarjetas ---------- */
.wc-card { background: var(--wc-surface); border: 1px solid var(--wc-border); border-radius: var(--wc-radius); box-shadow: var(--wc-shadow); }
.wc-card-head { padding: 1rem 1.25rem; border-bottom: 1px solid var(--wc-border); display: flex; align-items: center; }
.wc-card-title { font-size: 1rem; font-weight: 700; margin: 0; }
.wc-card-body { padding: 1.25rem; }
fieldset.wc-card { min-width: 0; }
fieldset.wc-card > legend { float: none; width: 100%; }

.wc-kpi {
    background: #fff; border: 1px solid var(--wc-border); border-radius: var(--wc-radius); box-shadow: var(--wc-shadow);
    padding: 1.1rem 1.25rem; display: flex; gap: 1rem; align-items: flex-start; height: 100%;
    position: relative; overflow: hidden;
}
.wc-kpi::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--k); }
.wc-kpi-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; color: var(--k); background: color-mix(in srgb, var(--k) 12%, white); flex: 0 0 auto; }
.wc-kpi-value { font-size: 1.9rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.wc-kpi-label { font-weight: 600; margin-top: .3rem; }
.wc-kpi-help { font-size: .78rem; color: var(--wc-muted); }
.wc-kpi-primary { --k: var(--wc-primary); }
.wc-kpi-danger { --k: #E5484D; }
.wc-kpi-warning { --k: #F5A524; }
.wc-kpi-success { --k: #17B26A; }

/* ---------- Tablas y etiquetas ---------- */
.wc-table { --bs-table-bg: transparent; }
.wc-table thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--wc-muted); font-weight: 600; background: #FAFAFD; border-bottom-color: var(--wc-border); padding: .7rem 1rem; }
.wc-table td { padding: .8rem 1rem; border-color: #F0F1F6; }
.wc-table tbody tr:hover { background: #FAFAFF; }
.wc-pill {
    --c: #A7B0BE; display: inline-block; padding: .28rem .7rem; border-radius: 6px;
    background: var(--c); color: #fff; font-size: .78rem; font-weight: 600; white-space: nowrap;
}
.wc-pill-soft { background: color-mix(in srgb, var(--c) 14%, white); color: color-mix(in srgb, var(--c) 75%, black); }
.wc-dot { --c: #A7B0BE; display: inline-block; width: 9px; height: 9px; border-radius: 3px; background: var(--c); margin-right: .45rem; }
.wc-progress { height: 5px; background: #ECEEF5; border-radius: 99px; overflow: hidden; max-width: 220px; }
.wc-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--wc-primary), var(--wc-teal)); border-radius: 99px; }

.wc-empty { text-align: center; padding: 3rem 1rem; color: var(--wc-muted); }
.wc-empty i { font-size: 2.2rem; display: block; margin-bottom: .5rem; color: #B9BDD0; }
.wc-dl { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; font-size: .9rem; margin: 0; }
.wc-dl dt { color: var(--wc-muted); font-weight: 500; }
.wc-dl dd { margin: 0; text-align: right; }

.wc-alert { border-radius: 12px; border: 0; box-shadow: var(--wc-shadow); }
.wc-sticky-actions { position: sticky; bottom: 0; background: linear-gradient(transparent, var(--wc-bg) 30%); padding: 1rem 0; display: flex; gap: .5rem; }

/* ---------- Pantallas de acceso ---------- */
.wc-auth { background: #fff; }
.wc-auth-grid { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }
.wc-auth-art {
    background: radial-gradient(1200px 600px at -10% 110%, rgba(192, 158, 88, .30), transparent 60%),
                radial-gradient(900px 500px at 110% -10%, rgba(0, 151, 166, .40), transparent 60%),
                var(--wc-ink);
    color: #fff; display: flex; align-items: center; padding: 3rem;
}
.wc-auth-art-inner { max-width: 460px; margin: 0 auto; }
.wc-auth-art h2 { font-size: 2.1rem; font-weight: 800; letter-spacing: -.02em; margin: 2.5rem 0 .75rem; line-height: 1.15; }
.wc-auth-art p { color: #C5CCDB; font-size: 1.05rem; }
.wc-auth-board { margin-top: 2.5rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 1rem; }
.wc-auth-row { display: flex; align-items: center; gap: .75rem; padding: .6rem .5rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.wc-auth-row:last-child { border-bottom: 0; }
.wc-auth-row .dot { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.wc-auth-row .bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,.18); width: var(--w); }
.wc-auth-row .chip { margin-left: auto; font-size: .72rem; font-weight: 700; padding: .25rem .6rem; border-radius: 6px; background: var(--c); color: #fff; }
.wc-auth-panel { display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; }
.wc-auth-card { width: 100%; max-width: 400px; }
.wc-auth-title { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: .35rem; }
@media (max-width: 991.98px) { .wc-auth-grid { grid-template-columns: 1fr; } .wc-auth-art { display: none; } }

/* ---------- Páginas simples (errores, instalador) ---------- */
.wc-simple-wrap { max-width: 820px; margin: 0 auto; padding: 2.5rem 1rem 4rem; }
.wc-error-card { background: #fff; border: 1px solid var(--wc-border); border-radius: 18px; padding: 3rem 1.5rem; box-shadow: var(--wc-shadow); }
.wc-error-icon { font-size: 2.6rem; color: var(--wc-primary); }
.wc-error-code { font-size: 3.5rem; font-weight: 800; letter-spacing: -.03em; color: var(--wc-ink); line-height: 1; margin: .5rem 0 1rem; }

.wc-steps { display: flex; list-style: none; padding: 0; gap: .5rem; counter-reset: paso; flex-wrap: wrap; }
.wc-steps li { counter-increment: paso; flex: 1; min-width: 120px; padding: .6rem .75rem; border-radius: 10px; background: #fff; border: 1px solid var(--wc-border); font-size: .85rem; font-weight: 600; color: var(--wc-muted); }
.wc-steps li::before { content: counter(paso); display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #ECEEF5; margin-right: .5rem; font-size: .75rem; }
.wc-steps li.done { color: #17803F; }
.wc-steps li.done::before { content: "✓"; background: #DCFCE7; }
.wc-steps li.current { border-color: var(--wc-primary); color: var(--wc-primary); }
.wc-steps li.current::before { background: var(--wc-primary); color: #fff; }

.wc-hello h2 { font-weight: 800; letter-spacing: -.01em; }

/* Botón en espera (doble envío) */
.btn.wc-cargando { pointer-events: none; opacity: .8; }
.btn.wc-cargando .wc-btn-label::before {
    content: ""; display: inline-block; width: 1em; height: 1em; margin-right: .5em; vertical-align: -.15em;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: wc-giro .7s linear infinite;
}
@keyframes wc-giro { to { transform: rotate(360deg); } }

/* Notificaciones flotantes */
.wc-toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 1090; display: flex; flex-direction: column; gap: .5rem; }
.wc-toast { background: var(--wc-ink); color: #fff; padding: .75rem 1rem; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.2); font-size: .9rem; max-width: 360px; }
.wc-toast.error { background: #B4232A; }

/* ---------- Fase 3: listados, equipos y formularios ---------- */
.pagination { --bs-pagination-active-bg: var(--wc-primary); --bs-pagination-active-border-color: var(--wc-primary); --bs-pagination-color: var(--wc-primary); }
.wc-filtros { padding: 1rem 1.25rem; }
.wc-row-muted td { opacity: .6; }
.wc-badge-soft { background: var(--wc-primary-50); color: var(--wc-primary-600); font-weight: 600; }
.min-w-0 { min-width: 0; }
.wc-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.wc-team-card {
    --c: var(--wc-primary);
    display: flex; flex-direction: column; height: 100%; padding: 1.1rem 1.25rem; text-decoration: none; color: inherit;
    background: #fff; border: 1px solid var(--wc-border); border-top: 4px solid var(--c); border-radius: var(--wc-radius);
    box-shadow: var(--wc-shadow); transition: transform .15s, box-shadow .15s;
}
.wc-team-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(17, 24, 39, .09); color: inherit; }
.wc-team-card.inactivo { opacity: .65; }
.wc-team-icon { --c: var(--wc-primary); width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto;
    background: color-mix(in srgb, var(--c) 14%, white); color: var(--c); font-size: 1.1rem; }
.wc-team-icon-lg { width: 56px; height: 56px; font-size: 1.6rem; border-radius: 14px; }
.wc-team-head { border-top: 4px solid var(--c); }
.wc-avatar-stack { display: flex; }
.wc-avatar-stack .wc-avatar { width: 30px; height: 30px; font-size: .7rem; border: 2px solid #fff; margin-left: -8px; }
.wc-avatar-stack .wc-avatar:first-child { margin-left: 0; }
.wc-avatar-mas { --wc-avatar: #E6E8F0; color: var(--wc-muted) !important; }

.wc-color-picker { display: flex; flex-wrap: wrap; gap: .5rem; }
.wc-color input { position: absolute; opacity: 0; pointer-events: none; }
.wc-color span { display: block; width: 30px; height: 30px; border-radius: 8px; background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); transition: transform .1s; }
.wc-color input:checked + span { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c); transform: scale(1.05); }
.wc-color input:focus-visible + span { outline: 2px solid var(--wc-primary); outline-offset: 3px; }

.wc-member-list { max-height: 520px; overflow-y: auto; padding: .5rem; }
.wc-member { display: flex; align-items: center; gap: .75rem; padding: .55rem .75rem; border-radius: 10px; cursor: pointer; }
.wc-member:hover { background: #F7F7FC; }
.wc-member:has(input:checked) { background: var(--wc-primary-50); }

/* ---------- Fase 4: tableros y tareas ---------- */
.wc-pills .nav-link { color: var(--wc-muted); font-weight: 600; border-radius: 10px; }
.wc-pills .nav-link.active { background: var(--wc-primary); color: #fff; }
.wc-icon-picker { display: flex; flex-wrap: wrap; gap: .4rem; }
.wc-icon-picker input { position: absolute; opacity: 0; pointer-events: none; }
.wc-icon-picker span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--wc-border); cursor: pointer; font-size: 1.05rem; color: var(--wc-muted); background: #fff; }
.wc-icon-picker input:checked + span { border-color: var(--wc-primary); color: var(--wc-primary); background: var(--wc-primary-50); box-shadow: 0 0 0 2px rgba(21,35,66,.15); }
.wc-icon-picker input:focus-visible + span { outline: 2px solid var(--wc-primary); outline-offset: 2px; }
.wc-perm-select { width: 130px; flex: 0 0 auto; color: var(--wc-muted); }
.wc-perm-select.activo, .wc-perm-select:has(option:checked:not([value=""])) { color: var(--wc-primary-600); border-color: #B9C2D6; font-weight: 600; }

.wc-board-head { background: #fff; border: 1px solid var(--wc-border); border-radius: var(--wc-radius); padding: 1rem 1.25rem; box-shadow: var(--wc-shadow); border-left: 5px solid var(--c); }

.wc-grupo { --g: #579BFC; margin-bottom: 1.5rem; }
.wc-grupo-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.wc-grupo-toggle { border: 0; background: transparent; color: var(--g); font-size: 1rem; padding: .1rem .25rem; transition: transform .15s; }
.wc-grupo.colapsado .wc-grupo-toggle { transform: rotate(-90deg); }
.wc-grupo.colapsado .wc-grupo-cuerpo { display: none; }
.wc-grupo-nombre { font-size: 1.05rem; font-weight: 700; color: var(--g); margin: 0; }
.wc-grupo-nombre[data-accion] { cursor: text; border-radius: 6px; padding: .1rem .35rem; }
.wc-grupo-nombre[data-accion]:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--wc-border); }
.wc-grupo-input { min-width: 240px; }
.wc-grupo-conteo { font-size: .8rem; color: var(--wc-muted); }
.wc-grupo-cuerpo { background: #fff; border: 1px solid var(--wc-border); border-left: 5px solid var(--g); border-radius: 10px; box-shadow: var(--wc-shadow); }

.wc-board-table { --bs-table-bg: transparent; font-size: .9rem; table-layout: fixed; min-width: 1200px; }
.wc-board-table .wc-col-titulo { min-width: 260px; width: 30%; }
.wc-board-table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--wc-muted); font-weight: 600; text-align: center; border-bottom-color: var(--wc-border); padding: .55rem .5rem; }
.wc-board-table thead th.wc-col-titulo { text-align: left; padding-left: 1rem; }
.wc-board-table td { vertical-align: middle; border-color: #F0F1F6; padding: .35rem .5rem; text-align: center; }
.wc-board-table td.wc-col-titulo { text-align: left; padding-left: 1rem; }
.wc-col-titulo { width: auto; }
.wc-col-personas { width: 110px; }
.wc-col-equipo { width: 170px; }
.wc-col-resp { width: 200px; }
.wc-lista-tareas { background: #fff; border: 1px solid var(--wc-border); border-left: 5px solid var(--wc-primary); border-radius: 10px; box-shadow: var(--wc-shadow); }
.wc-nueva-tarea { padding: .75rem; border-style: dashed; }
.wc-celda-texto { display: flex; align-items: center; gap: .45rem; width: 100%; min-width: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; padding: .3rem .45rem; font-size: .84rem; color: var(--wc-text); text-align: left; white-space: nowrap; overflow: hidden; }
button.wc-celda-texto:hover { border-color: var(--wc-border); background: #fff; }
button.wc-celda-texto:focus-visible { outline: 2px solid var(--wc-ink); outline-offset: 1px; }
.wc-celda-texto .wc-dot { flex: 0 0 auto; }
.wc-menu-personas { max-height: 320px; overflow-y: auto; min-width: 220px; }
.wc-col-estado, .wc-col-prioridad { width: 140px; }
.wc-col-fecha { width: 150px; }
.wc-col-avance { width: 150px; }
.wc-fila:hover { background: #FAFAFF; }
.wc-fila.terminada .wc-tarea-link { color: var(--wc-muted); text-decoration: line-through; text-decoration-color: #C4C9D6; }
.wc-tarea-link { color: var(--wc-text); font-weight: 500; text-decoration: none; }
.wc-tarea-link:hover { color: var(--wc-primary); text-decoration: underline; }
.wc-tarea-meta { display: inline-flex; gap: .6rem; font-size: .78rem; color: var(--wc-muted); white-space: nowrap; }
.wc-celda-pill {
    --c: #A7B0BE; display: block; width: 100%; border: 0; border-radius: 6px; background: var(--c); color: #fff;
    font-size: .8rem; font-weight: 600; padding: .4rem .5rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
button.wc-celda-pill:hover { filter: brightness(1.07); }
button.wc-celda-pill:focus-visible { outline: 2px solid var(--wc-ink); outline-offset: 2px; }
.wc-menu-pills { min-width: 180px; padding: .4rem; }
.wc-menu-pills .dropdown-item { padding: .2rem; border-radius: 6px; }
.wc-menu-pills .wc-pill { display: block; text-align: center; padding: .35rem; }
.wc-col-fecha .wc-fecha { border-color: transparent; background: transparent; text-align: center; }
.wc-col-fecha .wc-fecha:hover, .wc-col-fecha .wc-fecha:focus { border-color: var(--wc-border); background: #fff; }
.wc-col-fecha.vencida .wc-fecha, .wc-col-fecha.vencida span { color: #D92D20; font-weight: 600; }
.wc-avatar-vacio { --wc-avatar: #ECEEF5; color: #A7B0BE !important; }
.wc-fila-nueva td { text-align: left; padding: .5rem 1rem; }
.wc-fila-nueva input { border-style: dashed; max-width: 420px; }
.wc-fila-resumen td { border-bottom: 0; padding: .4rem .5rem .6rem; }
.wc-bateria { display: flex; height: 10px; border-radius: 4px; overflow: hidden; gap: 1px; }
.wc-bateria span { background: var(--c); }
.wc-nuevo-grupo { display: flex; gap: .5rem; max-width: 520px; margin-top: .5rem; }
.wc-color-picker-sm { gap: .3rem; }
.wc-color-btn { width: 22px; height: 22px; border-radius: 6px; border: 0; background: var(--c); }
.wc-color-btn:hover { transform: scale(1.12); }
@keyframes wc-destello { from { background: #E8ECF4; } to { background: transparent; } }
.wc-flash { animation: wc-destello 1.2s ease-out; }

.wc-kanban { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 1rem; align-items: flex-start; }
.wc-kanban-col { --c: #A7B0BE; flex: 0 0 280px; background: #EEF0F6; border-radius: 12px; display: flex; flex-direction: column; max-height: calc(100vh - 260px); }
.wc-kanban-col.sobre { background: var(--wc-primary-50); box-shadow: inset 0 0 0 2px #8E9BB8; }
.wc-kanban-head { display: flex; align-items: center; justify-content: space-between; padding: .7rem .9rem; font-weight: 700; font-size: .9rem; border-top: 4px solid var(--c); border-radius: 12px 12px 0 0; }
.wc-kanban-n { background: #fff; border-radius: 99px; padding: 0 .55rem; font-size: .78rem; color: var(--wc-muted); }
.wc-kanban-lista { padding: 0 .6rem .6rem; overflow-y: auto; min-height: 80px; display: flex; flex-direction: column; gap: .5rem; }
.wc-kanban-card { background: #fff; border-radius: 10px; padding: .75rem .85rem; box-shadow: 0 1px 2px rgba(17,24,39,.08); cursor: grab; border: 1px solid transparent; }
.wc-kanban-card.fija { cursor: default; }
.wc-kanban-card:hover { border-color: #B9C2D6; }
.wc-kanban-card.arrastrando { opacity: .5; }
.wc-kanban-card .wc-avatar { width: 24px; height: 24px; font-size: .6rem; }
.wc-kanban-vacio { text-align: center; color: #A7B0BE; font-size: .85rem; padding: 1rem 0; }

.wc-titulo-input { font-weight: 700; font-size: 1.35rem; border-color: transparent; padding-left: .5rem; }
.wc-titulo-input:hover:not(:disabled) { border-color: var(--wc-border); }
.wc-titulo-input:disabled { background: transparent; }
.wc-sub-hecha a { text-decoration: line-through; color: var(--wc-muted) !important; }
.wc-comentario { display: flex; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid #F0F1F6; }
.wc-comentario:last-of-type { border-bottom: 0; }
.wc-comentario-texto { font-size: .92rem; white-space: normal; overflow-wrap: anywhere; }
.wc-comentario:target { background: #FFFBEB; border-radius: 10px; padding-left: .5rem; }
.wc-adjunto-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; background: #F3F4F8; border-radius: 6px; padding: .2rem .5rem; margin-right: .3rem; text-decoration: none; }
.wc-historial { list-style: none; padding: .5rem 1rem; margin: 0; max-height: 420px; overflow-y: auto; font-size: .82rem; }
.wc-historial li { display: flex; gap: .6rem; padding: .45rem 0; border-bottom: 1px dashed #EEF0F5; }
.wc-historial li:last-child { border-bottom: 0; }
.wc-historial li > i { color: var(--wc-primary); margin-top: .1rem; }
/* Los campos usan fondo blanco (Bootstrap toma el color de fondo del cuerpo). */
.form-control, .form-select, .input-group-text { background-color: #fff; }
.form-control:disabled, .form-select:disabled { background-color: #F3F4F8; }
.wc-titulo-input, .wc-titulo-input:disabled { background-color: transparent; }

/* ---------- Fase 5: recurrentes ---------- */
.wc-frecuencias { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.wc-frecuencia input { position: absolute; opacity: 0; pointer-events: none; }
.wc-frecuencia span { display: flex; flex-direction: column; gap: .15rem; height: 100%; padding: .75rem .85rem; border: 1px solid var(--wc-border); border-radius: 12px; cursor: pointer; background: #fff; transition: border-color .15s, box-shadow .15s; }
.wc-frecuencia span i { font-size: 1.25rem; color: var(--wc-muted); }
.wc-frecuencia span small { color: var(--wc-muted); font-size: .75rem; line-height: 1.25; }
.wc-frecuencia.destacada span { border-style: dashed; border-color: #B9C2D6; }
.wc-frecuencia input:checked + span { border: 2px solid var(--wc-primary); background: var(--wc-primary-50); box-shadow: 0 4px 14px rgba(21,35,66,.12); }
.wc-frecuencia input:checked + span i { color: var(--wc-primary); }
.wc-frecuencia input:focus-visible + span { outline: 2px solid var(--wc-primary); outline-offset: 2px; }
.wc-dias-semana { display: flex; flex-wrap: wrap; gap: .35rem; }
.wc-dias-semana input { position: absolute; opacity: 0; pointer-events: none; }
.wc-dias-semana span { display: grid; place-items: center; width: 46px; height: 38px; border-radius: 9px; border: 1px solid var(--wc-border); background: #fff; cursor: pointer; font-weight: 600; font-size: .85rem; text-transform: capitalize; }
.wc-dias-semana input:checked + span { background: var(--wc-primary); border-color: var(--wc-primary); color: #fff; }
.wc-dias-semana input:focus-visible + span { outline: 2px solid var(--wc-primary); outline-offset: 2px; }
.wc-preview { position: sticky; top: 84px; }
.wc-proximas { padding-left: 1.2rem; margin-bottom: .5rem; }
.wc-proximas li { padding: .3rem 0; border-bottom: 1px dashed #EEF0F5; font-weight: 500; }
.wc-proximas li:last-child { border-bottom: 0; }
.wc-fecha-chip { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 10px; background: var(--wc-primary-50); color: var(--wc-primary-600); line-height: 1; }
.wc-fecha-chip strong { font-size: 1.1rem; }
.wc-fecha-chip small { font-size: .7rem; text-transform: uppercase; }
[hidden] { display: none !important; }

/* ---------- Paleta de marca (Pantone 282 C · 7407 C · 320 C) ---------- */
.wc-sidebar .wc-brand { border-bottom: 1px solid rgba(192, 158, 88, .35); margin: 0 .75rem .5rem; padding-left: .5rem; padding-right: .5rem; }
.wc-topbar { box-shadow: inset 0 -2px 0 var(--wc-gold); border-bottom: 0; }
.wc-kpi-primary { --k: var(--wc-primary); }
.btn-outline-primary { --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; }
.wc-pills .nav-link.active { background: var(--wc-primary); }
.wc-steps li.current { border-color: var(--wc-teal); color: var(--wc-teal); }
.wc-steps li.current::before { background: var(--wc-teal); }
.form-check-input:checked { background-color: var(--wc-teal); border-color: var(--wc-teal); }
.wc-badge-soft { background: var(--wc-gold-50); color: #7A5F27; }
.wc-sidebar .wc-brand-mark img { box-shadow: 0 0 0 1.5px rgba(192, 158, 88, .7); border-radius: 9px; }

/* Reportes */
.wc-barra-reporte { display: flex; height: 12px; border-radius: 4px; overflow: hidden; background: #EEF0F5; gap: 1px; min-width: 80px; }
.wc-barra-reporte span { background: var(--c); }
.wc-leyenda > span { display: inline-flex; align-items: center; color: var(--wc-muted); }