/* =====================================================================
   ADMIN-RX.CSS — Sistema de diseño "Refinado Pro" aplicado al admin
   Versión 3.0. Sustituye la cadena de parches 2.0x.
   Fuente: Copy of Rediseño sitio administrativo universitario (kit aprobado).
   Solo CSS + markup presentacional. No toca rutas, AJAX, JS de datos ni BD.
   ===================================================================== */

/* =====================================================================
   1) TOKENS — copiados 1:1 del kit (tokens/colors.css, typography.css,
      spacing.css, effects.css)
   ===================================================================== */
:root {
	/* Marca: marino */
	--navy-950: #0E1526;
	--navy-900: #141F45;
	--navy-800: #18254F;
	--navy-700: #1A2A5C;
	--navy-500: #33477A;
	--navy-400: #4A5A85;
	--navy-300: #8F9BB8;
	--navy-200: #B9C1D4;

	/* Marca: naranja */
	--orange-700: #B4470D;
	--orange-600: #D4520F;
	--orange-500: #F26722;
	--orange-400: #FF8B4D;
	--orange-300: #F2A05E;
	--orange-200: #F5C9A8;
	--orange-100: #FDEFE6;

	/* Semánticos */
	--green-600: #1F9D66;
	--green-500: #39C27C;
	--green-100: #E7F7EF;
	--red-600:   #D93A3A;
	--red-500:   #FF5D5D;
	--red-100:   #FCEBEB;

	/* Superficies (claro) */
	--bg-app:        #F4F5F9;
	--surface:       #FFFFFF;
	--surface-2:     #F9FAFC;
	--surface-3:     #F1F3F8;
	--border:        #E7EAF2;
	--border-subtle: #F1F3F8;
	--border-strong: #D5DAE5;

	/* Texto */
	--text-1: #141F45;
	--text-2: #3C4560;
	--text-3: #5A647C;
	--text-muted: #959DB4;
	--text-faint: #B3BACB;
	--text-inverse: #FFFFFF;

	/* Alias semánticos */
	--accent: var(--orange-500);
	--accent-strong: var(--orange-600);
	--accent-text: var(--orange-600);
	--accent-soft: var(--orange-100);
	--accent-soft-border: var(--orange-200);
	--success: var(--green-600);
	--success-soft: var(--green-100);
	--danger: var(--red-600);
	--danger-soft: var(--red-100);
	--live-dot: var(--green-500);

	/* Sidebar (siempre marino) */
	--sidebar-bg-from: #141F45;
	--sidebar-bg-to:   #18254F;
	--sidebar-text:    rgba(255,255,255,.72);
	--sidebar-text-dim:rgba(255,255,255,.32);
	--sidebar-active:  var(--orange-500);

	/* Tipografía */
	--font-ui:   'Instrument Sans', system-ui, -apple-system, sans-serif;
	--font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
	--fs-2xs:  10.5px;
	--fs-xs:   11px;
	--fs-sm:   12px;
	--fs-md:   12.5px;
	--fs-base: 13px;
	--fs-lg:   14px;
	--fs-xl:   16px;
	--fs-2xl:  18px;
	--fs-3xl:  22px;
	--fs-4xl:  30px;
	--fs-5xl:  38px;
	--fw-regular: 400;
	--fw-medium:  500;
	--fw-semibold: 600;
	--fw-bold:    700;
	--ls-tight:    -0.02em;
	--ls-overline: 0.08em;
	--ls-wide:     0.12em;

	/* Espaciado y radios */
	--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
	--sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px;
	--card-pad-y: 20px;
	--card-pad-x: 24px;
	--grid-gap: 16px;
	--r-sm:  7px;
	--r-md:  9px;
	--r-lg:  12px;
	--r-xl:  14px;
	--r-2xl: 16px;
	--r-pill: 999px;
	--sidebar-w: 236px;
	--sidebar-w-slim: 68px;
	--topbar-h: 66px;

	/* Efectos */
	--shadow-card:   0 1px 3px rgba(20, 31, 69, .04);
	--shadow-pop:    0 8px 24px rgba(20, 31, 69, .12);
	--shadow-accent: 0 4px 12px rgba(242, 103, 34, .35);
	--shadow-navy:   0 4px 12px rgba(20, 31, 69, .25);
	--glow-live:     0 0 8px rgba(57, 194, 124, .8);
	--ring-focus: 0 0 0 3px rgba(242, 103, 34, .25);
	--ease-ui: cubic-bezier(.2, .7, .3, 1);
	--dur-fast: 120ms;
	--dur-med: 200ms;
}

