:root { --fondo:#faf9f5; --tarjeta:#ffffff; --texto:#1f1e1d; --suave:#6b6a67; --borde:#e3e1da; --acento:#1f1e1d; --aviso:#fdecea; --aviso-texto:#8a1f17; }
* { box-sizing: border-box; }
body { margin:0; background:var(--fondo); color:var(--texto); font:16px/1.6 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
h1 { font-size:22px; font-weight:500; margin:0 0 16px; }
h2 { font-size:17px; font-weight:500; margin:0 0 10px; }
a { color:#185fa5; }
.barra { display:flex; justify-content:space-between; align-items:center; padding:12px 24px; background:var(--tarjeta); border-bottom:1px solid var(--borde); }
.marca { color:var(--texto); text-decoration:none; font-weight:500; }
.salir { display:flex; align-items:center; gap:14px; margin:0; }
.quien { color:var(--suave); font-size:14px; }
.enlace { background:none; border:0; color:#185fa5; cursor:pointer; font:inherit; padding:0; }
.contenedor { max-width:880px; margin:32px auto; padding:0 20px; }
.tarjeta { background:var(--tarjeta); border:1px solid var(--borde); border-radius:12px; padding:20px 24px; margin-bottom:16px; }
.angosta { max-width:380px; margin:64px auto; }
label { display:block; font-size:14px; color:var(--suave); margin:14px 0 6px; }
input { width:100%; padding:9px 12px; font:inherit; border:1px solid var(--borde); border-radius:8px; background:#fff; }
input:focus { outline:2px solid #85b7eb; }
button.primario { margin-top:20px; width:100%; padding:10px; font:inherit; color:#fff; background:var(--acento); border:0; border-radius:8px; cursor:pointer; }
.aviso { background:var(--aviso); color:var(--aviso-texto); padding:10px 12px; border-radius:8px; font-size:14px; }
.rejilla { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px; margin-bottom:16px; }
.metrica { background:#f1efe8; border-radius:8px; padding:14px 16px; display:flex; flex-direction:column; }
.etiqueta { font-size:13px; color:var(--suave); }
.valor { font-size:22px; font-weight:500; }
.nota { font-size:13px; color:var(--suave); }
table { width:100%; border-collapse:collapse; font-size:14px; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--borde); }
th { color:var(--suave); font-weight:400; }

.ayuda { color: var(--suave); font-size: 14px; margin: -8px 0 16px; }
.lista { display: flex; flex-direction: column; gap: 8px; }
.fila { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 10px; text-decoration: none; color: var(--texto); }
.fila:hover { border-color: #b4b2a9; }
.nombre { font-weight: 500; flex: 1; }
.etq { font-size: 12px; padding: 3px 10px; border-radius: 6px; background: #f1efe8; color: var(--suave); }
.etq.tipo { background: #e6f1fb; color: #0c447c; }
.etq.pendiente { background: #f1efe8; }
.etq.ok { background: #eaf3de; color: #27500a; }
.etq.alta { background: #fceaea; color: #791f1f; }
.etq.destino-enviar_automatico { background: #eaf3de; color: #27500a; }
.etq.destino-aprobar_borrador { background: #faeeda; color: #633806; }
.etq.destino-derivar { background: #faeeda; color: #633806; }
.etq.destino-archivar { background: #f1efe8; color: var(--suave); }
.etiquetas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.correo { white-space: pre-wrap; font-family: inherit; font-size: 14px; background: #f1efe8; border-radius: 8px; padding: 12px 14px; max-height: 260px; overflow-y: auto; }
.motivo { font-size: 14px; }
.detalle { font-size: 13px; color: var(--suave); margin: 6px 0; }
.lecciones { font-size: 13px; padding-left: 18px; }
.lecciones .nota { color: var(--suave); }
textarea { width: 100%; font: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 8px; resize: vertical; }
.fila-opciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 13px; margin: 10px 0; }
.fila-opciones select { width: auto; padding: 6px 8px; }
.botonera { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.botonera button { padding: 9px 14px; font: inherit; border: 1px solid var(--borde); background: #fff; border-radius: 8px; cursor: pointer; }
.botonera .primario.chico { background: var(--acento); color: #fff; border-color: transparent; }