/* == FUENTES LOCALES: Inter == */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter_18pt-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter_18pt-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter_18pt-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter_18pt-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter_18pt-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter_18pt-ExtraBold.ttf') format('truetype');
  font-weight: 800; font-style: normal; font-display: swap;
}

/* == VARIABLES CSS == */
:root {
  --bg-0:       #090c12;
  --bg-1:       #0f1320;
  --bg-2:       #161c2e;
  --bg-3:       #1e2640;
  --border:     rgba(255,255,255,0.07);
  --border-md:  rgba(255,255,255,0.12);
  --text-0:     #f0f2f7;
  --text-1:     #a8b0c8;
  --text-2:     #5e6a8a;
  --text-3:     #3a4560;
  --spam:       #ff4757;
  --spam-dim:   rgba(255,71,87,0.12);
  --spam-glow:  rgba(255,71,87,0.25);
  --ham:        #2ed573;
  --ham-dim:    rgba(46,213,115,0.10);
  --ham-glow:   rgba(46,213,115,0.22);
  --sosp:       #ffa502;
  --sosp-dim:   rgba(255,165,2,0.10);
  --accent:     #4a6cf7;
  --accent-dim: rgba(74,108,247,0.15);
  --font-display: 'Inter', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'Inter', sans-serif;
  --radius:     12px;
  --radius-lg:  20px;
}

/* == RESET Y BASE == */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background-color: #050505;
  color: var(--text-0);
  font-family: var(--font-body);
  height: 100vh;
  overflow: hidden;
}


/* == ESTRUCTURA PRINCIPAL == */
.app-shell {
  display: block;
  min-height: 100vh;
  position: relative;
  z-index: 1;
  max-width: 100vw;
  overflow-x: hidden;
  isolation: isolate;
}

/* == COLUMNA LATERAL FIJA: sidebar + tarjetas debajo == */
.sidebar-column {
  position: fixed;
  top: 18px;
  left: 18px;
  bottom: 18px;
  width: 260px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  z-index: 10;
}

/* == SIDEBAR == */
.sidebar {
  background: #121212;
  border: 1px solid #242424;
  border-radius: 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  height: fit-content;
  overflow: hidden;
}

/* == LOGOTIPO == */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #121212;
  padding: 28px 20px 20px;
  cursor: pointer;
  flex-shrink: 0;
}

.sidebar-divider {
  height: 1px;
  background: rgba(255,255,255,0.10);
  margin: 0 16px;
  flex-shrink: 0;
}
.table-wrap .sidebar-divider { margin: 0 20px; }

.logo-text {
  display: flex;
  flex-direction: column;
}

.logo-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--text-0);
  line-height: 1;
}

.logo-sub {
  font-size: 9px;
  font-weight: 500;
  color: #707070;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 3px;
}

/* == NAVEGACIÓN LATERAL == */
.nav {
  padding: 10px 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #2e3a5a #0f1320;
}

.nav::-webkit-scrollbar {
  width: 10px;
}

.nav::-webkit-scrollbar-track {
  background: #0f1320;
}

.nav::-webkit-scrollbar-thumb {
  background: #2e3a5a;
  border-radius: 8px;
  border: 2px solid #0f1320;
}

.nav::-webkit-scrollbar-thumb:hover {
  background: #4a6cf7;
}

.nav-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #707070;
  text-transform: uppercase;
  padding: 10px 10px 5px;
}

/* == BOTONES DE NAVEGACIÓN == */
.nav-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: #707070;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: left;
  width: 100%;
}

.nav-btn:hover              { background: var(--bg-3); color: var(--text-1); }
.nav-btn:hover .nav-ico     { stroke: var(--text-1); }
.nav-btn.active             { background: var(--accent-dim); }
.nav-btn.active .nav-ico    { stroke: var(--accent); }
.nav-btn.active .nav-text   { color: var(--text-0); font-weight: 600; }
.nav-ico {
  width: 16px; height: 16px;
  stroke: #707070; stroke-width: 1.75;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
  transition: stroke 0.15s;
}
.nav-text { flex: 1; }

/* == TARJETAS DEBAJO DEL SIDEBAR == */
.sidebar-footer-cards {
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex-shrink: 0;
}

.sidebar-user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #1a1a1a;
  border: 1px solid #2e2e2e;
  border-radius: 10px;
  color: #707070;
  font-size: 12px;
  overflow: hidden;
}

.sidebar-user-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.sidebar-logout-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #1a1a1a;
  border: 1px solid #2e2e2e;
  border-radius: 10px;
  color: #707070;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  font-family: var(--font-body);
}
.sidebar-logout-card:hover {
  background: rgba(255,71,87,0.10);
  border-color: rgba(255,71,87,0.30);
  color: var(--spam);
}
.sidebar-logout-card:hover .nav-ico { stroke: var(--spam); }

/* == TOPBAR == */
.topbar {
  background: #161616;
  border: 1px solid #2a2a2a;
  border-radius: 16px;
  padding: 0 28px;
  display: flex; align-items: center; justify-content: space-between;
  position: fixed;
  top: 18px;
  left: 298px; /* 18px sidebar + 260px width + 20px gap */
  right: 18px;
  height: 56px;
  min-width: 0;
  overflow: hidden;
  z-index: 9;
}

