/* ============================================================================
   BYRO — Components v1.0
   ============================================================================
   Componentes base reutilizables. TODOS leen design-tokens.css.
   Cargar SIEMPRE después de design-tokens.css.
   Prefijo .byro-* para evitar colisiones.
   ============================================================================ */

/* ---- Botones ---- */
.byro-btn {
    -webkit-appearance: none;
    appearance: none;
    font-family: var(--byro-font-sans);
    font-size: var(--byro-fs-base);
    font-weight: var(--byro-fw-medium);
    padding: 10px 18px;
    border-radius: var(--byro-r-md);
    border: 1px solid transparent;
    background: var(--byro-surface-3);
    color: var(--byro-text);
    cursor: pointer;
    transition: var(--byro-t-base);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--byro-sp-2);
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
}
.byro-btn:disabled { opacity: .4; cursor: not-allowed; }

.byro-btn--primary {
    background: linear-gradient(135deg, var(--byro-accent), var(--byro-accent-2));
    color: #fff;
    box-shadow: var(--byro-glow);
}
.byro-btn--primary:hover:not(:disabled) { filter: brightness(1.08); }
.byro-btn--primary:active:not(:disabled) { filter: brightness(.95); }

.byro-btn--secondary {
    background: var(--byro-surface-3);
    color: var(--byro-text);
    border-color: var(--byro-border-strong);
}
.byro-btn--secondary:hover:not(:disabled) { background: var(--byro-border); }

.byro-btn--ghost { background: transparent; color: var(--byro-text-2); }
.byro-btn--ghost:hover:not(:disabled) { background: var(--byro-surface-2); color: var(--byro-text); }