[data-theme="dark"] {
	--bg-app:        #0E1526;
	--surface:       #131C33;
	--surface-2:     #16213D;
	--surface-3:     #1C2740;
	--border:        #1C2740;
	--border-subtle: #16213D;
	--border-strong: #2A3654;

	--text-1: #E8EDF8;
	--text-2: #C6CFE4;
	--text-3: #96A1BD;
	--text-muted: #5D6A8C;
	--text-faint: #414E70;
	--text-inverse: #0E1526;

	--accent-text: var(--orange-400);
	--accent-soft: rgba(242,103,34,.15);
	--accent-soft-border: rgba(242,103,34,.35);
	--success:      #4DD0A5;
	--success-soft: rgba(57,194,124,.12);
	--danger:       var(--red-500);
	--danger-soft:  rgba(255,93,93,.12);

	--sidebar-bg-from: #0A101F;
	--sidebar-bg-to:   #0E1730;

	--shadow-card: 0 1px 3px rgba(0, 0, 0, .3);
	--shadow-pop:  0 8px 24px rgba(0, 0, 0, .5);
}

/* Utilidades del kit */
.rx-overline {
	font: var(--fw-semibold) var(--fs-xs)/1.2 var(--font-ui) !important;
	letter-spacing: var(--ls-overline);
	text-transform: uppercase;
	color: var(--text-muted) !important;
}
.rx-num, .tdFecha, .text-right, td.text-right, .paginaTinta_2, .paginaTinta_3 {
	font-family: var(--font-mono) !important;
	font-variant-numeric: tabular-nums;
}

/* =====================================================================
   2) BASE — fondo, tipografía global, scroll
   ===================================================================== */
html, body { background-color: var(--bg-app) !important; }
body {
	font-family: var(--font-ui) !important;
	color: var(--text-2) !important;
	font-size: var(--fs-md);
}
h1,h2,h3,h4,h5,h6 { font-family: var(--font-ui) !important; font-weight: var(--fw-bold); color: var(--text-1); letter-spacing: var(--ls-tight); }
a { color: var(--accent-text); }

/* Fondo plano: se retira el lienzo de gradientes de 2.03/2.04 */
#admin-bg-canvas { display: none !important; }
#page-content-wrapper { background: var(--bg-app) !important; }
#wrapper { background: var(--bg-app); }

/* =====================================================================
   3) TARJETAS — planas, sin barra de color a la izquierda
   ===================================================================== */
.card, .cuerpoContenidos, .cardDashboard {
	background: var(--surface) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--r-xl) !important;
	box-shadow: var(--shadow-card) !important;
	border-left-width: 1px !important; /* anula barras de color a la izquierda de 2.02 */
}
.card-header {
	background: var(--surface) !important;
	border-bottom: 1px solid var(--border) !important;
	border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
	color: var(--text-1) !important;
	font-weight: var(--fw-bold);
	font-size: var(--fs-lg);
	padding: var(--sp-4) var(--card-pad-x) !important;
}
/* Icono líder del card-header como chip neutro (antes: todo naranja, excede la regla del naranja §0.5) */
.card-header > i:first-child {
	background: var(--surface-3) !important; color: var(--text-2) !important;
	width: 26px; height: 26px; border-radius: var(--r-sm); display: inline-flex;
	align-items: center; justify-content: center; margin-right: 8px; font-size: 12px;
}
/* Icono de refrescar listado (hardcodeado naranja en el markup legacy) → neutro */
.card-header .textoNaranjaRE.fa-redo-alt { color: var(--text-muted) !important; cursor: pointer; }
.card-header .textoNaranjaRE.fa-redo-alt:hover { color: var(--accent-text) !important; }
.card-body { padding: var(--card-pad-y) var(--card-pad-x) !important; }
#page-content-wrapper .container-fluid,
#page-content-wrapper .container-fluid-lista { padding: var(--sp-5) var(--sp-6) !important; }

