/* masmargen-mailer — panel de instrumentos, no SaaS de marketing.
   Ver 08-interfaz.md. Sin frameworks, sin CDN, radio de borde 3px en todo. */

@import url('tipografias/tipografias.css');

:root {
  --tinta: #1A1D21;
  --tinta-suave: #5A6169;
  --papel: #FBFAF8;
  --superficie: #FFFFFF;
  --borde: #E2DED7;
  --senal: #0B5D3B;
  --espera: #8A6410;
  --alto: #A13D2D;

  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-lg: 1.25rem;
  --t-xl: 1.75rem;

  --fuente-interfaz: 'Archivo', system-ui, sans-serif;
  --fuente-lectura: 'Source Serif 4', Georgia, serif;
  --fuente-datos: 'IBM Plex Mono', 'Courier New', monospace;

  --radio: 3px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fuente-interfaz);
  font-size: var(--t-base);
  line-height: 1.5;
}

h1, h2, h3, h4 { font-family: var(--fuente-interfaz); font-weight: 600; margin: 0 0 0.75rem; }
h1 { font-size: var(--t-xl); }
h2 { font-size: var(--t-lg); }
h3 { font-size: var(--t-base); }

p { margin: 0 0 0.75rem; }

a { color: var(--tinta); }
a:hover { color: var(--senal); }

.mono, .mono * { font-family: var(--fuente-datos); font-variant-numeric: tabular-nums; }

:focus-visible {
  outline: 2px solid var(--senal);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --- Layout --- */

.nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.75rem 1.25rem;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  flex-wrap: wrap;
}

.nav__marca {
  font-weight: 700;
  font-size: var(--t-lg);
  margin-right: auto;
}

.nav__enlaces {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  font-size: var(--t-sm);
}

.nav__enlaces a { text-decoration: none; color: var(--tinta-suave); }
.nav__enlaces a:hover, .nav__enlaces a[aria-current="page"] { color: var(--tinta); }

.nav__usuario { font-size: var(--t-sm); color: var(--tinta-suave); display: flex; gap: 0.75rem; align-items: center; }

.contenedor {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

.contenedor--ancho { max-width: 1200px; }

/* --- Tarjetas --- */

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

/* --- Botones --- */

.boton {
  font-family: var(--fuente-interfaz);
  font-size: var(--t-sm);
  font-weight: 600;
  border-radius: var(--radio);
  border: 1px solid var(--tinta);
  background: var(--superficie);
  color: var(--tinta);
  padding: 0.55rem 1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
}

.boton:hover { background: var(--papel); }
.boton:disabled { opacity: 0.45; cursor: not-allowed; }

.boton--primario { background: var(--tinta); color: var(--papel); }
.boton--primario:hover { background: #000; }
.boton--primario:disabled:hover { background: var(--tinta); }

.boton--peligro { border-color: var(--alto); color: var(--alto); }
.boton--peligro:hover { background: var(--alto); color: #fff; }

.acciones { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }

/* --- Formularios --- */

.campo { margin-bottom: 1rem; }
.campo label { display: block; font-size: var(--t-sm); font-weight: 600; margin-bottom: 0.35rem; }
.campo .ayuda { font-size: var(--t-xs); color: var(--tinta-suave); margin-top: 0.25rem; }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="file"], select, textarea {
  width: 100%;
  font-family: var(--fuente-interfaz);
  font-size: var(--t-base);
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--tinta);
}

input.mono { font-family: var(--fuente-datos); }
textarea { min-height: 6rem; }

.zona-arrastre {
  border: 2px dashed var(--borde);
  border-radius: var(--radio);
  padding: 2rem 1rem;
  text-align: center;
  color: var(--tinta-suave);
}

/* --- Tablas --- */

.tabla-envolver { overflow-x: auto; }

table.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
table.tabla caption { text-align: left; font-size: var(--t-xs); color: var(--tinta-suave); padding-bottom: 0.5rem; }
table.tabla th { text-align: left; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.02em; color: var(--tinta-suave); border-bottom: 1px solid var(--borde); padding: 0.5rem 0.6rem; }
table.tabla td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--borde); }
table.tabla tbody tr:hover { background: var(--papel); }
td.num, th.num { text-align: right; }

/* --- Estados --- */

.estado { font-weight: 600; }
.estado--enviado { color: var(--senal); }
.estado--pendiente, .estado--en_proceso { color: var(--espera); }
.estado--rebotado_duro, .estado--rebotado_suave, .estado--error, .estado--fallido { color: var(--alto); }
.estado--excluido, .estado--cancelado { color: var(--tinta-suave); }

/* --- Alertas --- */

.alerta {
  border: 1px solid var(--alto);
  border-left-width: 4px;
  border-radius: var(--radio);
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
  color: var(--tinta);
  background: var(--superficie);
}

.alerta--info { border-color: var(--tinta-suave); }

/* --- Hoja de despacho --- */

.despacho { font-family: var(--fuente-interfaz); }
.despacho__fila {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--borde);
}
.despacho__fila--indent { padding-left: 1.25rem; color: var(--tinta-suave); font-size: var(--t-sm); }
.despacho__fila:last-child { border-bottom: none; }
.despacho__numero { font-family: var(--fuente-datos); font-variant-numeric: tabular-nums; }
.despacho__reciben { font-size: var(--t-xl); font-weight: 700; }
.despacho__separador { border-top: 1px solid var(--borde); margin: 0.75rem 0; }

/* --- Vista previa de correo --- */

.vista-correo {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  margin-bottom: 1rem;
}
.vista-correo__cabecera {
  background: var(--papel);
  padding: 0.6rem 1rem;
  font-size: var(--t-sm);
  border-bottom: 1px solid var(--borde);
}
.vista-correo__cuerpo {
  font-family: var(--fuente-lectura);
  font-size: 1.05rem;
  padding: 1.25rem;
  line-height: 1.6;
}
.vista-correo__error { color: var(--alto); padding: 1.25rem; font-family: var(--fuente-interfaz); }

/* --- Editor --- */

.editor-marcador-aviso {
  color: var(--alto);
  font-weight: 600;
  font-size: var(--t-sm);
  margin-bottom: 0.5rem;
}

#editor-cuerpo {
  font-family: var(--fuente-lectura);
  font-size: 1.05rem;
  background: var(--superficie);
}

.ql-editor mark.marcador-nombre { background: #fff3c4; }

/* --- Utilidades --- */

.vacio {
  text-align: center;
  color: var(--tinta-suave);
  padding: 2.5rem 1rem;
}

.barra-filtros { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: end; margin-bottom: 1rem; }
.barra-filtros .campo { margin-bottom: 0; min-width: 10rem; }

.paginacion { display: flex; gap: 0.75rem; align-items: center; font-size: var(--t-sm); margin-top: 1rem; }

.progreso-barra { background: var(--borde); border-radius: var(--radio); height: 0.6rem; overflow: hidden; }
.progreso-barra__relleno { background: var(--senal); height: 100%; }

@media (max-width: 480px) {
  .contenedor { padding: 1rem 0.85rem 2rem; }
  .despacho__fila { flex-direction: column; gap: 0.15rem; }
}