/* ======================================================================
   PERFIL MACROJUEGOS — REFERENCIA (SAMAEL), SOLO MODO CLARO
   ----------------------------------------------------------------------
   Va DESPUÉS de css/perfil-macrojuegos-light.css y manda sobre ella.
   Puramente visual:
     - NO toca el navbar (nada de esta hoja apunta a .navbar).
     - NO toca los tamaños del avatar: ni .avatar ni su <img> reciben
       ancho, alto, aspect-ratio u object-fit acá. El avatar predefinido
       (257x403) y los avatares elegidos (327x504) siguen exactamente
       como los resuelven las hojas anteriores.
     - NO cambia IDs ni lógica. El comportamiento extra (icono de las
       pestañas, estado dentro de la tarjeta, pastilla ADMIN, tooltip del
       botón de amistad, animación del avatar) lo pone, sin pisar nada,
       js/perfil-referencia.js.
   ====================================================================== */

/* ---------- PÁGINA Y CONTENEDOR ---------- */

html[data-tema="claro"] body.mr-root {
  background: #2b4e99 !important;
}

html[data-tema="claro"] body.mr-root main.perfil {
  max-width: min(1610px, calc(100% - 24px)) !important;
  background: #f8f8f8 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 96px 14px 40px !important;
  position: relative !important;
}

/* La palabra "Anuncio" sobre el hueco de publicidad, como en la referencia. */
html[data-tema="claro"] body.mr-root main.perfil::before {
  content: "Anuncio";
  position: absolute;
  top: 64px;
  left: 0;
  right: 0;
  text-align: center;
  font: 700 11px/1 Verdana, Geneva, sans-serif;
  color: #4a4f93;
  pointer-events: none;
}

/* ---------- MIGAS + ACCIONES (petición de amistad) ---------- */

html[data-tema="claro"] body.mr-root .perfil-migas {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 6px !important;
  min-height: 50px;
}

html[data-tema="claro"] body.mr-root .perfil-volver {
  width: 46px !important;
  height: 46px !important;
  flex: 0 0 46px !important;
  border-radius: 50% !important;
  background: #4db6ea !important;
  color: #fff !important;
  font-size: 34px !important;
  line-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform .18s ease, background-color .18s ease !important;
}

html[data-tema="claro"] body.mr-root .perfil-volver:hover {
  background: #2fa3e0 !important;
  transform: translateX(-3px) scale(1.05);
}

html[data-tema="claro"] body.mr-root .perfil-migas-texto {
  flex: 1 1 auto;
  min-width: 0;
  font: 400 24px/1.15 Arial, Helvetica, sans-serif !important;
  color: #3d4a8c !important;
  text-transform: uppercase;
  letter-spacing: 0 !important;
}

html[data-tema="claro"] body.mr-root .perfil-migas-texto strong {
  color: #3a3f8c !important;
  font-weight: 700 !important;
}

/* La fila de acciones se muda (por JS) dentro de las migas, a la derecha. */
html[data-tema="claro"] body.mr-root .perfil-migas > .perfil-acciones {
  margin: 0 0 0 auto !important;
  flex: 0 0 auto;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  position: relative;
}

/* Botón: "Enviar petición amistad" */
html[data-tema="claro"] body.mr-root #agregarAmigo {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 8px 18px 8px 52px !important;
  border: 2px solid #febf01 !important;
  border-radius: 5px !important;
  background: linear-gradient(180deg, #ffd21f 0%, #ffc300 55%, #f7b500 100%) !important;
  box-shadow: 0 0 0 1px #3a2a00, 0 2px 3px rgba(0, 0, 0, .35) !important;
  color: #4a1e00 !important;
  font: 700 15px/1 Verdana, Geneva, Tahoma, sans-serif !important;
  letter-spacing: 0 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35) !important;
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease !important;
}

