/* 
  ============================================================ 
  SECRETARIA DE HACIENDA — ESTILOS PREMIUM v2
  ============================================================
*/

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
 
/* ── Variables ─────────────────────────────────────────── */
:root {
  --primary:       #06402B;
  --primary-2:     #04281C;
  --primary-light: #0a6644;
  --accent:        #06402B;
  --accent-dim:    rgba(6,64,43,.08);
  --ok:            #16a34a;
  --error:         #dc2626;
  --scrim:         rgba(0,0,0,.40);
 
  --card-bg:       rgba(255,255,255,.10); /* Trasparencia del contenedor */
  --card-border:   rgba(6,64,43,.14);
  --glass-blur:    blur(16px);
 
  --text-main:     #0f1f16;
  --text-muted:    #6b7c74;
  --text-sub:      #3d5248;
 
  --input-bg:      rgba(255,255,255,.95);
  --input-border:  rgba(6,64,43,.18);
  --input-focus:   #06402B;
 
  --shadow-card:   0 8px 32px rgba(6,64,43,.12), 0 1px 0 rgba(255,255,255,.9) inset;
  --shadow-btn:    0 4px 16px rgba(6,64,43,.30);
 
  --radius-sm:  10px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  999px;
 
  /* FASE 3 — base del tema (los sobreescribe html[data-tema="oscuro"]) */
  --surface-rgb:  255,255,255;
  --tema-fondo:   url('img/fondo-verde.png');
  --tema-fondo-color: transparent;
  --tinte-alta:   254,226,226;
  --tinte-media:  255,237,213;
  --tinte-baja:   220,252,231;
}
 
/* ── Reset & Base ───────────────────────────────────────── */
html, body {
  margin: 0; padding: 0; height: 100%; width: 100%;
  overflow-x: hidden;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--text-main);
  background-color: var(--tema-fondo-color);
  background-image: var(--tema-fondo);
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
 
/* Sin overlay — el fondo se ve directo */
 
/* ── Layout ─────────────────────────────────────────────── */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
  position: relative; z-index: 1;
}
 
.view {
  display: none; opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease;
  box-sizing: border-box; padding: 16px;
  position: relative; z-index: 1;
}
.view.active { display: block; opacity: 1; transform: translateY(0); }
 