.topbar-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 300;
  letter-spacing: -0.01em;
}


/* == ÁREA DE CONTENIDO PRINCIPAL == */
.main {
  padding: 0 18px 0 0;
  overflow: hidden;
  min-width: 0;
  scrollbar-width: thin;
  scrollbar-color: #2e3a5a #0f1320;
}

.main::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.main::-webkit-scrollbar-track {
  background: #0f1320;
}

.main::-webkit-scrollbar-thumb {
  background: #2e3a5a;
  border-radius: 8px;
  border: 2px solid #0f1320;
}

.main::-webkit-scrollbar-thumb:hover {
  background: #4a6cf7;
}

/* == SECCIONES == */
.section { display: none; }
.section.visible { display: block; }

/* == TABLA DE CORREOS == */
.table-wrap {
  background: #121212;
  border: 1px solid #242424;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 110px); /* topbar top 18px + height 56px + gap 18px + bottom gap 18px */
  position: relative;
}

/* Fade gradient que se superpone a la parte inferior de la lista */
.table-wrap::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  background: linear-gradient(to bottom, transparent, #121212);
  pointer-events: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Zona scrollable de la lista de correos */
.table-scroll-wrap {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.table-scroll-wrap::-webkit-scrollbar { display: none; }

/* == BOTONES GENERALES == */
.btn {
  padding: 9px 18px;
  border-radius: 9px;
  border: none;
  font-family: var(--font-body);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover    { background: #3a5ce5; transform: translateY(-1px); }
.btn-primary:disabled { background: var(--bg-3); color: var(--text-2); cursor: not-allowed; transform: none; }

.btn-ghost { background: var(--bg-2); color: var(--text-1); border: 1px solid var(--border); }
.btn-ghost:hover { border-color: var(--border-md); color: var(--text-0); }


table { width: 100%; border-collapse: collapse; table-layout: auto; }

/* Sticky a nivel de sección: thead es el bloque contenedor del ::after */
thead {
  position: sticky;
  top: 0;
  z-index: 5;
}
thead::after {
  content: '';
  position: absolute;
  left: 20px; right: 20px;
  bottom: 0; height: 1px;
  background: rgba(255,255,255,0.16);
  pointer-events: none;
}

thead th {
  padding: 12px 20px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #707070;
  background: #121212;
}

tbody tr {
  position: relative;
  z-index: 0;
  transition: background 0.12s;
  cursor: pointer;
}
tbody tr:not(:last-child) { position: relative; }
tbody tr:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 20px; right: 20px;
  bottom: 0; height: 1px;
  background: rgba(255,255,255,0.04);
  pointer-events: none;
}
tbody tr:hover { background: #1a1a1a; }

td {
  padding: 14px 20px;
  font-size: 13.5px;
  vertical-align: middle;
}

.td-asunto {
  max-width: 220px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 500;
  color: var(--text-0);
}

.td-remite {
  max-width: 180px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-1); font-size: 12.5px;
}

.td-fecha {
  white-space: nowrap;
  color: var(--text-1); font-size: 12px;
}

/* == BADGES DE CLASIFICACIÓN == */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border-radius: 50px;
  font-size: 11.5px; font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
}

.badge-spam { background: var(--spam-dim); color: var(--spam); border: 1px solid rgba(255,71,87,0.3); }
.badge-ham  { background: var(--ham-dim);  color: var(--ham);  border: 1px solid rgba(46,213,115,0.3); }
.badge-sosp { background: var(--sosp-dim); color: var(--sosp); border: 1px solid rgba(255,165,2,0.3); }
.badge-ind  { background: var(--bg-3);     color: var(--text-2); border: 1px solid var(--border); }

.badge-dot { width: 6px; height: 6px; border-radius: 50%; }
.badge-spam .badge-dot { background: var(--spam); }
.badge-ham  .badge-dot { background: var(--ham);  }
.badge-sosp .badge-dot { background: var(--sosp); }

/* == PANEL DE CLASIFICACIÓN MANUAL == */
.classify-panel {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin-bottom: 24px;
}

.panel-title {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700;
  margin-bottom: 6px;
}
.panel-sub { font-size: 13px; color: var(--text-2); margin-bottom: 20px; }

.classify-form { display: flex; flex-direction: column; gap: 14px; }

textarea {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-0);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 14px 16px;
  resize: vertical;
  min-height: 100px;
  transition: border-color 0.18s;
  outline: none;
}
textarea:focus       { border-color: var(--accent); }
textarea::placeholder { color: var(--text-2); }

.result-box {
  display: none;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid var(--border);
  animation: fadeIn 0.3s ease;
  contain: layout style;
}
.result-box.visible { display: block; }

.result-box.result-loading {
  opacity: 0.92;
  pointer-events: none;
}

.result-main {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 14px;
}

.result-icon  { font-size: 40px; }
.result-title { font-family: var(--font-display); font-size: 24px; font-weight: 800; }

.prob-row { display: flex; gap: 16px; margin-top: 12px; }

.prob-item {
  flex: 1;
  background: var(--bg-2);
  border-radius: 9px;
  padding: 12px 16px;
}

.prob-label { font-size: 11px; color: var(--text-2); margin-bottom: 6px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.prob-value { font-family: var(--font-mono); font-size: 22px; font-weight: 500; }
.prob-value.spam { color: var(--spam); }
.prob-value.ham  { color: var(--ham);  }

/* == PANEL DE APRENDIZAJE (FEEDBACK) == */
.feedback-panel {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
}

.feedback-form { display: flex; gap: 10px; margin-top: 20px; }

.feedback-resumen {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.feedback-resumen-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}

.feedback-resumen-label {
  font-size: 12px;
  color: var(--text-1);
}

.feedback-resumen-value {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
}

.feedback-resumen-value.spam { color: var(--spam); }
.feedback-resumen-value.ham  { color: var(--ham); }

/* == FORMULARIO DE PALABRAS CLAVE == */
input[type="text"] {
  flex: 1;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-0);
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 11px 16px;
  outline: none;
  transition: border-color 0.18s;
}
input[type="text"]:focus       { border-color: var(--accent); }
input[type="text"]::placeholder { color: var(--text-2); font-family: var(--font-body); }

.tipo-select { display: flex; gap: 6px; }

.tipo-btn {
  padding: 11px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-1);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.15s;
}
.tipo-btn.spam.sel { background: var(--spam-dim); color: var(--spam); border-color: rgba(255,71,87,0.4); }
.tipo-btn.ham.sel  { background: var(--ham-dim);  color: var(--ham);  border-color: rgba(46,213,115,0.4); }

