/* ============================================================
   Portal de proveedores · Grupo MR
   Tokens copiados de mr-design-handoff/design-system/tokens.css
   (sin webfont: se usa el stack de sistema). Componentes basados
   en kit.css, adaptados a PRIMERO TELÉFONO: una columna, botones
   de 44px o más, texto de 16px en inputs, menos densidad.
   ============================================================ */

:root {
  /* Marca */
  --mr-band:       #193c67;
  --mr-band-deep:  #122a4a;
  --mr-accent:     #0b5caf;
  --mr-accent-600: #094a8d;
  --mr-accent-50:  #eff6ff;
  --mr-accent-100: #dbeafe;
  --mr-accent-200: #bfdbfe;

  /* Superficie y borde */
  --mr-bg:         #f6f7fb;
  --mr-card:       #ffffff;
  --mr-panel:      #f9fafb;
  --mr-soft:       #f3f6fb;
  --mr-border:     #e5e7eb;
  --mr-border-strong: #cbd5e1;

  /* Texto */
  --mr-fg:         #1f2937;
  --mr-fg-strong:  #0f172a;
  --mr-fg-muted:   #6b7280;
  --mr-fg-on-band: #ffffff;

  /* Semántico */
  --mr-ok:         #15803d;
  --mr-ok-50:      #dcfce7;
  --mr-warn:       #b45309;
  --mr-warn-50:    #fef3c7;
  --mr-danger:     #b91c1c;
  --mr-danger-50:  #fee2e2;
  --mr-info:       #1e40af;
  --mr-info-50:    #dbeafe;

  /* Tipografía */
  --mr-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  --mr-text-sm:   12px;
  --mr-text-md:   13px;
  --mr-text-base: 14px;
  --mr-text-lg:   15px;
  --mr-text-xl:   16px;
  --mr-text-2xl:  18px;
  --mr-text-3xl:  20px;
  --mr-fw-regular: 400;
  --mr-fw-semibold: 600;
  --mr-lh-tight: 1.2;
  --mr-lh-snug:  1.35;
  --mr-lh-base:  1.5;

  /* Radio y sombra */
  --mr-radius-md: 8px;
  --mr-radius-lg: 10px;
  --mr-radius-xl: 12px;
  --mr-radius-pill: 999px;
  --mr-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.03);
  --mr-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.10);
  --mr-shadow-focus: 0 0 0 3px rgba(11, 92, 175, 0.25);

  /* Movimiento */
  --mr-dur-fast: .15s;
  --mr-dur-slow: .8s;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--mr-bg);
  color: var(--mr-fg);
  font-family: var(--mr-font-sans);
  font-size: var(--mr-text-xl);
  line-height: var(--mr-lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}
[hidden] { display: none !important; }
h1, h2, h3, p, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--mr-accent); }
a:hover { color: var(--mr-accent-600); }

/* Foco visible en todo lo interactivo */
:focus-visible {
  outline: 2px solid var(--mr-accent);
  outline-offset: 2px;
}
main:focus { outline: 0; }

.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar {
  position: absolute; left: 8px; top: -60px; z-index: 50;
  background: var(--mr-card); color: var(--mr-accent);
  padding: 10px 14px; border-radius: var(--mr-radius-md);
  border: 1px solid var(--mr-border);
}
.saltar:focus { top: 8px; }

