/* SOBREESCRIBIR CSS PARA NUEVO DISEÑO */

body.bg-theme1 {
	background-image: none;
	background: none;
}
body.bg-theme {
	background-image: none;
	background: none;
	background: rgb(31,34,43);
	background: -moz-linear-gradient(0deg, rgba(31,34,43,1) 0%, rgba(44,50,64,1) 100%);
	background: -webkit-linear-gradient(0deg, rgba(31,34,43,1) 0%, rgba(44,50,64,1) 100%);
	background: linear-gradient(0deg, rgba(31,34,43,1) 0%, rgba(44,50,64,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1f222b",endColorstr="#2c3240",GradientType=1);
	background-attachment: fixed;
}

pre {
	color: white;
}

.topbar-nav .navbar {
	background-color: #0783c6;
}
.navbar.bg-dark {
	background-color: #0783c6 !important;
}
.brand-logo {
	background-color: #1D2031;
}

#sidebar-wrapper {
	background: rgb(31,34,43);
}


.btn-primary {
	color: #fff;
	background-color: #0783c6;
	border-color: #0783c6;
}
.btn-primary:hover {
	color: #fff;
	background-color: #0783c6;
	border-color: #0783c6;
}
.btn-primary.focus, .btn-primary:focus {
	box-shadow:none;
}
.btn-primary.disabled, .btn-primary:disabled {
	color: #fff;
	background-color: #0783c6;
	border-color: #0783c6;
}
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
	color: #fff;
	background-color: #0783c6;
	border-color: #0783c6;
}
.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus {
	box-shadow:none;
}


.btn-danger {
	color: #fff;
	background-color: #C3001E;
	border-color: #C3001E;
}
.btn-danger:hover {
	color: #fff;
	background-color: #D31936;
	border-color: #D31936;
}
.btn-danger.focus, .btn-danger:focus {
	box-shadow:none;
}
.btn-danger.disabled, .btn-danger:disabled {
	color: #fff;
	background-color: #D31936;
	border-color: #D31936;
}
.btn-danger:not(:disabled):not(.disabled).active, .btn-danger:not(:disabled):not(.disabled):active, .show>.btn-danger.dropdown-toggle {
	color: #fff;
	background-color: #D31936;
	border-color: #D31936;
}
.btn-danger:not(:disabled):not(.disabled).active:focus, .btn-danger:not(:disabled):not(.disabled):active:focus, .show>.btn-danger.dropdown-toggle:focus {
	box-shadow:none;
}



tr.tr-estado {
	border: 1px solid #C3001E;
}
th.th-estado {
	border-top: 1px solid #C3001E;
	border-bottom: 1px solid #C3001E;
	font-size: 1.2em;
	font-weight: bold;
	color: #C3001E;
}
td.td-estado {
	border-top: 1px solid #C3001E;
	border-bottom: 1px solid #C3001E;
	font-size: 1.2em;
	color: #C3001E;
}


.alert-outline-danger {
    color: white;
    border: 1px solid #C3001E;
    border-right: 4px solid #C3001E;
    border-left: 4px solid #C3001E;
}
.alert-outline-danger .alert-icon {
	color: #C3001E;
}


.nav-tabs-danger .nav-link.active, .nav-tabs-danger .nav-item.show>.nav-link {
    color: #C3001E;
    background-color: transparent;
    border-color: #C3001E #C3001E #fff;
    border-bottom: 3px solid #C3001E;
}

.card-usados {
	background-color: #C3001E;
}

.counter
{
    text-align: center;
}

.counter-count
{
    font-size: 50px;
    font-weight: bold;
    position: relative;
    color: #000000;
    text-align: center;
    display: inline-block;
}

/* Menú compacto */
.sidebar-menu.is-compact li > a {
  padding: .35rem .5rem !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
}
.sidebar-menu.is-compact i {
  font-size: 16px !important;
}
.sidebar-menu.is-compact .badge { transform: scale(.9); }