/* == BANNER DE CONEXIÓN GMAIL == */
.connect-banner {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 48px;
  text-align: center;
  margin-bottom: 24px;
}

.connect-icon  { display: flex; justify-content: center; margin-bottom: 16px; }
.connect-title { font-family: var(--font-display); font-size: 26px; font-weight: 800; margin-bottom: 8px; }
.connect-sub   { color: var(--text-1); font-size: 15px; margin-bottom: 28px; max-width: 400px; margin-inline: auto; line-height: 1.6; }

.btn-google {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 28px;
  background: #fff;
  color: #1a1a2e;
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: 15px; font-weight: 600;
  border: none; cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}
.btn-google:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); }

/* == ESTADOS DE CARGA Y VACÍO == */
.loading { text-align: center; padding: 48px; color: var(--text-2); font-size: 14px; }

.spinner {
  width: 32px; height: 32px;
  border: 2px solid var(--bg-3);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin: 0 auto 16px;
}

.empty      { text-align: center; padding: 48px; color: var(--text-2); }
.empty-icon { margin-bottom: 10px; }

/* == NOTIFICACIÓN TOAST == */
.toast {
  position: fixed; bottom: 28px; right: 28px;
  background: var(--bg-2);
  border: 1px solid var(--border-md);
  border-radius: 12px;
  padding: 14px 20px;
  font-size: 14px;
  color: var(--text-0);
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 100;
  max-width: 320px;
}
.toast.show { transform: translateY(0); opacity: 1; }

/* == ANIMACIONES == */
@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes pulse    { 0%,100% { opacity:1; } 50% { opacity:0.3; } }
@keyframes fadeIn   { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* Modal / FPM */
@keyframes overlayIn  { from { opacity: 0; }              to { opacity: 1; } }
@keyframes overlayOut { from { opacity: 1; }              to { opacity: 0; } }
@keyframes modalEnter { from { opacity: 0; transform: translateY(20px) scale(0.965); }
                        to   { opacity: 1; transform: translateY(0)    scale(1); } }
@keyframes fpmEnter   { from { opacity: 0; transform: translateX(24px); }
                        to   { opacity: 1; transform: translateX(0); } }
@keyframes fpmExit    { from { opacity: 1; transform: translateX(0); }
                        to   { opacity: 0; transform: translateX(40px); } }
/* Variantes móvil */
@keyframes fpmEnterMobile { from { opacity: 0; transform: translateY(20px); }
                            to   { opacity: 1; transform: translateY(0); } }
@keyframes fpmExitMobile  { from { opacity: 1; transform: translateY(0); }
                            to   { opacity: 0; transform: translateY(20px); } }

/* == INDICADOR DE ÚLTIMA ACTUALIZACIÓN == */
.last-updated {
  font-size: 11px;
  color: var(--text-2);
  padding: 6px 24px 10px;
  border-bottom: 1px solid var(--border);
}

/* == LAYOUT PRINCIPAL (base desktop) == */
.content-main {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  margin-left: 298px; /* 18px offset + 260px sidebar + 20px gap */
  width: calc(100% - 298px);
  padding-top: 92px; /* 18px topbar top + 56px topbar height + 18px gap */
}
.content-main.no-auth {
  padding-top: 18px;
}
.content-main.no-auth .main {
  padding: 0 18px 18px 0;
}
.content-main.no-auth .connect-banner {
  margin-bottom: 0;
}

/* == BOTÓN HAMBURGER (oculto en desktop) == */
.btn-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 7px;
  border-radius: 8px;
  flex-shrink: 0;
}
.btn-hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text-1);
  border-radius: 2px;
  transition: background 0.18s ease;
}
.btn-hamburger:hover span { background: var(--text-0); }

