@charset "utf-8";
/* Inter se carga desde inc_head.php — no bloquea render */

:root {
  /* ══════════════════════════════════════════════════════
     PALETA BIU MEDIA — Sistema de diseño v13 (Apple-level)
     ══════════════════════════════════════════════════════ */

  /* Colores base de marca */
  --color-primary:        #5BB8AC;
  --color-primary-dark:   #4aa09a;
  --color-primary-blur:   rgba(91,184,172,0.35);
  --color-secondary:      #FF6B54;
  --color-secondary-dark: #e55640;
  --color-secondary-blur: rgba(255,107,84,0.2);
  --color-gray:           #54575a;
  --color-marine:         #020D12;
  --color-snow:           #F5F5F7;
  --color-purple:         #5842bc;

  /* ── Superficies ── */
  --biu-bg:           #FFFFFF;
  --biu-surface:      #F5F5F7;
  --biu-surface-alt:  #EBEBED;
  --biu-border:       rgba(0,0,0,0.09);
  --biu-border-med:   rgba(0,0,0,0.14);

  /* ── Texto ── */
  --biu-text:         #1D1D1F;
  --biu-text-muted:   #6E6E73;
  --biu-text-light:   #AEAEB2;

  /* ── Brand (alias) ── */
  --biu-primary:          #5BB8AC;
  --biu-primary-dark:     #4aa09a;
  --biu-primary-light:    #E6F7F5;
  --biu-secondary:        #FF6B54;
  --biu-secondary-dark:   #e55640;
  --biu-secondary-light:  #FFF0EE;
  --biu-marine:           #020D12;

  /* ── Sidebar dark ── */
  --biu-sidebar-bg:         #1C1C1E;
  --biu-sidebar-w:          220px;
  --biu-sidebar-link:       rgba(255,255,255,0.62);
  --biu-sidebar-active-bg:  rgba(91,184,172,0.16);
  --biu-sidebar-active:     #5BB8AC;
  --biu-sidebar-hover:      rgba(255,255,255,0.07);
  --biu-sidebar-border:     rgba(255,255,255,0.07);
  --biu-sidebar-label:      rgba(255,255,255,0.26);

  /* ── Radios ── */
  --biu-radius:       12px;
  --biu-radius-sm:    8px;
  --biu-radius-xs:    5px;
  --biu-radius-pill:  999px;

  /* ── Sombras ── */
  --biu-shadow:       0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --biu-shadow-md:    0 4px 16px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --biu-shadow-lg:    0 16px 48px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.06);
  --biu-shadow-teal:  0 8px 32px rgba(91,184,172,0.22);

  /* ── Transiciones ── */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-std:  cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:    120ms;
  --t-normal:  220ms;
  --t-slow:    380ms;
}
*, *::before, *::after {
	box-sizing: border-box;
	scroll-behavior: smooth;
}

body {
	font-family: var(--biu-font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) !important;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--biu-text, #1D1D1F);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background: var(--biu-surface, #F5F5F7);
	padding: 0;
	margin: 0;
}