/* =====================================================================
   4) BOTONES
   ===================================================================== */
.botonGuardar, .btn-guardar, input[type="submit"].botonGuardar {
	background: var(--orange-500) !important;
	color: #FFFFFF !important;
	border: 1px solid var(--orange-500) !important;
	border-radius: var(--r-md) !important;
	box-shadow: var(--shadow-accent) !important;
	font-weight: var(--fw-semibold) !important;
	font-family: var(--font-ui) !important;
	padding: 8px 18px !important;
	float: none !important;
	transition: background var(--dur-fast) var(--ease-ui), box-shadow var(--dur-fast) var(--ease-ui);
}
.botonGuardar:hover { background: var(--orange-600) !important; color: #fff !important; text-decoration: none !important; }
.botonVolver a, .contBotonVolver {
	background: var(--surface) !important;
	color: var(--text-3) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--r-md) !important;
	font-weight: var(--fw-semibold) !important;
	padding: 8px 18px !important;
}
.botonVolver a:hover { background: var(--surface-2) !important; color: var(--text-1) !important; }
.botonNuevo i { color: var(--orange-500) !important; }
.botonBuscar { background: var(--surface-3) !important; color: var(--text-2) !important; border-radius: 0 var(--r-md) var(--r-md) 0 !important; }
.botonBuscar:hover { background: var(--orange-500) !important; color: #fff !important; }
.botonLimpiarBusqueda { color: var(--text-muted) !important; }
.botonLimpiarBusqueda:hover { color: var(--danger) !important; }

/* Filtros: labels overline + hints muted (§4 de la guía; antes bold/naranja legacy) */
.enunciadoFiltro {
	font-size: var(--fs-xs) !important; font-weight: var(--fw-semibold) !important;
	text-transform: uppercase; letter-spacing: var(--ls-overline); color: var(--text-muted) !important;
	margin-bottom: 6px !important;
}
.notaBajoInput { font-style: normal !important; color: var(--text-muted) !important; font-size: var(--fs-xs) !important; }

/* Estados vacíos de listados ("No hay X con los filtros...") — §4: dashed + mono muted, sin naranja */
td.text-center.textoNaranjaRE, td.textoNaranjaRE.text-center {
	color: var(--text-muted) !important; font-family: var(--font-mono);
	border: 1px dashed var(--border-strong) !important; background: var(--surface-2) !important;
}
td.text-center.textoNaranjaRE i, td.textoNaranjaRE.text-center i { color: var(--text-faint) !important; }
.btn-danger, .textoRojoOscuro.botonGuardar, [onclick*="eliminar" i].botonGuardar {
	background: var(--surface) !important; color: var(--danger) !important; border: 1px solid var(--border) !important; box-shadow: none !important;
}

/* =====================================================================
   5) FORMULARIOS — inputs, selects, checkboxes
   ===================================================================== */
.form-control, select.form-control, input.form-control, textarea.form-control {
	border: 1px solid var(--border) !important;
	border-radius: var(--r-md) !important;
	font-family: var(--font-ui) !important;
	font-size: var(--fs-base) !important;
	color: var(--text-1) !important;
	background: var(--surface) !important;
}
.form-control:focus {
	border-color: var(--orange-500) !important;
	box-shadow: var(--ring-focus) !important;
	outline: none !important;
}
.form-control:disabled, .form-control[readonly] { background: var(--surface-2) !important; color: var(--text-muted) !important; }
label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-muted); letter-spacing: var(--ls-overline); text-transform: uppercase; }
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--navy-900) !important; border-color: var(--navy-900) !important; }
/* Switch tipo píldora (reutiliza custom-switch de bootstrap si existe) */
.custom-switch .custom-control-label::before { border-radius: var(--r-pill) !important; }
.custom-switch .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--green-600) !important; border-color: var(--green-600) !important; }