/* == OVERLAY DEL SIDEBAR MÓVIL == */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 16, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 450;
  display: none;
  animation: fadeIn 0.22s ease;
}
.sidebar-overlay.visible { display: block; }

/* == RESPONSIVE — TABLET (≤1100px) == */
@media (max-width: 1100px) {
  .sidebar-column { width: 220px; }
  .content-main { margin-left: 258px; width: calc(100% - 258px); padding-top: 92px; } /* 18+220+20; topbar: 18+56+18 */
  .sidebar .logo { padding: 24px 20px 20px; }
  .sidebar .nav  { padding: 12px; }
  .topbar { left: 258px; height: 56px; }
}

/* == RESPONSIVE — MÓVIL (≤768px) == */
@media (max-width: 768px) {
  /* Mostrar botón hamburger */
  .btn-hamburger { display: flex; }

  /* Columna lateral: desactivar en móvil, sidebar recupera posición fija propia */
  .sidebar-column {
    display: contents;
  }
  .sidebar-footer-cards {
    display: none;
  }
  /* Sidebar: cajón deslizable desde la izquierda (sin inset en móvil) */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    flex: none;
    min-height: unset;
    width: 260px;
    border-radius: 0 16px 16px 0;
    transform: translateX(-100%);
    transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 500;
    box-shadow: none;
  }
  .sidebar.sidebar-open {
    transform: translateX(0);
    box-shadow: 8px 0 48px rgba(0, 0, 0, 0.65);
  }

  /* Contenido ocupa todo el ancho */
  .content-main { margin-left: 0; width: 100%; padding-top: 90px; }

  /* Topbar compacta */
  .topbar { left: 18px; height: auto; padding: 14px 16px; gap: 8px; }
  .topbar-title {
    font-size: 15px;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #user-email { display: none; }
  /* Ocultar el badge del usuario (solo punto) para dar espacio al título */
  .user-badge { display: none; }

  /* Áreas de contenido */
  .main { padding: 12px; }

  /* Modal como bottom sheet (sube desde abajo) */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal {
    max-width: 100%;
    max-height: 92vh;
    border-radius: 20px 20px 0 0;
  }

  /* Paneles de herramientas */
  .classify-panel, .feedback-panel { padding: 20px 16px; }
  .feedback-form { flex-direction: column; }
  .feedback-resumen  { grid-template-columns: 1fr; }
  .correcciones-grid { grid-template-columns: 1fr; }
  .correcciones-grupo { height: 250px; }
  .teach-wrap { grid-template-columns: 1fr; }

  /* Modal stage en móvil: columna, modal ocupa todo el ancho */
  .modal-stage { flex-direction: column; align-items: stretch; }

  /* FPM clip: fuera del flujo flex, anclado al pie del overlay */
  .fpm-clip {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    width: auto !important;
    overflow: visible;
    pointer-events: none;
    transition: none;
  }
  .fpm-clip.open  { width: auto !important; pointer-events: all; }
  .fpm-clip.closing { width: auto !important; transition: none; }

  .feedback-panel-modal {
    width: 100%;
    margin-left: 0;
    transform: translateY(20px);
  }
  .fpm-clip.open .feedback-panel-modal {
    animation: fpmEnterMobile 0.30s cubic-bezier(0.34, 1.10, 0.64, 1) 0.18s both;
  }
  .fpm-clip.closing .feedback-panel-modal {
    animation: fpmExitMobile 0.22s ease both;
  }

  /* Banner de conexión Gmail */
  .connect-banner { padding: 32px 20px; }
  .connect-title  { font-size: 20px; }
}

/* == RESPONSIVE — TABLA MÓVIL (≤640px) == */
@media (max-width: 640px) {
  /* Convertir tabla en lista de tarjetas */
  .table-wrap table { display: block; }
  .table-wrap thead { display: none; }
  .table-wrap tbody { display: block; }

  .table-wrap tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    padding: 13px 16px;
    column-gap: 10px;
    row-gap: 4px;
    border-bottom: 1px solid var(--border);
  }
  .table-wrap tbody tr:last-child { border-bottom: none; }

  /* Fila 1, col 1: asunto */
  .table-wrap .td-asunto {
    grid-column: 1; grid-row: 1;
    max-width: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0;
    font-size: 13.5px;
  }

  /* Fila 2, col 1: remitente */
  .table-wrap .td-remite {
    grid-column: 1; grid-row: 2;
    max-width: none;
    padding: 0;
    font-size: 11.5px;
    color: var(--text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Col 2, filas 1–2: badge de clasificación */
  .table-wrap tbody tr > td:nth-child(4) {
    grid-column: 2; grid-row: 1 / 3;
    padding: 0;
    align-self: center;
  }

  .table-wrap .td-fecha { display: none; }
}

/* == LISTA DE CORRECCIONES == */
.correcciones-seccion { margin-top: 24px; }

.correcciones-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.correcciones-grupo {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 0;
  height: 320px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.correcciones-grupo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.correcciones-grupo-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.correcciones-grupo-count {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 50px;
  font-family: var(--font-mono);
  font-weight: 500;
}

.count-spam { background: var(--spam-dim); color: var(--spam); }
.count-ham  { background: var(--ham-dim);  color: var(--ham);  }

.correcciones-lista {
  list-style: none;
  padding: 8px 0;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.correcciones-lista::-webkit-scrollbar { display: none; }

/* Degradado inferior para indicar que hay más elementos al hacer scroll */
.correcciones-grupo::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 32px;
  background: linear-gradient(to bottom, rgba(22,28,46,0), rgba(22,28,46,0.96));
  pointer-events: none;
}

.correccion-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.correccion-item:last-child { border-bottom: none; }
.correccion-item:hover      { background: var(--bg-3); }

.correccion-palabra {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-0);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.correccion-input {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--bg-1);
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--text-0);
  padding: 4px 10px;
  flex: 1;
  outline: none;
  max-width: 200px;
}

