/*esto es mi estilo global reutilizable para  frontend publico y para usuarios logueados 
dasboard etc base del sistema*/
:root {

  /* =====================================
     🎨 COLORES PRINCIPALES (BRAND CORE)
     Base visual del sistema (UI global)
  ===================================== */
--mr-dark: #0c071d;
--mr-primary: #025f49;
--mr-accent: #28f8b3;
--mr-light: #f8f9fa;
--mr-white: #ffffff;

--mr-dark-b: #070412;
--mr-primary-b: #014737;
--mr-accent-b: #10d69a;

--mr-dark-a: #1a1433;
--mr-primary-as:  #018d63;
--mr-accent-as: #45f8c2;
--mr-primary-a: rgba(2,95,73,0.10);
--mr-accent-a: rgba(40,248,179,0.12);

--mr-success: #059669;
--mr-success-b: #047857;

--mr-warning: #f59e0b;
--mr-warning-b: #d97706;

--mr-danger: #dc2626;
--mr-danger-b: #b91c1c;

--mr-info: #0891b2;
--mr-info-b: #0e7490;

--mr-navy-a: #fae8ff;
--mr-navy: #9333ea;
--mr-navy-b: #581c87;

--mr-link-a-rgb: rgba(20,184,166,0.12);
 --mr-link-a: #ccfaef;
--mr-link: #14b8a6;
--mr-link-b: #0d9488;

  --mr-aqua-bg: #03a37b;
  --mr-aqua: #ccfaef;


/* GRAYS DE SISTEMA */
--mr-gray-50:  #f9fafb;
--mr-gray-100: #f3f4f6;
--mr-gray-200: #e5e7eb;

--mr-gray:     #d1d5db;

--mr-gray-500: #9ca3af;
--mr-gray-600: #6b7280;
--mr-gray-700: #4b5563;
--mr-gray-800: #1f2937;
--mr-gray-900: #111827;


  --mr-red: #ef4444;          /* rojo moderno (alerta) */
    --mr-red-light: #fee2e2;
  --mr-red-soft: #fca5a5;
  --mr-orange: #f97316;       /* naranja energía */
    --mr-orange-light: #ffedd5;
  --mr-orange-soft: #fdba74;

  --mr-amber: #f59e0b;        /* amarillo cálido */
    --mr-amber-light: #fef3c7;
  --mr-yellow: #eadb08;       /* amarillo sólido */
  --mr-yellow-light: #fef9c3;
  --mr-green: #22c55e;        /* verde éxito */
    --mr-green-light: #dcfce7;
  --mr-lime: #84cc16;         /* verde lechuga moderno */
  --mr-lime-light: #ecfccb;
  --mr-blue: #3b82f6;         /* azul principal UI */
    --mr-blue-light: #dbeafe;

  --mr-sky: #0ea5e9;          /* celeste limpio */
    --mr-sky-light: #e0f2fe;

  --mr-cyan: #06b6d4;         /* turquesa moderno */
    --mr-cyan-light: #cffafe;

  --mr-purple: #8b5cf6;       /* lila moderno */
    --mr-purple-light: #ede9fe;

  --mr-pink: #ec4899;         /* rosado UI */
  --mr-pink-light: #fbcfe8;  /* suave, elegante */
--mr-pink-vivid: #ff4fa3;  /* más brillante tipo “neon soft” */
  --mr-soft-pink: #f093fb;
 
--mr-rose: #f43f5e;         /* rojo rosado elegante */
    --mr-rose-light: #ffe4e6;

  --mr-brown: #92400e;        /* café UI */
    --mr-brown-light: #fef3c7;

  --mr-slate: #64748b;        /* gris azulado universal */
    --mr-slate-light: #f1f5f9;


  /* =========================
     ✨ NEON CORE (SOFT)
  ========================= */

  --mr-neon-green: #28f8b3;   /* tu accent */
  --mr-neon-blue: #3b82f6;
  --mr-neon-purple: #8b5cf6;
  --mr-neon-pink: #ff4fa3;
  --mr-neon-cyan: #06b6d4;


/* =========================
   🎯 BRAND CORE
========================= */
--mr-primary-rgb: 2, 95, 73;
--mr-accent-rgb: 40, 248, 179;
--mr-dark-rgb: 12, 7, 29;
--mr-gray-rgb: 209, 213, 219;
/* =========================
   ⚪ NEUTROS
========================= */
--mr-slate-rgb: 100, 116, 139;
/* =========================
   🔴 RED / STATES
========================= */
--mr-red-rgb: 239, 68, 68;
--mr-orange-rgb: 249, 115, 22;
--mr-amber-rgb: 245, 158, 11;
--mr-yellow-rgb: 234, 179, 8;

--mr-green-rgb: 34, 197, 94;
--mr-lime-rgb: 132, 204, 22;
--mr-blue-rgb: 59, 130, 246;
--mr-sky-rgb: 14, 165, 233;
--mr-cyan-rgb: 6, 182, 212;

--mr-purple-rgb: 139, 92, 246;
--mr-pink-rgb: 236, 72, 153;
--mr-rose-rgb: 244, 63, 94;

--mr-brown-rgb: 146, 64, 14;
/* =========================
   🌑 SOFT OVERLAYS (A VARIANTS)
========================= */
--mr-primary-a-rgb: 2, 95, 73;
--mr-accent-a-rgb: 40, 248, 179;
--mr-dark-a-rgb: 12, 7, 29;


--mr-neongr: linear-gradient(
  135deg,
  var(--mr-neon-green) 0%,
  var(--mr-neon-cyan) 25%,
  var(--mr-neon-blue) 50%,
  var(--mr-neon-purple) 75%,
  var(--mr-neon-pink) 100%
);

--mr-darkgr: linear-gradient(
  135deg,
  var(--mr-dark) 0%,
  var(--mr-dark-a) 55%,
  var(--mr-primary-b) 80%
);

   --mr-darkgr-a: linear-gradient(
    135deg,
    var(--mr-accent-b),
    var(--mr-primary-a),
    var(--mr-primary-b) 140%
  );

--mr-primarygr: linear-gradient(
  135deg,
  var(--mr-dark) 0%,
  var(--mr-primary-b) 40%,
  var(--mr-primary) 70%,
  var(--mr-accent) 120%
);


--mr-accentgr: linear-gradient(
  135deg,
  var(--mr-primary) 0%,
  var(--mr-accent) 60%,
  var(--mr-primary-a) 120%
);
--mr-accentgr-a: linear-gradient(
  135deg,
  var(--mr-accent-b) 0%,
  var(--mr-primary) 45%,
  var(--mr-accent) 75%,
  rgba(40, 248, 179, 0.146) 120%
);
--mr-sidebar-bg:
  radial-gradient(
    circle at 15% 10%,
    rgba(40, 248, 224, 0.205),
    transparent 35%
  ),

  radial-gradient(
    circle at 105% 105%,
    rgba(17, 237, 204, 0.26),
    transparent 35%
  ),

  /* ✨ textura suave */
  radial-gradient(
    rgba(255,255,255,0.025) 1px,
    transparent 1px
  ),

  linear-gradient(
    180deg,
    #0c071d 0%,
    #0f0a24 40%,
    #050a11 100%
  );

--mr-sidebar-b2g:
  radial-gradient(
    circle at 15% 10%,
    rgba(40, 248, 224, 0.205),
    transparent 35%
  ),
  radial-gradient(
    circle at 105% 105%,
    rgba(17, 237, 204, 0.26),
    transparent 35%
  ),
  linear-gradient(
    180deg,
    #0c071d 0%,
    #0f0a24 40%,
    #050a11 100%
  );
--mr-navbar-bg:

  /* 💡 glow superior derecho */
  radial-gradient(
    circle at 95% 5%,
    rgba(40, 248, 224, 0.16),
    transparent 24%
  ),

  /* 💡 glow suave izquierdo */
  radial-gradient(
    circle at 10% 10%,
    rgba(107, 246, 225, 0.05),
    transparent 30%
  ),

  /* ✨ textura suave */
  radial-gradient(
    rgba(255, 255, 255, 0.083) 1px,
    transparent 1px
  ),

  /* 🌑 base dark */
  linear-gradient(
    180deg,
    #050513 0%,
    #070a1d 45%,
    #050a11 100%
  );
--mr-footer-bg: linear-gradient(
  180deg,
  #f7fffc 0%,
  #eef8f4 45%,
  #e5f7f1 100%
);


--mr-bodygr: linear-gradient(
  180deg,
  #f8fafc 0%,
  #eef5f3 32%,
  #e3f6f0 68%,
  #f7fffc 100%
);


--mr-tablebgr: linear-gradient(
  180deg,
  rgba(12, 7, 29, 0.95) 0%,
  rgba(10, 12, 30, 0.92) 45%,
  rgba(2, 95, 73, 0.10) 100%
);
--mr-tablebg1r: linear-gradient(
   135deg,
  var(--mr-primary) 0%,
  var(--mr-accent) 60%,
  var(--mr-primary-a) 120%
);
/**/
--mrdio-x: 2px;   /* radio mínimo → bordes apenas redondeados (detalles muy pequeños como badges, chips) */
--mrdio-xs: 4px;   /* radio mínimo → bordes apenas redondeados (detalles muy pequeños como badges, chips) */
--mrdio-sm: 6px;   /* redondeo ligero → inputs, botones pequeños (se siente suave pero serio) */
--mrdio-md: 12px;  /* estándar UI → cards normales, secciones (el más usado en interfaces modernas) */
--mrdio-lg: 20px;  /* redondeo fuerte → modales, tarjetas grandes (look más moderno y “friendly”) */
--mrdio-pill: 50px;/* forma cápsula → botones tipo pastilla (full rounded horizontal) */
--mrdio-circle: 50%;/* círculo perfecto → avatares, iconos, botones flotantes */



/* =====================================
   🌑 SHADOW SYSTEM MR UI
===================================== */

--mrshadow-xs: 0 1px 2px rgba(0,0,0,0.05);
--mrshadow-sm: 0 2px 6px rgba(0,0,0,0.08);
--mrshadow-md: 0 6px 18px rgba(0,0,0,0.12);
--mrshadow-lg: 0 14px 35px rgba(0,0,0,0.18);
--mrshadow-xl: 0 25px 60px rgba(0,0,0,0.25);





}