/* Icono: dos siluetas blancas con un más verde (SVG propio, sin emoji). */
html[data-tema="claro"] body.mr-root #agregarAmigo::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 36px;
  height: 26px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 26'%3E%3Ccircle cx='13' cy='13' r='7.5' fill='%23fff' stroke='%23d9a400' stroke-width='.8'/%3E%3Cpath d='M16 24v-5c0-3 2.5-5 5.5-5s5.5 2 5.5 5v5z' fill='%23fff' stroke='%23d9a400' stroke-width='.8'/%3E%3Ccircle cx='24' cy='7' r='4.6' fill='%23fff' stroke='%23d9a400' stroke-width='.8'/%3E%3Ccircle cx='8' cy='18' r='7' fill='%23fff' stroke='%2319a319' stroke-width='1.4'/%3E%3Cpath d='M8 14v8M4 18h8' stroke='%2319a319' stroke-width='2.2'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}

html[data-tema="claro"] body.mr-root #agregarAmigo:hover:not(:disabled),
html[data-tema="claro"] body.mr-root #agregarAmigo[data-mr-estado="enviar"]:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
  box-shadow: 0 0 0 1px #3a2a00, 0 5px 8px rgba(0, 0, 0, .35) !important;
}

html[data-tema="claro"] body.mr-root #agregarAmigo:active:not(:disabled) {
  transform: translateY(0);
  filter: brightness(.97);
}

/* Visitante sin sesión: el botón se ve igual que en la referencia (el
   JS del perfil sigue dejándolo deshabilitado; solo se le quita la
   opacidad inline). */
html[data-tema="claro"] body.mr-root #agregarAmigo[data-mr-estado="enviar"] {
  opacity: 1 !important;
}

/* Estados que no son "enviar" (ya amigos, solicitud enviada, aceptar):
   conservan los colores que les pone usuario.js, sin icono de "más". */
html[data-tema="claro"] body.mr-root #agregarAmigo:not([data-mr-estado="enviar"]) {
  padding-left: 18px !important;
}
html[data-tema="claro"] body.mr-root #agregarAmigo:not([data-mr-estado="enviar"])::before {
  display: none;
}

/* Bloquear: chico y discreto, para que el botón amarillo sea el protagonista. */
html[data-tema="claro"] body.mr-root #bloquearUsuario {
  margin: 0 !important;
  padding: 6px 10px !important;
  min-height: 0 !important;
  border: 1px solid #c9d2e3 !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: #8a2a2a !important;
  font: 700 11px/1.1 Verdana, Geneva, sans-serif !important;
  box-shadow: none !important;
}
html[data-tema="claro"] body.mr-root #bloquearUsuario:hover:not(:disabled) {
  background: #fdeaea !important;
}

/* Globo "¿Aún no tienes una cuenta…?" (lo crea el JS, solo a visitantes). */
.mr-ref-globo {
  position: absolute;
  right: 0;
  bottom: calc(100% + 9px);
  width: 220px;
  padding: 10px 12px;
  background: #fbfbfb;
  border: 1px solid #c4c4c4;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
  color: #777;
  font: 400 12.5px/1.3 Arial, Helvetica, sans-serif;
  text-align: left;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 30;
}
.mr-ref-globo::after {
  content: "";
  position: absolute;
  right: 38px;
  top: 100%;
  border: 6px solid transparent;
  border-top-color: #c4c4c4;
}
.mr-ref-globo.visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .mr-ref-globo { transition: none; }
}

/* ---------- COLUMNAS ---------- */

@media (min-width: 861px) {
  html[data-tema="claro"] body.mr-root .perfil-cuerpo {
    grid-template-columns: 418px minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: start !important;
  }
}

/* ---------- BARRA DE PESTAÑAS ---------- */

html[data-tema="claro"] body.mr-root .menu-perfil {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 2px 4px !important;
  margin: 0 !important;
  padding: 10px 8px 8px !important;
  background: #131c3d !important;
  border: 0 !important;
  border-bottom: 3px solid #f1a92f !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html[data-tema="claro"] body.mr-root .menu-perfil .tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 !important;
  padding: 5px 9px !important;
  border: 0 !important;
  border-radius: 3px !important;
  background: transparent !important;
  color: #fff !important;
  font: 700 15px/1.2 "Trebuchet MS", Verdana, Geneva, sans-serif !important;
  text-shadow: none !important;
  box-shadow: none !important;
  transition: background-color .18s ease, transform .18s ease !important;
}