.correccion-acciones { display: flex; gap: 6px; flex-shrink: 0; }

.btn-icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.btn-icon:hover          { background: var(--bg-3); color: var(--text-0); }
.btn-icon.editar:hover   { border-color: var(--accent); color: var(--accent); }
.btn-icon.eliminar:hover { border-color: var(--spam);   color: var(--spam);  }
.btn-icon.guardar:hover  { border-color: var(--ham);    color: var(--ham);   }
.btn-icon.cancelar:hover { border-color: var(--sosp);   color: var(--sosp);  }

.correcciones-empty { padding: 20px 16px; color: var(--text-2); font-size: 13px; text-align: center; }

/* == MÓDULO ENSEÑAR AL SISTEMA (CHIPS) == */
.teach-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 24px;
}

.teach-col {
  display: flex;
  flex-direction: column;
}

.teach-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
}

.teach-panel-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
}

.teach-count {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: #4A6CF7;
}

.teach-divider {
  height: 1px;
  background: var(--border);
  margin-bottom: 12px;
}

.teach-chips-area {
  flex: 1;
  min-height: 80px;
  max-height: 150px;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
  padding: 2px 0 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.teach-chips-area::-webkit-scrollbar { display: none; }

.teach-empty {
  font-size: 12px;
  color: var(--text-2);
  width: 100%;
  text-align: center;
  padding: 18px 0;
}

.teach-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 50px;
  border: 1px solid #4A6CF7;
  color: #4A6CF7;
  font-size: 12px;
  font-family: var(--font-mono);
  background: rgba(74, 108, 247, 0.08);
  cursor: default;
  transition: opacity 0.15s, background 0.15s;
  user-select: none;
}

.teach-chip.dimmed {
  opacity: 0.3;
  cursor: pointer;
}

.teach-chip.sel {
  opacity: 1;
  background: rgba(74, 108, 247, 0.22);
  cursor: pointer;
}

.teach-input-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.teach-input {
  flex: 1;
  min-width: 0;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-0);
  font-family: var(--font-body);
  font-size: 13px;
  padding: 7px 12px;
  outline: none;
  transition: border-color 0.15s;
}

.teach-input:focus { border-color: var(--accent); }

.teach-btn-add {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.teach-btn-add:hover { opacity: 0.85; }

.teach-btn-del {
  margin-top: 8px;
  width: 100%;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 0;
  cursor: pointer;
  transition: all 0.15s;
}

.teach-btn-del:hover { border-color: var(--spam); color: var(--spam); }
.teach-btn-del.modo-eliminar { border-color: var(--spam); color: var(--spam); background: var(--spam-dim); }
.teach-btn-del.confirmar     { border-color: var(--spam); color: #fff;       background: var(--spam); }


/* == MODAL DE CORREO == */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 16, 0.82);
  backdrop-filter: blur(12px) saturate(0.7);
  -webkit-backdrop-filter: blur(12px) saturate(0.7);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal-overlay.open {
  display: flex;
  animation: overlayIn 0.25s ease both;
}

/* Escenario flex que centra el duo modal + FPM */
.modal-stage {
  display: flex;
  align-items: flex-start;
  gap: 0;
  justify-content: center;
  width: 100%;
}

.modal {
  background: #121212;
  border: 1px solid #2e2e2e;
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 820px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  contain: layout;
}
.modal-overlay.open .modal {
  animation: modalEnter 0.40s cubic-bezier(0.34, 1.10, 0.64, 1) both;
}

/* Clip que se expande para revelar el FPM (desplaza el modal a la izquierda) */
.fpm-clip {
  flex-shrink: 0;
  width: 0;
  overflow: hidden;
  pointer-events: none;
  transition: width 0.40s cubic-bezier(0.4, 0, 0.2, 1);
  align-self: flex-start;
}
.fpm-clip.open {
  width: 300px; /* 280px panel + 20px gap-left */
  pointer-events: all;
}
.fpm-clip.closing {
  width: 0;
  transition: width 0.32s cubic-bezier(0.4, 0, 0.2, 1) 0.08s;
}

.modal-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid #242424;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
}

.modal-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.modal-asunto {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-0);
  line-height: 1.3;
  flex: 1;
}