.shdwta{text-shadow: 0 2px 6px rgba(0,0,0,0.25);}
.shdwtb{text-shadow: 0 1px 3px rgba(0,0,0,0.18);}
.shdwt{ text-shadow: 0 4px 12px rgba(0,0,0,0.35);}

.shdwtba{text-shadow: 0 2px 6px rgba(255,255,255,0.12);}
.shdwtbb{text-shadow: 0 1px 3px rgba(255,255,255,0.08);}
.shdwtb{text-shadow: 0 4px 14px rgba(255,255,255,0.18);}

.tmrdark { color: var(--mr-dark); }
.tmrprimary { color: var(--mr-primary); }
.tmraccent  { color: var(--mr-accent); }
.tmryellow { color: var(--mr-yellow); }
.tmrwarning { color: var(--mr-warning); }
.tmrsuccess { color: var(--mr-success); }
.tmrdanger  { color: var(--mr-danger); }
.tmrinfo { color: var(--mr-info); }
.tmrlink { color: var(--mr-link); }
.tmrgray { color: var(--mr-gray); }
.tmrgreen { color: var(--mr-green); }
.tmrbrown { color: var(--mr-brown); }
.tmrslate { color: var(--mr-slate); }
.tmrpink { color: var(--mr-pink); }
.tmr500 { color: var(--mr-gray-500); }
.tmr600 { color: var(--mr-gray-600); }
.tmr700 { color: var(--mr-gray-700); }
.tmr800 { color: var(--mr-gray-800); }
.mrtruncate{
  display: -webkit-box; /* permite limitar texto en varias líneas */
  -webkit-box-orient: vertical; /* organiza el texto verticalmente */
  overflow: hidden; /* oculta el contenido sobrante */
  text-overflow: ellipsis; /* agrega ... al cortar texto */
  word-break: break-word; /* evita desbordes en palabras largas */
}
.clamp-2{-webkit-line-clamp:2;}
.clamp-4{-webkit-line-clamp:4;}
.clamp-7{-webkit-line-clamp:7;}
.clamp-10{-webkit-line-clamp:10;}