/* =====================================================================
   6) TABLAS
   ===================================================================== */
.table th, .cabeceraLista th {
	font-size: var(--fs-xs) !important;
	font-weight: var(--fw-bold) !important;
	letter-spacing: var(--ls-overline);
	text-transform: uppercase;
	color: var(--text-muted) !important;
	background: var(--surface) !important;
	border-bottom: 1px solid var(--border) !important;
	border-top: none !important;
}
.filaLista {
	border-bottom: 1px solid var(--border-subtle) !important;
	transition: background var(--dur-fast) var(--ease-ui);
}
.filaLista:hover { background: var(--surface-2) !important; }
.filaLista td { padding: 12px 16px !important; font-size: var(--fs-md); color: var(--text-2); }
/* Fila seleccionada (usada en detalle/ficha activa) */
.filaLista.seleccionada, tr.filaSeleccionada {
	background: var(--accent-soft) !important;
	border-left: 3px solid var(--orange-500) !important;
}

/* =====================================================================
   7) PÍLDORAS DE ESTADO (StatusBadge del kit)
   ===================================================================== */
.rx-status, .badgeEstado, .admin-estado {
	display: inline-flex; align-items: center;
	font-family: var(--font-ui) !important;
	font-weight: var(--fw-semibold) !important;
	font-size: var(--fs-xs) !important;
	padding: 3px 10px !important;
	border-radius: var(--r-pill) !important;
	white-space: nowrap;
	text-transform: capitalize;
}
.rx-status--pendiente, .admin-estado--pendiente { background: var(--orange-100) !important; color: var(--orange-700) !important; }
.rx-status--revision, .admin-estado--revision { background: var(--orange-500) !important; color: #fff !important; }
.rx-status--preparacion, .rx-status--preparado, .rx-status--cancelado,
.admin-estado--preparacion, .admin-estado--preparado, .admin-estado--cancelado { background: var(--surface-3) !important; color: var(--text-3) !important; }
.rx-status--entregado, .rx-status--pagado, .rx-status--abierto, .admin-estado--entregado { background: var(--success-soft) !important; color: var(--success) !important; }
.rx-status--rechazado, .admin-estado--rechazado, .admin-estado--destruido { background: var(--danger-soft) !important; color: var(--danger) !important; }

/* Filas de Trabajos por estado — quitar el color de fondo plano legacy (2.0), la píldora ya identifica el estado */
tr.filaLista.fucsiaClaro, tr.filaLista.azulMACl, tr.filaLista.verdeClaro, tr.filaLista.amarilloTostadoClaro { background: var(--surface) !important; }
/* Estados textuales de trabajos ya existentes (sin cambiar HTML, solo colorear texto) */
.textoNaranjaRE { color: var(--orange-600) !important; }
.textoVerde { color: var(--success) !important; }
.textoRojoOscuro, .textoRojo { color: var(--danger) !important; }
.textoAzul { color: var(--navy-700) !important; }
.textoGris { color: var(--text-muted) !important; }

/* =====================================================================
   8) PESTAÑAS (SegmentedControl del kit) — Configuración, Impresión
   ===================================================================== */
.pestanyas {
	background: var(--surface-3) !important;
	border-radius: 10px !important;
	border-bottom: none !important;
	padding: 3px !important;
	display: inline-flex;
	gap: 2px;
}
.pestanya {
	border-radius: 8px !important;
	padding: 6px 14px !important;
	color: var(--text-3) !important;
	font-weight: var(--fw-regular) !important;
	font-size: var(--fs-md) !important;
	transition: background var(--dur-fast) var(--ease-ui);
}
.pestanya:hover { background-color: transparent !important; color: var(--text-1) !important; }
.pestanya.active {
	background-color: var(--surface) !important;
	color: var(--text-1) !important;
	font-weight: var(--fw-semibold) !important;
	box-shadow: 0 1px 2px rgba(20,31,69,.12) !important;
}
/* Botón "Volver a imprimir" (trabajo.blade.php): reutiliza .pestanya para el
   layout, pero .pestanya fija color:var(--text-3) después de .botonGuardar
   en este mismo archivo y gana por orden — forzamos el blanco aquí. */
.pestanya.botonGuardar, .pestanya.botonGuardar:hover {
	color: #FFFFFF !important;
}

/* =====================================================================
   9) BADGES/CONTADORES sueltos (navbar, sidebar)
   ===================================================================== */
.badge-danger { background: var(--orange-500) !important; }
.badge-light { background: rgba(255,255,255,.16) !important; color: #fff !important; }
.badge-success { background: var(--success) !important; }

/* =====================================================================
   10) KPI / MeterBar / SegmentBar — utilidades para el Dashboard
   ===================================================================== */
.rx-kpi {
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2xl);
	box-shadow: var(--shadow-card); padding: 18px 20px;
}
.rx-kpi__overline { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-muted); letter-spacing: var(--ls-overline); text-transform: uppercase; }
.rx-kpi__value { font-size: var(--fs-4xl); font-weight: var(--fw-bold); color: var(--text-1); letter-spacing: var(--ls-tight); font-family: var(--font-mono); margin-top: 8px; }
.rx-kpi__chip { display: inline-flex; margin-top: 8px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: var(--r-pill); }
.rx-kpi__chip--accent { background: var(--accent-soft); color: var(--accent-text); }
.rx-kpi__chip--success { background: var(--success-soft); color: var(--success); }
.rx-kpi__chip--danger { background: var(--danger-soft); color: var(--danger); }
.rx-kpi__chip--neutral { background: var(--surface-3); color: var(--text-2); }
.rx-kpi__footer { font-size: 11.5px; color: var(--text-muted); margin-top: 8px; }