.modal-close {
  background: #242424;
  border: none;
  color: var(--text-1);
  width: 32px; height: 32px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.modal-close:hover { background: var(--spam-dim); color: var(--spam); }

.modal-meta {
  padding: 12px 24px;
  border-bottom: 1px solid #242424;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  flex-shrink: 0;
  background: #1a1a1a;
}

.modal-meta-item { display: flex; flex-direction: column; gap: 2px; }

.modal-meta-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
}

.modal-meta-value { font-size: 13px; color: var(--text-1); }

.modal-clas-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-razon { font-size: 12px; color: var(--text-2); font-style: italic; }

.modal-body { flex: 1; overflow-y: auto; padding: 24px; scrollbar-width: none; -ms-overflow-style: none; }
.modal-body::-webkit-scrollbar { display: none; }

.modal-cuerpo-text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-1);
  white-space: pre-wrap;
  word-break: break-word;
}

.modal-cuerpo-html iframe {
  width: 100%;
  min-height: 400px;
  border: none;
  border-radius: 8px;
  background: #fff;
}

.modal-loading { text-align: center; padding: 48px; color: var(--text-2); }


/* == BOTONES DE CATEGORÍA == */
.nav-categoria {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: #707070;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: left;
  width: 100%;
  position: relative;
}
.nav-categoria:hover              { background: var(--bg-3); color: var(--text-1); }
.nav-categoria:hover .nav-ico    { stroke: var(--text-1); }
.nav-categoria.active            { background: var(--accent-dim); }
.nav-categoria.active .nav-ico   { stroke: var(--accent); }
.nav-categoria.active .nav-text  { color: var(--text-0); font-weight: 600; }
.nav-categoria .cat-icon { font-size: 16px; width: 24px; text-align: center; flex-shrink: 0; }
.nav-categoria .cat-badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: #707070;
  flex-shrink: 0;
}
.nav-categoria.active .cat-badge {
  color: var(--accent);
}

/* == PANEL FLOTANTE DE VERIFICACIÓN (FPM) == */
/* En desktop: inline dentro del flex duo, se anima desde la derecha */
.feedback-panel-modal {
  position: relative;
  width: 280px;
  margin-left: 20px;
  background: #121212;
  border: 1px solid #2e2e2e;
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  overflow: hidden;
  opacity: 0;
  transform: translateX(24px);
}
/* Entrada: se activa cuando fpm-clip tiene .open */
.fpm-clip.open .feedback-panel-modal {
  animation: fpmEnter 0.34s cubic-bezier(0.34, 1.10, 0.64, 1) 0.24s both;
}
/* Salida: se activa cuando fpm-clip tiene .closing */
.fpm-clip.closing .feedback-panel-modal {
  animation: fpmExit 0.22s ease both;
}

.fpm-header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid #242424;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-0);
  display: flex;
  align-items: center;
  gap: 8px;
}
.fpm-header svg {
  width: 15px;
  height: 15px;
  stroke: var(--accent);
  stroke-width: 1.75;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.fpm-body { padding: 14px 16px; }

.fpm-pregunta {
  font-size: 12.5px;
  color: var(--text-1);
  line-height: 1.5;
  margin-bottom: 12px;
}

.fpm-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 7px;
  border-radius: 4px;
  vertical-align: middle;
  line-height: 1.6;
}
.fpm-badge.ham  { background: var(--ham-dim);  color: var(--ham);  }
.fpm-badge.spam { background: var(--spam-dim); color: var(--spam); }
.fpm-badge.sosp { background: var(--sosp-dim); color: var(--sosp); }