.byro-btn--danger { background: var(--byro-danger); color: #fff; }
.byro-btn--danger:hover:not(:disabled) { filter: brightness(1.08); }

.byro-btn--block { width: 100%; }
.byro-btn--icon { padding: 8px 11px; font-size: 16px; line-height: 1; }

/* ---- Campos de formulario ---- */
.byro-field { display: flex; flex-direction: column; gap: var(--byro-sp-2); }
.byro-label { font-size: var(--byro-fs-sm); color: var(--byro-text-2); font-weight: var(--byro-fw-medium); }
.byro-input {
    background: var(--byro-bg-elev);
    border: 1px solid var(--byro-border-strong);
    border-radius: var(--byro-r-md);
    padding: 11px 13px;
    color: var(--byro-text);
    font-size: var(--byro-fs-base);
    font-family: var(--byro-font-sans);
    transition: var(--byro-t-base);
    width: 100%;
}
.byro-input::placeholder { color: var(--byro-text-disabled); }
.byro-input:focus {
    outline: none;
    border-color: var(--byro-accent);
    box-shadow: 0 0 0 3px rgba(var(--byro-accent-rgb), .18);
}
/* ---- Tags / estados ---- */
.byro-tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px; border-radius: var(--byro-r-full);
    font-size: var(--byro-fs-xs); font-weight: var(--byro-fw-medium);
}
.byro-tag .byro-tag__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.byro-tag--neutral{ background: var(--byro-surface-3);  color: var(--byro-text-2); }
.byro-tag--accent { background: var(--byro-info-bg);   color: var(--byro-accent-2); }
.byro-tag--ok     { background: var(--byro-ok-bg);     color: var(--byro-ok); }
.byro-tag--warn   { background: var(--byro-warn-bg);   color: var(--byro-warn); }
.byro-tag--danger { background: var(--byro-danger-bg); color: var(--byro-danger); }
.byro-tag--sky { background: rgba(14, 165, 233, .16); color: #0ea5e9; }
.byro-tag--sm     { padding: 2px 8px; font-size: 10px; }
/* sólido: texto blanco sobre color pleno */
.byro-tag--solid               { color: #fff; }
.byro-tag--solid.byro-tag--neutral { background: var(--byro-text-3); }
.byro-tag--solid.byro-tag--accent  { background: var(--byro-accent); }
.byro-tag--solid.byro-tag--ok      { background: var(--byro-ok); }
.byro-tag--solid.byro-tag--warn    { background: var(--byro-warn); }
.byro-tag--solid.byro-tag--danger  { background: var(--byro-danger); }
.byro-tag--solid.byro-tag--sky     { background: #0ea5e9; }

/* ---- Menu (acciones / kebab) — componente canónico ---- */
.byro-menu { position: relative; display: inline-block; }
.byro-menu__panel {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
    min-width: 210px; padding: 6px;
    background: var(--byro-bg-elev, #16161d);
    border: 1px solid var(--byro-border);
    border-radius: var(--byro-r-md);
    box-shadow: var(--byro-sh-lg, 0 12px 32px rgba(0,0,0,.45));
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: var(--byro-t-fast, .13s);
}
.byro-menu__panel--right { left: auto; right: 0; }
.byro-menu__panel--compact { min-width: 132px; }
.byro-menu__sep { height: 1px; background: var(--byro-border); margin: 4px 0; }
/* ── Móvil: TODO lo que se abre (menú de acción, selector, país) sube desde abajo
   como una sola hoja idéntica. Una definición compartida = cero disparejo. ── */
@keyframes byroSheetUp { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 760px) {
    .byro-menu.is-open .byro-menu__panel--sheet,
    .byro-picker.is-open .byro-picker__panel,
    .byro-lada-pop:not([hidden]) {
        position: fixed; left: var(--byro-sp-4); right: var(--byro-sp-4); bottom: var(--byro-sp-4);
        top: auto; min-width: 0; width: auto; max-width: none; z-index: 60;
        padding: var(--byro-sp-3);
        border-radius: var(--byro-r-lg);
        background: var(--byro-surface);
        box-shadow: 0 -8px 40px rgba(0,0,0,.45);
        max-height: 72vh; overflow-y: auto;
        animation: byroSheetUp var(--byro-t-fast) ease;
    }
}
.byro-menu.is-open .byro-menu__panel { opacity: 1; visibility: visible; transform: none; }
.byro-menu__item {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    background: none; border: none; font: inherit;
    font-size: var(--byro-fs-sm); color: var(--byro-text);
    padding: 9px 11px; border-radius: var(--byro-r-sm);
    cursor: pointer; text-decoration: none;
}
.byro-menu__item svg { width: 16px; height: 16px; flex-shrink: 0; }
.byro-menu__item:hover { background: var(--byro-surface-2); }
.byro-menu__item--danger { color: var(--byro-danger); }
.byro-menu__item--soon {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    color: var(--byro-text-3); cursor: default;
}
.byro-menu__item--soon:hover { background: none; }
.byro-menu__head { padding: 9px 11px 7px; border-bottom: 1px solid var(--byro-border); margin-bottom: 4px; }
.byro-menu__head-name { font-size: var(--byro-fs-sm); font-weight: var(--byro-fw-medium); color: var(--byro-text); }
.byro-menu__head-sub { font-size: var(--byro-fs-xs); color: var(--byro-text-3); margin-top: 2px; }
.byro-menu__caret { opacity: .7; font-size: 11px; }
.byro-menu__form { margin: 0; }

/* ---- Picker (selector de opción) — componente canónico ---- */
.byro-picker { position: relative; }
.byro-picker--block { display: block; }
.byro-picker__btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: none; padding: 0; margin: 0;
    color: var(--byro-text); font: inherit; font-size: var(--byro-fs-sm);
    cursor: pointer; text-align: left;
}
.byro-picker__btn--field {
    width: 100%; gap: 8px; padding: 5px 9px;
    background: var(--byro-surface-2); border: 1px solid var(--byro-border);
    border-radius: var(--byro-r-sm);
}
.byro-picker__btn--field:hover { border-color: var(--byro-border-strong); }
.byro-picker__caret { color: var(--byro-text-3); font-size: 11px; flex: none; }
.byro-picker__btn--field .byro-picker__caret { margin-left: auto; }
.byro-picker__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.byro-picker__none { color: var(--byro-text-3); }
.byro-picker__panel {
    position: absolute; top: calc(100% + 5px); left: 0; z-index: 40;
    min-width: 190px; padding: 5px;
    background: var(--byro-bg-elev); border: 1px solid var(--byro-border);
    border-radius: var(--byro-r-md); box-shadow: var(--byro-sh-lg);
    max-height: 288px; overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: var(--byro-t-fast);
}
.byro-picker__panel--right { left: auto; right: 0; }
.byro-picker--block .byro-picker__panel { left: 0; right: 0; }
.byro-picker.is-open .byro-picker__panel { opacity: 1; visibility: visible; transform: none; }
.byro-picker__search {
    width: 100%; box-sizing: border-box; margin-bottom: 5px;
    background: var(--byro-surface); border: 1px solid var(--byro-border);
    border-radius: var(--byro-r-sm); padding: 8px 10px;
    color: var(--byro-text); font: inherit; font-size: var(--byro-fs-sm);
}
.byro-picker__opt {
    display: flex; align-items: center; gap: 8px; width: 100%;
    background: none; border: none; color: var(--byro-text);
    font: inherit; font-size: var(--byro-fs-sm);
    padding: 6px 8px; border-radius: var(--byro-r-sm);
    cursor: pointer; text-align: left;
}
.byro-picker__opt:hover { background: var(--byro-surface-2); }
.byro-picker__opt--current { background: var(--byro-surface-3); }
.byro-picker__group {
    padding: 7px 8px 3px; font-size: var(--byro-fs-xs);
    font-weight: var(--byro-fw-semibold); color: var(--byro-text-3);
    text-transform: uppercase; letter-spacing: .04em;
}
.byro-picker__group:first-child { padding-top: 3px; }

/* ---- Lada (selector de país/lada con buscador) — componente canónico ---- */
.byro-lada{position:relative;flex:0 0 auto}
.byro-lada-btn{display:flex;align-items:center;gap:6px;height:100%;background:var(--byro-surface);border:1px solid var(--byro-border);border-radius:9px;padding:10px 12px;color:var(--byro-text);font-size:var(--byro-fs-sm);cursor:pointer;white-space:nowrap;font-family:inherit}
.byro-lada-caret{color:var(--byro-text-3);font-size:11px}
.byro-lada-pop{position:absolute;z-index:30;top:calc(100% + 6px);left:0;width:300px;max-width:78vw;background:var(--byro-surface-2);border:1px solid var(--byro-border);border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.5);padding:8px;overflow:hidden}
.byro-lada-pop[hidden]{display:none}
.byro-lada-pop input{width:100%;box-sizing:border-box;background:var(--byro-surface);border:1px solid var(--byro-border);border-radius:8px;padding:9px 11px;color:var(--byro-text);font-size:var(--byro-fs-sm);margin-bottom:6px}
.byro-lada-pop ul{list-style:none;margin:0;padding:0;max-height:240px;overflow-y:auto}
.byro-lada-pop li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:var(--byro-fs-sm)}
.byro-lada-pop li:hover{background:var(--byro-info-bg)}
.byro-lada-pop li .fl{font-size:18px;line-height:1}
.byro-lada-pop li .nm{flex:1;color:var(--byro-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.byro-lada-pop li .cd{color:var(--byro-text-3)}
.byro-lada-empty{color:var(--byro-text-3);padding:10px;text-align:center;justify-content:center}

/* ---- Card ---- */
.byro-card {
    background: var(--byro-surface);
    border: 1px solid var(--byro-border);
    border-radius: var(--byro-r-lg);
    padding: var(--byro-sp-5);
}

/* ---- Alertas ---- */
.byro-alert {
    display: flex; gap: var(--byro-sp-3);
    padding: var(--byro-sp-4);
    border-radius: var(--byro-r-md);
    font-size: var(--byro-fs-base);
    border: 1px solid;
}
.byro-alert--ok     { background: var(--byro-ok-bg);     border-color: rgba(52,211,153,.3);  color: var(--byro-ok); }
.byro-alert--warn   { background: var(--byro-warn-bg);   border-color: rgba(251,191,36,.3);  color: var(--byro-warn); }
.byro-alert--danger { background: var(--byro-danger-bg); border-color: rgba(248,113,113,.3); color: var(--byro-danger); }

/* ---- Skeleton (loading) ---- */
.byro-skeleton {
    background: linear-gradient(90deg, var(--byro-surface-2) 25%, var(--byro-surface-3) 50%, var(--byro-surface-2) 75%);
    background-size: 200% 100%;
    animation: byro-shimmer 1.4s infinite;
    border-radius: var(--byro-r-sm);
}
@keyframes byro-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---- Encabezado de página: título + subtítulo ---- */
.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--byro-sp-4); margin-bottom:var(--byro-sp-6); flex-wrap:wrap; }
.page-title { font-size:var(--byro-fs-2xl); font-weight:var(--byro-fw-semibold); letter-spacing:-.02em; }
.page-sub { color:var(--byro-text-3); font-size:var(--byro-fs-sm); margin-top:4px; }

/* ---- Flash de confirmación (mensaje de éxito tras guardar/crear) ---- */
.flash { background:var(--byro-ok-bg); border:1px solid rgba(52,211,153,.3); color:var(--byro-ok); padding:10px 14px; border-radius:var(--byro-r-md); font-size:var(--byro-fs-sm); margin-bottom:var(--byro-sp-4); }

/* ---- Tabla densa (patrón scroll-horizontal): listados con muchas columnas.
       Envolver en .byro-tablecard. El patrón tabla->tarjetas en móvil (ADR-023,
       listado de Usuarios) es una variante aparte, no usa estas clases. ---- */
.byro-tablecard { background:var(--byro-surface); border:1px solid var(--byro-border); border-radius:var(--byro-r-lg); overflow-x:auto; }
.byro-table { width:100%; border-collapse:collapse; }
.byro-table thead th { text-align:left; font-size:var(--byro-fs-xs); letter-spacing:.05em; text-transform:uppercase; color:var(--byro-text-3); font-weight:var(--byro-fw-semibold); padding:12px 16px; border-bottom:1px solid var(--byro-border); background:var(--byro-surface-2); white-space:nowrap; }
.byro-table tbody td { padding:13px 16px; border-bottom:1px solid var(--byro-border); font-size:var(--byro-fs-sm); vertical-align:middle; }
.byro-table tbody tr:last-child td { border-bottom:none; }
.byro-table tbody tr[data-href] { cursor:pointer; }
.byro-table tbody tr:hover { background:var(--byro-surface-2); }

/* ---- Anti-zoom iOS/Android: en móvil los campos a >=16px para que el navegador
       no haga zoom al enfocar (afecta formularios de propiedades, usuarios, etc.) ---- */
@media (max-width: 768px) {
    .byro-input,
    input,
    textarea {
        font-size: 16px;
    }
}

/* 0.13.11 — panel del picker como el de filtros + fix de capas */
.byro-picker__panel{
  background:var(--byro-surface);
  border:1px solid var(--byro-border-strong);
  box-shadow:0 12px 32px rgba(0,0,0,.4);
}
.byro-picker.is-open{ position:relative; z-index:1000; }
*:has(> .byro-picker.is-open){ position:relative; z-index:1000; }

/* ============================================================
   Barra de acciones masivas — componente compartido (.selbar)
   Cascara flotante usada por el listado de propiedades y el de
   clientes. Cada modulo conecta sus propias acciones por JS;
   esto es solo el contenedor + menus (selmenu/selpanel/selopt).
   Barra oscura intencional (overlay) en cualquier tema.
   ============================================================ */
.selbar { position:fixed; left:50%; transform:translateX(-50%); bottom:18px; z-index:60; display:flex; align-items:center; justify-content:space-between; gap:18px; background:#15151c; border:1px solid #2a2a36; border-radius:14px; box-shadow:0 12px 32px rgba(0,0,0,.5); padding:10px 14px; max-width:940px; width:calc(100% - 32px); }
.selbar[hidden] { display:none; }
.selbar-l { display:flex; align-items:center; gap:12px; color:#ececf0; font-size:var(--byro-fs-sm); }
.selbar-x { width:26px; height:26px; border-radius:50%; background:var(--byro-accent, #6366f1); border:none; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; flex:none; }
.selbar-x svg { width:13px; height:13px; }
.selbar-count b { font-weight:var(--byro-fw-semibold); }
.selbar-link { background:none; border:none; color:#a5b4fc; cursor:pointer; font:inherit; font-size:var(--byro-fs-sm); }
.selbar-actions { display:flex; gap:4px; flex-wrap:wrap; }
.selact { display:flex; flex-direction:column; align-items:center; gap:3px; min-width:62px; padding:6px 8px; background:none; border:none; border-radius:9px; color:#c7c7d2; font:inherit; font-size:11px; cursor:pointer; }
.selact:hover { background:#20202a; color:#fff; }
.selact svg { width:19px; height:19px; }
.selact-danger:hover { color:#f87171; }
.selmenu { position:relative; }
.selpanel { position:absolute; bottom:calc(100% + 8px); right:0; min-width:230px; background:#16161d; border:1px solid #2a2a36; border-radius:10px; box-shadow:0 12px 32px rgba(0,0,0,.5); padding:8px; display:none; max-height:340px; overflow:auto; }
.selmenu.open .selpanel { display:block; }
.selpanel[data-panel="etiquetas"] { min-width:300px; }
.selpanel-h { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:#65657a; padding:5px 8px; }
.selopt, .seletq { display:flex; align-items:center; gap:8px; width:100%; text-align:left; background:none; border:none; color:#ececf0; font:inherit; font-size:var(--byro-fs-sm); padding:8px 10px; border-radius:7px; cursor:pointer; }
.selopt:hover, .seletq:hover { background:#20202a; }
.selopt-danger { color:#f87171; }

/* Menú por pasos: elegir portal, luego sus opciones. Cada portal tiene sus
   propios tipos de anuncio, así que no caben todos en una sola pantalla. */
.selpaso { display:block; }
.selpaso[hidden] { display:none; }

.selback { display:flex; align-items:center; width:100%; text-align:left; background:none; border:none; color:#8a8a9e; font:inherit; font-size:12px; padding:6px 8px; margin-bottom:2px; border-radius:7px; cursor:pointer; }
.selback:hover { background:#20202a; color:#ececf0; }

/* La opción que ejecuta la acción, al final del panel. */
.selopt--go { justify-content:center; background:var(--byro-accent, #6366f1); color:#fff; font-weight:500; margin-top:6px; }
.selopt--go:hover { background:#4f46e5; }

/* Portal aún no disponible: se ve pero no se puede elegir. */
.selopt--off { color:#5a5a6e; cursor:default; }
.selopt--off:hover { background:none; }

/* La opción elegida dentro de un paso. */
.selopt.is-on { background:#20202a; color:#fff; }

/* Avisos dentro del panel, como los espacios que quedan del plan. */
.selpanel-nota { font-size:12px; color:#8a8a9e; padding:6px 10px 8px; line-height:1.45; }
.seletq-dot { width:9px; height:9px; border-radius:50%; flex:none; }
.seletq-tabs { display:flex; gap:4px; padding:4px 6px 8px; }
.seletq-tab { flex:1; text-align:center; font-size:12px; padding:6px; border-radius:7px; background:#20202a; color:#c7c7d2; border:none; cursor:pointer; }
.seletq-tab.active { background:var(--byro-accent, #6366f1); color:#fff; }
.seletq-new { display:flex; flex-direction:column; gap:8px; padding:8px 6px 4px; border-top:1px solid #2a2a36; margin-top:6px; }
.seletq-new input { width:100%; min-width:0; }
.seletq-new .byro-btn { width:100%; }
.seltoast { position:fixed; left:50%; transform:translateX(-50%); bottom:18px; z-index:61; display:flex; align-items:center; gap:14px; background:#15151c; border:1px solid #2a2a36; border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.5); padding:12px 16px; color:#ececf0; font-size:var(--byro-fs-sm); }
.seltoast[hidden] { display:none; }
.seltoast-undo { background:none; border:none; color:#a5b4fc; font:inherit; font-weight:var(--byro-fw-medium); cursor:pointer; }
@media (max-width: 760px) { .selbar { flex-direction:column; align-items:stretch; gap:8px; bottom:8px; } .selbar-actions { justify-content:space-between; } .selpanel { right:auto; left:0; } }

/* ===== byro-nota: modal de nota obligatoria (compartido) ===== */
.byro-nota-ov { position:fixed; inset:0; z-index:120; background:rgba(5,5,8,.55); display:flex; align-items:center; justify-content:center; padding:18px; }
.byro-nota-ov[hidden] { display:none; }
.byro-nota { width:100%; max-width:460px; background:var(--byro-surface); border:1px solid var(--byro-border); border-radius:16px; padding:18px; color:var(--byro-text); box-shadow:0 18px 50px rgba(0,0,0,.35); }
.byro-nota__h { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.byro-nota__t { font-size:var(--byro-fs-base); font-weight:var(--byro-fw-medium); color:var(--byro-text); }
.byro-nota__x { background:transparent; border:0; color:var(--byro-text-3); font-size:20px; line-height:1; cursor:pointer; padding:2px 6px; border-radius:8px; }
.byro-nota__x:hover { color:var(--byro-text); background:var(--byro-surface-2); }
.byro-nota__ctx { font-size:13px; color:var(--byro-text-2); background:var(--byro-surface-2); border:1px solid var(--byro-border); border-radius:10px; padding:7px 10px; margin:6px 0 10px; }
.byro-nota__msg { font-size:var(--byro-fs-sm); color:var(--byro-text-2); line-height:1.5; margin:6px 0 14px; }
.byro-nota__btn--danger { background:var(--byro-danger); border-color:var(--byro-danger); color:#fff; }
.byro-nota__ta { width:100%; box-sizing:border-box; resize:vertical; min-height:92px; background:var(--byro-surface-2); border:1px solid var(--byro-border); border-radius:10px; padding:10px 12px; color:var(--byro-text); font:inherit; font-size:var(--byro-fs-base); }
.byro-nota__ta:focus { outline:none; border-color:var(--byro-accent); box-shadow:0 0 0 3px rgba(var(--byro-accent-rgb,99,102,241),.18); }
.byro-nota__foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; }
.byro-nota__hint { font-size:12px; color:var(--byro-text-3); }
.byro-nota__hint.--ok { color:var(--byro-accent); }
.byro-nota__acts { display:flex; gap:8px; }
.byro-nota__btn { border-radius:10px; padding:9px 16px; font-size:var(--byro-fs-base); font-weight:var(--byro-fw-medium); cursor:pointer; border:1px solid var(--byro-border-strong); background:transparent; color:var(--byro-text); }
.byro-nota__btn:hover { background:var(--byro-surface-2); }
.byro-nota__btn--ok { background:var(--byro-accent); border-color:var(--byro-accent); color:#fff; }
.byro-nota__btn--ok:disabled { opacity:.5; cursor:not-allowed; }
.byro-nota__btn--ok:not(:disabled):hover { background:var(--byro-accent-hover,var(--byro-accent)); }

/* ── Paleta unificada de estado/etapa ───────────────────────────────────────
   Un solo color por estatus de cliente y por etapa de lead. Se aplica con
   especificidad combinada (.cl-est.is-* / .pf-est-tag.is-*) para ganar sobre
   la base sin importar el orden de carga. Sirve para los pills de la lista,
   el pipeline, la ficha y los chips de "de → a" en las notas.
   futuro y descartado comparten color entre leads y clientes (mismo concepto). */
.cl-est.is-activo,.pf-est-tag.is-activo,
.cl-est.is-contactado,.pf-est-tag.is-contactado{background:var(--byro-ok-bg);color:var(--byro-ok);border-color:transparent}
.cl-est.is-cerrado,.pf-est-tag.is-cerrado,
.cl-est.is-nuevo,.pf-est-tag.is-nuevo{background:rgba(var(--byro-accent-rgb),.12);color:var(--byro-accent);border-color:transparent}
.cl-est.is-futuro,.pf-est-tag.is-futuro{background:var(--byro-info-bg);color:var(--byro-accent-2);border-color:transparent}
.cl-est.is-inactivo,.pf-est-tag.is-inactivo{background:var(--byro-surface-3);color:var(--byro-text-2);border-color:transparent}
.cl-est.is-desistio,.pf-est-tag.is-desistio{background:var(--byro-warn-bg);color:var(--byro-warn);border-color:transparent}
.cl-est.is-descartado,.pf-est-tag.is-descartado{background:var(--byro-danger-bg);color:var(--byro-danger);border-color:transparent}

/* 0.13.62 — chips de estado SÓLIDOS en contactos (lista, kanban y notas), igual que
   los dropdowns byro-tag--solid. Scopeado: .cl-est es solo de contactos; las notas
   usan .pf-est-tag (compartido con propiedades) → solo se vuelven sólidas dentro de .clf. */
.cl-est{color:#fff}
.cl-est.is-activo,.cl-est.is-contactado,.clf .pf-est-tag.is-activo,.clf .pf-est-tag.is-contactado{background:var(--byro-ok);color:#fff}
.cl-est.is-cerrado,.cl-est.is-nuevo,.clf .pf-est-tag.is-cerrado,.clf .pf-est-tag.is-nuevo{background:var(--byro-accent);color:#fff}
.cl-est.is-futuro,.clf .pf-est-tag.is-futuro{background:var(--byro-accent-2);color:#fff}
.cl-est.is-inactivo,.clf .pf-est-tag.is-inactivo{background:var(--byro-text-3);color:#fff}
.cl-est.is-desistio,.clf .pf-est-tag.is-desistio{background:var(--byro-warn);color:#fff}
.cl-est.is-descartado,.clf .pf-est-tag.is-descartado{background:var(--byro-danger);color:#fff}

/* Variante azul (info) para byro-tag — distinta del índigo (accent) en sólido. */
.byro-tag--info{background:var(--byro-info-bg);color:var(--byro-accent-2)}
.byro-tag--solid.byro-tag--info{background:var(--byro-accent-2);color:#fff}

/* ============================================================================
 * BYRO — Datepicker (calendario propio, reemplaza el nativo). Ver byro-datepicker.js
 * ========================================================================== */
.byro-dp { position:relative; }
.byro-dp__btn { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; height:40px; padding:0 12px; border:0.5px solid var(--byro-border-strong); border-radius:var(--byro-r-sm); background:var(--byro-surface); font:inherit; font-size:14px; color:var(--byro-text); cursor:pointer; box-sizing:border-box; }
.byro-dp__btn:hover { border-color:var(--byro-accent); }
.byro-dp.is-open .byro-dp__btn { border-color:var(--byro-accent); }
.byro-dp__val { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.byro-dp__val.is-ph { color:var(--byro-text-3); }
.byro-dp__btn i { color:var(--byro-accent); font-size:18px; flex:0 0 auto; }
.byro-dp__panel { display:none; position:absolute; top:calc(100% + 5px); left:0; z-index:60; width:284px; max-width:90vw; background:var(--byro-surface); border:0.5px solid var(--byro-border); border-radius:var(--byro-r-md); box-shadow:0 10px 28px rgba(17,17,26,.14); padding:12px; }
.byro-dp.is-open .byro-dp__panel { display:block; }
.byro-dp__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.byro-dp__nav { width:30px; height:30px; border:none; background:none; border-radius:var(--byro-r-sm); cursor:pointer; color:var(--byro-text-2); display:flex; align-items:center; justify-content:center; font-size:22px; line-height:1; font-weight:400; }
.byro-dp__nav:hover { background:var(--byro-info-bg); color:var(--byro-accent); }
.byro-dp__mlbl { flex:1; border:none; background:none; cursor:pointer; font:inherit; font-size:14px; font-weight:500; color:var(--byro-text); border-radius:var(--byro-r-sm); padding:5px 0; }
.byro-dp__mlbl:hover { background:var(--byro-info-bg); color:var(--byro-accent); }
.byro-dp__ylbl { flex:1; text-align:center; font-size:14px; font-weight:500; color:var(--byro-text); }
.byro-dp__dow, .byro-dp__grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.byro-dp__dow span { text-align:center; font-size:11px; color:var(--byro-text-3); padding:4px 0; }
.byro-dp__day { aspect-ratio:1; border:none; background:none; border-radius:var(--byro-r-sm); cursor:pointer; font:inherit; font-size:13px; color:var(--byro-text); display:flex; align-items:center; justify-content:center; }
.byro-dp__day:hover { background:var(--byro-info-bg); color:var(--byro-accent); }
.byro-dp__day.oth { color:var(--byro-text-3); opacity:.5; }
.byro-dp__day.today { box-shadow:inset 0 0 0 1.5px var(--byro-accent); color:var(--byro-accent); }
.byro-dp__day.sel, .byro-dp__day.sel:hover { background:var(--byro-accent); color:#fff; }
.byro-dp__months { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:4px; }
.byro-dp__mo { border:0.5px solid var(--byro-border); background:none; border-radius:var(--byro-r-sm); cursor:pointer; font:inherit; font-size:13px; color:var(--byro-text); padding:10px 0; text-transform:capitalize; }
.byro-dp__mo:hover { background:var(--byro-info-bg); color:var(--byro-accent); border-color:var(--byro-accent); }
.byro-dp__mo.sel { background:var(--byro-accent); color:#fff; border-color:var(--byro-accent); }
.byro-dp__foot { display:flex; justify-content:space-between; margin-top:8px; padding-top:10px; border-top:0.5px solid var(--byro-border); }
.byro-dp__hoy, .byro-dp__clr { border:none; background:none; font:inherit; font-size:13px; cursor:pointer; padding:4px 8px; border-radius:var(--byro-r-sm); }
.byro-dp__hoy { color:var(--byro-accent); font-weight:500; }
.byro-dp__clr { color:var(--byro-text-3); }
.byro-dp__hoy:hover, .byro-dp__clr:hover { background:var(--byro-info-bg); }

/* ============================================================================
   Casilla canónica — byro-check
   ---------------------------------------------------------------------------
   Había dos versiones de lo mismo en el sistema: `pm-ck` en roles (22 px, radio
   6, palomita como texto) y `np-ch` en notificaciones (30 px, radio 8, SVG con
   transiciones). Misma idea, medidas distintas, ninguna en components.css.

   Ésta las reemplaza. Soporta los dos mecanismos que ya existen:

     · Con casilla real dentro (accesible, es lo preferible):
         <label class="byro-check">
           <input type="checkbox" name="x" checked>
           <span class="byro-check__box"></span>
         </label>

     · Como marca visual con estado en clase, para tablas donde el estado vive
       en un campo oculto:
         <span class="byro-check__box is-on"></span>

   La palomita se dibuja con CSS, no con texto ni SVG: así se ve idéntica en
   todos lados sin depender de la tipografía ni de un archivo aparte.
   ========================================================================== */

/* `!important` a propósito: varias hojas fuerzan `display:block` en las
   etiquetas de sus formularios, y eso deja la casilla pegada al texto. Una
   casilla canónica debe verse igual esté donde esté. */
.byro-check {
  display:inline-flex !important; align-items:center; gap:10px; cursor:pointer;
}
.byro-check input { position:absolute; opacity:0; width:0; height:0; }

.byro-check__box {
  position:relative; flex:none; box-sizing:border-box;
  width:22px; height:22px; border-radius:6px;
  border:1.5px solid var(--byro-border-strong, #2e2e38);
  background:var(--byro-surface-2, #17171e);
  transition:background .12s ease, border-color .12s ease;
  display:inline-flex; align-items:center; justify-content:center;
  vertical-align:middle; cursor:pointer;
}

/* La palomita: dos trazos rotados. Se dibuja siempre y se revela al activar,
   para que la transición sea suave en vez de aparecer de golpe. */
.byro-check__box::after {
  content:''; width:5px; height:9px; margin-top:-2px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(.6); opacity:0;
  transition:opacity .12s ease, transform .12s ease;
}

.byro-check:hover .byro-check__box,
.byro-check__box:hover { border-color:var(--byro-accent, #6366f1); }

.byro-check input:checked + .byro-check__box,
.byro-check__box.is-on {
  background:var(--byro-accent, #6366f1);
  border-color:var(--byro-accent, #6366f1);
}
.byro-check input:checked + .byro-check__box::after,
.byro-check__box.is-on::after { opacity:1; transform:rotate(45deg) scale(1); }

/* Foco visible: quien navega con teclado tiene que ver dónde está. */
.byro-check input:focus-visible + .byro-check__box {
  outline:2px solid var(--byro-accent, #6366f1); outline-offset:2px;
}

/* Bloqueada: se ve pero no se toca. */
.byro-check__box.is-lock,
.byro-check input:disabled + .byro-check__box { opacity:.55; cursor:not-allowed; }