/* Bandeja · panel. Un solo tema (claro) a propósito: es una hoja de papel. */
:root {
  --papel: #F3F2EC;
  --hoja: #FFFFFF;
  --tinta: #17213A;
  --tinta-2: #3F4756;
  --gris: #6B7280;
  --linea: #E1DFD5;
  --linea-2: #C9C6B8;
  --rojo: #D4372B;
  --rojo-suave: #FBE9E7;
  --azul: #1F4FBF;
  --azul-suave: #E8EEFB;
  --verde: #168A5A;
  --verde-suave: #E4F3EC;
  --display: 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --cuerpo: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', Menlo, Consolas, monospace;
  --cat-clientes: #1F4FBF;
  --cat-leads: #168A5A;
  --cat-facturas: #B8741A;
  --cat-plataformas: #5C6470;
  --cat-seguridad: #D4372B;
  --cat-newsletters: #6B4FBB;
  --cat-promociones: #B8467A;
  --cat-personal: #8A7A1F;
  --cat-otros: #8E8A7A;
}
* { box-sizing: border-box; }
html { background: var(--papel); }
body { margin: 0; font: 15px/1.5 var(--cuerpo); color: var(--tinta); background: var(--papel); -webkit-font-smoothing: antialiased; }
a { color: var(--azul); }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