.rx-kpi--hero {
	background: var(--navy-900); border: none; border-radius: var(--r-2xl);
	padding: 20px 24px; position: relative; overflow: hidden;
}
.rx-kpi--hero::after {
	content: ''; position: absolute; right: -30px; bottom: -40px;
	width: 150px; height: 150px; border-radius: 999px; background: rgba(242,103,34,.18);
}
.rx-kpi--hero .rx-kpi__overline { color: rgba(255,255,255,.55); }
.rx-kpi--hero .rx-kpi__value { color: #fff; font-size: var(--fs-5xl); margin-top: 6px; }
.rx-kpi--hero .rx-kpi__footer { color: rgba(255,255,255,.45); }

.rx-meter { display: grid; grid-template-columns: 96px 1fr 64px; align-items: center; gap: 12px; font-size: var(--fs-md); color: var(--text-2); margin-bottom: 8px; }
.rx-meter__label { font-size: var(--fs-md); }
.rx-meter__track { height: 9px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.rx-meter__fill { height: 100%; border-radius: var(--r-pill); background: var(--navy-900); transition: width var(--dur-med) var(--ease-ui); }
.rx-meter__fill--accent { background: var(--orange-500); }
.rx-meter__fill--success { background: var(--green-600); }
.rx-meter__value { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-xs); color: var(--text-2); }
.rx-meter__value--highlight { color: var(--accent-text); font-weight: 600; }

.rx-segbar { height: 10px; border-radius: var(--r-pill); overflow: hidden; display: flex; margin: 6px 0 4px; }
.rx-segbar__seg--navy { background: var(--navy-900); }
.rx-segbar__seg--orange { background: var(--orange-500); }
.rx-segbar__bn { background: var(--navy-700); }
.rx-segbar__color { background: var(--orange-500); }
.rx-segbar__legend { display: flex; gap: 14px; font-size: var(--fs-xs); color: var(--text-2); margin-bottom: 10px; }
.rx-segbar__dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; margin-right: 5px; }
.rx-segbar__dot--bn { background: var(--navy-700); }
.rx-segbar__dot--color { background: var(--orange-500); }

/* Sparkline de barras (hero Facturación) */
.rx-sparkline { display: flex; align-items: flex-end; gap: 4px; height: 46px; margin: 8px 0 4px; }
.rx-sparkline__bar { flex: 1; min-width: 6px; border-radius: 3px 3px 0 0; background: rgba(255,255,255,.25); transition: height var(--dur-med) var(--ease-ui); }
.rx-sparkline__bar--actual { background: var(--orange-500); box-shadow: 0 0 8px rgba(242,103,34,.5); }