html[data-tema="claro"] body.mr-root .menu-perfil .tab:hover {
  background: rgba(255, 255, 255, .14) !important;
  transform: translateY(-1px);
}

html[data-tema="claro"] body.mr-root .menu-perfil .tab.activa,
html[data-tema="claro"] body.mr-root .menu-perfil .tab.activa:hover {
  background: #5d8df0 !important;
  color: #fff !important;
}

html[data-tema="claro"] body.mr-root .menu-perfil .tab .mr-ico {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: currentColor;
}

/* ---------- NOMBRE + PASTILLA DE ROL ---------- */

html[data-tema="claro"] body.mr-root .perfil-datos-cabecera,
html[data-tema="claro"] body.mr-root .perfil-datos-cabecera.perfil-datos-cabecera-oculta {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 8px 0 6px !important;
  overflow: visible !important;
  clip: auto !important;
  border: 0 !important;
  border-bottom: 1px solid #9a9a9a !important;
  background: transparent !important;
}

html[data-tema="claro"] body.mr-root .perfil-datos-cabecera h1 {
  margin: 0 !important;
  padding: 0 !important;
  font: 700 26px/1.1 Verdana, Geneva, Tahoma, sans-serif !important;
  color: #0f3d5c !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

.mr-ref-rol {
  display: inline-block;
  margin-left: 2px;
  padding: 4px 16px 3px;
  border-radius: 14px;
  background: #181818;
  color: #ff4141;
  font: 700 14px/1.2 Verdana, Geneva, sans-serif;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* ---------- INICIO: caja de la biografía ---------- */

html[data-tema="claro"] body.mr-root #inicio .perfil-caja-info,
html[data-tema="claro"] body.mr-root #inicio .perfil-caja-info.datos {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 8px 0 0 !important;
  padding: 18px 20px 16px !important;
  background: #e6f1fc !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html[data-tema="claro"] body.mr-root #inicio .biografia {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font: 400 16px/1.45 "Courier New", Courier, monospace !important;
  color: #2c4a7a !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere;
}

html[data-tema="claro"] body.mr-root #inicio .perfil-btn-editar {
  margin-top: 14px !important;
}

/* ---------- TARJETA DEL AVATAR ----------
   Solo marco, capas decorativas y animación. Medidas del avatar: intactas. */

html[data-tema="claro"] body.mr-root .tarjeta-avatar {
  border: 3px solid #98e97b !important;
  border-radius: 9px !important;
  background: #f8f8f8 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Capa de decoración encima del avatar. */
html[data-tema="claro"] body.mr-root .tarjeta-avatar-chapas {
  position: absolute !important;
  inset: 0 !important;
  padding: 0 !important;
  z-index: 6 !important;
  pointer-events: none !important;
  display: block !important;
  overflow: hidden;
}

html[data-tema="claro"] body.mr-root .tarjeta-avatar-chapas > * {
  position: absolute !important;
  pointer-events: none !important;
}

/* Franja lila de arriba. */
html[data-tema="claro"] body.mr-root .tarjeta-avatar-chapas::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 28px !important;
  height: 30px !important;
  background: rgba(186, 132, 247, .82) !important;
  border: 0 !important;
  z-index: 2 !important;
  transition: transform .55s cubic-bezier(.6, 0, .3, 1), opacity .55s ease;
}