/* Headers clickeables (acordeón) */
.sidebar-menu li.sidebar-header {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sidebar-menu li.sidebar-header .twist {
  font-size: 11px;
  opacity: .7;
}

/* Favoritos */
.sidebar-menu a .fav-toggle {
  margin-left: .35rem;
  opacity: .35;
  transition: opacity .15s ease;
}
.sidebar-menu a:hover .fav-toggle { opacity: .75; }
.sidebar-menu a.is-fav .fav-toggle { opacity: 1; }

.sidebar-menu a .fav-toggle { display: none !important; }

/* añade a tu CSS */
.notif-unread { background: #f7fbff; }
.notif-item:hover { background: #f1f5f9; }

/* ========== CAMPANITA / BADGE SUPER VISIBLE ========== */
#notifTopItem .fa-bell-o { position: relative; transition: transform .2s ease; }
#notifTopItem .fa-bell-o:hover { transform: scale(1.08); }

#notifBadge{
  position:absolute; top:-6px; right:-6px;
  min-width: 22px; height: 22px; line-height: 22px;
  padding: 0 6px; border-radius: 999px;
  background: linear-gradient(135deg,#00e5ff,#00b8ff);
  color:#042a3a; font-weight:700; box-shadow: 0 6px 18px rgba(0,184,255,.55);
  border: 2px solid rgba(255,255,255,.9);
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.badge-pulse{
  animation: badgePulse 1.6s ease-out infinite;
}
@keyframes badgePulse{
  0%{ box-shadow: 0 0 0 0 rgba(0,184,255,.60); }
  70%{ box-shadow: 0 0 0 14px rgba(0,184,255,0); }
  100%{ box-shadow: 0 0 0 0 rgba(0,184,255,0); }
}

/* ========== DROPDOWN "NEUMÓRFICO" LIGERO + VIDRIO ========== */
#notifTopItem .dropdown-menu{
  border:0; overflow:hidden; padding:0; min-width:380px;
  border-radius:16px;
  background: rgba(15,25,35,.86);
  backdrop-filter: blur(8px);
  box-shadow: 0 20px 40px rgba(2,12,22,.45);
}
#notifTopItem .list-group-item{
  background: transparent; color:#cfe8f6;
  border:0; border-bottom: 1px solid rgba(255,255,255,.06);
}
#notifTopItem .list-group-item:last-child{ border-bottom:0; }
#notifTopItem .list-group-item a{ color:inherit; }

/* Encabezado */
#notifHeaderText{ color:#e8f7ff; font-weight:700; letter-spacing:.2px; }
#notifCount{
  background:#0df; color:#063243; font-weight:800;
  border-radius:10px; padding:.25rem .5rem;
}

/* ========== ITEM: MÁS LUMINOSO Y ACCENT POR TIPO ========== */
.notif-item{ position:relative; transition: background .15s ease, transform .08s ease; }
.notif-item:hover{ background: rgba(255,255,255,.06); transform: translateY(-1px); }

.notif-unread{
  background: linear-gradient(180deg, rgba(0,184,255,.12), rgba(0,184,255,.06));
  border-left: 4px solid #00d4ff;
}

/* Iconos por tipo */
.zmdi.text-info{ color:#23d1ff !important; filter: drop-shadow(0 0 6px rgba(35,209,255,.55)); }
.zmdi.text-success{ color:#2ce58a !important; filter: drop-shadow(0 0 6px rgba(44,229,138,.5)); }
.zmdi.text-warning{ color:#ffd257 !important; filter: drop-shadow(0 0 6px rgba(255,210,87,.55)); }
.zmdi.text-danger{ color:#ff7b8a !important; filter: drop-shadow(0 0 6px rgba(255,123,138,.55)); }

/* Título + cuerpo */
#notifTopItem .media-body h6{ color:#ffffff; font-weight:800; letter-spacing:.2px; }
#notifTopItem .media-body .small{ color:#b7d1df; }

/* Pie del dropdown */
#notifTopItem .list-group-item.text-center a{
  font-weight:700; color:#bfeaff;
}
#notifTopItem .list-group-item.text-center a:hover{
  color:#fff; text-decoration: underline;
}

/* ========== LISTA COMPLETA (notificaciones.php) ========== */
.table .font-weight-bold{
  background: linear-gradient(180deg, rgba(0,184,255,.10), rgba(0,184,255,.05));
}
.table .badge-primary{ background:#00cfff; color:#053245; font-weight:800; }
.table .badge-secondary{ background:#314654; }

/* Mejor contraste en thead */
.thead-light th{
  background: #0f1b23 !important; color:#d2efff !important; border-color: rgba(255,255,255,.06);
}

/* Modo claro opcional (si tu plantilla tiene body.light o similar) */
body.light #notifTopItem .dropdown-menu{
  background: rgba(255,255,255,.96); color:#23323c;
  box-shadow: 0 20px 40px rgba(7,16,24,.15);
}
body.light #notifTopItem .list-group-item{ color:#263742; border-bottom-color: rgba(0,0,0,.06); }
body.light .notif-unread{
  background: linear-gradient(180deg, rgba(0,184,255,.12), rgba(0,184,255,.06));
  border-left-color: #00bdf2;
}
body.light #notifTopItem .media-body .small{ color:#5a7386; }
body.light .thead-light th{ background:#f1f7fb !important; color:#223340 !important; }

.row-warning{ border-left:4px solid #ffd257; }
.row-danger { border-left:4px solid #ff7b8a; }
.row-success{ border-left:4px solid #2ce58a; }
.row-info   { border-left:4px solid #00d4ff; }


/* Campana y badge en línea, centrados verticalmente */
#notifTopItem .nav-link{
  display: inline-flex;
  align-items: center;
  position: relative;     /* ok tenerlo, pero ya no lo usamos para el badge */
  padding-right: .25rem;  /* opcional: ajusta aire */
}

/* Ícono campana */
#notifTopItem .nav-link .fa-bell-o{
  font-size: 20px;
  line-height: 1;
  width: 22px;            /* caja estable */
  text-align: center;
}

/* BADGE AL COSTADO (¡en flujo, no absoluto!) */
#notifBadge{
  position: static !important;  /* <- clave: deja de ser absoluto */
  margin-left: 6px;             /* separa del ícono */
  min-width: 20px; height: 20px; line-height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: linear-gradient(135deg,#00e5ff,#00b8ff);
  color:#042a3a; font-weight:700;
  border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 6px 18px rgba(0,184,255,.55);
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

/* Pulso sigue funcionando en flujo */
.badge-pulse{
  animation: badgePulse 1.6s ease-out infinite;
}
@keyframes badgePulse{
  0%{ box-shadow: 0 0 0 0 rgba(0,184,255,.60); }
  70%{ box-shadow: 0 0 0 12px rgba(0,184,255,0); }
  100%{ box-shadow: 0 0 0 0 rgba(0,184,255,0); }
}