p {
	font-size: 13px;
	color: var(--biu-text-muted, #6E6E73);
}

a {
	text-decoration: none !important;
}

label {
	font-size: 12px !important;
	font-weight: 600 !important;
	color: #6b7280 !important;
	margin-bottom: 3px !important;
	margin-top: 10px !important;
	display: block;
	text-transform: uppercase;
	letter-spacing: .03em;
}

input, textarea, select {
	font-size: 13px !important;
}
.text-w-200{
	font-weight: 200 !important;
}
.text-w-300{
	font-weight: 300 !important;
}
.bold{
	font-weight: 600 !important;
}

#loading { display:none; width:100%; height:100%; left:0; right:0; top:0; bottom:0; background: url(../img/load.gif) #000 center center no-repeat; opacity:0.9; position:fixed; height:cover; width:cover; z-index:4000; display:none;}
@-webkit-keyframes loading {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes loading {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
.public-wrapper section {
	/*
	border-top: dashed red .1px;
	background: url(//enews.mx/img/guias.png);
	*/
}
.public-wrapper section .section-container {
	padding-top: 4rem;
	padding-bottom: 4rem;
	min-height: 580px;
}
.parallax-window {
	background-size: 80%;
}


/* ── Tipografía ──────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-weight: 700;
	line-height: 1.3;
	color: #1a1d23;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }
h5 { font-size: .95rem; }
h6 { font-size: .8rem; }

strong, .bold { font-weight: 600 !important; }
.italic       { font-style: italic; }
.uppercase    { text-transform: uppercase; }

.text-tip, .text-tip a          { font-size: .7rem; color: #9ca3af; }
.text-tip-white, .text-tip-white a { font-size: .7rem; color: #fff; }

hr { border-color: #e2e5eb; }

/* ── Topbar oferta global (todas las páginas públicas) ── */
.pub-topbar {
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.08);
  color: #1D1D1F;
  font-size: 12px;
  text-align: center;
  padding: 6px 16px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.pub-topbar strong { color: #1D1D1F; }
.pub-topbar a { color: #FF6B54 !important; text-decoration: underline !important; margin-left: 6px; }
.pub-topbar__badge {
  background: #FF6B54;
  color: #fff;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  margin-right: 8px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.colorBlack   { color: #1a1d23 !important; }
.colorMarine  { color: #1a1d23 !important; }
.colorWhite   { color: #fff !important; }

.font-color, .font-color h1, .font-color h2, .font-color h3, .font-color h4, .font-color h5, .font-color p, .font-color a   {
	color: #66bbb0 !important;
}

.font-color-gray, .font-color-gray h1, .font-color-gray h2, .font-color-gray h3, .font-color-gray h4, .font-color-gray h5, .font-color-gray h6 , .font-color-gray p, .font-color-gray a   {
	color: #54575a;
}

.font-color-dark, .font-color-dark h1, .font-color-dark h2, .font-color-dark h3, .font-color-dark h4, .font-color-dark h5, .font-color-dark p, .font-color-dark a   {
	color: #002269 !important;
}

.font-color-light, .font-color-light h1, .font-color-light h2, .font-color-light h3, .font-color-light h4, .font-color-light h5, .font-color-light p, .font-color-light a   {
	color: #e6e2e7;
}

.font-color-help {
	color: #938E8C !important;
}

.font-color-primary, .font-color-primary h1, .font-color-primary h2, .font-color-primary h3, .font-color-primary h4, .font-color-primary h5, .font-color-primary p, .font-color-primary a   {
	color: #66BBB0 !important;
}
.font-color-secondary, .font-color-secondary h1, .font-color-secondary h2, .font-color-secondary h3, .font-color-secondary h4, .font-color-secondary h5, .font-color-secondary p, .font-color-secondary a   {
	color: var(--color-secondary) !important;
}
.font-color-tertiary, .font-color-tertiary h1, .font-color-tertiary h2, .font-color-tertiary h3, .font-color-tertiary h4, .font-color-tertiary h5, .font-color-tertiary p, .font-color-tertiary a   {
	color: var(--color-tertiary) !important;
}

.font-white, .font-white h1, .font-white h2, .font-white h3, .font-white h4, .font-white h5, .font-white p, .font-white a   {
	color: #fff !important;
}
.text-secondary a:link, .text-secondary a:hover, .text-secondary a:active, .text-secondary a:visited {
	color: var(--color-secondary);
	font-weight: 600;
}
.text-primary a:link, .text-primary a:hover, .text-primary a:active, .text-primary a:visited {
	color: #66BBB0;
	font-weight: 600;
}
.text-secondary, .text-secondary h1, .font-secondary h2, .font-secondary h3, .font-secondary h4, .font-secondary h5, .font-secondary p, .font-secondary a   {
	color: var(--color-secondary);
}
.text-primary, .text-primary h1, .font-primary h2, .font-primary h3, .font-primary h4, .font-primary h5, .font-primary p, .font-primary a   {
	color: #66BBB0;
}

.text-shadow-white {
	color: #687078 !important;
	text-shadow: 1px 1px 1px rgba(255,255,255,1) !important;
}

.text-shadow-black {
	text-shadow: 1px 1px 1px rgba(0,0,0,1);
}


/* Forms */

form { align-self: center; }

button {
	color:#fff !important;
	font-weight: 700;
}

input, textarea, select {

	border-radius: 6px;
	margin-bottom: 6px;
	padding: 8px;
	border: 1px solid rgba(50, 50, 93, 0.1);
	width: 100%;
	background: white;

	/* font-family: -apple-system, BlinkMacSystemFont, sans-serif !important; */
	font-size:.8rem !important;
	margin-top: .4rem !important;
	margin-bottom: .4rem !important;
	color: #54575a !important;

}

input {
	height: auto;
}


label {
	font-size:.8rem !important;
	margin-top: .4rem !important;
	margin-bottom: .1rem !important;
	/* font-weight: 600 !important; */
}

/* ── Botones ─────────────────────────────────────────── */
.btn {
	font-weight: 600 !important;
	font-size: .85rem !important;
	padding: 8px 16px !important;
	border-radius: var(--biu-radius-sm) !important;
	border: none !important;
	line-height: 1.4;
	cursor: pointer;
	transition: background .15s, opacity .15s, transform .1s;
}

.btn:active { transform: scale(.98); }

.btn-primary,
.btn-primary:hover,
.btn-primary:focus {
	background-color: var(--color-primary) !important;
	color: #fff !important;
}
.btn-primary:hover { background-color: var(--color-primary-dark) !important; }

.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
	background-color: var(--color-secondary) !important;
	color: #fff !important;
}
.btn-secondary:hover { background-color: var(--color-secondary-dark) !important; }

.btn-light {
	background: var(--biu-surface) !important;
	color: var(--biu-text) !important;
	border: 1px solid var(--biu-border) !important;
}
.btn-light:hover { background: var(--biu-surface-alt) !important; }

.btn-primary-circle {
	background-color: var(--color-primary);
	border-radius: 2rem !important;
	height: 48px;
	font-size: 16px;
	font-weight: 500 !important;
}
.btn-primary-circle:hover { background-color: #8ECCC4 !important; }

.form-round input,
.form-round textarea,
.form-round select,
.form-round .btn {
	border-radius: 2rem !important;
	padding: 12px 20px;
	height: auto !important;
}

/* Background */

.bg-white {
	background-color: #fff !important;
}
.background {
	background-color: var(--color-secondary);
	color: #fff;
}

.background-gray {
	background-color: #54575a;
	color: #fff;
}

.background-dark {
	background-color: #002269;
	color: #fff;
}

.background-light {
	background-color: #efedf0;
	color: #002269;
}

.background-secondary {
	background-color: var(--color-secondary) !important;
	color: #fff;
}
.background-primary {
	background-color: #66bbb0;
	color: #fff;
}
.background-color-gray{
	background: #F6F6F6 !important;
}


/* nav-bar */
header .navbar-lg {
	margin-bottom: 4rem;
	margin-top: 4rem;
}

header .navbar-sm {
	/* margin-bottom: 4rem; */
}

.navbar-nav-lg {
	background-color: #efedf0;
	border-radius: 3rem;
	padding: .6rem;
}

.nav-item-lg {
	display: inline-flex;
	float: left;
	margin-left: 1.2rem;
	margin-right: 1.2rem;
}

.nav-item-sm {
	display: inline-flex;
	float: left;
	margin-left: .4rem;
	/* margin-right: .4rem; */
	font-size: 13px;
}

.nav-item { font-weight: 600; }
.nav-item i {
	color: var(--color-secondary) !important;
	margin: 0;
	padding: 1px 0 0 8px;
	display: inline-block;
	float: right;
}

/* ── Navbar interna ──────────────────────────────────── */
.nav_link {
	font-size: 13px;
	font-weight: 500;
	color: #374151;
	text-decoration: none !important;
	transition: color .15s, background .15s;
	border-radius: 6px;
	display: inline-block;
}
.nav_link:hover { color: var(--color-secondary); background: #f4f5f7; }

.nav-item { font-weight: 600; }
.nav-item-sm {
	display: inline-flex;
	align-items: center;
	font-size: 13px;
}

.dropdown-menu {
	color: #374151;
	border: 1px solid var(--biu-border) !important;
	border-radius: var(--biu-radius-sm) !important;
	font-size: 13px;
	font-weight: 500;
	box-shadow: 0 4px 12px rgba(0,0,0,.1) !important;
	padding: 6px 0;
}

.dropdown-item {
	font-size: 13px;
	padding: 7px 16px;
	color: #374151;
}

.dropdown-item:hover {
	background: var(--biu-surface);
	color: var(--color-secondary);
}
/*
footer {
margin-top: 2rem;
padding-top: 3rem;
padding-bottom: 3rem;
}*/

footer p {
	font-size: 12px;
	font-weight: 600;
}

footer .min p {
	font-size: 11px;
	font-weight: 600;
	color: #adadb2;
}

footer .max p {
}

footer #logo {
	width: 80px;
	margin: 2rem;
}

footer #logo_min {
	width: 60px;
	/* margin: .5rem; */
	filter: grayscale(100%);
}

/*footer ul {
padding:15px;
}*/

footer ul a:link, footer ul a:visited, footer ul a:active {
	/* color:#002269; */
	/* font-size: 12px; */
}



/* border */

.border-top, .border-left, .border-right, .border-color, hr {
	border-color:#efedf0;
}


/* ── Responsive (móvil) ──────────────────────────────── */
@media screen and (max-width: 767px) {
	.border-left  { border-left: none !important; }
	.border-right { border-right: none !important; }
	.text-right   { text-align: left !important; }

	.dropdown-menu {
		background: #fff;
		color: #374151;
		font-size: 14px;
		font-weight: 500;
		box-shadow: 0 4px 12px rgba(0,0,0,.1) !important;
	}
}

.hidden {
	display: none;
}

.btn-normalize-xs .btn {
	font: Verdana 400 11px;
	font-size: .65em !important;
	/* -webkit-font-smoothing: antialiased; */
	/* -webkit-font-smoothing: never; */
	/* font-smooth: never; */
}
.btn-normalize .btn {
	/* font: Verdana 400 11px; */
	font-size: .90em !important;
	/* -webkit-font-smoothing: antialiased; */
	/* -webkit-font-smoothing: never; */
	/* font-smooth: never; */
}
.btn-custom-xs {
	font-size: .65rem !important;
	padding: .3rem .6rem .3rem .6rem ;
}
.btn-custom-xs i {
	margin-left: .3rem;
}
.btn-custom-lg {
	font-size: 1.2rem !important;
	/* padding: .3rem .6rem .3rem .6rem ; */
}

.pointer {
	cursor: pointer;
}

.hover {
	opacity:0.8;
	-webkit-opacity:0.8;
	-moz-opacity:0.8;
	filter: alpha(opacity = 80);
	transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
}
.hover:hover { opacity:1.0; -webkit-opacity:1; -moz-opacity:1; filter: alpha(opacity = 100); }

@media (min-width: 920px) {
	.menu_curva { display: none; }
}

strong, .bold {
	font-family: var(--biu-font, 'Inter', -apple-system, sans-serif) !important;
	font-weight: 600 !important;
}
.hr_color_secondary{
	width: 100% !important;
	height: 2px !important;
	background: var(--color-secondary) !important;
	border: none;
}
.hr_color_primary{
	width: 100% !important;
	height: 2px !important;
	background: #66BBB0 !important;
	border: none;
}
.hr_color_black{
	width: 100% !important;
	height: 2px !important;
	background: #000 !important;
	border: none;
}

.sticky {
	position: sticky;
	top: 5%;
	right: auto;
}

.sticky + .container {
	padding-top: 200px;
}
.pt-100{
	padding-top: 100px;
}
.py-100{
	padding-top: 100px;
	padding-bottom: 100px;
}

.popup{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,	-50%);
	display: none;
}
.popup_pagos{
	position: fixed;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%,	-50%);
	display: none;
}
.opacityBlack_60 {
	background-color:rgba(0,0,0,0.60);
	z-index:1 !important;
}
.contentBox_pagos{
	position: relative;
	width: 600px;
	height: 460px;
	background: #fff;
	/* border-radius: 14px; */
	display: flex;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.contentBox_pagos .content_pagos{
	position: relative;
	padding: 60px 20px 0 20px;
	width: 100%;
	height: 400px;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* =====================================================
   LAYOUT INTERNO DE LA APP (páginas admin/partner/client)
   ===================================================== */

/* Padding superior de sección de contenido */
.padding_top {
	padding-top: 24px;
}

/* Padding izquierdo en móvil (topbar) */
.padding_left_mobile {
	padding-left: 16px;
}

/* ── Bloc Boxes / Tarjetas de contenido ─────────────── */
/* Superficie gris claro — contenedor principal */
.bloc_box {
	background: var(--biu-surface, #f4f5f7);
	border: 1px solid var(--biu-border, #e2e5eb);
	border-radius: var(--biu-radius, 10px);
	padding: 20px 24px;
	margin-bottom: 16px;
	box-shadow: var(--biu-shadow, 0 1px 3px rgba(0,0,0,.08));
}

/* Tarjeta blanca — para formularios y detalles */
.bloc_box_white {
	background: #fff;
	border: 1px solid var(--biu-border, #e2e5eb);
	border-radius: var(--biu-radius, 10px);
	padding: 20px 24px;
	margin-bottom: 16px;
	box-shadow: var(--biu-shadow, 0 1px 3px rgba(0,0,0,.08));
}

/* Variante compacta gris — para sub-secciones */
.bloc_box_alt {
	background: var(--biu-surface-alt, #eef0f4);
	border: 1px solid var(--biu-border, #e2e5eb);
	border-radius: var(--biu-radius-sm, 6px);
	padding: 14px 18px;
	margin-bottom: 10px;
	transition: border-color .15s, background .15s;
}

/* Tarjeta estadística de dashboard */
.stat-card {
	background: #fff;
	border: 1px solid var(--biu-border, #e2e5eb);
	border-radius: var(--biu-radius, 10px);
	padding: 20px;
	box-shadow: var(--biu-shadow, 0 1px 3px rgba(0,0,0,.08));
	transition: box-shadow .2s;
}
.stat-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.stat-card .stat-value  { font-size: 26px; font-weight: 700; color: #1a1d23; line-height: 1; }
.stat-card .stat-label  { font-size: 12px; color: #6b7280; font-weight: 500; margin-top: 4px; }
.stat-card .stat-icon   { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.stat-icon-primary      { background: rgba(102,187,176,.12); color: #66BBB0; }
.stat-icon-secondary    { background: rgba(255,135,114,.12); color: #ff8772; }
.stat-icon-blue         { background: rgba(59,130,246,.12);  color: #3b82f6; }
.stat-icon-purple       { background: rgba(139,92,246,.12);  color: #8b5cf6; }

/* ── Wrapper para tablas ─────────────────────────────── */
.table-wrapper {
	background: #fff;
	border: 1px solid var(--biu-border, #e2e5eb);
	border-radius: var(--biu-radius, 10px);
	overflow: hidden;
	box-shadow: var(--biu-shadow, 0 1px 3px rgba(0,0,0,.08));
}
.table-wrapper .table {
	border: none !important;
	border-radius: 0 !important;
	margin-bottom: 0 !important;
}

/* ── Tabla interna ───────────────────────────────────── */
.table {
	background: #fff !important;
	font-size: 13px;
	margin-bottom: 0;
}
.table thead th {
	background: var(--biu-surface, #f4f5f7);
	color: #6b7280;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	border-bottom: 1px solid var(--biu-border, #e2e5eb) !important;
	border-top: none !important;
	padding: 10px 14px !important;
}
.table tbody tr { border-bottom: 1px solid var(--biu-border, #e2e5eb) !important; }
.table tbody tr:last-child { border-bottom: none !important; }
.table tbody tr:hover { background: var(--biu-surface, #f4f5f7) !important; }
.table td {
	padding: 10px 14px !important;
	vertical-align: middle !important;
	border-top: none !important;
	font-size: 13px !important;
	font-weight: 400;
	color: #1a1d23;
}

/* ── Encabezado de página ────────────────────────────── */
.page-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--biu-border, #e2e5eb);
}
.page-header h2, .page-header h3 {
	font-size: 18px;
	font-weight: 700;
	color: #1a1d23;
	margin: 0;
}
.page-header .subtitle {
	font-size: 13px;
	color: #6b7280;
	margin-top: 2px;
}

/* ── Badges de estado ────────────────────────────────── */
.badge-status { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.badge-active     { background: rgba(34,197,94,.12);   color: #15803d; }
.badge-pending    { background: rgba(234,179,8,.12);   color: #92400e; }
.badge-paused     { background: rgba(107,114,128,.12); color: #374151; }
.badge-inactive   { background: rgba(239,68,68,.12);   color: #b91c1c; }
.badge-draft      { background: rgba(59,130,246,.12);  color: #1d4ed8; }

/* ── Badges de rol de colaborador ───────────────────── */
.role-badge       { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.role-owner       { background: rgba(139,92,246,.1);   color: #6d28d9; }
.role-sales       { background: rgba(255,135,114,.1);  color: #c2410c; }
.role-finance     { background: rgba(34,197,94,.1);    color: #15803d; }
.role-operator    { background: rgba(59,130,246,.1);   color: #1d4ed8; }
.role-auditor     { background: rgba(107,114,128,.1);  color: #374151; }
.role-evidence    { background: rgba(102,187,176,.1);  color: #0f766e; }
.role-maintenance { background: rgba(234,179,8,.1);    color: #92400e; }

/* ── Avatar / foto de perfil ─────────────────────────── */
.img_profile {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: var(--biu-surface, #f4f5f7);
	border: 2px solid var(--biu-border, #e2e5eb);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
}
.avatar-sm { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.avatar-md { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }

/* ── Alertas internas ────────────────────────────────── */
.alert {
	border: none !important;
	border-radius: var(--biu-radius-sm, 6px) !important;
	font-size: 13px;
	padding: 12px 16px !important;
	margin-bottom: 16px;
	border-left: 3px solid transparent !important;
}
.alert-success { background: rgba(34,197,94,.1) !important;   color: #15803d !important; border-left-color: #22c55e !important; }
.alert-danger  { background: rgba(239,68,68,.1) !important;   color: #b91c1c !important; border-left-color: #ef4444 !important; }
.alert-warning { background: rgba(234,179,8,.1) !important;   color: #92400e !important; border-left-color: #eab308 !important; }
.alert-info    { background: rgba(59,130,246,.1) !important;  color: #1d4ed8 !important; border-left-color: #3b82f6 !important; }

/* ── Separador interno ───────────────────────────────── */
.separator {
	height: 1px;
	background: var(--biu-border, #e2e5eb);
	margin: 12px 0;
}

/* ── Textos auxiliares ───────────────────────────────── */
.text-muted-sm { font-size: 11.5px; color: #9ca3af; }
.surface-card  { background: var(--biu-surface, #f4f5f7); border-radius: var(--biu-radius, 10px); padding: 16px 20px; }

/* ── Formulario: grupos ──────────────────────────────── */
.form-group { margin-bottom: 14px; }

/* =====================================================
   ALIAS & LEGACY — compatibilidad con clases existentes
   ===================================================== */

/* block_box (con "k") — alias de bloc_box, usado en 100+ archivos */
.block_box {
	background: var(--biu-surface);
	border: 1px solid var(--biu-border);
	border-radius: var(--biu-radius);
	padding: 20px 24px;
	margin-bottom: 16px;
	box-shadow: var(--biu-shadow);
}

/* ── Dashboard: contenedores de sección ─────────────── */
/* card_seccion — wrapper exterior, maneja el gutter */
.card_seccion {
	margin-bottom: 20px;
}

/* card_general — tarjeta blanca de sección del dashboard */
.card_general {
	background: #fff;
	border: 1px solid var(--biu-border);
	border-radius: var(--biu-radius);
	padding: 20px 24px;
	box-shadow: var(--biu-shadow);
}

/* card_number — número grande en stat-card de block_box */
.card_number {
	font-size: 22px;
	font-weight: 700;
	color: var(--biu-text);
	line-height: 1.2;
	margin-bottom: 2px;
}

/* card_icon — ícono decorativo en stat-card */
.card_icon {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	flex-shrink: 0;
}

/* ── Colores de texto ─────────────────────────────── */
.colorMarine  { color: var(--color-marine, #020D12); }
.colorWhite   { color: #fff !important; }
.font-white   { color: #fff !important; }
.font-color-gray { color: var(--biu-text-muted); }
.bold         { font-weight: 700 !important; }

/* ── Utilidades hover ────────────────────────────────── */
.hover-w:hover { color: #fff !important; }
.pointer       { cursor: pointer; }

/* ── Texto pequeño sobre imagen (listing-item-grid) ─── */
.text-tip {
	font-size: 10px;
	letter-spacing: .05em;
	text-transform: uppercase;
	font-weight: 600;
	color: rgba(255,255,255,.75);
	margin-bottom: 4px;
}
.text-tip a { color: rgba(255,255,255,.85); }
.text-tip a:hover { color: #fff; }

/* ── text-xs helper ──────────────────────────────────── */
.text-xs { font-size: 11px; color: var(--biu-text-muted); font-weight: 500; }

/* =====================================================
   LISTING-ITEM-GRID — tarjetas de pantallas y pedidos
   ===================================================== */

/* Contenedor principal de la tarjeta con foto */
.listing-item-grid {
	position: relative;
	border-radius: var(--biu-radius);
	overflow: hidden;
	box-shadow: var(--biu-shadow);
	transition: box-shadow .2s, transform .2s;
	background: var(--biu-surface);
}
.listing-item-grid:hover {
	box-shadow: var(--biu-shadow-md);
	transform: translateY(-2px);
}

/* Área con foto de fondo */
.listing-item-grid .bg {
	position: relative;
	height: 220px;
	background-color: var(--biu-surface-alt);
	background-size: cover !important;
	background-position: center !important;
	border-radius: var(--biu-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/* Efecto de zoom en hover (sin transform en el padre) */
.listing-item-grid:hover .bg {
	background-size: 110% !important;
	transition: background-size 600ms ease;
}

/* Gradiente oscuro en la parte inferior para legibilidad */
.d-gr-sec {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(2,13,18,0) 35%,
		rgba(2,13,18,.7) 100%
	);
	border-radius: var(--biu-radius);
	pointer-events: none;
}

/* Zona de título e íconos sobre la imagen */
.listing-item-grid_title {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 14px 14px 12px;
	z-index: 2;
}
.listing-item-grid_title h4,
.listing-item-grid_title h5,
.listing-item-grid_title h6 {
	color: #fff !important;
	margin-bottom: 2px;
	font-size: 13px;
}
.listing-item-grid_title h4 { font-size: 15px; font-weight: 700; }
.listing-item-grid_title h5 { font-size: 14px; font-weight: 600; }
.listing-item-grid_title a { color: #fff !important; }
.listing-item-grid_title a:hover { color: rgba(255,255,255,.8) !important; }

/* Íconos de acción en la tarjeta */
.listing-item-grid_title .pt-1 a {
	color: rgba(255,255,255,.75);
	font-size: 13px;
	transition: color .15s;
}
.listing-item-grid_title .pt-1 a:hover { color: #fff; }

/* Badge de status sobre la imagen (esquina superior derecha) */
.listing-item-grid .badge.float-right {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	font-size: 10px;
	padding: 4px 8px;
	border-radius: 20px;
}

/* Placeholder cuando no hay foto */
.listing-item-grid .bg-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 220px;
	background: var(--biu-surface-alt);
	border-radius: var(--biu-radius);
	color: var(--biu-text-muted);
	font-size: 32px;
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 767px) {
	.listing-item-grid .bg { height: 180px; }
	.card_general { padding: 14px 16px; }
	.block_box,
	.bloc_box { padding: 14px 16px; }
	.card_number { font-size: 18px; }
}

/* ── Responsive app interna ──────────────────────────── */
@media (max-width: 767px) {
	.padding_top { padding-top: 16px; }
	.bloc_box, .bloc_box_white { padding: 14px 16px; }
	.stat-card .stat-value { font-size: 22px; }
	.page-header { flex-direction: column; align-items: flex-start; }
}