/* =====================================================================
   11) SIDEBAR — 236px marino en ambos temas, píldora activa naranja
   ===================================================================== */
#sidebar-wrapper {
	width: var(--sidebar-w) !important;
	background: linear-gradient(180deg, var(--sidebar-bg-from) 0%, var(--sidebar-bg-to) 100%) !important;
	box-shadow: none !important;
	border-right: none !important;
	backdrop-filter: none !important;
	overflow-x: hidden !important;
}
body.sidebar-toggled #sidebar-wrapper { width: var(--sidebar-w-slim) !important; }
.sidebar {
	background: transparent !important; padding-top: 0 !important;
	/* sb-admin.css (tema heredado) fuerza min-height:calc(100vh - 56px) en
	   .sidebar, obligando a la lista a medir casi toda la ventana aunque el
	   contenido real sea más corto — el fondo navy ya lo cubre
	   #sidebar-wrapper, así que aquí basta con el contenido real. */
	min-height: 0 !important;
}

.rx-sidebar-header {
	padding: 14px 16px 10px; display: flex; align-items: center; gap: 10px;
}
.rx-sidebar-logo {
	width: 32px; height: 32px; flex: none; border-radius: var(--r-md);
	background: var(--orange-500); box-shadow: var(--shadow-accent);
	display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px;
}
.rx-sidebar-brand { color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .04em; }
.rx-sidebar-sub { color: rgba(255,255,255,.4); font-size: 10px; }

.sidebar .nav-item { margin: 0 14px !important; }
.sidebar .nav-link {
	padding: 6px 12px !important;
	border-radius: var(--r-md) !important;
	font-size: var(--fs-base) !important;
	font-weight: var(--fw-regular) !important;
	color: var(--sidebar-text) !important;
	gap: 10px;
	background: transparent !important;
	border-left: none !important;
	transition: background var(--dur-fast) var(--ease-ui);
}
.sidebar .nav-link:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; }
.sidebar .nav-link i { background: transparent !important; color: inherit !important; width: 16px !important; min-width: 16px !important; font-size: .95rem; }
.menuMarcado, .sidebar .nav-link.menuMarcado {
	background: var(--orange-500) !important;
	color: #fff !important;
	font-weight: var(--fw-semibold) !important;
	box-shadow: var(--shadow-accent) !important;
}
.menuMarcado i, .sidebar .nav-link.menuMarcado i { color: #fff !important; }

.rx-sidebar-section {
	font-size: 10px; font-weight: 700; letter-spacing: var(--ls-wide);
	color: var(--sidebar-text-dim); text-transform: uppercase;
	padding: 8px 12px 4px; margin: 0 14px;
}

/* Submenú flotante (dropright, ver 2.05) — mismo mecanismo JS, solo color */
.sidebar .nav-item.dropright .dropdown-menu {
	background: var(--surface) !important;
	border: 1px solid var(--border) !important;
	box-shadow: var(--shadow-pop) !important;
	border-radius: var(--r-lg) !important;
	/* sb-admin.css (tema base heredado) deja el panel estirado a la altura de
	   la ventana; forzamos que se ajuste solo al contenido real. */
	bottom: auto !important;
	height: auto !important;
	max-height: 80vh !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	/* estilos.css trae padding-top:25px (franja blanca arriba) y, en algunas
	   anchuras, width:150px/height:calc(100% - 50px) heredados — se anulan
	   aquí, que es el archivo que se carga el último. */
	padding: 6px 0 !important;
	width: auto !important;
	min-width: 180px !important;
}
.sidebar .nav-item.dropright .dropdown-item {
	color: var(--text-2) !important;
	border-radius: 8px !important;
}
.sidebar .nav-item.dropright .dropdown-item:hover { background: var(--surface-2) !important; color: var(--text-1) !important; }
.sidebar .nav-item.dropright .dropdown-item.menuMarcado { background: var(--accent-soft) !important; color: var(--accent-text) !important; box-shadow: none !important; }

/* Chevron en ítems con submenú (§1 de la guía) */
.sidebar .nav-item.dropright > .dropdown-toggle { position: relative; }
.sidebar .nav-item.dropright > .dropdown-toggle::after {
	content: '\203A'; /* › */
	display: inline-block; border: none; vertical-align: 0;
	position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
	font-size: 15px; line-height: 1; color: rgba(255,255,255,.3);
}
.sidebar .nav-item.dropright > .dropdown-toggle.menuMarcado::after { color: rgba(255,255,255,.7); }

.rx-sidebar-footer {
	margin: 8px; padding: 8px 14px; border-radius: 11px;
	background: rgba(255,255,255,.06); font-size: 12px; color: rgba(255,255,255,.8);
}
.rx-sidebar-footer__row { display: flex; justify-content: space-between; margin-top: 8px; color: rgba(255,255,255,.45); font-family: var(--font-mono); font-size: 11px; }
.rx-sidebar-footer__row a { color: var(--orange-400); font-family: var(--font-ui); }
.rx-live-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--green-500); box-shadow: var(--glow-live); display: inline-block; }