/* ── Cards ──────────────────────────────────────────────── */
.card {
  background:var(--card-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  max-width: 860px;
  margin: 16px auto;
  padding: 24px 22px 20px;
}
.narrow { max-width: 560px; margin: 0 auto; }
 
/* ── Typography ─────────────────────────────────────────── */
:where(h1, h2, h3):where(:not([class*="kit-"])) {
  font-family: 'Sora', sans-serif;
  margin: 8px 0 12px; text-align: center;
  color: var(--primary); letter-spacing: -.3px;
}
h1 { font-size: 1.55rem; font-weight: 800; }
h2 { font-size: 1.2rem;  font-weight: 700; }
h3 { font-size: 1.0rem;  font-weight: 600; }
 
p.helper {
  color: var(--text-sub); font-size: .92rem;
  text-align: center; margin: 6px 0 16px; font-weight: 500;
}
.muted  { color: var(--text-muted); font-size: .85rem; }
.center { text-align: center; }
 
/* ── Labels ─────────────────────────────────────────────── */
label {
  display: block; font-weight: 600;
  font-size: .78rem; letter-spacing: .7px;
  text-transform: uppercase;
  margin: 12px 0 5px;
  color: var(--primary);
}
 
/* ── Form Elements ──────────────────────────────────────── */
input, select, textarea {
  width: 100%; padding: 12px 14px;
  box-sizing: border-box;
  border: 1.5px solid var(--input-border);
  border-radius: var(--radius-md);
  background:var(--input-bg);
  color: var(--text-main);
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
  font-size: 15px;
  font-family: 'IBM Plex Sans', sans-serif;
}
input::placeholder, textarea::placeholder {
  color: var(--text-muted); font-size: .9rem;
}
select option { background:rgb(var(--surface-rgb)); color: var(--text-main); }
input:focus, select:focus, textarea:focus {
  border-color: var(--input-focus);
  background:rgb(var(--surface-rgb));
  box-shadow: 0 0 0 3px rgba(6,64,43,.10);
}
 
/* ── Buttons ─────────────────────────────────────────────── */
/* FLANDES: el botón de la app vieja NO se aplica a las piezas del kit */
button:where(:not([class*="kit-"]):not(.acceso):not(.hf-cara):not(.hf-tema)) {
  cursor: pointer; width: 100%;
  padding: 13px 16px; box-sizing: border-box;
  border: 1.5px solid var(--input-border);
  border-radius: var(--radius-md);
  background:rgba(var(--surface-rgb),.75);
  color: var(--text-sub);
  font-weight: 600; font-size: 14px;
  font-family: 'IBM Plex Sans', sans-serif;
  letter-spacing: .3px;
  transition: background .18s, border-color .18s, color .18s, transform .1s, box-shadow .18s;
}
button:where(:not([class*="kit-"]):not(.acceso):not(.hf-cara):not(.hf-tema)):hover {
  background:rgba(var(--surface-rgb),.95);
  color: var(--primary); border-color: var(--primary);
  transform: translateY(-1px);
}
button:where(:not([class*="kit-"]):not(.acceso):not(.hf-cara):not(.hf-tema)):active { transform: translateY(0) scale(.98); }
 
.btn-primary {
  background:linear-gradient(135deg, #0a7a46 0%, #06402B 100%);
  color: #fff; border: 0;
  box-shadow: var(--shadow-btn); font-weight: 700;
}
.btn-primary:hover {
  background:linear-gradient(135deg, #0d9156 0%, #075234 100%);
  color: #fff; box-shadow: 0 6px 22px rgba(6,64,43,.40);
  border: 0;
}
 
.danger {
  background:rgba(220,38,38,.07);
  border: 1.5px solid rgba(220,38,38,.28);
  color: #b91c1c;
}
.danger:hover {
  background:rgba(220,38,38,.14);
  border-color: rgba(220,38,38,.50); color: #991b1b;
}
 
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-row > * { flex: 1; }
 
/* ── Chip ────────────────────────────────────────────────── */
.chip {
  padding: 8px 16px; border-radius: var(--radius-xl);
  border: 1.5px solid var(--input-border);
  background:rgba(var(--surface-rgb),.75);
  font-weight: 600; font-size: .85rem;
  color: var(--text-sub);
  text-decoration: none;
  display: inline-flex; align-items: center;
  justify-content: center; gap: 8px;
  width: auto; transition: .18s;
}
.chip:hover { background:rgb(var(--surface-rgb)); color: var(--primary); border-color: var(--primary); }
.chip.danger {
  background:rgba(220,38,38,.06);
  border-color: rgba(220,38,38,.25); color: #b91c1c;
}
.chip.danger:hover {
  background:rgba(220,38,38,.12);
  border-color: rgba(220,38,38,.45); color: #991b1b;
}
 
/* ── Brand ───────────────────────────────────────────────── */
.brand {
  width: 220px; border-radius: var(--radius-md);
  display: block; margin: 16px auto 6px;
}
.image-center { display: flex; justify-content: center; }
 
/* ── Loader ─────────────────────────────────────────────── */
.loader {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(236,250,241,.55);
  z-index: 9999; backdrop-filter: blur(6px);
  opacity: 1; transition: opacity .15s;
}
.loader.hidden { opacity: 0; pointer-events: none; }
.spinner-ios { position: relative; width: 64px; height: 64px; }
.spinner-ios i {
  position: absolute; left: 50%; top: 50%;
  width: 5px; height: 17px; margin: -8.5px 0 0 -2.5px;
  background:var(--primary); border-radius: 3px;
  opacity: .15; animation: iosFade 1.2s linear infinite;
  transform-origin: center center;
}
@keyframes iosFade { 0%,39%,100% { opacity:.12; } 40% { opacity:.9; } }
.spinner-ios i:nth-child(1)  { transform: rotate(  0deg) translateY(-22px); animation-delay:-1.1s; }
.spinner-ios i:nth-child(2)  { transform: rotate( 30deg) translateY(-22px); animation-delay:-1.0s; }
.spinner-ios i:nth-child(3)  { transform: rotate( 60deg) translateY(-22px); animation-delay:-0.9s; }
.spinner-ios i:nth-child(4)  { transform: rotate( 90deg) translateY(-22px); animation-delay:-0.8s; }
.spinner-ios i:nth-child(5)  { transform: rotate(120deg) translateY(-22px); animation-delay:-0.7s; }
.spinner-ios i:nth-child(6)  { transform: rotate(150deg) translateY(-22px); animation-delay:-0.6s; }
.spinner-ios i:nth-child(7)  { transform: rotate(180deg) translateY(-22px); animation-delay:-0.5s; }
.spinner-ios i:nth-child(8)  { transform: rotate(210deg) translateY(-22px); animation-delay:-0.4s; }
.spinner-ios i:nth-child(9)  { transform: rotate(240deg) translateY(-22px); animation-delay:-0.3s; }
.spinner-ios i:nth-child(10) { transform: rotate(270deg) translateY(-22px); animation-delay:-0.2s; }
.spinner-ios i:nth-child(11) { transform: rotate(300deg) translateY(-22px); animation-delay:-0.1s; }
.spinner-ios i:nth-child(12) { transform: rotate(330deg) translateY(-22px); animation-delay:  0s; }
 
/* ── Utilities ───────────────────────────────────────────── */
.hidden { display: none !important; }
@media (max-width:700px) { .btn-row { flex-direction: column; } }
 
/* ── Count row ───────────────────────────────────────────── */
.count-row {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  margin: 8px 0 10px; color: var(--text-sub);
}
.count-pill {
  background:rgba(6,64,43,.08);
  border: 1.5px solid rgba(6,64,43,.20);
  border-radius: var(--radius-xl);
  padding: 6px 14px;
  font-weight: 700; font-size: .85rem;
  color: var(--primary);
}
.filter-input {
  max-width: 420px;
  border-radius: var(--radius-xl);
  padding: 10px 16px;
}
 
/* ── Sol list & cards ────────────────────────────────────── */
.sol-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
 
.sol-card {
  background:rgba(var(--surface-rgb),.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(6,64,43,.12);
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: 0 4px 16px rgba(6,64,43,.10);
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .15s, box-shadow .15s;
}
.sol-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(6,64,43,.16);
}
 
.sol-head {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.sol-title {
  font-family: 'Sora', sans-serif;
  font-weight: 700; font-size: .95rem;
  color: var(--primary); margin: 0;
}
.sol-meta { display: grid; grid-template-columns: 1fr; gap: 3px; margin: 0; }
.sol-meta p {
  margin: 0; font-weight: 500;
  color: var(--text-sub); font-size: .87rem;
  overflow-wrap: anywhere;
}
.sol-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
}
 
.icon-btn {
  width: 42px; height: 42px;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(6,64,43,.15);
  background:rgba(var(--surface-rgb),.9);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(6,64,43,.10);
  flex: 0 0 auto; transition: .15s;
}
.icon-btn:hover {
  background:rgb(var(--surface-rgb)); border-color: var(--primary);
  transform: translateY(-1px);
}
.icon-btn img { width: 26px; height: 26px; object-fit: contain; }
.right-icons { display: flex; gap: 8px; align-items: center; }
 
.btn-respond {
  width: auto; padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-weight: 700; font-size: .85rem;
  background:linear-gradient(135deg, #0a7a46 0%, #06402B 100%);
  color: #fff; border: 0;
  box-shadow: 0 3px 12px rgba(6,64,43,.30);
  transition: .18s;
}
.btn-respond:hover {
  background:linear-gradient(135deg, #0d9156 0%, #075234 100%);
  box-shadow: 0 5px 18px rgba(6,64,43,.40);
  color: #fff;
}
 
/* ── PDF status ──────────────────────────────────────────── */
.pdf-status { margin-top: 5px; font-size: .85rem; font-weight: 600; color: var(--ok); }
 
/* ── Input with icon ─────────────────────────────────────── */
.input-icon-wrap { position: relative; }
.icon-in-input {
  position: absolute; top: 50%; right: 10px;
  transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 8px;
  border: 1.5px solid rgba(6,64,43,.15);
  background:rgba(var(--surface-rgb),.95);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; transition: .15s;
  box-shadow: 0 2px 6px rgba(6,64,43,.08);
}
.icon-in-input:hover { background:rgb(var(--surface-rgb)); border-color: var(--primary); }
.icon-in-input img { width: 18px; height: 18px; object-fit: contain; }
 
/* ── Drive Anexos ────────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: minmax(0, 420px);
  justify-content: center; gap: 12px; margin-top: 14px;
}
@media (max-width:700px) { .grid { grid-template-columns: 1fr; } }
 
.drive-card {
  border-radius: var(--radius-lg);
  padding: 14px 14px 12px;
  box-shadow: 0 6px 20px rgba(6,64,43,.12);
  border: 1.5px solid transparent;
  transform: translateY(0);
  transition: transform .15s, box-shadow .15s;
  position: relative; overflow: hidden;
}
.drive-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(6,64,43,.18); }
.drive-card.green {
  background:rgba(var(--tinte-baja),.85);
  border-color: rgba(6,64,43,.25);
}
.drive-card.red {
  background:rgba(var(--tinte-alta),.85);
  border-color: rgba(220,38,38,.30);
}
.drive-name {
  font-family: 'Sora', sans-serif;
  font-weight: 700; text-transform: uppercase;
  text-align: center; letter-spacing: .4px;
  margin: 2px 0 4px; font-size: .95rem;
  color: var(--primary);
}
.drive-mail {
  text-align: center; font-weight: 500;
  color: var(--text-sub); margin: 0 0 10px;
  font-size: .88rem; min-height: 1.1em;
}
.icon-row {
  display: flex; align-items: center;
  justify-content: center; gap: 18px; margin-top: 6px;
}
.btn-icon {
  width: 56px; height: 56px;
  border: 0 !important; background:transparent !important;
  padding: 0 !important; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 14px; box-shadow: none !important;
  transition: transform .12s;
}
.btn-icon:hover { transform: scale(1.08); background:transparent !important; }
.btn-icon:active { transform: scale(.93); }
.btn-icon:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(6,64,43,.20) !important;
}
.btn-icon img {
  width: 56px; height: 56px; object-fit: contain; display: block;
  filter: drop-shadow(0 2px 4px rgba(6,64,43,.20));
  pointer-events: none;
}
.count-wrap { margin-top: 6px; }
.count-text { font-weight: 700; color: var(--primary); }
.btn-big {
  width: 100%; padding: 15px 14px;
  border-radius: var(--radius-md);
  font-size: 15px; font-weight: 700;
}
.edit-head {
  display: flex; justify-content: center; align-items: center;
  gap: 10px; flex-wrap: wrap; margin-bottom: 6px;
}
.edit-badge {
  padding: 8px 16px; border-radius: var(--radius-xl);
  border: 1.5px solid rgba(6,64,43,.25);
  background:rgba(6,64,43,.07);
  color: var(--primary);
  font-weight: 700; font-size: .9rem;
  max-width: 100%; text-align: center;
}
 
/* ============================================================
   ESTADÍSTICAS DASHBOARD v2 — Estilos Premium
   ============================================================ */

/* ── Card contenedor ─────────────────────────────────────── */
.estad-dash-card {
  background:var(--card-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 14px 20px;
}

/* ── Header ──────────────────────────────────────────────── */
.estad-dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1.5px solid var(--card-border);
}
.estad-dash-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.estad-dash-title-wrap img {
  width: 40px; height: 40px; object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(6,64,43,.25));
}
.estad-dash-title {
  font-family: 'Sora', sans-serif;
  font-weight: 900; font-size: 1.35rem;
  color: var(--primary); letter-spacing: -.4px; margin: 0;
}
.estad-dash-subtitle {
  font-size: .78rem; font-weight: 600;
  color: var(--text-muted); margin: 2px 0 0;
}

/* ── KPI Row estadísticas ────────────────────────────────── */
.estad-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

/* ── Variación KPI ───────────────────────────────────────── */
.kpi-change {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: .68rem; font-weight: 800;
  padding: 2px 7px; border-radius: 999px; margin-top: 3px;
}
.kpi-change.up   { background:rgba(22,163,74,.15); color: #15803d; }
.kpi-change.down { background:rgba(220,38,38,.12); color: #b91c1c; }
.kpi-change.flat { background:rgba(107,114,128,.12); color: #6b7280; }

/* ── Tab content animado ─────────────────────────────────── */
.estad-tab-content { animation: panelFadeIn .35s ease both; }

/* ── Chart wrap premium ──────────────────────────────────── */
.estad-chart-premium {
  background:rgba(var(--surface-rgb),.88);
  border: 1.5px solid rgba(6,64,43,.10);
  border-radius: var(--radius-lg);
  padding: 14px 16px 16px;
  box-shadow: 0 4px 18px rgba(6,64,43,.08);
  backdrop-filter: blur(8px);
  margin-bottom: 14px;
  position: relative; overflow: hidden;
}
.estad-chart-premium::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background:linear-gradient(90deg,#0a7a46,#06402B);
  border-radius: 4px 4px 0 0;
}
.estad-chart-label {
  font-family: 'Sora', sans-serif;
  font-weight: 800; font-size: .82rem;
  color: var(--primary);
  text-transform: uppercase; letter-spacing: .5px;
  margin: 0 0 12px;
  display: flex; align-items: center; gap: 8px;
}
.estad-chart-label img { width: 20px; height: 20px; object-fit: contain; }

/* ── Paginador zonas ─────────────────────────────────────── */
.estad-pager {
  display: flex; align-items: center;
  justify-content: center; gap: 8px;
  margin-top: 12px; flex-wrap: wrap;
}
.estad-pager-btn {
  padding: 8px 16px; border-radius: var(--radius-xl);
  border: 1.5px solid var(--input-border);
  background:rgba(var(--surface-rgb),.85);
  color: var(--text-sub); font-weight: 700; font-size: .82rem;
  cursor: pointer; transition: .18s;
}
.estad-pager-btn:hover {
  background:rgb(var(--surface-rgb)); border-color: var(--primary);
  color: var(--primary); transform: translateY(-1px);
}
.estad-pager-btn:disabled { opacity: .38; cursor: default; transform: none; }
.estad-pager-btn.active {
  background:linear-gradient(135deg,#0a7a46,#06402B);
  color: #fff; border-color: transparent;
  box-shadow: 0 4px 12px rgba(6,64,43,.28);
}

/* ── Top zonas lista ─────────────────────────────────────── */
.estad-top-list  { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.estad-top-item  {
  display: flex; align-items: center; gap: 10px;
  background:rgba(var(--surface-rgb),.90);
  border: 1.5px solid rgba(6,64,43,.08);
  border-radius: var(--radius-md); padding: 8px 12px;
  box-shadow: 0 2px 8px rgba(6,64,43,.06);
  transition: transform .14s, box-shadow .14s;
}
.estad-top-item:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(6,64,43,.12); }
.estad-top-pos { font-family:'Sora',sans-serif; font-weight:900; font-size:.9rem; min-width:24px; text-align:center; color:var(--text-muted); }
.estad-top-pos.gold   { color: #d97706; }
.estad-top-pos.silver { color: #6b7280; }
.estad-top-pos.bronze { color: #92400e; }
.estad-top-info  { flex:1; min-width:0; }
.estad-top-name  { font-weight:700; font-size:.80rem; color:var(--text-main); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.estad-top-bar-track { height:4px; background:rgba(6,64,43,.08); border-radius:999px; margin-top:4px; overflow:hidden; }
.estad-top-bar-fill  { height:100%; border-radius:999px; background:linear-gradient(90deg,#0a7a46,#06402B); transition:width .6s cubic-bezier(.4,0,.2,1); }
.estad-top-count { font-family:'Sora',sans-serif; font-weight:900; font-size:.95rem; color:var(--primary); flex-shrink:0; }

/* ── Pills resumen tendencia ─────────────────────────────── */
.estad-tend-pills { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; justify-content:center; }
.estad-tend-pill  {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:rgba(var(--surface-rgb),.90); border:1.5px solid rgba(6,64,43,.10);
  border-radius:var(--radius-md); padding:12px 18px; min-width:110px;
  box-shadow:0 3px 12px rgba(6,64,43,.07); transition:transform .15s;
}
.estad-tend-pill:hover { transform:translateY(-2px); }
.estad-tend-pill-icon  { font-size:1.5rem; }
.estad-tend-pill-value { font-family:'Sora',sans-serif; font-weight:900; font-size:1.5rem; color:var(--primary); line-height:1; }
.estad-tend-pill-label { font-size:.65rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.4px; text-align:center; }

/* ── Tabla mensual ───────────────────────────────────────── */
.estad-month-table { width:100%; border-collapse:collapse; font-size:.82rem; border-radius:var(--radius-md); overflow:hidden; }
.estad-month-table th {
  background:linear-gradient(135deg,#0a7a46,#06402B);
  color:#fff; font-family:'Sora',sans-serif; font-weight:800;
  font-size:.72rem; letter-spacing:.5px; padding:9px 12px; text-align:left;
}
.estad-month-table td { padding:8px 12px; border-bottom:1px solid rgba(6,64,43,.06); font-weight:600; color:var(--text-main); background:rgba(var(--surface-rgb),.88); }
.estad-month-table tr:last-child td { border-bottom:none; }
.estad-month-table tr:hover td { background:rgba(6,64,43,.04); }
.estad-month-table .td-chat  { color:#f97316; font-weight:800; }
.estad-month-table .td-pres  { color:#06402B; font-weight:800; }
.estad-month-table .td-total { color:var(--primary); font-weight:900; font-family:'Sora',sans-serif; }
.estad-month-table .td-mes   { font-weight:800; color:var(--text-sub); }
.estad-month-table .td-foot  { font-weight:900; color:var(--primary); font-family:'Sora',sans-serif; background:rgba(6,64,43,.05)!important; }

/* ── Section view ────────────────────────────────────────── */
#view-estadisticas { padding: 8px; }

@media (max-width: 500px) {
  .estad-dash-title { font-size: 1.1rem; }
  .estad-kpi-row    { grid-template-columns: repeat(2, 1fr); }
  .estad-tend-pill  { min-width: 80px; padding: 10px 12px; }
}
 
/* ── SweetAlert2 — Tema Hacienda Claro ──────────────────── */
 
.swal2-popup {
  background:rgba(var(--surface-rgb),.97) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1.5px solid rgba(6,64,43,.14) !important;
  border-radius: 22px !important;
  box-shadow: 0 24px 64px rgba(6,64,43,.18), 0 1px 0 rgba(255,255,255,.9) inset !important;
  font-family: 'IBM Plex Sans', system-ui, sans-serif !important;
  padding: 28px 28px 24px !important;
}
 
.swal2-title {
  font-family: 'Sora', sans-serif !important;
  font-size: 1.15rem !important; font-weight: 700 !important;
  color: var(--primary) !important;
  letter-spacing: -.2px !important; padding: 0 0 4px !important;
}
 
.swal2-html-container, .swal2-content {
  color: var(--text-muted) !important;
  font-size: .92rem !important; font-weight: 500 !important; line-height: 1.6 !important;
}
 
.swal2-icon.swal2-success {
  border-color: #16a34a !important; color: #16a34a !important;
}
.swal2-icon.swal2-success [class^='swal2-success-line'] { background-color:#16a34a !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(22,163,74,.25) !important; }
.swal2-icon.swal2-warning { border-color: #d97706 !important; color: #d97706 !important; }
.swal2-icon.swal2-error   { border-color: #dc2626 !important; color: #dc2626 !important; }
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color:#dc2626 !important; }
.swal2-icon.swal2-question { border-color: rgba(6,64,43,.30) !important; color: var(--primary) !important; }
.swal2-icon.swal2-info     { border-color: #2563eb !important; color: #2563eb !important; }
 
.swal2-input, .swal2-textarea, .swal2-select {
  background:#f8faf9 !important;
  border: 1.5px solid rgba(6,64,43,.18) !important;
  border-radius: 12px !important;
  color: var(--text-main) !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 15px !important; box-shadow: none !important;
}
.swal2-input:focus, .swal2-textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(6,64,43,.10) !important;
}
 
.swal2-actions { gap: 10px !important; margin-top: 20px !important; }
 
.swal2-confirm {
  background:linear-gradient(135deg, #0a7a46 0%, #06402B 100%) !important;
  border: 0 !important; border-radius: 12px !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-weight: 700 !important; font-size: .9rem !important;
  letter-spacing: .3px !important; padding: 12px 22px !important;
  box-shadow: 0 4px 16px rgba(6,64,43,.30) !important;
  transition: box-shadow .18s, transform .1s !important;
}
.swal2-confirm:hover {
  box-shadow: 0 6px 22px rgba(6,64,43,.42) !important;
  transform: translateY(-1px) !important;
}
.swal2-confirm:active { transform: scale(.98) !important; }
 
.swal2-cancel {
  background:rgba(220,38,38,.07) !important;
  border: 1.5px solid rgba(220,38,38,.28) !important;
  border-radius: 12px !important; color: #b91c1c !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-weight: 600 !important; font-size: .9rem !important;
  padding: 12px 22px !important; transition: .18s !important;
}
.swal2-cancel:hover {
  background:rgba(220,38,38,.14) !important;
  border-color: rgba(220,38,38,.45) !important; color: #991b1b !important;
}
 
.swal2-deny {
  background:rgba(6,64,43,.06) !important;
  border: 1.5px solid rgba(6,64,43,.18) !important;
  border-radius: 12px !important; color: var(--text-sub) !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-weight: 600 !important; padding: 12px 22px !important;
}
 
.swal2-timer-progress-bar {
  background:linear-gradient(90deg, #16a34a, #06402B) !important;
  border-radius: 999px !important; height: 3px !important;
}
.swal2-timer-progress-bar-container { border-radius: 0 0 22px 22px !important; overflow: hidden !important; }
 
.swal2-backdrop-show {
  background:rgba(var(--surface-rgb),.18) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
}

    /* ============================================================
   MI SEMÁFORO 🚦 — Estilos Sistema de Semaforización
   Agregar al bloque <style> existente de index.html
   ============================================================ */

/* ── Colores semáforo ─────────────────────────────────────── */
.semaforo-verde    { background:linear-gradient(135deg,#16a34a,#15803d); color:#fff; }
.semaforo-naranja  { background:linear-gradient(135deg,#f97316,#ea580c); color:#fff; }
.semaforo-rojo     { background:linear-gradient(135deg,#dc2626,#b91c1c); color:#fff; }
.semaforo-rojo-claro { background:linear-gradient(135deg,#f87171,#ef4444); color:#fff; }
.semaforo-gris     { background:linear-gradient(135deg,#6b7280,#4b5563); color:#fff; }
.proc-card.color-naranja  { border-left-color: #f97316; }
.proc-card.color-rojo     { border-left-color: #dc2626; }
.proc-card.color-rojo-claro { border-left-color: #ef4444; }

/* ── Tarjeta proceso ─────────────────────────────────────── */
.proc-card {
  background:rgba(var(--surface-rgb),.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(6,64,43,.12);
  border-left: 6px solid #16a34a;
  border-radius: var(--radius-lg);
  padding: 16px 14px 12px;
  box-shadow: 0 4px 18px rgba(6,64,43,.10);
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .15s, box-shadow .15s;
  position: relative;
}
.proc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(6,64,43,.16);
}
.proc-card.color-amarillo { border-left-color: #d97706; }
.proc-card.color-naranja  { border-left-color: #ea580c; }
.proc-card.color-rojo     { border-left-color: #dc2626; }
.proc-card.color-gris     { border-left-color: #6b7280; opacity: .88; }

/* ── Cabecera tarjeta ────────────────────────────────────── */
.proc-head {
  display: flex; justify-content: space-between;
  align-items: flex-start; gap: 10px; flex-wrap: wrap;
}
.proc-head-left  { flex: 1 1 0; min-width: 0; }
.proc-head-right { flex: 0 0 auto; text-align: right; }

.proc-asignado {
  font-family: 'Sora', sans-serif; font-weight: 800;
  font-size: 1.02rem; color: var(--primary); margin: 0;
  overflow-wrap: anywhere;
}
.proc-asistente {
  font-size: .82rem; color: var(--text-muted); font-weight: 600; margin: 2px 0 0;
}

.proc-descripcion {
  font-size: .88rem; font-weight: 700; color: var(--text-sub);
  margin: 2px 0 0; display: flex; align-items: flex-start; gap: 6px;
}
.proc-descripcion img { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }

/* ── Estado badge semáforo ───────────────────────────────── */
.proc-estado-badge {
  display: inline-flex; flex-direction: column;
  align-items: center; gap: 2px;
  padding: 6px 14px; border-radius: var(--radius-xl);
  font-family: 'Sora', sans-serif; font-weight: 800;
  font-size: .78rem; letter-spacing: .3px; white-space: nowrap;
  min-width: 110px; text-align: center;
}
.proc-dias-txt {
  font-size: .72rem; font-weight: 700; opacity: .92; margin-top: 1px;
}


/* Selector de categoría con iconos (en formularios) */
.cat-selector { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.cat-selector .cat-pill { cursor: pointer; }

/* ── Etapa Jurídica badge ─────────────────────────────────── */
.etapa-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 20px;
  background:#1e1e2e; color: #fff;
  font-weight: 700; font-size: .75rem;
}
.etapa-badge img { width: 18px; height: 18px; }

/* ── Acciones iconos tarjeta ─────────────────────────────── */
.proc-actions {
  display: flex; align-items: center;
  justify-content: space-between; gap: 8px;
  flex-wrap: wrap; margin-top: 4px;
}
.proc-icons { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.proc-icon-btn {
  width: 40px; height: 40px; border-radius: 10px;
  border: 1.5px solid rgba(6,64,43,.15);
  background:rgba(var(--surface-rgb),.92);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: .15s; flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(6,64,43,.08);
}
.proc-icon-btn:hover {
  background:rgb(var(--surface-rgb)); border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(6,64,43,.14);
}
.proc-icon-btn img { width: 24px; height: 24px; object-fit: contain; }

/* ── Grid desktop ─────────────────────────────────────────── */
@media (min-width: 900px) {
  #proc-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
}

/* ── Vista detalle asignación ─────────────────────────────── */
.proc-detalle-header {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.proc-detalle-field {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid rgba(6,64,43,.08);
  font-size: .92rem;
}
.proc-detalle-field:last-child { border-bottom: none; }
.proc-detalle-label {
  font-weight: 700; color: var(--primary);
  min-width: 150px; flex-shrink: 0; font-size: .85rem;
}
.proc-detalle-value { color: var(--text-main); font-weight: 500; }

/* Evidencia imagen */
.proc-evidencia-wrap {
  margin: 12px 0; text-align: center;
}
.proc-evidencia-img {
  max-width: 100%; max-height: 260px; object-fit: cover;
  border-radius: var(--radius-md);
  border: 2px solid rgba(6,64,43,.15);
  cursor: pointer; transition: transform .15s;
}
.proc-evidencia-img:hover { transform: scale(1.02); }

/* Iconos archivos recibidos/respuesta */
.proc-files-row {
  display: flex; gap: 10px; flex-wrap: wrap;
  align-items: center; justify-content: center;
  margin: 10px 0;
}
.proc-file-item {
  position: relative; display: inline-flex;
  flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer;
}
.proc-file-item img { width: 52px; height: 52px; object-fit: contain; transition: .15s; }
.proc-file-item:hover img { transform: scale(1.08); }
.proc-file-counter {
  position: absolute; bottom: 14px; right: -4px;
  width: 20px; height: 20px; border-radius: 50%;
  background:var(--primary); color: #fff;
  font-size: .65rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}
.proc-file-label {
  font-size: .7rem; font-weight: 700; color: var(--text-muted);
}

/* ── Botones de acción vista detalle ─────────────────────── */
.proc-action-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: var(--radius-md);
  font-weight: 700; font-size: .85rem;
  border: 1.5px solid transparent; cursor: pointer;
  transition: .18s;
}
.proc-btn-rebotar {
  background:rgba(220,38,38,.08);
  border-color: rgba(220,38,38,.30); color: #b91c1c;
}
.proc-btn-rebotar:hover {
  background:rgba(220,38,38,.15);
  border-color: rgba(220,38,38,.50);
}
.proc-btn-rebotar img { width: 22px; height: 22px; }
.proc-btn-finalizar img { width: 28px; height: 28px; }

/* ── Picker modal (para procesos) ────────────────────────── */
.proc-picker-modal {
  position: fixed; inset: 0;
  background:rgba(0,0,0,.5);
  display: none; align-items: center; justify-content: center;
  z-index: 10001;
}
.proc-picker-modal.open { display: flex; }

/* ── Resumen dinámico previo a guardar ───────────────────── */
.proc-resumen-item {
  display: flex; gap: 8px; padding: 4px 0;
  border-bottom: 1px solid rgba(6,64,43,.08);
  font-size: .88rem;
}
.proc-resumen-item b { color: var(--primary); min-width: 140px; }

/* ── Formulario: campo file con preview ──────────────────── */
.proc-file-wrap { margin-top: 4px; }
.proc-file-status {
  margin-top: 4px; font-size: .82rem;
  font-weight: 600; color: var(--ok);
}

/* ── Asignaciones título grande ─────────────────────────── */
.proc-view-title {
  font-family: 'Sora', sans-serif;
  font-weight: 900; font-size: 2rem;
  color: var(--primary); text-align: center;
  margin: 0 0 16px; letter-spacing: -.5px;
  text-shadow: 0 2px 4px rgba(6,64,43,.10);
}
@media (max-width: 600px) { .proc-view-title { font-size: 1.5rem; } }

/* ── cat-pill: pill con borde + icono + texto (formularios) ─ */
.cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  border-radius: 20px;
  border: 1.5px solid rgba(6,64,43,.22);
  background:rgba(var(--surface-rgb),.92);
  font-weight: 600;
  font-size: .82rem;
  color: var(--text-sub);
  cursor: default;
  transition: .15s;
  box-shadow: 0 1px 4px rgba(6,64,43,.07);
}
.cat-pill img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}
.cat-pill.clickable:hover {
  border-color: var(--primary);
  background:rgba(6,64,43,.06);
  transform: translateY(-1px);
}
.cat-pill.selected {
  border-color: var(--primary);
  background:rgba(6,64,43,.10);
  color: var(--primary);
}
/* icon-only: solo el icono, sin texto, sin borde visible en cat-row */
.cat-pill.icon-only {
  padding: 4px;
  background:transparent;
  border: 1.5px solid rgba(6,64,43,.15);
  box-shadow: none;
}
.cat-pill.icon-only img {
  width: 32px;
  height: 32px;
}

/* ── Etapa Jurídica: badge oscuro SOLO icono; valor afuera al lado ── */
.etapa-col {
  display: inline-flex;
  flex-direction: row;       /* icono + texto en fila */
  align-items: center;
  gap: 6px;
}
.etapa-badge-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;              /* solo padding alrededor del icono */
  border-radius: 10px;
  background:#1e1e2e;
  flex-shrink: 0;
}
.etapa-badge-mini img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}
.etapa-valor {
  font-size: .82rem;
  font-weight: 800;
  color: var(--text-sub);
  white-space: normal;
  max-width: 200px;
  line-height: 1.3;
}

/* ── Modal Picker fechas — estilo imagen 3 ──────────────── */
.picker-box {
  background:rgb(var(--surface-rgb));
  border-radius: 16px;
  padding: 24px 36px 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,.22);
  min-width: 360px;
  max-width: 96vw;
  width: clamp(360px, 520px, 96vw);
}
.picker-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 12px;
  margin: 12px 0 16px;
}
.picker-grid > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.picker-grid small {
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  color: var(--primary);
  letter-spacing: .5px;
}
.picker-grid select {
  border: 1.5px solid rgba(6,64,43,.18);
  border-radius: 10px;
  padding: 6px 8px;
  font-size: .92rem;
  background:#f8faf9;
  color: var(--text-main);
  height: 180px;
  overflow-y: auto;
}
.picker-grid select option:checked {
  background:#06402B;
  color: #fff;
}
.picker-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}
.picker-actions .btn {
  padding: 10px 22px;
  border-radius: 10px;
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  border: none;
}
.picker-actions .btn-cancel {
  background:#f3f4f6;
  color: #374151;
  border: 1.5px solid #d1d5db;
}
.picker-actions .btn-cancel:hover { background:#e5e7eb; }
.picker-actions .btn-ok {
  background:linear-gradient(135deg,#0a7a46,#06402B);
  color: #fff;
  box-shadow: 0 4px 12px rgba(6,64,43,.28);
}
.picker-actions .btn-ok:hover {
  background:linear-gradient(135deg,#0d9156,#075234);
}

/* ── Indicador archivo ya cargado en editar ─────────────── */
.file-already-loaded {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: .8rem;
  font-weight: 700;
  color: #0284c7;
  background:rgba(2,132,199,.08);
  border: 1.5px solid rgba(2,132,199,.25);
  border-radius: 8px;
  padding: 4px 10px;
  cursor: pointer;
  text-decoration: none;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.file-already-loaded:hover { background:rgba(2,132,199,.16); }
.file-already-loaded img { width: 18px; height: 18px; flex-shrink: 0; }

/* ── Preview evidencia ──────────────────────────────────── */
#edit-evidencia-preview {
  display: none;
  margin-top: 8px;
  text-align: center;
}
#edit-evidencia-preview img {
  max-width: 100%;
  max-height: 200px;
  object-fit: contain;
  border-radius: var(--radius-md);
  border: 2px solid rgba(6,64,43,.15);
}

/* ── Zoom evidencia (lightbox) ──────────────────────────── */
#proc-lightbox {
  position: fixed;
  inset: 0;
  background:rgba(0,0,0,.88);
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  cursor: zoom-out;
}
#proc-lightbox.open { display: flex; }
#proc-lightbox img {
  max-width: 98vw;
  max-height: 92vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
  cursor: default;
}
#proc-lightbox-close {
  position: absolute;
  top: 16px;
  right: 20px;
  color: #fff;
  font-size: 2rem;
  font-weight: 900;
  cursor: pointer;
  background:rgba(0,0,0,.4);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: none;
  transition: background .15s;
}
#proc-lightbox-close:hover { background:rgba(255,0,0,.5); }

/* ── Creación en detalle ────────────────────────────────── */
.proc-creacion-field {
  margin-top: 10px;
  padding: 8px 0;
  border-top: 1px solid rgba(6,64,43,.08);
  font-size: .85rem;
  color: var(--text-muted);
  font-weight: 600;
}
.proc-creacion-field span {
  color: var(--primary);
  font-weight: 700;
}

    /* ── Cat-pill con color de categoría ─────────────────────── */
.cat-pill-colored {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 6px;
  border-radius: 20px;
  border: 2px solid;            /* color se aplica inline */
  font-weight: 700;
  font-size: .82rem;
  cursor: default;
  transition: .15s;
  box-shadow: 0 1px 4px rgba(0,0,0,.10);
  white-space: nowrap;
}
.cat-pill-colored img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
  border-radius: 6px;
}
.cat-pill-colored.clickable { cursor: pointer; }
.cat-pill-colored.clickable:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,.15);
}
.cat-pill-colored.selected {
  filter: brightness(.92);
  box-shadow: 0 0 0 4px rgba(0,0,0,.55);
  border-width: 3px !important;
}

/* ── Badge jurídico con borde negro, fondo blanco ────────── */
.etapa-badge-mini {
  border: 2px solid #111 !important;
  background:rgb(var(--surface-rgb)) !important;
  border-radius: 16px !important;
}
.etapa-valor {
  color: var(--text-main) !important;
  font-weight: 800;
}

/* ── Pastillas filtro por estado en MIS ASIGNACIONES ───── */
.proc-status-filter {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  justify-content: center;
}
.proc-status-pill {
  width: auto;
  padding: 6px 14px;
  border-radius: var(--radius-xl);
  border: 1.5px solid var(--input-border);
  background:rgba(var(--surface-rgb),.85);
  color: var(--text-sub);
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .3px;
  cursor: pointer;
  transition: .18s;
  white-space: nowrap;
}
.proc-status-pill:hover {
  background:rgb(var(--surface-rgb));
  color: var(--primary);
  border-color: var(--primary);
  transform: translateY(-1px);
}
.proc-status-pill.active {
  background:linear-gradient(135deg, #0a7a46, #06402B);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(6,64,43,.28);
}
@media (max-width: 500px) {
  .proc-status-pill { font-size: .68rem; padding: 5px 10px; }
}

    /* ============================================================
   AJUSTES MÓVIL — Solo pantallas pequeñas (≤ 699px)
   NO afecta escritorio ni tablet
   ============================================================ */
@media (max-width: 699px) {

  /* ── 1. Cabecera de la tarjeta proc-card ──────────────────
     Problema: el badge de estado empuja al nombre y lo rompe
     Solución: apilar verticalmente cabecera en móvil          */
  .proc-head {
    flex-direction: column;
    gap: 6px;
  }
  .proc-head-right {
    text-align: left;   /* alineado a la izquierda al apilar  */
  }

  /* El nombre nunca se parte sílaba a sílaba: solo corta
     entre palabras (word-break) y ocupa todo el ancho         */
  .proc-asignado {
    font-size: .92rem;
    word-break: break-word;   /* corta solo si no hay espacio  */
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
  }
  .proc-asistente {
    font-size: .78rem;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
  }

  /* Badge de estado: más compacto, no ocupa toda la fila      */
  .proc-estado-badge {
    font-size: .70rem;
    padding: 5px 10px;
    min-width: 0;
    width: fit-content;
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
  .proc-dias-txt {
    font-size: .65rem;
  }

  /* ── Detalle value: forzar wrap en móvil ── */
  .proc-detalle-value {
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
    max-width: 100%;
  }

  .proc-detalle-field {
    min-width: 0;
  }

  .proc-detalle-label {
    min-width: 120px;
    flex-shrink: 0;
  }

  /* ── 2. Pills de categoría y subcategoría ─────────────────
     Problema: pills anchas que salen de pantalla
     Solución: flujo wrapping + texto más pequeño              */
  .cat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
  }

  /* cat-pill-colored: reducir tamaño y permitir wrap de texto */
  .cat-pill-colored {
    font-size: .72rem;        /* texto más pequeño             */
    padding: 4px 8px 4px 4px;
    max-width: 100%;          /* nunca más ancho que la tarjeta*/
    white-space: normal;      /* el texto puede romper línea   */
    word-break: break-word;
    flex-shrink: 1;
    min-width: 0;
  }
  .cat-pill-colored img {
    width: 24px;              /* icono más pequeño en móvil    */
    height: 24px;
  }

  /* cat-pill (el estilo base también se usa en tarjetas)      */
  .cat-pill {
    font-size: .72rem;
    padding: 3px 8px 3px 4px;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
    flex-shrink: 1;
    min-width: 0;
  }
  .cat-pill img {
    width: 24px;
    height: 24px;
  }

  /* ── 3. Badge etapa jurídica ──────────────────────────────*/
  .etapa-badge-mini {
    padding: 3px;
    border-radius: 8px;
  }
  .etapa-badge-mini img {
    width: 18px;
    height: 18px;
  }
  .etapa-valor {
    font-size: .72rem;
    max-width: 160px;
    white-space: normal;
    word-break: break-word;
  }
  .etapa-col {
    gap: 4px;
    flex-wrap: wrap;
  }

  /* ── 4. Descripción (proc-descripcion) ───────────────────
     El texto del asunto no debe cortar palabras raras         */
  .proc-descripcion {
    font-size: .82rem;
    word-break: break-word;
    overflow-wrap: break-word;
  }
  .proc-descripcion img {
    width: 16px;
    height: 16px;
  }

  /* ── 5. Selector de categorías en formularios ─────────────
     (vista agregar/editar asignación)                         */
  .cat-selector {
    gap: 5px;
  }

   @media (max-width: 699px) {
  #proc-ver-body .proc-detalle-field:first-child {
    flex-direction: column;
    gap: 2px;
  }
  #proc-ver-body .proc-detalle-field:first-child .proc-detalle-label {
    min-width: 0;
  }
}

}

    /* ============================================================
   CHAT TIEMPO REAL — Estilos
   ============================================================ */

/* ── Botón abrir chat en vista detalle ───────────────────── */
.proc-btn-chat {
  background:linear-gradient(135deg, #7c3aed, #4f46e5);
  color: #fff; border: 0; width: auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--radius-md);
  font-weight: 700; font-size: .88rem; cursor: pointer;
  box-shadow: 0 4px 14px rgba(124,58,237,.35);
  transition: .18s; position: relative;
}
.proc-btn-chat:hover {
  background:linear-gradient(135deg, #6d28d9, #4338ca);
  box-shadow: 0 6px 20px rgba(124,58,237,.50);
  transform: translateY(-1px);
}
.proc-btn-chat img { width: 22px; height: 22px; }

/* Badge de mensajes no leídos en el botón */
.chat-unread-badge {
  position: absolute; top: -6px; right: -6px;
  background:#ef4444; color: #fff;
  font-size: .65rem; font-weight: 900;
  min-width: 18px; height: 18px;
  border-radius: 999px; border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px; animation: chatPulse 1.4s ease infinite;
}
@keyframes chatPulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.18); }
}

/* ── Modal Chat ──────────────────────────────────────────── */
#modal-chat {
  position: fixed; inset: 0;
  background:rgba(0,0,0,.52);
  z-index: 20000;
  display: none; align-items: flex-end; justify-content: center;
  padding: 0;
  backdrop-filter: blur(4px);
}
#modal-chat.open { display: flex; }

.chat-box {
  background:rgb(var(--surface-rgb));
  width: min(600px, 100vw);
  height: min(88vh, 680px);
  border-radius: 24px 24px 0 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -8px 40px rgba(0,0,0,.22);
  animation: chatSlideUp .28s cubic-bezier(.32,1,.56,1);
}
@keyframes chatSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Header */
.chat-header {
  background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
  padding: 14px 18px 12px;
  display: flex; align-items: center; gap: 12px;
  flex-shrink: 0;
}
.chat-header-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.20);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
}
.chat-header-info { flex: 1; min-width: 0; }
.chat-header-title {
  font-family: 'Sora', sans-serif;
  font-weight: 800; font-size: .92rem; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-header-sub {
  font-size: .72rem; color: rgba(255,255,255,.78);
  font-weight: 600; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-header-close {
  background: rgba(255,255,255,.18); border: 0;
  color: #fff; width: 34px; height: 34px;
  border-radius: 50%; font-size: 1.1rem; font-weight: 900;
  cursor: pointer; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; transition: .15s;
}
.chat-header-close:hover { background: rgba(255,255,255,.32); }

/* Mensajes */
.chat-messages {
  flex: 1; overflow-y: auto; padding: 16px 14px 8px;
  display: flex; flex-direction: column; gap: 6px;
  scroll-behavior: smooth;
  background:#f3f0ff;
}
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-thumb {
  background:rgba(124,58,237,.25); border-radius: 4px;
}

/* Burbujas */
.chat-msg {
  display: flex; flex-direction: column;
  max-width: 78%; animation: msgIn .18s ease;
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.chat-msg.mine  { align-self: flex-end;  align-items: flex-end; }
.chat-msg.other { align-self: flex-start; align-items: flex-start; }

.chat-bubble {
  padding: 9px 13px;
  border-radius: 18px;
  font-size: .88rem; font-weight: 500; line-height: 1.5;
  word-break: break-word;
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
}
.chat-msg.mine  .chat-bubble {
  background:linear-gradient(135deg, #7c3aed, #4f46e5);
  color: #fff;
  border-bottom-right-radius: 5px;
}
.chat-msg.other .chat-bubble {
  background:rgb(var(--surface-rgb));
  color: #1e1e2e;
  border-bottom-left-radius: 5px;
  border: 1.5px solid rgba(124,58,237,.12);
}

.chat-meta {
  font-size: .68rem; font-weight: 700;
  color: var(--text-muted); margin: 3px 4px 0;
  display: flex; align-items: center; gap: 4px;
}
.chat-author {
  font-size: .70rem; font-weight: 800;
  margin: 0 4px 2px;
  color: #7c3aed;
}
.chat-msg.mine .chat-author { color: #4f46e5; text-align: right; }

/* Indicador "escribiendo…" */
.chat-typing {
  align-self: flex-start; padding: 8px 14px;
  background:rgb(var(--surface-rgb)); border-radius: 18px;
  border-bottom-left-radius: 5px;
  border: 1.5px solid rgba(124,58,237,.12);
  font-size: .78rem; color: var(--text-muted);
  font-weight: 700; display: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  animation: msgIn .2s ease;
}
.chat-typing.visible { display: block; }
.typing-dots span {
  display: inline-block; width: 6px; height: 6px;
  background:#7c3aed; border-radius: 50%; margin: 0 1px;
  animation: typingDot 1.2s ease infinite;
}
.typing-dots span:nth-child(2) { animation-delay: .2s; }
.typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes typingDot {
  0%,60%,100% { transform: translateY(0); opacity:.4; }
  30%          { transform: translateY(-5px); opacity:1; }
}

/* Separador de fecha */
.chat-date-sep {
  text-align: center; font-size: .70rem;
  font-weight: 800; color: var(--text-muted);
  margin: 8px 0 4px; letter-spacing: .5px;
}

/* Input área */
.chat-footer {
  padding: 10px 14px 14px;
  background:rgb(var(--surface-rgb));
  border-top: 1.5px solid rgba(124,58,237,.10);
  display: flex; align-items: flex-end; gap: 10px;
  flex-shrink: 0;
}
.chat-input-wrap { flex: 1; position: relative; }
#chat-input {
  width: 100%; box-sizing: border-box;
  padding: 11px 14px; border-radius: 20px;
  border: 1.5px solid rgba(124,58,237,.25);
  background:#faf8ff; font-size: .9rem;
  font-family: 'IBM Plex Sans', sans-serif;
  resize: none; min-height: 44px; max-height: 120px;
  overflow-y: auto; outline: none;
  transition: border-color .2s, box-shadow .2s;
  line-height: 1.45;
}
#chat-input:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124,58,237,.12);
}
.chat-send-btn {
  width: 44px; height: 44px; border-radius: 50%;
  background:linear-gradient(135deg, #7c3aed, #4f46e5);
  border: 0; color: #fff; font-size: 1.1rem;
  cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(124,58,237,.40);
  transition: .18s; margin-bottom: 1px;
}
.chat-send-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(124,58,237,.55);
}
.chat-send-btn:active { transform: scale(.94); }
.chat-send-btn svg { width: 20px; height: 20px; }

/* ── Toast notificación mensaje nuevo ────────────────────── */
#chat-toast {
  position: fixed; bottom: 80px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background:linear-gradient(135deg, #7c3aed, #4f46e5);
  color: #fff; padding: 10px 20px; border-radius: 999px;
  font-weight: 700; font-size: .85rem;
  box-shadow: 0 6px 20px rgba(124,58,237,.45);
  z-index: 20001; pointer-events: none;
  opacity: 0; transition: opacity .25s, transform .25s;
  white-space: nowrap;
}
#chat-toast.show {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* ── Sin mensajes placeholder ────────────────────────────── */
.chat-empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  color: var(--text-muted);
}
.chat-empty img { width: 64px; opacity: .45; }
.chat-empty p { font-weight: 700; font-size: .88rem; }

    /* ── Botón con icono + texto centrado ── */
.btn-icon-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 1rem;
  letter-spacing: .5px;
}
.btn-icon-label img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex-shrink: 0;
}

    /* ── Overlay modales inline — fondo claro ────────────────── */
#modal-respuesta-limpia,
#modal-rebotar,
#modal-solicitar-proceso,
#modal-decision,
#modal-expediente,
#modal-bdp-decision,
#modal-bdp-archivo {
  background:rgba(var(--surface-rgb),.30) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* ── Card dentro de esos modales — más blanco y nítido ────── */
#modal-respuesta-limpia .card,
#modal-rebotar .card,
#modal-solicitar-proceso .card,
#modal-decision .card,
#modal-expediente .card,
#modal-bdp-decision .card,
#modal-bdp-archivo .card {
  background:rgba(var(--surface-rgb),.98) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 20px 60px rgba(6,64,43,.22), 0 1px 0 rgba(255,255,255,.95) inset !important;
}

    /* ============================================================
   PANEL DASHBOARD — Estilos
   ============================================================ */

/* ── Vista Panel ─────────────────────────────────────────── */
#view-panel {
  padding: 8px;
}

.panel-card {
  background:var(--card-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 14px 20px;
}

/* ── Header panel ────────────────────────────────────────── */
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.panel-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.panel-title-wrap img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(6,64,43,.25));
}
.panel-title {
  font-family: 'Sora', sans-serif;
  font-weight: 900;
  font-size: 1.35rem;
  color: var(--primary);
  letter-spacing: -.4px;
  margin: 0;
}
.panel-subtitle {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: 2px 0 0;
}

/* ── Toolbar vistas ───────────────��──────────────────────── */
.panel-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.panel-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-xl);
  border: 1.5px solid var(--input-border);
  background:rgba(var(--surface-rgb),.80);
  color: var(--text-sub);
  font-weight: 700;
  font-size: .82rem;
  cursor: pointer;
  transition: .18s;
  font-family: 'IBM Plex Sans', sans-serif;
}
.panel-tab img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.panel-tab:hover {
  background:rgb(var(--surface-rgb));
  color: var(--primary);
  border-color: var(--primary);
  transform: translateY(-1px);
}
.panel-tab.active {
  background:linear-gradient(135deg, #0a7a46, #06402B);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(6,64,43,.30);
}
.panel-tab.active:hover {
  transform: translateY(-1px);
  color: #fff;
}

/* ── KPI Cards ───────────────────────────────────────────── */
.panel-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.kpi-card {
  background:rgba(var(--surface-rgb),.90);
  border: 1.5px solid rgba(6,64,43,.10);
  border-radius: var(--radius-md);
  padding: 14px 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  box-shadow: 0 4px 14px rgba(6,64,43,.08);
  transition: transform .15s, box-shadow .15s;
  position: relative;
  overflow: hidden;
}
.kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background:var(--kpi-color, var(--primary));
  border-radius: 4px 4px 0 0;
}
.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(6,64,43,.14);
}
.kpi-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
  margin-bottom: 2px;
  filter: drop-shadow(0 2px 4px rgba(6,64,43,.15));
}
.kpi-value {
  font-family: 'Sora', sans-serif;
  font-weight: 900;
  font-size: 1.9rem;
  color: var(--primary);
  line-height: 1;
}
.kpi-label {
  font-size: .70rem;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.kpi-sub {
  font-size: .65rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  margin-top: 1px;
}

/* ── Semáforo KPI ────────────────────────────────────────── */
.kpi-card.kpi-verde  { --kpi-color: #16a34a; }
.kpi-card.kpi-naranja{ --kpi-color: #f97316; }
.kpi-card.kpi-rojo   { --kpi-color: #dc2626; }
.kpi-card.kpi-gris   { --kpi-color: #6b7280; }
.kpi-card.kpi-blue   { --kpi-color: #2563eb; }

/* ── Secciones de contenido ──────────────────────────────── */
.panel-section {
  margin-bottom: 18px;
}
.panel-section-title {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: .88rem;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.panel-section-title img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* ── Barras de progreso ──────────────────────────────────── */
.bar-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bar-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
}
.bar-item-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.bar-label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar-track {
  height: 8px;
  background:rgba(6,64,43,.08);
  border-radius: 999px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  border-radius: 999px;
  background:linear-gradient(90deg, #0a7a46, #06402B);
  transition: width .6s cubic-bezier(.4,0,.2,1);
  min-width: 4px;
}
.bar-value {
  font-family: 'Sora', sans-serif;
  font-weight: 900;
  font-size: .88rem;
  color: var(--primary);
  min-width: 28px;
  text-align: right;
}

/* ── Grid 2 columnas para barras ─────────────────────────── */
.panel-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 700px) {
  .panel-grid-2 { grid-template-columns: 1fr; }
}

/* ── Tabla ranking personas ──────────────────────────────── */
.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ranking-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background:rgba(var(--surface-rgb),.88);
  border: 1.5px solid rgba(6,64,43,.10);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  box-shadow: 0 2px 8px rgba(6,64,43,.06);
  transition: transform .14s, box-shadow .14s;
}
.ranking-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(6,64,43,.12);
}
.ranking-pos {
  font-family: 'Sora', sans-serif;
  font-weight: 900;
  font-size: 1rem;
  color: var(--text-muted);
  min-width: 22px;
  text-align: center;
}
.ranking-pos.gold   { color: #d97706; }
.ranking-pos.silver { color: #6b7280; }
.ranking-pos.bronze { color: #92400e; }
.ranking-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background:linear-gradient(135deg, #0a7a46, #06402B);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Sora', sans-serif;
  font-weight: 900;
  font-size: .88rem;
  color: #fff;
  flex-shrink: 0;
}
.ranking-info {
  flex: 1;
  min-width: 0;
}
.ranking-name {
  font-weight: 700;
  font-size: .82rem;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ranking-detail {
  font-size: .70rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 1px;
}
.ranking-count {
  font-family: 'Sora', sans-serif;
  font-weight: 900;
  font-size: 1.1rem;
  color: var(--primary);
}

/* ── Semáforo visual (resumen) ───────────────────────────── */
.semaforo-resumen {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.sem-card {
  flex: 1;
  min-width: 100px;
  border-radius: var(--radius-md);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  transition: transform .15s;
}
.sem-card:hover { transform: translateY(-2px); }
.sem-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  border: 3px solid rgba(255,255,255,.70);
  flex-shrink: 0;
}
.sem-value {
  font-family: 'Sora', sans-serif;
  font-weight: 900;
  font-size: 1.8rem;
  color: #fff;
  line-height: 1;
}
.sem-label {
  font-size: .68rem;
  font-weight: 800;
  color: rgba(255,255,255,.92);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ── Timeline de vencimientos ────────────────────────────── */
.timeline-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 4px;
}
.timeline-list::-webkit-scrollbar { width: 4px; }
.timeline-list::-webkit-scrollbar-thumb {
  background:rgba(6,64,43,.20);
  border-radius: 4px;
}
.timeline-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background:rgba(var(--surface-rgb),.88);
  border-left: 4px solid #16a34a;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 8px 12px;
  box-shadow: 0 2px 6px rgba(6,64,43,.06);
  transition: transform .14s;
}
.timeline-item:hover { transform: translateX(2px); }
.timeline-item.tl-rojo       { border-left-color: #dc2626; }
.timeline-item.tl-rojo-claro { border-left-color: #ef4444; }
.timeline-item.tl-naranja     { border-left-color: #f97316; }
.timeline-item.tl-gris        { border-left-color: #6b7280; }
.timeline-date {
  font-family: 'Sora', sans-serif;
  font-weight: 900;
  font-size: .72rem;
  color: var(--primary);
  min-width: 56px;
  text-align: center;
  line-height: 1.3;
}
.timeline-info {
  flex: 1;
  min-width: 0;
}
.timeline-name {
  font-weight: 700;
  font-size: .78rem;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.timeline-desc {
  font-size: .68rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.timeline-badge {
  font-size: .62rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
}
.timeline-badge.bg-rojo   { background:#dc2626; }
.timeline-badge.bg-naranja{ background:#f97316; }
.timeline-badge.bg-verde  { background:#16a34a; }
.timeline-badge.bg-gris   { background:#6b7280; }

/* ── Categoría donut (visual) ────────────────────────────── */
.cat-donut-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cat-stat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background:rgba(var(--surface-rgb),.88);
  border-radius: var(--radius-md);
  border: 1.5px solid rgba(6,64,43,.08);
  box-shadow: 0 2px 6px rgba(6,64,43,.06);
}
.cat-stat-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}
.cat-stat-info {
  flex: 1;
  min-width: 0;
}
.cat-stat-name {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cat-stat-bar-track {
  height: 5px;
  background:rgba(6,64,43,.08);
  border-radius: 999px;
  margin-top: 4px;
  overflow: hidden;
}
.cat-stat-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width .6s cubic-bezier(.4,0,.2,1);
}
.cat-stat-count {
  font-family: 'Sora', sans-serif;
  font-weight: 900;
  font-size: .95rem;
  color: var(--primary);
}

/* ── Chart.js canvas para panel ─────────────────────────── */
.panel-chart-wrap {
  background:rgba(var(--surface-rgb),.88);
  border: 1.5px solid rgba(6,64,43,.10);
  border-radius: var(--radius-md);
  padding: 12px;
  box-shadow: 0 2px 8px rgba(6,64,43,.06);
  position: relative;
}
.panel-chart-wrap canvas {
  width: 100% !important;
  display: block;
}

/* ── Animación entrada ───────────────────────────────────── */
@keyframes panelFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.panel-animate {
  animation: panelFadeIn .35s ease both;
}

/* ── Empty state ─────────────────────────────────────────── */
.panel-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-muted);
  font-weight: 700;
  font-size: .9rem;
}

    /* ── Panel Categorías: fix desbordamiento en móvil ── */
@media (max-width: 699px) {

  /* El grid de 2 columnas pasa a 1 columna en móvil */
  .panel-grid-2 {
    grid-template-columns: 1fr;
  }

  /* Cada ítem de categoría/subcategoría: contener bien */
  .cat-stat-item {
    min-width: 0;          /* evita que el flex-child se expanda */
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
  }

  /* El icono no se achica, solo limitamos su flex */
  .cat-stat-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
  }

  /* El bloque de información central: ocupa el espacio disponible sin desbordarse */
  .cat-stat-info {
    flex: 1 1 0;
    min-width: 0;          /* clave para que el texto no expanda el flex */
    overflow: hidden;
  }

  /* El nombre de categoría/subcategoría: permitir wrap y corte */
  .cat-stat-name {
    white-space: normal;          /* permite salto de línea */
    word-break: break-word;
    overflow-wrap: break-word;
    font-size: .68rem;            /* un poco más pequeño en móvil */
    line-height: 1.35;
  }

  /* El número al final no se achica */
  .cat-stat-count {
    flex-shrink: 0;
    font-size: .85rem;
    min-width: 22px;
    text-align: right;
  }

  /* La barra de progreso tampoco se desborda */
  .cat-stat-bar-track {
    width: 100%;
    box-sizing: border-box;
  }
}

/* ── Responsive ajustes ──────────────────────────────────── */
@media (max-width: 500px) {
  .panel-kpis { grid-template-columns: repeat(2, 1fr); }
  .kpi-value  { font-size: 1.5rem; }
  .sem-value  { font-size: 1.4rem; }
  .panel-title { font-size: 1.1rem; }
}

/* ── Asunto con truncado a 3 líneas + pastilla press-and-hold ── */
.proc-desc-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.proc-desc-text {
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  word-break: break-word;
  overflow-wrap: anywhere;
  transition: none;
}

.proc-desc-text.expanded {
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
}

.proc-desc-pill {
  flex-shrink: 0;
  align-self: flex-start;
  width: auto;
  min-width: 36px;
  height: 22px;
  padding: 0 10px;
  margin-top: 2px;
  border-radius: 999px;
  border: 1.5px solid rgba(107, 114, 128, 0.55);
  background:rgba(var(--surface-rgb),0.95);
  color: #4b5563;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(107, 114, 128, 0.15);
  transition: transform .12s, background .15s, color .15s, box-shadow .15s;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.proc-desc-pill:hover {
  background:rgba(229, 231, 235, 0.95);
  box-shadow: 0 3px 10px rgba(107, 114, 128, 0.25);
}

.proc-desc-pill:active,
.proc-desc-pill:focus {
  transform: scale(0.92);
  background:#6b7280;
  color: #fff;
  outline: none;
}

.proc-desc-pill-dots {
  letter-spacing: 1px;
  font-size: .78rem;
  line-height: 1;
  transform: translateY(-1px);
}

#proc-ver-body .proc-detalle-field:first-child .proc-detalle-value {
  flex: 1;
  min-width: 0;
  text-align: justify;
  text-justify: inter-word;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  -ms-hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: break-word;
}

/* ============================================================
   BASE DE DATOS PREDIAL — Estilos
   ============================================================ */

/* Etiqueta arriba de cada grupo de pastillas */
.bdp-pills-label {
  font-family: 'Sora', sans-serif;
  font-size: .72rem;
  font-weight: 800;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin: 10px 0 4px;
  text-align: left;
  padding-left: 4px;
}

/* Tarjeta de expediente */
.bdp-card {
  background:rgb(var(--surface-rgb));
  border: 1.5px solid rgba(6,64,43,.12);
  border-left: 6px solid #16a34a;
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: 0 4px 18px rgba(6,64,43,.10);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform .15s, box-shadow .15s;
}
.bdp-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(6,64,43,.16);
}
.bdp-card.clasif-ALTA  { border-left-color: #dc2626; background:linear-gradient(135deg, rgba(var(--tinte-alta),.85), rgba(var(--surface-rgb),.92)); }
.bdp-card.clasif-MEDIA { border-left-color: #f97316; background:linear-gradient(135deg, rgba(var(--tinte-media),.85), rgba(var(--surface-rgb),.92)); }
.bdp-card.clasif-BAJA  { border-left-color: #16a34a; background:linear-gradient(135deg, rgba(var(--tinte-baja),.85), rgba(var(--surface-rgb),.92)); }

/* Cabecera tarjeta */
.bdp-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}
.bdp-head-left { flex: 1 1 0; min-width: 0; }
.bdp-head-right { flex: 0 0 auto; text-align: right; }

.bdp-nombres {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  color: var(--primary);
  margin: 0;
  word-break: break-word;
}
.bdp-direccion {
  font-size: .80rem;
  color: var(--text-sub);
  font-weight: 600;
  margin: 2px 0 0;
}
.bdp-valor-deuda {
  font-family: 'Sora', sans-serif;
  font-weight: 900;
  font-size: 1.15rem;
  color: var(--primary);
  line-height: 1;
}
.bdp-clasif-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-xl);
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: .68rem;
  letter-spacing: .5px;
  color: #fff;
  margin-top: 4px;
}
.bdp-clasif-badge.ALTA  { background:linear-gradient(135deg,#dc2626,#b91c1c); }
.bdp-clasif-badge.MEDIA { background:linear-gradient(135deg,#f97316,#ea580c); }
.bdp-clasif-badge.BAJA  { background:linear-gradient(135deg,#16a34a,#15803d); }

/* Fila datos secundarios */
.bdp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 6px 12px;
  font-size: .80rem;
  color: var(--text-sub);
}
.bdp-grid > div { min-width: 0; overflow-wrap: break-word; }
.bdp-grid b {
  color: var(--primary);
  font-weight: 700;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .4px;
  display: block;
  margin-bottom: 1px;
}

/* ══════════ AJUSTE 10/09 · DATOS TOCABLES (copiar) ══════════
   Los valores que se copian (nombre, dirección, ficha, exp. físico y
   correo) se marcan con un subrayado punteado muy suave: se nota que se
   pueden tocar sin ensuciar la tarjeta. NO cambian tipografía, tamaño ni
   altura de línea, así que la tarjeta mide exactamente lo mismo que antes. */
.bdp-copy {
  cursor: pointer;
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: rgba(107,124,116,.55);
  border-radius: 3px;
  transition: background-color .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.bdp-copy:hover { background: var(--accent-dim); }
.bdp-copy:active { background: var(--accent-dim); }
.bdp-copy.copiado {
  background: var(--ok);
  color: #fff;
  box-shadow: none;
}
.bdp-copy.copia-error {
  background: var(--error);
  color: #fff;
  box-shadow: none;
}

/* Última fila: NIT / Cédula + correo. El correo SIEMPRE en una sola línea */
.bdp-grid > .bdp-cell-id {
  grid-column: 1 / -1;
  display: flex;
  gap: 6px 12px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.bdp-id-nit    { flex: 0 0 auto; min-width: 130px; }
.bdp-id-correo { flex: 1 1 180px; min-width: 0; }
.bdp-correo {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bdp-sin-dato {
  color: var(--text-muted);
  font-style: italic;
  box-shadow: none;
}

/* Aviso flotante de "copiado" */
.bdp-copy-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 14px);
  background: #06402B;                 /* fijo: legible en claro y en oscuro */
  color: #fff;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: .82rem;
  padding: 9px 16px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-btn);
  opacity: 0;
  pointer-events: none;
  z-index: 99999;
  transition: opacity .18s, transform .18s;
}
.bdp-copy-toast.error { background: #b91c1c; }
.bdp-copy-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Mini etiqueta encima de las pastillas ACTUACIÓN / ESTADO */
.bdp-pill-label {
  font-family: 'Sora', sans-serif;
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .6px;
  color: var(--text-muted);
  text-transform: uppercase;
  padding-left: 3px;
}

/* Pastilla ACTUACION */
.bdp-actuacion {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-xl);
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .3px;
  color: #fff;
  background:linear-gradient(135deg, #6b7280, #4b5563);
}
.bdp-actuacion.act-NINGUNA              { background:linear-gradient(135deg,#9ca3af,#6b7280); }
.bdp-actuacion.act-ACUERDO\ DE\ PAGO,
.bdp-actuacion.act-ACUERDO_DE_PAGO      { background:linear-gradient(135deg,#16a34a,#15803d); }
.bdp-actuacion.act-COBRO\ PERSUASIVO,
.bdp-actuacion.act-COBRO_PERSUASIVO     { background:linear-gradient(135deg,#0ea5e9,#0284c7); }
.bdp-actuacion.act-COBRO\ COACTIVO,
.bdp-actuacion.act-COBRO_COACTIVO       { background:linear-gradient(135deg,#7c3aed,#5b21b6); }
.bdp-actuacion.act-EMBARGO              { background:linear-gradient(135deg,#dc2626,#b91c1c); }
.bdp-actuacion.act-DESEMBARGO           { background:linear-gradient(135deg,#0d9488,#0f766e); }
.bdp-actuacion.act-LIQUIDACION\ OFICIAL,
.bdp-actuacion.act-LIQUIDACION_OFICIAL  { background:linear-gradient(135deg,#f59e0b,#d97706); }
.bdp-actuacion.act-MANDAMIENTO\ DE\ PAGO,
.bdp-actuacion.act-MANDAMIENTO_DE_PAGO  { background:linear-gradient(135deg,#ef4444,#dc2626); }
.bdp-actuacion.act-PRESCRIPCION         { background:linear-gradient(135deg,#6366f1,#4f46e5); }
.bdp-actuacion.act-INSOLVENCIA          { background:linear-gradient(135deg,#1f2937,#111827); }
.bdp-actuacion.act-COMUNICACION_PERSUASIVA { background:linear-gradient(135deg,#0ea5e9,#0284c7); }
.bdp-actuacion.act-SENTENCIA               { background:linear-gradient(135deg,#1e40af,#1d4ed8); }
.bdp-actuacion.act-REVOCATORIA_DIRECTA { background:linear-gradient(135deg,#be185d,#9d174d); }

/* Pastilla ESTADO PROCESO */
.bdp-estado {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-xl);
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: .68rem;
  letter-spacing: .4px;
  color: #fff;
}
.bdp-estado.est-PENDIENTE { background:linear-gradient(135deg,#f97316,#ea580c); }
.bdp-estado.est-AL-DIA    { background:linear-gradient(135deg,#16a34a,#15803d); }
.bdp-estado.est-NINGUNO         { background:linear-gradient(135deg,#9ca3af,#6b7280); }
.bdp-estado.est-ACUERDO-DE-PAGO { background:linear-gradient(135deg,#16a34a,#15803d); }
.bdp-estado.est-COBRO-PERSUASIVO\/LIQUIDACION { background:linear-gradient(135deg,#0ea5e9,#0284c7); }
.bdp-estado.est-COBRO-COACTIVO  { background:linear-gradient(135deg,#7c3aed,#5b21b6); }

/* Acciones */
.bdp-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(6,64,43,.08);
}
.bdp-icon-btn {
  width: 40px; height: 40px;
  border-radius: 10px;
  border: 1.5px solid rgba(6,64,43,.15);
  background:rgba(var(--surface-rgb),.92);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: .15s; flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(6,64,43,.08);
}
.bdp-icon-btn:hover {
  background:rgb(var(--surface-rgb));
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(6,64,43,.14);
}
.bdp-icon-btn img { width: 24px; height: 24px; object-fit: contain; }
.bdp-icon-btn.danger-icon {
  background:rgba(220,38,38,.06);
  border-color: rgba(220,38,38,.30);
}
.bdp-icon-btn.danger-icon:hover {
  background:rgba(220,38,38,.14);
  border-color: rgba(220,38,38,.55);
}

/* Grid desktop */
@media (min-width: 900px) {
  #bdp-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
}
@media (max-width: 600px) {
  .bdp-valor-deuda { font-size: 1rem; }
  .bdp-nombres { font-size: .92rem; }
}

/* ============================================================
   BD PREDIAL — Vista DETALLE
   ============================================================ */
.bdp-det-section {
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1.5px solid rgba(6,64,43,.10);
}
.bdp-det-section-title {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: .80rem;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.bdp-det-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 16px;
}
.bdp-det-grid > div {
  min-width: 0;
  overflow-wrap: break-word;
  padding: 6px 0;
  border-bottom: 1px solid rgba(6,64,43,.06);
}
.bdp-det-grid b {
  display: block;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .5px;
  color: var(--primary);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.bdp-det-grid .val {
  font-size: .92rem;
  font-weight: 600;
  color: var(--text-main);
  word-break: break-word;
}
.bdp-det-bitacora {
  background:rgba(6,64,43,.05);
  border: 1.5px solid rgba(6,64,43,.12);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--text-main);
  max-height: 280px;
  overflow-y: auto;
}

/* Panel BD Predial: toolbar wrap en móvil */
@media (max-width: 600px) {
  #view-bdp-panel .panel-toolbar .panel-tab {
    flex: 1 1 calc(50% - 4px);
    justify-content: center;
    font-size: .74rem;
    padding: 7px 10px;
  }
  #view-bdp-panel .panel-toolbar .panel-tab img { width: 16px; height: 16px; }
}

/* ===== LOGIN: tabs + PIN ===== */
.login-tabs { display:flex; gap:8px; justify-content:center; margin:6px 0 14px; }
.login-tab {
  width:auto; padding:8px 16px; border-radius:var(--radius-xl);
  border:1.5px solid var(--input-border); background:rgba(var(--surface-rgb),.80);
  color:var(--text-sub); font-weight:700; font-size:.82rem; cursor:pointer; transition:.18s;
}
.login-tab:hover { background:rgb(var(--surface-rgb)); color:var(--primary); border-color:var(--primary); }
.login-tab.active {
  background:linear-gradient(135deg,#0a7a46,#06402B); color:#fff;
  border-color:transparent; box-shadow:0 4px 12px rgba(6,64,43,.28);
}
.pin-pad { display:flex; justify-content:center; gap:14px; margin:18px 0; }
.pin-dot {
  width:16px; height:16px; border-radius:50%;
  background:rgba(255,255,255,.7); border:2px solid rgba(6,64,43,.35); transition:all .15s;
}
.pin-dot.filled { background:var(--primary); border-color:var(--primary); transform:scale(1.1); }
.pin-keypad {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:10px; margin:16px auto 0; max-width:280px;
}
.pin-key {
  aspect-ratio:1.4; border-radius:14px; width:auto;
  background:rgba(var(--surface-rgb),.85); border:1.5px solid var(--input-border);
  font-size:1.5rem; font-weight:700; color:var(--primary);
  display:inline-flex; align-items:center; justify-content:center; transition:all .12s;
}
.pin-key:active { background:var(--primary); color:#fff; transform:scale(.94); }
.pin-key.action { font-size:1rem; background:transparent; border-color:transparent; color:var(--text-muted); }

/* ── MIS EXPEDIENTES: explorador de Drive ─────────────────── */
.bdp-exp-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bdp-exp-path {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-sub, #3d5248);
  background:rgba(6,64,43,.05);
  border: 1.5px solid rgba(6,64,43,.12);
  border-radius: 10px;
  padding: 8px 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bdp-exp-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  max-height: 56vh;
  padding-right: 4px;
}
.bdp-exp-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1.5px solid rgba(6,64,43,.12);
  border-radius: 12px;
  background:rgb(var(--surface-rgb));
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.bdp-exp-item.is-folder {
  cursor: pointer;
  background:rgba(124,58,237,.05);
  border-color: rgba(124,58,237,.25);
}
.bdp-exp-item.is-folder:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(124,58,237,.18);
  border-color: rgba(124,58,237,.5);
}
.bdp-exp-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex-shrink: 0;
}
.bdp-exp-name {
  flex: 1;
  min-width: 0;
  font-size: .86rem;
  font-weight: 600;
  color: var(--text-main, #1f2937);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bdp-exp-open {
  flex: 0 0 auto;
  width: auto !important;   /* anula el  button { width:100% }  global */
  border: none;
  cursor: pointer;
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .3px;
  color: #fff;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
  background: linear-gradient(135deg, #06b6d4, #0284c7);
  box-shadow: 0 2px 6px rgba(2,132,199,.3);
  transition: transform .12s ease, filter .12s ease;
}
.bdp-exp-open:hover { transform: translateY(-1px); filter: brightness(1.08); }
.bdp-exp-open:active { transform: translateY(0); }

/* Grupo de acciones (Abrir + Copiar) */
.bdp-exp-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Botón Copiar */
.bdp-exp-copy {
  flex: 0 0 auto;
  width: auto !important;   /* anula el  button { width:100% }  global */
  border: 1.5px solid #0284c7;
  cursor: pointer;
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .3px;
  color: #0284c7;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
  /* FASE 7: era #fff fijo y en modo oscuro quedaba un botón blanco. */
  background: rgba(var(--surface-rgb), 1);
  transition: transform .12s ease, filter .12s ease, background .12s ease, color .12s ease;
}
.bdp-exp-copy:hover { transform: translateY(-1px); background:rgba(2,132,199,.12); }
.bdp-exp-copy:active { transform: translateY(0); }

/* Estado: copiado con éxito */
.bdp-exp-copy.copied {
  background:linear-gradient(135deg, #16a34a, #15803d);
  border-color: transparent;
  color: #fff;
}
/* Estado: error al copiar */
.bdp-exp-copy.error {
  background:#dc2626;
  border-color: transparent;
  color: #fff;
}

/* Campo de filtro del explorador */
.bdp-exp-filter {
  position: relative;
  display: flex;
  align-items: center;
}
.bdp-exp-filter input {
  width: 100%;
  padding: 9px 34px 9px 14px;
  font-size: .85rem;
  border: 1.5px solid rgba(6,64,43,.18);
  border-radius: 10px;
  background:rgb(var(--surface-rgb));
  color: var(--text-main, #1f2937);
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.bdp-exp-filter input:focus {
  border-color: #0284c7;
  box-shadow: 0 0 0 3px rgba(2,132,199,.15);
}
.bdp-exp-filtro-clear {
  position: absolute;
  right: 6px;
  width: auto !important;   /* anula el  button { width:100% }  global */
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: .9rem;
  line-height: 1;
  color: var(--text-muted, #6b7280);
  padding: 4px 6px;
  border-radius: 6px;
  transition: color .12s ease, background .12s ease;
}
.bdp-exp-filtro-clear:hover { color: #dc2626; background:rgba(0,0,0,.04); }

/* Fecha de seguimiento + recordar */
.bdp-seg-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: .85rem;
  color: var(--text-main, #1f2937);
  text-transform: none;      /* anula el label uppercase global */
  letter-spacing: 0;
  margin: 10px 0 4px;
  cursor: pointer;
}
.bdp-seg-check input {
  width: auto;
  margin: 0;
  cursor: pointer;
}
.bdp-seg-aviso {
  font-size: .82rem;
  font-weight: 700;
  color: #b45309;
  /* FASE 7: amarillo fijo → tinte sobre la superficie, para el modo oscuro. */
  background:rgba(245,158,11,.14);
  border: 1.5px solid #fcd34d;
  border-radius: 10px;
  padding: 9px 12px;
}

/* Visor embebido del archivo */
.bdp-arch-frame {
  flex: 1;
  min-height: 340px;
  border: 1.5px solid rgba(6,64,43,.15);
  border-radius: 12px;
  overflow: hidden;
  background:#f8fafc;
}
.bdp-arch-frame iframe {
  width: 100%;
  height: 100%;
  min-height: 340px;
  border: 0;
  display: block;
}

/* Botón "Agregar" en el explorador del expediente */
.bdp-exp-add {
  flex: 0 0 auto;
  width: auto !important;
  border: none;
  cursor: pointer;
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .3px;
  color: #fff;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
  background:linear-gradient(135deg, #16a34a, #15803d);
  box-shadow: 0 2px 6px rgba(21,128,61,.3);
  transition: transform .12s ease, filter .12s ease;
}
.bdp-exp-add:hover { transform: translateY(-1px); filter: brightness(1.08); }
.bdp-exp-add:active { transform: translateY(0); }

/* ── Fix: Mis Expedientes → overlay claro + card sólida ──── */
#modal-bdp-expedientes {
  background:rgba(var(--surface-rgb),.30) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
#modal-bdp-expedientes .card {
  background:rgb(var(--surface-rgb)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 20px 60px rgba(6,64,43,.22) !important;
}