/* ---------- Banda navy superior ---------- */
.band { background: var(--mr-band); color: var(--mr-fg-on-band); }
.band-in {
  max-width: 880px; margin: 0 auto; padding: 8px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.band-marca {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  color: var(--mr-fg-on-band); text-decoration: none;
}
.band-marca:hover { color: var(--mr-fg-on-band); }
.brand-mark { height: 40px; width: 40px; object-fit: contain; flex-shrink: 0; }
.band-titulo { font-size: var(--mr-text-2xl); font-weight: var(--mr-fw-semibold); line-height: var(--mr-lh-tight); }
.band-liga {
  color: var(--mr-fg-on-band); font-size: var(--mr-text-base); font-weight: var(--mr-fw-semibold);
  white-space: nowrap; padding: 12px 4px; text-underline-offset: 3px;
}
.band-liga:hover { color: var(--mr-fg-on-band); }
.band :focus-visible { outline-color: var(--mr-fg-on-band); }

/* ---------- Contenido ---------- */
.wrap { width: 100%; max-width: 880px; margin: 0 auto; padding: 16px 16px 24px; flex: 1 0 auto; }
.wrap.angosto { max-width: 520px; }

.card {
  background: var(--mr-card);
  border: 1px solid var(--mr-border);
  border-radius: var(--mr-radius-xl);
  box-shadow: var(--mr-shadow-sm);
  padding: 18px 16px;
  margin-bottom: 14px;
}
.card > * + * { margin-top: 12px; }

.titulo { font-size: var(--mr-text-3xl); font-weight: var(--mr-fw-semibold); line-height: var(--mr-lh-snug); color: var(--mr-fg-strong); }
.wrap > .titulo { margin: 4px 0 12px; }
.wrap > .muted { margin-bottom: 12px; }
.wrap > .acciones { margin: 16px 0; }
.wrap > p { margin-top: 12px; }
.seccion-titulo {
  font-size: var(--mr-text-2xl); font-weight: var(--mr-fw-semibold); line-height: var(--mr-lh-tight);
  color: var(--mr-accent); margin: 26px 0 10px;
}
.seccion-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 26px 0 10px; }
.seccion-cab .seccion-titulo { margin: 0; }
.muted { color: var(--mr-fg-muted); font-size: var(--mr-text-base); }
.fuerte { font-weight: var(--mr-fw-semibold); color: var(--mr-fg-strong); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Botones (44px o más de alto) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 16px;
  border-radius: var(--mr-radius-lg);
  border: 1px solid var(--mr-border-strong);
  background: var(--mr-card); color: var(--mr-fg);
  font: 600 16px/1.2 var(--mr-font-sans);
  cursor: pointer; text-decoration: none; text-align: center;
  transition: background var(--mr-dur-fast) ease, border-color var(--mr-dur-fast) ease;
  touch-action: manipulation;
}
.btn:hover { background: var(--mr-soft); color: var(--mr-fg); }
.btn.primary { background: var(--mr-accent); border-color: var(--mr-accent); color: #fff; }
.btn.primary:hover { background: var(--mr-accent-600); border-color: var(--mr-accent-600); color: #fff; }
.btn.danger { border-color: var(--mr-danger); color: var(--mr-danger); }
.btn.bloque { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn[aria-busy="true"]::before {
  content: ""; width: 16px; height: 16px; flex-shrink: 0;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: giro var(--mr-dur-slow) linear infinite;
}
.liga-btn {
  background: none; border: 0; padding: 12px 0; min-height: 44px;
  color: var(--mr-accent); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.liga-btn:hover { color: var(--mr-accent-600); }
.liga-btn:disabled { color: var(--mr-fg-muted); text-decoration: none; cursor: not-allowed; }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; }
/* Botón-etiqueta que envuelve un selector de archivos oculto */
label.btn:focus-within { outline: 2px solid var(--mr-accent); outline-offset: 2px; }
label.btn.apagado { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* Confirmación en línea: "¿Seguro? Sí, continuar / No" */
.confirma, .confirma-preg { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; max-width: 100%; }
.confirma-texto { font-size: var(--mr-text-lg); font-weight: var(--mr-fw-semibold); color: var(--mr-fg-strong); }
@keyframes giro { to { transform: rotate(360deg); } }

/* ---------- Formularios (16px para que iOS no haga zoom) ---------- */
.campo { display: block; }
.campo + .campo { margin-top: 12px; }
.campo-label { display: block; font-size: var(--mr-text-base); font-weight: var(--mr-fw-semibold); color: var(--mr-fg); margin-bottom: 6px; }
input[type="text"], input[type="email"], input[type="tel"], select {
  width: 100%; min-height: 46px; padding: 10px 12px;
  border: 1px solid var(--mr-border-strong); border-radius: var(--mr-radius-md);
  background: #fff; color: var(--mr-fg);
  font-family: inherit; font-size: 16px;
}
input:focus, select:focus { outline: 0; border-color: var(--mr-accent); box-shadow: var(--mr-shadow-focus); }
input:disabled { background: var(--mr-panel); color: var(--mr-fg-muted); cursor: not-allowed; }
.input-codigo {
  font-size: 28px !important; font-weight: var(--mr-fw-semibold); letter-spacing: .35em; text-align: center;
  font-variant-numeric: tabular-nums; min-height: 60px !important; padding-left: calc(12px + .35em) !important;
}
.casilla { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; cursor: pointer; }
.campo-nota { display: block; margin-top: 6px; }
.casilla input { width: 24px; height: 24px; margin: 0; flex-shrink: 0; accent-color: var(--mr-accent); }

/* ---------- Entrar con Google + separador "o" ---------- */
.google > * + * { margin-top: 12px; }
.google-btn { display: flex; justify-content: center; min-height: 44px; }
.separador { display: flex; align-items: center; gap: 12px; color: var(--mr-fg-muted); font-size: var(--mr-text-base); }
.separador::before, .separador::after { content: ""; flex: 1; border-top: 1px solid var(--mr-border); }
.lista-corta > li + li { margin-top: 4px; }

/* ---------- Pastillas de estado ---------- */
.pill {
  display: inline-flex; align-items: center; padding: 3px 10px;
  border-radius: var(--mr-radius-pill);
  font-size: var(--mr-text-md); font-weight: var(--mr-fw-semibold); line-height: 1.4; white-space: nowrap;
  background: var(--mr-soft); color: var(--mr-fg-muted); border: 1px solid var(--mr-border);
}
.pill.ok     { background: var(--mr-ok-50);     color: var(--mr-ok);     border-color: transparent; }
.pill.warn   { background: var(--mr-warn-50);   color: var(--mr-warn);   border-color: transparent; }
.pill.danger { background: var(--mr-danger-50); color: var(--mr-danger); border-color: transparent; }
.pill.info   { background: var(--mr-info-50);   color: var(--mr-info);   border-color: transparent; }
.pill.larga  { white-space: normal; border-radius: var(--mr-radius-lg); }

/* ---------- Avisos (banner con acento izquierdo) ---------- */
.nota {
  padding: 12px 14px; border-radius: var(--mr-radius-md);
  background: var(--mr-accent-50); border-left: 4px solid var(--mr-accent);
  color: var(--mr-fg);
}
.nota.warn   { background: var(--mr-warn-50);   border-left-color: var(--mr-warn); }
.nota.danger { background: var(--mr-danger-50); border-left-color: var(--mr-danger); }
.nota.ok     { background: var(--mr-ok-50);     border-left-color: var(--mr-ok); }
.nota > * + * { margin-top: 6px; }
.nota-titulo { font-weight: var(--mr-fw-semibold); color: var(--mr-fg-strong); }
.msg-error { color: var(--mr-danger); font-weight: var(--mr-fw-semibold); }
.msg-vacio:empty { display: none; }

/* ---------- Encabezado del expediente ---------- */
.exp-cab { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; margin: 4px 0 14px; }
.exp-cab .titulo { flex: 1 1 260px; }
.exp-rfc { color: var(--mr-fg-muted); font-size: var(--mr-text-lg); margin-top: 2px; }
.selector-prov { margin-bottom: 14px; }

/* ---------- Documentos ---------- */
.resumen { font-weight: var(--mr-fw-semibold); color: var(--mr-fg-strong); margin-bottom: 10px; }
.doc { padding: 14px 16px; margin-bottom: 10px; scroll-margin: 16px; }
.doc > * + * { margin-top: 8px; }
.doc.resaltado { border-color: var(--mr-accent); box-shadow: var(--mr-shadow-focus); }
.doc-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.doc-nombre { font-size: var(--mr-text-xl); font-weight: var(--mr-fw-semibold); color: var(--mr-fg-strong); line-height: var(--mr-lh-snug); }
.doc-acc { display: flex; gap: 10px; margin-top: 12px; }
.doc-acc .btn { flex: 1 1 0; }
.doc-progreso { display: flex; align-items: center; gap: 10px; font-weight: var(--mr-fw-semibold); color: var(--mr-accent); }
.doc-progreso::before {
  content: ""; width: 18px; height: 18px; flex-shrink: 0;
  border: 2px solid var(--mr-accent); border-right-color: transparent; border-radius: 50%;
  animation: giro var(--mr-dur-slow) linear infinite;
}

/* ---------- Zona para soltar documentos ---------- */
.zona {
  display: block; position: relative; text-align: center; cursor: pointer;
  padding: 20px 16px; margin-bottom: 10px;
  background: var(--mr-card); border: 1px dashed var(--mr-border-strong); border-radius: var(--mr-radius-xl);
  transition: background var(--mr-dur-fast) ease, border-color var(--mr-dur-fast) ease;
}
.zona:hover, .zona.sobre { border-color: var(--mr-accent); background: var(--mr-accent-50); }
.zona:focus-within { outline: 2px solid var(--mr-accent); outline-offset: 2px; }
.zona > span { display: block; }
.zona-titulo { font-weight: var(--mr-fw-semibold); color: var(--mr-accent); margin-bottom: 4px; }
.sueltos-caja:not(:empty) { margin-bottom: 14px; }
.sueltos-caja > .muted { margin-top: 8px; }
.suelto {
  background: var(--mr-card); border: 1px solid var(--mr-border); border-radius: var(--mr-radius-md);
  padding: 4px 14px 12px;
}
.suelto + .suelto { margin-top: 8px; }
.suelto > * + * { margin-top: 8px; }
.suelto-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.suelto-nombre { min-width: 0; overflow-wrap: anywhere; font-weight: var(--mr-fw-semibold); color: var(--mr-fg-strong); }
.suelto-cab .liga-btn { flex-shrink: 0; padding: 10px 0; }
.suelto .suelto-estado { margin-top: 0; }

/* ---------- Datos del proveedor ---------- */
.datos { display: grid; grid-template-columns: 1fr; gap: 12px 24px; }
.dato dt { font-size: var(--mr-text-base); color: var(--mr-fg-muted); }
.dato dd { color: var(--mr-fg-strong); }
.dato dd.vacio { color: var(--mr-fg-muted); }
.dato-acc .liga-btn { padding: 6px 0; min-height: 36px; font-size: var(--mr-text-lg); }
/* Formulario en línea (solicitudes de cambio) */
.panel {
  background: var(--mr-panel); border: 1px solid var(--mr-border); border-radius: var(--mr-radius-md);
  padding: 14px;
}
.panel > * + * { margin-top: 12px; }
.archivo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.archivo-nombre { min-width: 0; overflow-wrap: anywhere; }
.vinetas { list-style: disc; padding-left: 20px; }
.vinetas > li + li { margin-top: 4px; }
.subtitulo.sin-linea { border-top: 0; padding-top: 0; margin-top: 0 !important; }
.subtitulo { font-size: var(--mr-text-xl); font-weight: var(--mr-fw-semibold); color: var(--mr-fg-strong); padding-top: 14px; border-top: 1px solid var(--mr-border); margin-top: 16px !important; }

/* ---------- Listas (proveedores, personas, dispositivos) ---------- */
.lista > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 0; border-top: 1px solid var(--mr-border); }
.lista > li:first-child { border-top: 0; padding-top: 0; }
.lista > li:last-child { padding-bottom: 0; }
.lista-info { flex: 1 1 200px; min-width: 0; }
.prov-liga {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  color: inherit; text-decoration: none;
}
.prov-liga:hover { border-color: var(--mr-accent); color: inherit; }
.prov-liga .fuerte { color: var(--mr-accent); }

/* ---------- Aviso de privacidad ---------- */
.aviso-texto {
  white-space: pre-wrap; font-size: var(--mr-text-lg);
  background: var(--mr-panel); border: 1px solid var(--mr-border); border-radius: var(--mr-radius-md);
  padding: 12px 14px;
}
.aviso-texto.caja { max-height: 46vh; overflow-y: auto; }

/* ---------- Esqueletos de carga ---------- */
.esq { height: 16px; border-radius: 6px; background: var(--mr-border); animation: pulso 1.4s ease-in-out infinite; }
.esq-titulo { height: 24px; width: 60%; }
.esq-corta { width: 40%; }
.esq-boton { height: 44px; width: 140px; border-radius: var(--mr-radius-lg); }
@keyframes pulso { 50% { opacity: .5; } }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 40;
  max-width: calc(100vw - 32px);
  background: var(--mr-fg-strong); color: #fff;
  padding: 12px 18px; border-radius: var(--mr-radius-lg); box-shadow: var(--mr-shadow-lg);
  font-size: var(--mr-text-lg); font-weight: var(--mr-fw-semibold);
}

/* ---------- Pie ---------- */
.pie {
  max-width: 880px; width: 100%; margin: 0 auto; padding: 16px 16px 28px;
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center;
  color: var(--mr-fg-muted); font-size: var(--mr-text-base);
  border-top: 1px solid var(--mr-border);
}
.pie a { padding: 8px 0; text-underline-offset: 3px; }

/* ---------- De 720px en adelante: misma columna, mejor aprovechada ---------- */
@media (min-width: 720px) {
  .wrap { padding-top: 24px; }
  .card { padding: 20px; }
  .doc { display: grid; grid-template-columns: 1fr auto; column-gap: 20px; align-items: center; padding: 16px 20px; }
  .doc > * { grid-column: 1; }
  .doc > * + * { margin-top: 6px; }
  .doc-acc { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; align-self: center; }
  .doc-acc .btn { flex: 0 0 auto; min-width: 110px; }
  .doc-aviso { grid-column: 1 / -1; margin-top: 10px; }
  .datos { grid-template-columns: 1fr 1fr; }
  .dato.ancho { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .esq { animation: none; }
  .btn, .zona { transition: none; }
}