.fpm-btn-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.fpm-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #242424;
  background: #1a1a1a;
  color: var(--text-1);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.15s;
}
.fpm-btn svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  pointer-events: none;
}
.fpm-btn:hover         { background: #242424; color: var(--text-0); }
.fpm-btn.correcto:hover { background: var(--ham-dim);  color: var(--ham);  border-color: rgba(46,213,115,0.4); }
.fpm-btn.incorrecto:hover { background: var(--spam-dim); color: var(--spam); border-color: rgba(255,71,87,0.4); }

.fpm-correccion {
  display: none;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid #242424;
  padding-top: 12px;
}
.fpm-correccion.visible { display: flex; }

.fpm-label {
  font-size: 11px;
  color: var(--text-2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.fpm-tipo-row { display: flex; gap: 6px; }

.fpm-tipo-btn {
  flex: 1;
  padding: 7px 8px;
  border-radius: 8px;
  border: 1px solid #242424;
  background: #1a1a1a;
  color: var(--text-1);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-mono);
  transition: all 0.15s;
}
.fpm-tipo-btn.spam.sel { background: var(--spam-dim); color: var(--spam); border-color: rgba(255,71,87,0.4); }
.fpm-tipo-btn.ham.sel  { background: var(--ham-dim);  color: var(--ham);  border-color: rgba(46,213,115,0.4); }

.fpm-input {
  background: #1a1a1a;
  border: 1px solid #242424;
  border-radius: 8px;
  color: var(--text-0);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 8px 12px;
  outline: none;
  transition: border-color 0.18s;
  width: 100%;
}
.fpm-input:focus { border-color: var(--accent); }
.fpm-input::placeholder { color: var(--text-2); font-family: var(--font-body); }

.fpm-guardar {
  padding: 9px;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 0.15s;
  width: 100%;
}
.fpm-guardar:hover { background: #3a5ce5; }

.fpm-ok {
  text-align: center;
  padding: 12px;
  color: var(--ham);
  font-size: 13px;
  font-weight: 600;
  display: none;
}
.fpm-ok.visible { display: block; }

/* == MENÚ CONTEXTUAL == */
.ctx-menu {
  position: fixed;
  z-index: 9000;
  background: #1a1a1a;
  border: 1px solid #2e2e2e;
  border-radius: 12px;
  padding: 6px;
  min-width: 210px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.3);
  display: none;
  animation: fadeIn 0.12s ease;
  overflow: hidden;
}

/* Evitar selección de texto al hacer long-press en móvil */
.table-wrap tbody tr {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.ctx-menu.visible { display: block; }

.ctx-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-body);
  color: #707070;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
  user-select: none;
}
.ctx-item:hover              { background: #242424; color: var(--text-0); }
.ctx-item.ctx-danger         { color: var(--spam); }
.ctx-item.ctx-danger:hover   { background: var(--spam-dim); color: var(--spam); }
.ctx-item.ctx-restore:hover  { background: var(--ham-dim);    color: var(--ham);    }
.ctx-item.ctx-accent:hover   { background: var(--accent-dim); color: var(--accent); }
.ctx-item .ctx-icon          { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; }
.ctx-ico {
  width: 15px; height: 15px;
  stroke: currentColor; stroke-width: 1.75;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}

.ctx-sep {
  height: 1px;
  background: #2e2e2e;
  margin: 4px 12px;
}

/* == INDICADOR DE CORREO NO LEÍDO == */
.dot-nuevo {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4a6cf7;
  box-shadow: 0 0 6px rgba(74,108,247,0.7);
  margin-right: 7px;
  flex-shrink: 0;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* == CLASIFICAR TEXTO — diseño de dos columnas == */
.classify-wrap {
  display: flex;
  gap: 18px;
  height: calc(100vh - 110px);
}

.classify-left  { flex: 1.5; display: flex; flex-direction: column; }
.classify-right { flex: 1;   display: flex; flex-direction: column; }

.panel {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
}

.panel-head { padding: 20px 24px; flex-shrink: 0; }
.panel-head .panel-title { font-size: 16px; margin-bottom: 0; }

.panel-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.classify-textarea {
  flex: 1;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.75;
  resize: none;
  outline: none;
  padding: 12px 24px 16px;
  min-height: unset;
  border-radius: 0;
}

.classify-textarea::placeholder { color: var(--text-2); }

.panel-foot {
  padding: 16px 24px;
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  position: relative;
}

.panel-foot::before {
  content: '';
  position: absolute;
  left: 20px; right: 20px; top: 0;
  height: 1px;
  background: rgba(255,255,255,0.10);
}

.btn-classify {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 24px;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-classify:hover { background: #3a5ce5; }

/* Tarjeta de resultado */
.result-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px;
  text-align: center;
  position: relative;
  overflow: hidden;
  gap: 0;
}

.result-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.result-card.ham-result::before  { background: radial-gradient(ellipse 90% 55% at 50% 0%, rgba(46,213,115,0.09) 0%, transparent 70%); }
.result-card.spam-result::before { background: radial-gradient(ellipse 90% 55% at 50% 0%, rgba(255,71,87,0.08) 0%, transparent 70%); }
.result-card.sosp-result::before { background: radial-gradient(ellipse 90% 55% at 50% 0%, rgba(255,165,2,0.08) 0%, transparent 70%); }

.result-icon-bg {
  width: 72px; height: 72px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  position: relative; z-index: 1;
}

.result-icon-bg.empty { background: rgba(94,106,138,0.12); border: 2px solid rgba(94,106,138,0.25); }
.result-icon-bg.spam  { background: rgba(255,71,87,0.12);  border: 2px solid rgba(255,71,87,0.25); }
.result-icon-bg.ham   { background: rgba(46,213,115,0.12); border: 2px solid rgba(46,213,115,0.22); }
.result-icon-bg.sosp  { background: rgba(255,165,2,0.12);  border: 2px solid rgba(255,165,2,0.22); }

.result-label {
  font-size: 28px; font-weight: 800;
  letter-spacing: -0.5px; line-height: 1;
  margin-bottom: 6px;
  position: relative; z-index: 1;
}

.result-label.spam { color: var(--spam); }
.result-label.ham  { color: var(--ham); }
.result-label.sosp { color: var(--sosp); }

.result-empty-msg {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
  max-width: 200px;
  position: relative; z-index: 1;
}


.result-sep {
  width: 40px; height: 1px;
  background: rgba(255,255,255,0.10);
  margin-bottom: 20px;
  position: relative; z-index: 1;
}

.result-desc {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.7;
  max-width: 240px;
  margin-bottom: 20px;
  position: relative; z-index: 1;
}


.btn-aceptar {
  margin-top: 24px;
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--border-md);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 32px;
  cursor: pointer;
  transition: all 0.15s;
  position: relative; z-index: 1;
}
.btn-aceptar:hover { background: var(--bg-3); color: var(--text-1); }

.classify-textarea:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-classify:disabled { background: var(--bg-3); color: var(--text-2); cursor: not-allowed; }

@media (max-width: 768px) {
  .classify-wrap {
    flex-direction: column;
    height: auto;
  }
  .classify-left, .classify-right { flex: none; }
  .panel { min-height: 300px; }
  .result-card { min-height: 300px; }
}

/* ── PANEL DE ESTADÍSTICAS ── */
/* Sección estadísticas: scroll vertical propio igual que .table-wrap */
#sec-estadisticas {
  height: calc(100vh - 110px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.09) transparent;
  padding-right: 4px;
}
#sec-estadisticas::-webkit-scrollbar { width: 4px; }
#sec-estadisticas::-webkit-scrollbar-track { background: transparent; }
#sec-estadisticas::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.09); border-radius: 99px; }
#sec-estadisticas::-webkit-scrollbar-thumb:hover { background: #4a6cf7; }

.stats-panel { padding: 24px 28px; max-width: 860px; }
.stats-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.stats-title { font-size: 15px; font-weight: 600; color: var(--text-1); }
.stats-refresh-btn { font-size: 12px; font-weight: 500; color: var(--accent); background: rgba(74,108,247,0.08); border: 1px solid rgba(74,108,247,0.2); border-radius: 6px; padding: 5px 14px; cursor: pointer; transition: background 0.15s; }
.stats-refresh-btn:hover { background: rgba(74,108,247,0.18); }
.stats-section-title { font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-3); margin: 28px 0 12px; }
.stats-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 4px; }
.stats-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.stats-card-val { font-size: 28px; font-weight: 700; color: var(--text-1); line-height: 1; }
.stats-card-lbl { font-size: 11px; font-weight: 500; color: var(--text-3); text-align: center; }
.stats-confidence { display: flex; gap: 10px; flex-wrap: wrap; }
.stats-conf-chip { display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 20px; min-width: 110px; }
.stats-conf-val { font-size: 22px; font-weight: 700; line-height: 1; }
.stats-conf-lbl { font-size: 11px; font-weight: 500; color: var(--text-3); }
.conf-ham { color: #2ed573; } .conf-spam { color: #ff4757; } .conf-sospechoso { color: #ffa502; }
.stats-chart { display: flex; align-items: flex-end; gap: 8px; height: 120px; padding: 0 4px; }
.stats-bar-group { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; }
.stats-bars { display: flex; align-items: flex-end; gap: 2px; height: 96px; }
.stats-bar { width: 14px; border-radius: 3px 3px 0 0; min-height: 3px; transition: height 0.3s; }
.bar-spam { background: #ff4757; } .bar-ham { background: #2ed573; } .bar-sospechoso { background: #ffa502; }
.stats-bar-lbl { font-size: 10px; color: var(--text-3); white-space: nowrap; }
.stats-spammers { display: flex; flex-direction: column; gap: 6px; }
.spammer-row { display: flex; align-items: center; gap: 10px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 14px; }
.spammer-count { font-size: 13px; font-weight: 700; color: #ff4757; min-width: 28px; text-align: right; }
.spammer-email { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-empty { font-size: 13px; color: var(--text-3); padding: 16px 0; }
@media (max-width: 768px) {
  .stats-cards { grid-template-columns: repeat(2, 1fr); }
  .stats-chart { gap: 4px; }
  #sec-estadisticas { height: calc(100vh - 90px); }
  .stats-panel { padding: 16px; }
}

/* == MODAL ATAJOS DE TECLADO == */
.overlay-atajos {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(5,8,16,0.82);
  z-index: 1100;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.overlay-atajos.open {
  display: flex;
  animation: overlayIn 0.25s ease both;
}
.modal-atajos {
  background: #121212;
  border: 1px solid #2e2e2e;
  border-radius: var(--radius-lg);
  width: 480px;
  max-width: 100%;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
  overflow: hidden;
  animation: modalEnter 0.35s cubic-bezier(0.34,1.10,0.64,1) both;
}
.ks-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
}
.ks-ttl {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-0);
}
.ks-ttl svg {
  width: 16px; height: 16px;
  stroke: var(--accent); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.ks-close-btn {
  width: 26px; height: 26px;
  border-radius: 6px;
  background: #242424;
  border: none;
  color: var(--text-1);
  font-size: 15px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ks-close-btn:hover { background: #2e2e2e; }
.ks-div {
  height: 1px;
  background: #242424;
  margin: 0 16px;
}
.ks-bdy {
  padding: 18px 22px 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 28px;
}
.ks-group-ttl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.ks-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}
.ks-desc { font-size: 12px; color: var(--text-1); }
.ks-keys { display: flex; gap: 4px; flex-shrink: 0; margin-left: 12px; }
.ks-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 5px;
  background: #242424;
  border: 1px solid #2e2e2e;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-0);
  font-family: var(--font-mono);
  white-space: nowrap;
}
.ks-ftr {
  padding: 10px 22px 14px;
  text-align: center;
  font-size: 11px;
  color: var(--text-2);
}
.ks-ftr strong { color: var(--text-0); }

/* == MULTI-SELECCIÓN == */
table tbody { user-select: none; }
tr.fila-seleccionada td { background: rgba(74,108,247,0.07); }