/* =====================================================================
   12) TOPBAR — 66px blanca
   ===================================================================== */
.navbar.navbar-dark.bg-dark, nav.navbar {
	height: var(--topbar-h) !important;
	background: var(--surface) !important;
	border-bottom: 1px solid var(--border) !important;
	box-shadow: none !important;
}
.navbar .w-100.pl-2 b, .navbar b { color: var(--text-1) !important; font-weight: var(--fw-bold) !important; font-size: var(--fs-xl); }
.navbar-nav .nav-item.no-arrow > .nav-link {
	background: var(--surface-3) !important;
	border: 1px solid var(--border) !important;
	color: var(--text-2) !important;
}
.navbar-nav .nav-item.no-arrow > .nav-link:hover { background: var(--accent-soft) !important; border-color: var(--accent-soft-border) !important; }
.navbar-nav .nav-item.no-arrow .nav-link i { color: var(--text-2) !important; }
/* Los iconos llevan mx-0 en el blade (quedan pegados unos a otros); separarlos aquí. */
.navbar-nav .nav-item.no-arrow.mx-0 { margin-left: 8px !important; margin-right: 8px !important; }
i.textoNaranjaRE.ml-2 { /* avatar-like user icon */ }
#botonVersionAdmin .nav-link { background: var(--surface-3) !important; border: 1px solid var(--border) !important; }
#botonVersionAdmin .badge-light { background: var(--navy-900) !important; color: #fff !important; }

.rx-avatar {
	width: 34px; height: 34px; border-radius: 999px; background: var(--navy-900);
	color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none;
}

/* Título de página en topbar (3.01, §2 de la guía) */
.rx-topbar-title { flex-direction: column; justify-content: center; margin-left: 18px; padding-left: 18px; border-left: 1px solid var(--border); line-height: 1.2; }
.rx-topbar-title__main { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--text-1); }
.rx-topbar-title__sub { font-size: var(--fs-xs); color: var(--text-muted); }

/* Logos de la topbar (tamaño perdido al retirar rediseno.min.css/205.css) */
.logoReproTop { height: 34px !important; width: auto !important; }
.logoUniTop {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
	pointer-events: none;
}
.logoUniTop img { height: 42px !important; width: auto !important; padding: 0 6px; }

/* =====================================================================
   12b) DASHBOARD — re-skin de las tarjetas KPI existentes (sin tocar el AJAX)
   ===================================================================== */