/* Tres corazones. */
html[data-tema="claro"] body.mr-root .tarjeta-avatar-chapas::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 66px !important;
  right: 14px !important;
  left: auto !important;
  width: 84px !important;
  height: 26px !important;
  background: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2033%2010%22%20shape-rendering=%22crispEdges%22%3E%3Cdefs%3E%3Cg%20id=%22g%22%3E%3Cpath%20d=%22M1%200L3%200L3%201L4%201L4%202L5%202L5%201L6%201L6%200L8%200L8%201L9%201L9%204L8%204L8%205L7%205L7%206L6%206L6%207L5%207L5%208L4%208L4%207L3%207L3%206L2%206L2%205L1%205L1%204L0%204L0%201L1%201Z%22%20fill=%22%23e50000%22%20stroke=%22%23111%22%20stroke-width=%221%22/%3E%3Cpath%20d=%22M1%201h1v1H1z%22%20fill=%22%23ff9a9a%22/%3E%3C/g%3E%3C/defs%3E%3Cuse%20href=%22%23g%22%20x=%220.5%22%20y=%221%22/%3E%3Cuse%20href=%22%23g%22%20x=%2211.5%22%20y=%221%22/%3E%3Cuse%20href=%22%23g%22%20x=%2222.5%22%20y=%221%22/%3E%3C/svg%3E") right center / contain no-repeat !important;
  z-index: 2 !important;
  transition: transform .55s cubic-bezier(.6, 0, .3, 1), opacity .45s ease;
}

/* Nivel: círculo lila arriba a la izquierda. El número se muestra desde
   data-mr-nivel (lo pone el JS a partir del texto real, que en
   usuario.html dice "⭐ Nivel N"); el texto original queda oculto. */
html[data-tema="claro"] body.mr-root .tarjeta-chapa-nivel.nivel {
  top: 3px !important;
  left: 6px !important;
  width: 76px !important;
  height: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 25%, #c15bff 0%, #a63cf0 55%, #8f2ad8 100%) !important;
  color: #fff !important;
  box-shadow: 0 3px 5px rgba(0, 0, 0, .35) !important;
  font-size: 0 !important;
  overflow: visible !important;
  z-index: 3 !important;
  transition: transform .55s cubic-bezier(.6, 0, .3, 1), opacity .45s ease;
}
html[data-tema="claro"] body.mr-root .tarjeta-chapa-nivel.nivel::after {
  content: attr(data-mr-nivel);
  font: 400 42px/1 Arial, Helvetica, sans-serif;
  letter-spacing: -2px;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
}
html[data-tema="claro"] body.mr-root .tarjeta-chapa-nivel.nivel[data-mr-largo="3"]::after { font-size: 32px; }
html[data-tema="claro"] body.mr-root .tarjeta-chapa-nivel.nivel[data-mr-largo="4"]::after { font-size: 25px; }

/* Estado (el JS lo mueve aquí desde debajo de la tarjeta). */
html[data-tema="claro"] body.mr-root .tarjeta-avatar-chapas > .mr-ref-estado {
  top: 22px !important;
  right: 12px !important;
  left: auto !important;
  bottom: auto !important;
  min-height: 0 !important;
  width: auto !important;
  padding: 6px 10px 5px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: rgba(82, 82, 82, .94) !important;
  color: #fff !important;
  font: 800 22px/1 Verdana, Geneva, sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .35) !important;
  z-index: 3 !important;
  transition: transform .55s cubic-bezier(.6, 0, .3, 1), opacity .45s ease;
}
html[data-tema="claro"] body.mr-root .tarjeta-avatar-chapas > .mr-ref-estado.online {
  background: rgba(42, 130, 52, .94) !important;
}

/* Banda inferior con el nombre. */
html[data-tema="claro"] body.mr-root .tarjeta-avatar-pie {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  bottom: 24px !important;
  height: 32px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 84px 0 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(204, 100, 204, .72) !important;
  border: 0 !important;
  box-shadow: none !important;
  z-index: 7 !important;
  pointer-events: none;
  transition: transform .55s cubic-bezier(.6, 0, .3, 1), opacity .45s ease;
}

