/* FormatosMRT — hoja de estilos del panel */

:root{
  --tinta:#111827; --tinta-2:#4b5563; --tinta-3:#6b7280;
  --linea:#e5e7eb; --linea-2:#d1d5db;
  --fondo:#f6f7f9; --papel:#ffffff;
  --acento:#1d4ed8; --acento-claro:#eff4ff;
  --ok:#047857; --ok-fondo:#ecfdf5;
  --error:#b91c1c; --error-fondo:#fef2f2;
  --alerta:#92400e; --alerta-fondo:#fffbeb;
  --radio:8px;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--fondo); color:var(--tinta); font-size:14px; line-height:1.5;
}

a{color:var(--acento);text-decoration:none}
a:hover{text-decoration:underline}

/* ── Barra superior ─────────────────────────────────────────── */
.barra{
  display:flex;align-items:center;gap:24px;
  background:var(--papel);border-bottom:1px solid var(--linea);
  padding:0 20px;height:56px;position:sticky;top:0;z-index:50;
}
.marca{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--tinta)}
.marca:hover{text-decoration:none}
.logo{
  background:var(--acento);color:#fff;font-size:11px;font-weight:700;
  padding:4px 7px;border-radius:5px;letter-spacing:.5px;
}
.barra nav{display:flex;gap:4px;flex:1}
.barra nav a{
  padding:7px 12px;border-radius:6px;color:var(--tinta-2);font-weight:500;
}
.barra nav a:hover{background:var(--fondo);text-decoration:none}
.barra nav a.activo{background:var(--acento-claro);color:var(--acento)}
.usuario{display:flex;align-items:center;gap:12px;color:var(--tinta-3);font-size:13px}
.salir{color:var(--tinta-3)}

main{max-width:1180px;margin:0 auto;padding:24px 20px 60px}

/* ── Bloques ────────────────────────────────────────────────── */
.encabezado-seccion{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;margin-bottom:20px;flex-wrap:wrap;
}
.encabezado-seccion h1{font-size:22px;font-weight:650}
.encabezado-seccion p{color:var(--tinta-3);margin-top:3px}

.tarjeta{
  background:var(--papel);border:1px solid var(--linea);
  border-radius:var(--radio);padding:18px;margin-bottom:16px;
}
.tarjeta h2{font-size:15px;font-weight:650;margin-bottom:12px}
.tarjeta h2 .sufijo{font-weight:400;color:var(--tinta-3);font-size:13px}

.rejilla{display:grid;gap:16px}
.rejilla.dos{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.rejilla.tres{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* ── Tablas ─────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:13px}
th{
  text-align:left;font-weight:600;color:var(--tinta-3);font-size:12px;
  text-transform:uppercase;letter-spacing:.03em;
  padding:8px 10px;border-bottom:1px solid var(--linea);
}
td{padding:10px;border-bottom:1px solid var(--linea)}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:#fafbfc}
.num{text-align:right;font-variant-numeric:tabular-nums}
.tenue{color:var(--tinta-3)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}

/* ── Formularios ────────────────────────────────────────────── */
label{display:block;margin-bottom:12px;font-size:13px;font-weight:500;color:var(--tinta-2)}
input[type=text],input[type=password],input[type=number],input[type=file],select,textarea{
  width:100%;margin-top:5px;padding:8px 10px;
  border:1px solid var(--linea-2);border-radius:6px;
  font-family:inherit;font-size:14px;background:var(--papel);color:var(--tinta);
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--acento);box-shadow:0 0 0 3px var(--acento-claro);
}
textarea{min-height:120px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px}
.fila-campos{display:flex;gap:12px;flex-wrap:wrap}
.fila-campos>*{flex:1;min-width:180px}

.btn{
  display:inline-block;padding:8px 14px;border-radius:6px;border:1px solid var(--linea-2);
  background:var(--papel);color:var(--tinta);font-size:13px;font-weight:500;
  cursor:pointer;font-family:inherit;text-align:center;
}
.btn:hover{background:var(--fondo);text-decoration:none}
.btn.primario{background:var(--acento);border-color:var(--acento);color:#fff}
.btn.primario:hover{background:#1743b5}
.btn.peligro{color:var(--error);border-color:#fca5a5}
.btn.peligro:hover{background:var(--error-fondo)}
.btn.ancho{width:100%;margin-top:6px}
.btn.chico{padding:5px 9px;font-size:12px}
.acciones{display:flex;gap:6px;flex-wrap:wrap}

/* ── Avisos ─────────────────────────────────────────────────── */
.aviso{padding:10px 14px;border-radius:6px;margin-bottom:16px;font-size:13px}
.aviso.error{background:var(--error-fondo);color:var(--error);border:1px solid #fecaca}
.aviso.ok{background:var(--ok-fondo);color:var(--ok);border:1px solid #a7f3d0}
.aviso.alerta{background:var(--alerta-fondo);color:var(--alerta);border:1px solid #fde68a}

.etiqueta{
  display:inline-block;padding:2px 8px;border-radius:20px;
  font-size:11px;font-weight:600;background:var(--fondo);color:var(--tinta-2);
}
.etiqueta.mrt{background:var(--acento-claro);color:var(--acento)}
.etiqueta.ok{background:var(--ok-fondo);color:var(--ok)}
.etiqueta.off{background:#f3f4f6;color:var(--tinta-3)}

.vacio-estado{text-align:center;padding:48px 20px;color:var(--tinta-3)}
.vacio-estado h3{font-size:16px;color:var(--tinta);margin-bottom:6px}

/* ── Pantalla de acceso ─────────────────────────────────────── */
.pantalla-auth{
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;background:var(--fondo);padding:20px;
}
.caja-auth{
  background:var(--papel);border:1px solid var(--linea);border-radius:12px;
  padding:34px;width:100%;max-width:380px;text-align:center;
}
.caja-auth h1{font-size:20px;margin-bottom:4px}
.caja-auth .lema{color:var(--tinta-3);font-size:13px;margin-bottom:22px}
.caja-auth label{text-align:left}
.logo-grande{
  display:inline-block;background:var(--acento);color:#fff;
  font-weight:700;font-size:18px;padding:10px 14px;border-radius:10px;margin-bottom:14px;
}
.detalle-error{
  background:var(--error-fondo);color:var(--error);padding:12px;border-radius:6px;
  font-size:12px;text-align:left;overflow:auto;margin-bottom:16px;white-space:pre-wrap;
}

.pie{
  text-align:center;color:var(--tinta-3);font-size:12px;
  padding:20px;border-top:1px solid var(--linea);
}

/* ── Diálogos ───────────────────────────────────────────────── */
dialog{
  border:none;border-radius:12px;padding:0;max-width:520px;width:92%;
  box-shadow:0 20px 50px rgba(15,23,42,.25);
}
dialog::backdrop{background:rgba(15,23,42,.45)}
dialog .cuerpo{padding:22px}
dialog h2{font-size:17px;margin-bottom:14px}
dialog .pie-dialogo{
  display:flex;gap:8px;justify-content:flex-end;
  padding:14px 22px;border-top:1px solid var(--linea);background:#fafbfc;
}