.cardDashboard.gradienteGrisClaroBlanco {
	background: var(--surface) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--r-2xl) !important;
	box-shadow: var(--shadow-card) !important;
}
.cardDashboard .card-body-icon {
	width: 40px; height: 40px; border-radius: var(--r-md);
	background: var(--accent-soft); color: var(--accent-text);
	display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
	position: static !important; opacity: 1 !important; margin-bottom: 10px;
}
.cardDashboard .card-title {
	font-size: var(--fs-xs) !important; font-weight: var(--fw-semibold) !important;
	letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--text-muted) !important;
}
.cardDashboard .ulSubrayado li { border-bottom-color: var(--border-subtle) !important; }
.cardDashboard .ulSubrayado table td { font-size: var(--fs-md); color: var(--text-2); padding: 3px 0; }
.cardDashboard .ulSubrayado table td.text-right { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-1); }
.cardDashboard .ulSubrayado table td.font-weight-bold,
.cardDashboard .ulSubrayado table td b { color: var(--text-1); }
.cardDashboard .card-footer {
	background: var(--surface) !important; border-top: 1px solid var(--border) !important;
	color: var(--accent-text) !important; font-weight: var(--fw-semibold);
}
.cardDashboard .card-footer:hover { background: var(--surface-2) !important; }

/* Tarjeta KPI "hero" real (aplicada a Estado de Trabajos) — navy + glow naranja */
.cardDashboard.rx-kpi--hero {
	background: var(--navy-900) !important;
	border: none !important;
	position: relative;
	overflow: hidden;
}
.cardDashboard.rx-kpi--hero::after {
	content: '';
	position: absolute; right: -40px; bottom: -40px; width: 160px; height: 160px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(242,103,34,.35), transparent 70%);
	pointer-events: none;
}
.cardDashboard.rx-kpi--hero .card-body-icon { background: rgba(242,103,34,.22) !important; color: var(--orange-400) !important; }
.cardDashboard.rx-kpi--hero .card-title { color: rgba(255,255,255,.55) !important; }
.cardDashboard.rx-kpi--hero .ulSubrayado table td { color: rgba(255,255,255,.65) !important; }
.cardDashboard.rx-kpi--hero .ulSubrayado table td.text-right { color: rgba(255,255,255,.85) !important; }
.cardDashboard.rx-kpi--hero .ulSubrayado table td.font-weight-bold,
.cardDashboard.rx-kpi--hero .ulSubrayado table td.font-weight-bold ~ td.text-right,
.cardDashboard.rx-kpi--hero .ulSubrayado table td.font-weight-bold ~ td.text-right b {
	color: #fff !important;
}
.cardDashboard.rx-kpi--hero .ulSubrayado table td.font-weight-bold ~ td.text-right b {
	font-family: var(--font-mono); font-size: var(--fs-2xl);
}
.cardDashboard.rx-kpi--hero .ulSubrayado li { border-bottom-color: rgba(255,255,255,.12) !important; }
.cardDashboard.rx-kpi--hero .card-footer {
	background: rgba(255,255,255,.06) !important; border-top: 1px solid rgba(255,255,255,.12) !important;
	color: rgba(255,255,255,.85) !important;
}
.cardDashboard.rx-kpi--hero .card-footer:hover { background: rgba(255,255,255,.12) !important; }

/* MeterBar real (aplicada a Uso de las App) */
.cardDashboard .rx-meter__track { margin: 2px 0 8px; }
.cardDashboard .rx-meter__fill { background: var(--orange-500); }

/* =====================================================================
   13) ACCESIBILIDAD / FOCO
   ===================================================================== */
a:focus-visible, button:focus-visible, .nav-link:focus-visible, [tabindex]:focus-visible {
	outline: none;
	box-shadow: var(--ring-focus);
	border-radius: var(--r-md);
}

/* =====================================================================
   14) TEXTO BLANCO POR DEFECTO EN TODO BOTON/ELEMENTO NARANJA DEL ADMIN
   Regla general, última del archivo a propósito: en el cascade, con
   !important en ambos lados, gana la última regla al empatar
   especificidad — así queda por encima de .pestanya, .menuMarcado, etc.
   sin tener que perseguir cada combinación de clases una a una.
   ===================================================================== */
.botonGuardar, .botonGuardar *,
.menuMarcado, .menuMarcado *,
.sidebar .nav-link.menuMarcado, .sidebar .nav-link.menuMarcado *,
.rx-status--revision, .admin-estado--revision,
.badge-danger, .badge-danger * {
	color: #FFFFFF !important;
}