html[data-tema="claro"] body.mr-root .tarjeta-avatar-nombre {
  width: auto !important;
  max-width: 100% !important;
  text-align: center !important;
  color: #fff !important;
  font: 700 32px/1 Verdana, Geneva, Tahoma, sans-serif !important;
  letter-spacing: 0 !important;
  text-shadow: 2px 0 0 #1c1c2a, -2px 0 0 #1c1c2a, 0 2px 0 #1c1c2a, 0 -2px 0 #1c1c2a,
               1px 1px 0 #1c1c2a, -1px 1px 0 #1c1c2a, 1px -1px 0 #1c1c2a, -1px -1px 0 #1c1c2a !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Estrella con los puntos de logros. */
html[data-tema="claro"] body.mr-root .tarjeta-avatar-medalla {
  position: absolute !important;
  right: -2px !important;
  bottom: -14px !important;
  width: 92px !important;
  height: 92px !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(180deg, #ffc800 0%, #ffbf00 70%, #f59a00 100%) !important;
  clip-path: polygon(50% 0%, 63% 31%, 98% 36%, 72% 59%, 80% 94%, 50% 76%, 20% 94%, 28% 59%, 2% 36%, 37% 31%) !important;
  color: #5b4a12 !important;
  font: 800 19px/1 Verdana, Geneva, sans-serif !important;
  text-shadow: none !important;
  z-index: 8 !important;
  transition: transform .55s cubic-bezier(.6, 0, .3, 1), opacity .45s ease !important;
}

/* ---------- ANIMACIÓN DEL AVATAR ----------
   Al pasar el mouse (o tocar la tarjeta), las capas se retiran y se ve el
   avatar limpio; al salir, vuelven. */

html[data-tema="claro"] body.mr-root .tarjeta-avatar:hover .tarjeta-avatar-chapas::before,
html[data-tema="claro"] body.mr-root .tarjeta-avatar.mr-limpio .tarjeta-avatar-chapas::before {
  transform: translateY(-90px);
  opacity: 0;
}
html[data-tema="claro"] body.mr-root .tarjeta-avatar:hover .tarjeta-avatar-chapas::after,
html[data-tema="claro"] body.mr-root .tarjeta-avatar.mr-limpio .tarjeta-avatar-chapas::after {
  transform: translateY(-110px);
  opacity: 0;
}
html[data-tema="claro"] body.mr-root .tarjeta-avatar:hover .tarjeta-chapa-nivel.nivel,
html[data-tema="claro"] body.mr-root .tarjeta-avatar.mr-limpio .tarjeta-chapa-nivel.nivel {
  transform: translateY(-110px);
  opacity: 0;
}
html[data-tema="claro"] body.mr-root .tarjeta-avatar:hover .tarjeta-avatar-chapas > .mr-ref-estado,
html[data-tema="claro"] body.mr-root .tarjeta-avatar.mr-limpio .tarjeta-avatar-chapas > .mr-ref-estado {
  transform: translateY(-100px);
  opacity: 0;
}
html[data-tema="claro"] body.mr-root .tarjeta-avatar:hover .tarjeta-avatar-pie,
html[data-tema="claro"] body.mr-root .tarjeta-avatar.mr-limpio .tarjeta-avatar-pie {
  transform: translateY(90px);
  opacity: 0;
}
html[data-tema="claro"] body.mr-root .tarjeta-avatar:hover .tarjeta-avatar-medalla,
html[data-tema="claro"] body.mr-root .tarjeta-avatar.mr-limpio .tarjeta-avatar-medalla {
  transform: translateY(120px) scale(.6) !important;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  html[data-tema="claro"] body.mr-root .tarjeta-avatar-chapas::before,
  html[data-tema="claro"] body.mr-root .tarjeta-avatar-chapas::after,
  html[data-tema="claro"] body.mr-root .tarjeta-chapa-nivel.nivel,
  html[data-tema="claro"] body.mr-root .tarjeta-avatar-chapas > .mr-ref-estado,
  html[data-tema="claro"] body.mr-root .tarjeta-avatar-pie,
  html[data-tema="claro"] body.mr-root .mr-ref-cinta,
  html[data-tema="claro"] body.mr-root .tarjeta-avatar-medalla {
    transition: none !important;
  }
}


/* ---------- ELEMENTOS QUE CREA EL JS ----------
   Fuera del modo claro no se ven: el modo oscuro queda como estaba. */

.mr-ref-rol,
.mr-ref-cinta,
.mr-ref-estado,
.menu-perfil .tab .mr-ico {
  display: none;
}

html[data-tema="claro"] body.mr-root .mr-ref-rol { display: inline-block; }
html[data-tema="claro"] body.mr-root .menu-perfil .tab .mr-emoji { display: none; }
html[data-tema="claro"] body.mr-root .menu-perfil .tab .mr-ico { display: inline-block; }

/* El estado real (debajo de la tarjeta) se oculta: lo muestra el espejo
   que está dentro de la tarjeta. */
html[data-tema="claro"] body.mr-root .perfil-meta-avatar .perfil-estado-online { display: none !important; }
html[data-tema="claro"] body.mr-root .tarjeta-avatar-chapas > .mr-ref-estado {
  display: block;
  position: absolute !important;
}

/* CINTA "ADMIN": solo existe en la tarjeta de quien es administrador
   (el JS la crea únicamente con esa insignia). */
html[data-tema="claro"] body.mr-root .tarjeta-avatar-chapas > .mr-ref-cinta {
  display: block;
  top: 0 !important;
  bottom: 0 !important;
  left: 19px !important;
  width: 42px !important;
  z-index: 1 !important;
  overflow: hidden;
  background: #ffd800;
  box-shadow: 0 0 2px rgba(0, 0, 0, .4);
  transition: opacity .55s ease;
}
html[data-tema="claro"] body.mr-root .mr-ref-cinta::before,
html[data-tema="claro"] body.mr-root .mr-ref-cinta::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 7px;
  background: repeating-linear-gradient(135deg, #1b1b1b 0 7px, transparent 7px 17px);
}
html[data-tema="claro"] body.mr-root .mr-ref-cinta::before { left: 0; }
html[data-tema="claro"] body.mr-root .mr-ref-cinta::after { right: 0; }
html[data-tema="claro"] body.mr-root .mr-ref-cinta span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  font: 900 19px/1 Arial Black, Arial, sans-serif;
  letter-spacing: 1px;
  color: #1b1b1b;
}
html[data-tema="claro"] body.mr-root .tarjeta-avatar:hover .tarjeta-avatar-chapas > .mr-ref-cinta,
html[data-tema="claro"] body.mr-root .tarjeta-avatar.mr-limpio .tarjeta-avatar-chapas > .mr-ref-cinta {
  opacity: 0;
}

/* ---------- LO QUE QUEDA DEBAJO DE LA TARJETA ---------- */

html[data-tema="claro"] body.mr-root .perfil-meta-avatar {
  min-height: 0;
  margin: 0 !important;
}
html[data-tema="claro"] body.mr-root .perfil-meta-avatar:empty,
html[data-tema="claro"] body.mr-root .perfil-meta-avatar:not(:has(*)) {
  display: none !important;
}

html[data-tema="claro"] body.mr-root .tarjeta-stats-titulo {
  background: #131c3d !important;
  border-bottom: 3px solid #f1a92f !important;
  color: #fff !important;
}

/* ---------- MÓVIL ---------- */

@media (max-width: 860px) {
  html[data-tema="claro"] body.mr-root main.perfil {
    padding: 70px 8px 30px !important;
  }
  html[data-tema="claro"] body.mr-root .perfil-migas {
    flex-wrap: wrap !important;
  }
  html[data-tema="claro"] body.mr-root .perfil-migas-texto {
    font-size: 15px !important;
  }
  html[data-tema="claro"] body.mr-root .perfil-migas > .perfil-acciones {
    margin: 4px 0 0 !important;
    width: 100%;
    justify-content: flex-end;
  }
  html[data-tema="claro"] body.mr-root .menu-perfil .tab {
    font-size: 13px !important;
    padding: 5px 7px !important;
  }
  html[data-tema="claro"] body.mr-root .perfil-datos-cabecera h1 {
    font-size: 22px !important;
  }
}