.tmra{
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: 0.9px;
    font-family: 'Bebas Neue', sans-serif;
   text-transform: uppercase;
}

.tmrb{
  font-weight: 550;
  line-height: 1.1;
  letter-spacing: 0.6px;
    font-family: 'Bebas Neue', sans-serif;
    /*     font-size:clamp(1rem,2vw,1.5rem);
*/
}

.tmrc{
  font-weight: 450;
  line-height: 1.0;
  letter-spacing: 0.5px;
    font-family: 'Bebas Neue', sans-serif;
}
.tmrd{
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.5px;
}

.tmre{
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.1px;
}
.tmrh{
  font-size: 0.66rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.2px;
}
.tmrj{
  font-size: 0.58rem;
  font-weight: 200;
  line-height: 1;
  letter-spacing: 0.2px;
}
/* ===================================================
   🌟 GLOW HOVER efecto al rededor accent
=================================================== */
.mrhoverglow:hover{
  box-shadow:
    0 10px 30px rgba(40,248,179,0.14);
}
/* ===================================================
   💎 GLASS HOVER medio que se pinta fondo
=================================================== */
.mrhoverglass:hover{
  background: rgba(255, 255, 255, 0.144);
}


/* fade up global */
@keyframes mrFadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* clase reutilizable */
.fade-up {
  animation: mrFadeUp 0.9s ease-out forwards;
}
.mrBordeMove{
background-size:300% 300%;
animation:mrBordeMove 8s ease infinite;
}
/* animación global reutilizable */
@keyframes mrBordeMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.mrtypewriter{
  display: inline-block;
  white-space: pre-line;   /* permite múltiples líneas */
  overflow: hidden;        /* oculta mientras escribe */
}
.mrtypewriter::after {
  content: '|';
  animation: tmrBlink 1s steps(1) infinite;
}
@keyframes tmrBlink {
  50% {
    visibility: hidden;
  }
}
.darkgr{
  background: var(--mr-darkgr);
  color: var(--mr-light);
}
.darkgr-a{
  background: var(--mr-darkgr-a);
  color: var(--mr-light);
}
.primarygr{
  background: var(--mr-primarygr);
  color: var(--mr-light);
}

