* { box-sizing: border-box; }
body {
  margin: 0; font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #f4f5f7; color: #1a1d21; font-size: 14px;
}
header {
  background: #1e2a3a; color: #fff; display: flex;
  justify-content: space-between; align-items: center; padding: 10px 24px;
}
header .brand a { color: #fff; text-decoration: none; font-weight: 600; }
header nav { display: flex; gap: 14px; align-items: center; }
header .user { opacity: .8; }
.btn-link { color: #9fc3ee; text-decoration: none; }
main { max-width: 1280px; margin: 24px auto; padding: 0 24px; }
footer {
  text-align: center; color: #8a919c; font-size: 12px; padding: 24px;
}
h1 { font-size: 20px; margin: 8px 0 4px; }
h2 { font-size: 16px; }
.meta, .muted { color: #6b7280; }
.small { font-size: 12px; }
.breadcrumb a { color: #2563ab; text-decoration: none; }

.filters { display: flex; gap: 12px; align-items: center; margin: 16px 0; }
.filters input[type=search] {
  padding: 8px 12px; border: 1px solid #cbd2da; border-radius: 6px; width: 320px;
}
.filters button {
  padding: 8px 16px; border: 0; border-radius: 6px; background: #1e2a3a;
  color: #fff; cursor: pointer;
}
.chk { display: flex; gap: 6px; align-items: center; color: #444; }
.chk.destacado { color: #b02a2a; font-weight: 600; }
.aviso-filtro { background: #fdecec; color: #b02a2a; border-radius: 6px;
                padding: 8px 12px; }
.aviso-filtro.fecha { background: #eef4fd; color: #2563ab; }
.rango { display: flex; gap: 6px; align-items: center; color: #444; }
.rango input[type=date] { padding: 6px 8px; border: 1px solid #cbd2da;
                          border-radius: 6px; }
.btn-limpiar { color: #b02a2a; text-decoration: none; font-size: 13px; }
.btn-limpiar:hover { text-decoration: underline; }
.html-view { width: 100%; height: 72vh; border: 1px solid #dde3ea;
             border-radius: 6px; background: #fff; }
.adjuntos-box { background: #fff; border-radius: 8px; padding: 12px 16px;
                box-shadow: 0 1px 3px rgba(0,0,0,.08); margin-bottom: 16px; }
.adjuntos { list-style: none; margin: 4px 0 0; padding: 0; }
.adjuntos li { padding: 4px 0; border-bottom: 1px solid #f0f2f5; }
.adjuntos li:last-child { border-bottom: 0; }
.adjuntos a { color: #2563ab; text-decoration: none; font-weight: 600; }
.adjuntos a:hover { text-decoration: underline; }
details summary { cursor: pointer; color: #2563ab; margin-top: 10px; }
details pre { margin-top: 8px; }

table.lista {
  width: 100%; border-collapse: collapse; background: #fff;
  border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
table.lista th, table.lista td {
  padding: 8px 12px; text-align: left; border-bottom: 1px solid #eceef1;
  vertical-align: top;
}
table.lista thead th {
  background: #eef1f5; font-size: 12px; text-transform: uppercase;
  letter-spacing: .04em; color: #5b6470;
}
table.lista tr:hover td { background: #f7fafd; }
table.lista a { color: #2563ab; text-decoration: none; }
table.lista a:hover { text-decoration: underline; }
td.num, th.num { text-align: right; white-space: nowrap; }
td.fecha { white-space: nowrap; color: #555; }
td.remitente { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty { text-align: center; color: #999; padding: 32px !important; }
.bulk-row td { opacity: .6; }

.tag {
  display: inline-block; background: #eef1f5; border-radius: 10px;
  padding: 1px 8px; font-size: 12px; margin: 1px 2px; color: #445;
}
.tag.externo { background: #fdecec; color: #b02a2a; }
.tag.auto { background: #fff3d6; color: #8a6d1a; }
.tag.more { background: #dde3ea; }
.dir { font-size: 12px; white-space: nowrap; }
.dir.enviado { color: #b02a2a; font-weight: 600; }
.dir.recibido { color: #2563ab; }

.rel { border-radius: 4px; padding: 1px 6px; font-size: 11px; font-weight: 700;
       text-transform: uppercase; margin-right: 6px; }
.rel-alta { background: #fdecec; color: #b02a2a; }
.rel-media { background: #fff3d6; color: #8a6d1a; }
.rel-baja { background: #e8f4e8; color: #2e7d32; }

.correo-meta { background: #fff; border-radius: 8px; padding: 16px;
               box-shadow: 0 1px 3px rgba(0,0,0,.08); margin-bottom: 16px; }
table.kv th { text-align: right; color: #5b6470; padding: 3px 12px 3px 0;
              white-space: nowrap; vertical-align: top; font-weight: 600; }
table.kv td { padding: 3px 0; }
.hash { display: block; font-family: monospace; font-size: 11px; color: #9aa1ab; }

.resumen-box { background: #f0f6ff; border: 1px solid #c9ddf5; border-radius: 8px;
               padding: 12px 16px; margin-bottom: 16px; }
.cuerpo { background: #fff; border-radius: 8px; padding: 16px;
          box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.cuerpo pre { white-space: pre-wrap; word-break: break-word;
              font-family: inherit; margin: 0; max-height: 70vh; overflow-y: auto; }

.login-box { max-width: 360px; margin: 10vh auto; background: #fff;
             border-radius: 10px; padding: 32px; box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.login-box h1 { margin: 0 0 4px; }
.login-box .subtitle { color: #6b7280; margin-top: 0; }
.login-box label { display: block; margin: 14px 0 4px; color: #444; font-weight: 600; }
.login-box input { width: 100%; padding: 9px 12px; border: 1px solid #cbd2da;
                   border-radius: 6px; font-size: 14px; }
.login-box button { width: 100%; margin-top: 20px; padding: 10px; border: 0;
                    border-radius: 6px; background: #1e2a3a; color: #fff;
                    font-size: 15px; cursor: pointer; }
.error { background: #fdecec; color: #b02a2a; border-radius: 6px;
         padding: 8px 12px; margin-bottom: 8px; }
.resumen-snippet { max-width: 340px; font-size: 13px; }
.contactos { max-width: 340px; }

header .btn-link.destacado { color: #ffb3b3; font-weight: 700; }
.disclaimer { background: #fff8e6; border: 1px solid #f0d98a; border-radius: 6px;
              padding: 8px 12px; color: #7a5c00; font-size: 13px; }
.stats { display: flex; gap: 18px; flex-wrap: wrap; margin: 14px 0; }
.stat { background: #fff; border-radius: 8px; padding: 10px 16px;
        box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.stat .num { font-size: 20px; font-weight: 700; }
.stat.susp .num { color: #b02a2a; }
.filters select { padding: 8px 10px; border: 1px solid #cbd2da; border-radius: 6px; }
.cat-tag { font-size: 11px; color: #8a919c; text-transform: uppercase;
           letter-spacing: .03em; margin-top: 2px; }
.resumen-box.sospechoso { background: #fdecec; border-color: #e6b0b0; }
.score-badge { background: #1e2a3a; color: #fff; border-radius: 4px;
               padding: 1px 8px; font-size: 12px; font-weight: 700; }