:root{--primary:#2f6f65;--primary-dark:#1f4f48;--accent:#d97706;--bg:#faf7f2;--surface:#ffffff;--text:#0f172a;--muted:#64748b;--radius:18px;--shadow:0 16px 44px rgba(15,23,42,.10);--ring:rgba(217,119,6,.35);--primary-soft:rgba(47,111,101,.12);--accent-soft:rgba(217,119,6,.14)}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Arial,sans-serif;overflow-x:hidden}

/* Contenedor fluido: aprovecha pantallas grandes, con padding adaptable */
.container{width:100%;max-width:1880px;margin:0 auto;padding:clamp(12px,1.6vw,22px)}
.container.full{max-width:none}

.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid rgba(2,6,23,.06)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:12px;border:0;cursor:pointer;text-decoration:none}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 6px 0 var(--primary-dark);font-weight:800;letter-spacing:.6px}
.btn-secondary{background:#eef2f6;color:#0f172a}
.input{width:100%;border:1px solid #e5e7eb;border-radius:12px;padding:12px 14px}
.grid{display:grid;gap:14px}
@media(min-width:760px){.grid.two{grid-template-columns:1fr 1fr} .grid.three{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.grid.three{grid-template-columns:repeat(3,1fr)}}
img{max-width:100%;height:auto}

/* Tablas: en pantallas chicas permitir scroll horizontal sin romper layout
   (solo para tablas grandes del sistema, no para tablas de layout/form) */
@media(max-width:900px){
  table.bdo-table,
  table.table-messages,
  table.cases-table,
  table.cases-table--mis,
  table.casos{display:block;max-width:100%;overflow-x:auto;border-collapse:separate}

  table.bdo-table thead, table.bdo-table tbody,
  table.table-messages thead, table.table-messages tbody,
  table.cases-table thead, table.cases-table tbody,
  table.cases-table--mis thead, table.cases-table--mis tbody,
  table.casos thead, table.casos tbody{display:table;width:max-content}

  table.bdo-table tr,
  table.table-messages tr,
  table.cases-table tr,
  table.cases-table--mis tr,
  table.casos tr{display:table-row}
}

/* En mobile, botones grandes ocupan el ancho */
@media(max-width:520px){
  .btn{width:100%}
}

/* LOGO fijo arriba a la derecha */
.bdo-logo{position:absolute;top:18px;right:28px;height:58px;display:flex;align-items:center;opacity:.95}
.bdo-logo img{height:58px;width:auto;object-fit:contain}

/* ==========================================================
   BDO — Responsive Layout Overrides (para TODAS las solapas)
   - Evita zoom/achicar pantalla
   - Prioriza el contenido central
   - Baja el panel derecho (tips) automáticamente en resoluciones medias
   ========================================================== */

/* Grilla 3 columnas típica (menú / contenido / tips) */
/* Layout 3 columnas (menú / contenido / ayuda)
   - Se prioriza el ancho del contenido central
   - El panel de ayuda queda más angosto
*/
.bdo-grid{
  display:grid !important;
  align-items:flex-start !important;
  grid-template-columns:clamp(220px,18vw,280px) minmax(0,1fr) clamp(220px,14vw,280px) !important;
  align-items:flex-start !important;
}

/* En notebooks: mantenemos 3 columnas pero aún más angosto el panel derecho */
@media(max-width:1400px){
  .bdo-grid{grid-template-columns:clamp(220px,20vw,280px) minmax(0,1fr) clamp(210px,13vw,260px) !important;}
}

/* En resoluciones medias/chicas: 2 columnas (ayuda abajo) */
@media(max-width:1180px){
  .bdo-grid{grid-template-columns:clamp(220px,28vw,280px) minmax(0,1fr) !important;}
  .bdo-grid > .panel:last-child{grid-column:1 / -1 !important;}
}

/* En pantallas chicas: una sola columna */
@media(max-width:1024px){
  .bdo-grid{grid-template-columns:1fr !important;}
  .bdo-grid > .panel{width:100% !important;}
}

/* Mis casos: que la tabla entre en desktop (sin scroll), y que el scroll
   solo aparezca cuando realmente no hay lugar (mobile) */
.cases-table{min-width:0 !important;}
.cases-table th,.cases-table td{padding:6px 7px !important;}
.cases-table th:nth-child(9), .cases-table td:nth-child(9){width:228px !important;}

/* Botonera compacta y siempre visible */
.case-actions{gap:4px !important;}
.btn-mini{font-size:.62rem !important;padding:2px 6px !important;}

/* Mis casos: botones de acción compactos (con iconos) */
.case-actions .btn-mini{
  font-size:.66rem !important;
  padding:3px 6px !important;
  justify-content:center;
}



/* ==========================================================
   Tooltips (PRO+)
   - Usar: <a class="btn-mini" data-tip="Texto">...</a>
   ========================================================== */
.btn-mini[data-tip]{position:relative}
.btn-mini[data-tip]::after,
.btn-mini[data-tip]::before{
  opacity:0;
  pointer-events:none;
  transition:opacity .12s ease, transform .12s ease;
}
.btn-mini[data-tip]::after{
  content:attr(data-tip);
  position:absolute;
  left:50%;
  bottom:calc(100% + 8px);
  transform:translateX(-50%) translateY(2px);
  background:rgba(15,23,42,.95);
  color:#fff;
  padding:6px 8px;
  border-radius:10px;
  font-size:11px;
  font-weight:600;
  white-space:nowrap;
  box-shadow:0 10px 22px rgba(0,0,0,.18);
  z-index:50;
}
.btn-mini[data-tip]::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:calc(100% + 2px);
  transform:translateX(-50%) translateY(2px);
  border:6px solid transparent;
  border-top-color:rgba(15,23,42,.95);
  z-index:49;
}
.btn-mini[data-tip]:hover::after,
.btn-mini[data-tip]:hover::before,
.btn-mini[data-tip]:focus-visible::after,
.btn-mini[data-tip]:focus-visible::before{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}


/* Panel de ayuda (derecha) más compacto */
.panel-help{padding:12px !important;}
.panel-help .right-title{font-size:.95rem !important;margin-bottom:6px !important;}
.panel-help ul{font-size:.82rem !important;line-height:1.25 !important;}

/* ==========================================================
   BDO — Grilla GRANDE (estándar global)
   Objetivo:
   - Que TODAS las pantallas muestren más información sin zoom
   - Priorizar el panel central y dar tablas más legibles
   - Mantener responsive (panel derecho baja cuando no entra)
   ========================================================== */

:root{
  --bdo-sidebar-w: clamp(260px, 18vw, 320px);
  --bdo-help-w:    clamp(220px, 16vw, 300px);
  --bdo-gap:       clamp(12px, 1.2vw, 18px);
  --bdo-panel-pad: clamp(14px, 1.2vw, 18px);
  --bdo-table-font:.95rem;
}

/* Evitar “encajonar” pantallas: muchas páginas traen max-width:1100 inline */
.hero-mini,
.card-wide,
.panel-mis-casos,
.form-caso{
  max-width:none !important;
  width:100% !important;
}

/* 3 columnas: menú / contenido / ayuda */
.bdo-grid{
  display:grid !important;
  align-items:flex-start !important;
  grid-template-columns: var(--bdo-sidebar-w) minmax(0, 1fr) var(--bdo-help-w) !important;
  gap: var(--bdo-gap) !important;
}

/* Paneles: padding uniforme (muchas páginas lo definen inline) */
.bdo-grid > .panel{padding: var(--bdo-panel-pad) !important;}

/* En notebooks: mantenemos 3 columnas, achicando ayuda */
@media (max-width: 1450px){
  :root{ --bdo-help-w: clamp(210px, 14vw, 270px); }
}

/* 2 columnas: la ayuda baja abajo */
@media (max-width: 1200px){
  .bdo-grid{grid-template-columns: var(--bdo-sidebar-w) minmax(0,1fr) !important;}
  .bdo-grid > .panel:last-child{grid-column: 1 / -1 !important;}
}

/* 1 columna: todo apilado */
@media (max-width: 980px){
  .bdo-grid{grid-template-columns: 1fr !important;}
  .bdo-grid > .panel{width:100% !important;}
}

/* Tablas: legibilidad global */
table.bdo-table,
table.casos,
table.cases-table{
  font-size: var(--bdo-table-font) !important;
}

table.bdo-table th, table.bdo-table td,
table.casos th, table.casos td,
table.cases-table th, table.cases-table td,
table.cases-table--mis th, table.cases-table--mis td{
  padding: 10px 12px !important;
}

table.bdo-table th,
table.casos th,
table.cases-table thead th,
table.cases-table--mis thead th{
  font-size: .78rem !important;
}

/* Mis casos: más ancho para “Título” y botones más cómodos */
table.cases-table--mis{table-layout:auto !important;}
table.cases-table--mis th:nth-child(1), table.cases-table--mis td:nth-child(1){width:60px !important;}
table.cases-table--mis th:nth-child(2), table.cases-table--mis td:nth-child(2){width:34% !important; min-width:260px !important; white-space:normal !important; overflow:visible !important; text-overflow:unset !important;}
table.cases-table--mis th:nth-child(3), table.cases-table--mis td:nth-child(3){width:140px !important;}
table.cases-table--mis th:nth-child(4), table.cases-table--mis td:nth-child(4){width:110px !important;}
table.cases-table--mis th:nth-child(5), table.cases-table--mis td:nth-child(5){width:70px !important; text-align:center !important;}
table.cases-table--mis th:nth-child(6), table.cases-table--mis td:nth-child(6){width:90px !important; text-align:center !important;}
table.cases-table--mis th:nth-child(7), table.cases-table--mis td:nth-child(7){width:90px !important;}
table.cases-table--mis th:nth-child(8), table.cases-table--mis td:nth-child(8){width:120px !important;}
table.cases-table--mis th:nth-child(9), table.cases-table--mis td:nth-child(9){width:360px !important;}

.btn-mini{font-size:.72rem !important;padding:4px 8px !important;}

/* ==========================================================
   BDO — “PRO TABLES”
   - Encabezados sticky
   - Zebra + hover
   - Ajuste auto-fit (sin scroll en desktop salvo que sea necesario)
   ========================================================== */

/* Ajuste global para sticky headers (por el topbar/nav superior)
   Si cambiás la altura del header, ajustá este valor. */
:root{
  --bdo-sticky-offset: 64px;
}


/* Base: que las tablas ocupen el ancho real del panel */
table.bdo-table,
table.table-messages,
table.casos{
  width:100% !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
  table-layout:fixed; /* ayuda a “auto-fit” evitando overflow por textos largos */
}

/* Mis casos ya tiene layout propio (auto), no lo forzamos */
table.cases-table,
table.cases-table--mis{
  width:100% !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
}

/* Celdas: permitir wrap limpio */
table.bdo-table th, table.bdo-table td,
table.table-messages th, table.table-messages td,
table.casos th, table.casos td{
  overflow-wrap:anywhere;
  word-break:break-word;
  vertical-align:top;
  transition:background-color .12s ease;
}

/* Encabezados sticky (desktop) */
@media (min-width: 901px){
  table.bdo-table thead th,
  table.table-messages thead th,
  table.cases-table thead th,
  table.cases-table--mis thead th,
  table.casos thead th{
    position:sticky;
    top:var(--bdo-sticky-offset);
    z-index:3;
    background:linear-gradient(#ffffff,#fbfdff);
    box-shadow:0 1px 0 rgba(15,23,42,.10), 0 8px 14px rgba(15,23,42,.04);
  }
}


/* ==========================================================
   Sticky columnas (ID / Título)
   - Se activa en desktop
   - Aplica por defecto a Mis casos (cases-table--mis)
   - Si querés usarlo en otra tabla: agregá class="sticky-cols" al <table>
   ========================================================== */

@media (min-width: 901px){
  /* Mis casos: 1ra y 2da columna sticky (ID y Título) */
  table.cases-table--mis{
    --bdo-sticky-col1: 60px; /* ancho de la columna ID */
  }

  table.cases-table--mis thead th:nth-child(1),
  table.cases-table--mis tbody td:nth-child(1){
    position:sticky;
    left:0;
    z-index:6;
    background:inherit;
  }
  table.cases-table--mis thead th:nth-child(2),
  table.cases-table--mis tbody td:nth-child(2){
    position:sticky;
    left:var(--bdo-sticky-col1);
    z-index:6;
    background:inherit;
  }

  /* En headers, elevar por encima del body */
  table.cases-table--mis thead th:nth-child(1),
  table.cases-table--mis thead th:nth-child(2){
    z-index:8;
    background:linear-gradient(#ffffff,#fbfdff);
  }

  /* Genérico: 1er col sticky si la tabla trae class .sticky-cols */
  table.sticky-cols thead th:first-child,
  table.sticky-cols tbody td:first-child{
    position:sticky;
    left:0;
    z-index:6;
    background:inherit;
  }
  table.sticky-cols thead th:first-child{
    z-index:8;
    background:linear-gradient(#ffffff,#fbfdff);
  }
}
/* Zebra (todas las tablas de datos) */
table.bdo-table tbody tr:nth-child(odd) td,
table.table-messages tbody tr:nth-child(odd) td,
table.casos tbody tr:nth-child(odd) td,
table.cases-table tbody tr:nth-child(odd) td,
table.cases-table--mis tbody tr:nth-child(odd) td{
  background:rgba(15,23,42,.018) !important;
}

/* Hover */
table.bdo-table tbody tr:hover td,
table.table-messages tbody tr:hover td,
table.casos tbody tr:hover td,
table.cases-table tbody tr:hover td,
table.cases-table--mis tbody tr:hover td{
  background:var(--primary-soft) !important;
}

/* Bordes suaves (mejora visual en todas las tablas) */
table.bdo-table th, table.bdo-table td,
table.table-messages th, table.table-messages td,
table.casos th, table.casos td{
  border-bottom:1px solid rgba(15,23,42,.08);
}

/* Si un panel tiene una tabla muy ancha, solo ahí aparece scroll (no en desktop por defecto) */
.table-fit{overflow-x:visible}
@media (max-width: 1100px){
  .table-fit{overflow-x:auto}
}


/* ==========================================================
   Sticky columna derecha (Acciones / Continuar carga) — PRO+
   - Mis casos: deja fija la última columna cuando hay scroll horizontal.
   ========================================================== */
@media (min-width: 901px){
  table.cases-table--mis thead th:last-child{
    position:sticky;
    right:0;
    left:auto;
    z-index:9;
  }
  table.cases-table--mis tbody td:last-child{
    position:sticky;
    right:0;
    left:auto;
    z-index:7;
    background:inherit;
    box-shadow:-1px 0 0 rgba(15,23,42,.12);
  }
}


/* table-wrap (tooltips)
   En desktop dejamos overflow visible para que los tooltips no se recorten.
   El scroll horizontal aparece solo en pantallas chicas. */
.table-wrap{overflow-x:visible}
@media (max-width: 1100px){
  .table-wrap{overflow-x:auto}
}


/* ============================================================
   MIS CASOS — Botón "Editar" + menú desplegable de acciones
   ============================================================ */
.case-actions-wrap{
  position:relative;
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
  gap:8px;
}
.btn-edit-actions{
  appearance:none;
  border:1px solid #cbd5e1;
  background:#0f172a;
  color:#fff;
  border-radius:999px;
  padding:6px 10px;
  font-size:.82rem;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  white-space:nowrap;
  box-shadow:0 8px 20px rgba(2,6,23,.12);
}
.btn-edit-actions:hover{filter:brightness(1.05)}
.btn-edit-actions:active{transform:translateY(1px)}
.btn-edit-actions:focus{outline:2px solid rgba(59,130,246,.4); outline-offset:2px}

.case-actions-pop{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:14px;
  padding:10px;
  box-shadow:0 18px 40px rgba(2,6,23,.18);
  z-index:1200;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
  min-width:280px;
}
.case-actions-pop .btn-mini{
  font-size:.82rem !important;
  padding:8px 10px !important;
  justify-content:flex-start !important;
  gap:8px;
}

@media (max-width: 840px){
  .case-actions-wrap{align-items:stretch}
  .case-actions-pop{
    position:static;
    min-width:0;
    width:100%;
  }
  .case-actions-pop .btn-mini{justify-content:center !important;}
}

/* sticky header del último TH (Continuar carga) con sombra clara */
@media (min-width: 961px){
  table.cases-table--mis thead th:last-child{
    z-index: 60;
    box-shadow: -8px 0 18px rgba(2,6,23,.05);
  }
}

/* sticky columna derecha (Continuar carga) cuando haya overflow */
@media (min-width: 961px){
  table.cases-table--mis td:last-child,
  table.cases-table--mis th:last-child{
    position: sticky;
    right: 0;
    background: #fff;
    z-index: 55;
  }
  table.cases-table--mis tbody tr:nth-child(even) td:last-child{ background:#f8fafc; }
  table.cases-table--mis tbody tr:hover td:last-child{ background:#eef2ff; }
}


/* ==========================================================
   BDO UI KIT — Topbar + Drawer + Toast (2026-03)
   ========================================================== */

.topbar{
  position:sticky; top:0; z-index:1000;
  background:linear-gradient(135deg, var(--primary), var(--primary-dark));
  color:#fff;
  box-shadow:0 14px 30px rgba(15,23,42,.18);
}
.topbar__inner{
  max-width:1880px; margin:0 auto;
  padding:10px clamp(12px,2vw,24px);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.brand-link{display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none}
.brand-link img{height:38px; width:auto; border-radius:10px; background:rgba(255,255,255,.92); padding:3px}
.brand-name{font-weight:950; letter-spacing:.3px; line-height:1}
.brand-tag{font-size:12px; opacity:.9; line-height:1.2}
.topbar__nav{display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:flex-end}
.navlink{
  color:#fff; text-decoration:none; font-weight:850; font-size:13px;
  opacity:.92; padding:8px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
}
.navlink:hover{opacity:1; background:rgba(255,255,255,.12)}
.navpill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);
  font-weight:850; font-size:12px; opacity:.95;
}
.badge-dot{
  min-width:18px; height:18px; padding:0 6px;
  border-radius:999px; background:var(--accent);
  color:#fff; font-weight:950; font-size:11px;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 10px 18px rgba(217,119,6,.25);
}
.page{
  max-width:1880px; margin:0 auto;
  padding:18px clamp(12px,2vw,24px);
}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:8px 0 14px}
.page-title{margin:0;font-size:clamp(22px,2.2vw,34px);font-weight:950;letter-spacing:.2px}
.page-sub{margin:6px 0 0;color:var(--muted);font-weight:650}
.kpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media(max-width:980px){.kpi{grid-template-columns:1fr}}
.kpi .card{padding:14px}
.kpi-label{font-size:12px;font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.kpi-value{font-size:24px;font-weight:950;margin-top:6px}
.kpi-hint{font-size:12px;color:var(--muted);margin-top:4px}

/* Drawer (Ayuda) */
.drawer-backdrop{
  position:fixed; inset:0; background:rgba(2,6,23,.45);
  opacity:0; pointer-events:none; transition:opacity .18s ease;
  z-index:1500;
}
.drawer{
  position:fixed; top:0; right:0; height:100vh; width:min(420px, 92vw);
  background:rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  border-left:1px solid rgba(15,23,42,.12);
  box-shadow:-22px 0 60px rgba(15,23,42,.22);
  transform:translateX(100%);
  transition:transform .2s ease;
  z-index:1600;
  display:flex; flex-direction:column;
}
.drawer__head{
  padding:14px 14px 10px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border-bottom:1px solid rgba(15,23,42,.08);
  background:linear-gradient(180deg, rgba(250,247,242,1), rgba(255,255,255,.9));
}
.drawer__title{font-weight:950; margin:0; font-size:16px}
.drawer__close{
  border:1px solid rgba(15,23,42,.16); background:#fff; color:var(--text);
  border-radius:999px; padding:8px 10px; cursor:pointer; font-weight:950;
}
.drawer__body{padding:14px; overflow:auto}
.drawer__section{margin-bottom:14px}
.drawer__section h4{margin:0 0 6px;font-size:13px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.drawer__section ul{margin:0;padding-left:18px;color:var(--text)}
.drawer__section li{margin:6px 0; line-height:1.35}
.drawer__tip{background:var(--accent-soft); border:1px solid rgba(217,119,6,.22); padding:12px; border-radius:14px}
.drawer__tip strong{display:block; margin-bottom:6px}

.is-drawer-open .drawer-backdrop{opacity:1; pointer-events:auto}
.is-drawer-open .drawer{transform:translateX(0)}

/* Toast */
.toast{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%) translateY(12px);
  background:rgba(15,23,42,.94); color:#fff;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  padding:12px 14px;
  box-shadow:0 18px 40px rgba(2,6,23,.22);
  opacity:0; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  z-index:2000;
  max-width:min(720px, 92vw);
  font-weight:750;
}
.toast.is-show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast.is-ok{background:rgba(6,95,70,.95)}
.toast.is-err{background:rgba(153,27,27,.95)}

/* Progress bar */
.progress{
  width:100%; height:10px; border-radius:999px;
  background:rgba(15,23,42,.08); overflow:hidden;
  border:1px solid rgba(15,23,42,.10);
}
.progress > span{
  display:block; height:100%;
  width:0;
  background:linear-gradient(90deg, var(--accent), rgba(47,111,101,1));
  border-radius:999px;
}


/* Coincidencias (semáforo) */
.match-badge{display:inline-flex;align-items:center;gap:6px;margin-left:8px;padding:4px 10px;border-radius:999px;font-size:.72rem;font-weight:950;letter-spacing:.3px;border:1px solid rgba(2,6,23,.10)}
.match-badge.badge-high{background:rgba(16,185,129,.14);color:#065f46;border-color:rgba(16,185,129,.35)}
.match-badge.badge-medium{background:rgba(245,158,11,.16);color:#92400e;border-color:rgba(245,158,11,.35)}
.match-badge.badge-low{background:rgba(239,68,68,.14);color:#7f1d1d;border-color:rgba(239,68,68,.35)}

/* Filtros coincidencias (Mapa) */
.seg-filter{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0 12px}
.seg-filter .seg-btn{border:1px solid rgba(2,6,23,.14);background:#fff;border-radius:999px;padding:8px 12px;font-weight:950;cursor:pointer}
.seg-filter .seg-btn:hover{background:rgba(2,6,23,.03)}
.seg-filter .seg-btn.is-active{background:rgba(47,111,101,.10);border-color:rgba(47,111,101,.35);color:#0f3b36}
.seg-filter .seg-meta{margin-left:auto;color:#64748b;font-weight:800;font-size:.85rem}

/* Explicación de scoring */
.match-explain{border:1px solid rgba(2,6,23,.10);border-radius:14px;background:rgba(255,255,255,.9);padding:10px 12px}
.match-explain summary{cursor:pointer;font-weight:950;color:#0f172a}
.match-explain ul{margin:8px 0 0;padding-left:18px;color:#334155}
.match-explain li{margin:6px 0}

/* Notificaciones */
.notif-list{display:flex;flex-direction:column;gap:10px}
.notif-item{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid rgba(2,6,23,.10);border-radius:16px;background:#fff;cursor:pointer}
.notif-item:hover{box-shadow:0 10px 22px rgba(2,6,23,.06)}
.notif-item input[type="checkbox"]{margin-top:6px;transform:scale(1.05)}
.notif-item.is-unread{border-color:rgba(47,111,101,.45);background:rgba(47,111,101,.05)}
.notif-main{flex:1;min-width:0}
.notif-top{display:flex;gap:10px;align-items:flex-start;justify-content:space-between}
.notif-title{font-weight:950;color:#0f172a;line-height:1.2}
.notif-meta{color:#64748b;font-weight:800;font-size:.85rem;white-space:nowrap}