.accentgr{
  background: var(--mr-accentgr);
  color: var(--mr-light);
}

.navgr{
  background: var(--mr-navbar-bg);
  color: var(--mr-light);
}
.profgr {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      circle at top,
      rgba(var(--mr-accent-rgb), 0.12) 0%,
      transparent 50%
    ),
    linear-gradient(
      180deg,
      var(--mr-light) 0%,
      rgba(255,255,255,0.95) 40%,
      rgba(var(--mr-primary-rgb), 0.08) 100%
    );

  color: var(--mr-gray-900);
}
.profgr::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;   /* 👈 clave */
  width: 100%;
  height: 3px;
  background: var(--mr-accentgr);
  background-size: 300% 100%;
  animation: mrBordeMove 4s linear infinite;
  display: block;
}


.tdarkgr{
  background: var(--mr-darkgr);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tprimarygr{
  background: var(--mr-primarygr);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 200%;
  animation: mrBordeMove 19s ease infinite;
}
.taccentgr{
  background: var(--mr-accentgr);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 100% 100%;
  animation: mrBordeMove 14s ease infinite;
}


.cdbadge{
         /* font-weight:200; 👈 baja la negrita */
  font-size:11.5px;       /* 👈 más pequeño y limpio */
  letter-spacing:0.1px;   /* 👈 mejora lectura */
}

/* ================= BADGES ================= */
.cdbadges-y{
  display:flex;
  flex-wrap:wrap;
  gap:6px;

  justify-content:center;
  align-items:center;

  max-width:100%;
}
.cdbadges{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.cdbadge{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(224, 184, 184, 0.233);
}
.cdbadge i{
  font-size:13px;
}

.cdbadge.active{
 background: rgba(34,197,94,0.10);
  color: #166534;
}
.cdbadge.inactive{
   background: rgba(239,68,68,0.08);
  color: #991b1b;
}


.cdbadge.muted{
  opacity:.75;
}
.cd-badge-des{
  display:flex;
  align-items:flex-start;

  width:100%;
  padding:6px 12px;
  box-sizing:border-box;

  gap:6px;

  border-radius:4px;
  background:rgba(15, 13, 13, 0.06);
}
/*de card perfil colu*/
.cdbadges-y{
justify-content:center;
flex-wrap:wrap;
gap:6px;
}

@media(min-width:768px){
.cdbadges-y{
justify-content:flex-start;
}
}


.mrbadge{
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 0.1px solid rgba(255,255,255,0.08);
  border-radius: var(--mrdio-x);
  box-shadow: var(--mrshadow-sm);
}
.mrbadge:hover{
      transform: translateY(-1px);
        border: 0.1px solid rgba(255, 255, 255, 0.164);  
}
.mrbadgeglow{
  background: rgba(255, 255, 255, 0.075);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 0.1px solid rgba(255,255,255,0.08);
  border-radius: var(--mrdio-sm);
  box-shadow: var(--mrshadow-sm);
  transition: all .25s ease;
}
.mrbadgeglow:hover{
    border: 0.1px solid rgba(32, 30, 30, 0.445);

      transform: translateY(-5px);
   box-shadow:
    0 10px 30px rgba(40,248,179,0.14);
}
 .mrbadgeglass{
  background: rgba(255, 255, 255, 0.075);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 0.1px solid rgba(255,255,255,0.08);
  border-radius: var(--mrdio-pill);
  box-shadow: var(--mrshadow-sm);
  transition: all .25s ease;
}
.mrbadgeglass:hover{
  background: rgba(255,255,255,0.09);
}


.mrnotify{
display:flex;
align-items:center;
gap:12px;
width:100%;
padding:12px 14px;
background:rgba(var(--mr-dark-rgb),0.04);
border:1.9px solid rgba(var(--mr-gray-rgb),0.25);
border-radius:var(--mrdio-sm);
box-shadow:var(--mrshadow-sm);
transition:all .25s ease;
margin: 6px 0; /* 👈 separación arriba y abajo */
}

.mrnotify:hover{
transform:translateY(-1px);
background:rgba(var(--mr-primary-rgb),0.06);
border-color:rgba(var(--mr-primary-rgb),0.22);
box-shadow:var(--mrshadow-sm);
}

/* icon */
.mrnotify-icon{
display:flex;
align-items:center;
justify-content:center;
width:40px;
height:40px;
flex-shrink:0;
border-radius:var(--mrdio-pill);
background:rgba(var(--mr-primary-rgb),0.10);
color:var(--mr-primary);
font-size:15px;
}

/* body */
.mrnotify-body{
flex:1;
min-width:0;
display:flex;
flex-direction:column;
gap:2px;
}

.mrnotify-title{
font-size:13px;
font-weight:600;
color:var(--mr-gray-800);
}
.mrnotify-text{
font-size:12px;
line-height:1.45;
color:var(--mr-gray-600);
}

/* close */
.mrnotify-close{
display:flex;
align-items:center;
justify-content:center;
width:32px;
height:32px;
flex-shrink:0;
border:none;
outline:none;
cursor:pointer;
background:transparent;
border-radius:var(--mrdio-pill);
color:var(--mr-gray-500);
transition:all .22s ease;
}

.mrnotify-close:hover{
background:rgba(var(--mr-dark-rgb),0.06);
color:var(--mr-dark);
}

/* ================= STATES ================= */

/* danger */
.mrnotify.danger{
background:rgba(var(--mr-red-rgb),0.05);
border-color:rgba(var(--mr-red-rgb),0.22);
}
.mrnotify.danger:hover{
background:rgba(var(--mr-red-rgb),0.08);
border-color:rgba(var(--mr-red-rgb),0.26);
}

.mrnotify.danger .mrnotify-icon{
background:rgba(var(--mr-red-rgb),0.10);
color:var(--mr-danger);
}

.mrnotify.danger .mrnotify-title{
color:var(--mr-danger);
}

.mrnotify.danger .mrnotify-close:hover{
background:rgba(var(--mr-red-rgb),0.10);
color:var(--mr-danger);
}

/* success */
.mrnotify.success{
background:rgba(var(--mr-green-rgb),0.05);
border-color:rgba(var(--mr-green-rgb),0.22);
}

.mrnotify.success:hover{
background:rgba(var(--mr-green-rgb),0.08);
border-color:rgba(var(--mr-green-rgb),0.26);
}

.mrnotify.success .mrnotify-icon{
background:rgba(var(--mr-green-rgb),0.10);
color:var(--mr-success);
}

.mrnotify.success .mrnotify-title{
color:var(--mr-success);
}

.mrnotify.success .mrnotify-close:hover{
background:rgba(var(--mr-green-rgb),0.10);
color:var(--mr-success);
}

/* warning */
.mrnotify.warning{
background:rgba(var(--mr-orange-rgb),0.05);
border-color:rgba(var(--mr-orange-rgb),0.28);
}

.mrnotify.warning:hover{
background:rgba(var(--mr-orange-rgb),0.08);
border-color:rgba(var(--mr-orange-rgb),0.26);
}

.mrnotify.warning .mrnotify-icon{
background:rgba(var(--mr-orange-rgb),0.10);
color:var(--mr-warning);
}

.mrnotify.warning .mrnotify-title{
color:var(--mr-warning);
}

.mrnotify.warning .mrnotify-close:hover{
background:rgba(var(--mr-orange-rgb),0.10);
color:var(--mr-warning);
}

/* info */
.mrnotify.info{
background:rgba(var(--mr-cyan-rgb),0.05);
border-color:rgba(var(--mr-cyan-rgb),0.22);
}

.mrnotify.info:hover{
background:rgba(var(--mr-cyan-rgb),0.08);
border-color:rgba(var(--mr-cyan-rgb),0.26);
}

.mrnotify.info .mrnotify-icon{
background:rgba(var(--mr-cyan-rgb),0.10);
color:var(--mr-info);
}

.mrnotify.info .mrnotify-title{
color:var(--mr-info);
}

.mrnotify.info .mrnotify-close:hover{
background:rgba(var(--mr-cyan-rgb),0.10);
color:var(--mr-info);
}

/* responsive */
@media(max-width:768px){
.mrnotify{
align-items:flex-start;
}
.mrnotify-close{
margin-top:2px;
}
}