/* La franja de sobre aéreo: la firma visual de toda la página. */
.franja { height: 10px; background: repeating-linear-gradient(135deg, var(--rojo) 0 16px, #fff 16px 26px, var(--azul) 26px 42px, #fff 42px 52px); }

.cabecera { display: flex; align-items: center; gap: 24px; padding: 14px 24px; border-bottom: 1px solid var(--linea); background: var(--hoja); flex-wrap: wrap; }
.marca { text-decoration: none; color: var(--tinta); display: flex; flex-direction: column; line-height: 1; }
.marca-sello { font: 700 26px/1 var(--display); text-transform: uppercase; letter-spacing: .08em; }
.marca-sub { font: 400 11px/1.4 var(--mono); color: var(--gris); letter-spacing: .02em; margin-top: 3px; }
.nav { display: flex; gap: 2px; margin-left: auto; flex-wrap: wrap; }
.nav a { font: 600 15px/1 var(--display); text-transform: uppercase; letter-spacing: .1em; text-decoration: none; color: var(--tinta-2); padding: 9px 12px; border-radius: 4px; }
.nav a:hover { background: var(--papel); }
.nav a.activa { background: var(--tinta); color: #fff; }
.salir { margin-left: 8px; }

.contenido { max-width: 1040px; margin: 0 auto; padding: 28px 20px 70px; }

/* Tipografía de sección */
.titulo { font: 700 40px/1 var(--display); letter-spacing: .01em; margin: 0; text-transform: uppercase; }
.titulo small { display: block; font: 400 13px/1.4 var(--mono); color: var(--gris); text-transform: none; letter-spacing: 0; margin-top: 8px; }
.subtitulo { font: 700 14px/1 var(--display); text-transform: uppercase; letter-spacing: .14em; color: var(--tinta-2); margin: 32px 0 10px; padding-left: 10px; border-left: 4px solid var(--tinta); display: flex; align-items: center; gap: 10px; }
.subtitulo.rojo { border-color: var(--rojo); color: var(--rojo); }
.subtitulo.azul { border-color: var(--azul); color: var(--azul); }
.subtitulo .n { font: 500 12px var(--mono); color: var(--gris); letter-spacing: 0; }
.encabezado { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.encabezado-acciones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.linea-datos { font: 15px var(--cuerpo); color: var(--tinta-2); margin: 6px 0 0; }
.linea-datos b { color: var(--rojo); font-weight: 600; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.gris { color: var(--gris); }
p.nota { color: var(--tinta-2); margin: 6px 0 14px; max-width: 64ch; }

/* Tarjetas / hojas */
.hoja { background: var(--hoja); border: 1px solid var(--linea); border-radius: 6px; padding: 20px 22px; }
.hoja + .hoja { margin-top: 14px; }
.hoja h3 { font: 700 20px/1.1 var(--display); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 8px; }
.vacio { background: var(--hoja); border: 1px dashed var(--linea-2); border-radius: 6px; padding: 40px 28px; text-align: center; color: var(--tinta-2); }
.vacio h2 { font: 700 30px/1.05 var(--display); text-transform: uppercase; letter-spacing: .03em; margin: 0 0 8px; color: var(--tinta); }
.vacio p { max-width: 52ch; margin: 6px auto; }

/* Bandejas de clasificación */
.bandejas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.bandeja { text-decoration: none; color: var(--tinta); background: var(--hoja); border: 1px solid var(--linea); border-top: 4px solid var(--cat, var(--tinta)); border-radius: 4px; padding: 12px 14px 10px; display: flex; flex-direction: column; gap: 2px; transition: transform .12s ease, box-shadow .12s ease; }
.bandeja:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(23, 33, 58, .08); }
.bandeja .num { font: 700 34px/1 var(--display); }
.bandeja .nom { font: 600 12px/1.2 var(--display); text-transform: uppercase; letter-spacing: .1em; color: var(--tinta-2); }
.bandeja.cero { opacity: .55; }

/* Filas de correo */
.lista { background: var(--hoja); border: 1px solid var(--linea); border-radius: 6px; }
.fila { display: grid; grid-template-columns: 1fr auto; gap: 8px 18px; padding: 13px 18px; border-bottom: 1px solid var(--linea); align-items: start; }
.fila:last-child { border-bottom: 0; }
.fila-de { font: 400 12.5px/1.4 var(--mono); color: var(--gris); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.fila-de .quien { color: var(--tinta-2); font-weight: 500; }
.fila-asunto { font-weight: 600; font-size: 15.5px; line-height: 1.3; margin: 2px 0; }
.fila-asunto a { color: var(--tinta); text-decoration: none; }
.fila-asunto a:hover { text-decoration: underline; }
.fila-resumen { color: var(--tinta-2); font-size: 14.5px; }
.fila-accion { font: 600 12px/1.2 var(--display); text-transform: uppercase; letter-spacing: .08em; color: var(--rojo); margin-top: 4px; }
.fila-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 120px; }
.chip { display: inline-block; font: 600 11.5px/1 var(--display); text-transform: uppercase; letter-spacing: .1em; color: #fff; background: var(--cat, var(--gris)); padding: 5px 8px 4px; border-radius: 3px; }
.prio { font: 400 11.5px var(--mono); color: var(--gris); }
.prio.alta { color: var(--rojo); font-weight: 500; }
.sello { font: 700 12px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--rojo); border: 2px solid var(--rojo); padding: 4px 7px 3px; border-radius: 3px; transform: rotate(-3deg); display: inline-block; }
.marca-archivado { font: 400 11px var(--mono); color: var(--gris); }

/* Formularios */
.campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.campo label { font: 600 12px/1 var(--display); text-transform: uppercase; letter-spacing: .12em; color: var(--tinta-2); }
.campo .ayuda { font-size: 13px; color: var(--gris); }
.campo input, .campo select, .campo textarea { padding: 9px 11px; border: 1px solid var(--linea-2); border-radius: 4px; background: #fff; width: 100%; }
.campo textarea { min-height: 110px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--azul); outline: none; box-shadow: 0 0 0 3px var(--azul-suave); }
.campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.campos-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 16px; }
.casillas { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.casillas label { display: flex; align-items: center; gap: 6px; font: 14px var(--cuerpo); text-transform: none; letter-spacing: 0; color: var(--tinta); }
.interruptor { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.interruptor input { width: 18px; height: 18px; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.boton { font: 600 14px/1 var(--display); text-transform: uppercase; letter-spacing: .1em; padding: 11px 16px 10px; border-radius: 4px; border: 1px solid var(--tinta); background: var(--tinta); color: #fff; cursor: pointer; }
.boton:hover { background: #24304f; }
.boton:disabled { opacity: .5; cursor: default; }
.boton-suave { background: transparent; color: var(--tinta); }
.boton-suave:hover { background: var(--papel); }
.boton-rojo { background: transparent; color: var(--rojo); border-color: var(--rojo); }
.boton-rojo:hover { background: var(--rojo-suave); }
.boton-azul { background: var(--azul); border-color: var(--azul); }
.boton-azul:hover { background: #1a43a3; }
.boton-enlace { background: none; border: 0; color: var(--azul); padding: 0; text-transform: none; letter-spacing: 0; font: 500 14px var(--cuerpo); cursor: pointer; text-decoration: underline; }

/* Estados y etiquetas */
.estado { display: inline-flex; align-items: center; gap: 6px; font: 400 12px var(--mono); color: var(--tinta-2); }
.estado::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--gris); }
.estado.ok::before { background: var(--verde); }
.estado.error::before, .estado.reconectar::before { background: var(--rojo); }
.estado.corriendo::before { background: var(--azul); animation: latir 1s infinite; }
@keyframes latir { 50% { opacity: .3; } }
.aviso-inline { padding: 12px 14px; border-radius: 4px; font-size: 14px; margin: 10px 0; }
.aviso-inline.error { background: var(--rojo-suave); color: #8C1F16; }
.aviso-inline.ok { background: var(--verde-suave); color: #0F5B3C; }
.aviso-inline.info { background: var(--azul-suave); color: #163A8C; }
.paso { display: grid; grid-template-columns: 34px 1fr; gap: 10px; margin: 10px 0; }
.paso .n { font: 700 22px/1 var(--display); color: var(--rojo); }
.paso code, .copiable { font: 400 12.5px var(--mono); background: var(--papel); padding: 2px 6px; border-radius: 3px; word-break: break-all; }

/* Tablas */
table.tabla { width: 100%; border-collapse: collapse; background: var(--hoja); border: 1px solid var(--linea); border-radius: 6px; overflow: hidden; }
.tabla th { text-align: left; font: 600 11.5px/1 var(--display); text-transform: uppercase; letter-spacing: .12em; color: var(--gris); padding: 10px 12px; border-bottom: 1px solid var(--linea); background: #FAFAF7; }
.tabla td { padding: 10px 12px; border-bottom: 1px solid var(--linea); vertical-align: top; font-size: 14px; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla-scroll { overflow-x: auto; }

/* Filtros */
.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 14px; }
.filtros input, .filtros select { padding: 8px 10px; border: 1px solid var(--linea-2); border-radius: 4px; background: #fff; }
.filtros input[type="search"] { min-width: 220px; flex: 1; }

/* Login */
.login { max-width: 400px; margin: 60px auto 0; }
.login .hoja { padding: 30px 28px; }
.login h1 { font: 700 44px/1 var(--display); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 4px; }
.login p { color: var(--tinta-2); margin: 0 0 22px; }

/* Aviso flotante */
.aviso { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--tinta); color: #fff; padding: 12px 18px; border-radius: 6px; font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.2); max-width: min(92vw, 560px); z-index: 10; }
.aviso.error { background: var(--rojo); }

/* Resultados de la prueba */
.prueba-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.prueba-fila:last-child { border-bottom: 0; }

@media (max-width: 720px) {
  .cabecera { padding: 12px 16px; gap: 12px; }
  .nav { margin-left: 0; width: 100%; order: 3; }
  .nav a { padding: 8px 9px; font-size: 14px; }
  .salir { margin-left: auto; }
  .contenido { padding: 20px 14px 60px; }
  .titulo { font-size: 32px; }
  .fila { grid-template-columns: 1fr; }
  .fila-lado { flex-direction: row; align-items: center; min-width: 0; }
  .campos-2, .campos-3 { grid-template-columns: 1fr; }
  .prueba-fila { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .bandeja, .estado.corriendo::before { transition: none; animation: none; }
}

a.boton { text-decoration: none; display: inline-block; }
.deshabilitado { opacity: .5; pointer-events: none; }