/* ===================================================================================
 * ActualPACS - Identidad visual corporativa
 * Fuente: Manual de identidad visual (am.MANUAL_DE_IDENTIDAD.pdf)
 *
 * Paleta corporativa:
 *   Blanco       #ffffff
 *   Negro        #010101
 *   Azul         #3fb6e9
 *   Gris claro   #f6f6f6
 *   Gris medio   #d0d0d0
 *   Gris oscuro  #9d9d9c
 * Tipografías:
 *   Raleway   -> páginas web (autoalojada en /assets/font/raleway, licencia OFL)
 *   Helvetica -> tagline y materiales corporativos (ya incluida en el logotipo)
 *
 * Se carga después de style.css y antes de la hoja propia del centro (own-style.css),
 * así que la personalización por centro sigue teniendo prioridad. El modo oscuro
 * (body.dark) invierte colores con filtros, por lo que no necesita reglas propias.
 * =================================================================================== */

@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../font/raleway/raleway-latin-400-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../font/raleway/raleway-latin-500-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../font/raleway/raleway-latin-600-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../font/raleway/raleway-latin-700-normal.woff2') format('woff2');
}

:root {
	--ap-blanco: #ffffff;
	--ap-negro: #010101;
	--ap-azul: #3fb6e9;
	--ap-azul-rgb: 63, 182, 233;
	--ap-gris-claro: #f6f6f6;
	--ap-gris-medio: #d0d0d0;
	--ap-gris-oscuro: #9d9d9c;

	/* Derivados del azul corporativo (no están en el manual): el azul puro sobre blanco
	   no llega al contraste mínimo para texto, así que enlaces y hovers usan tonos más oscuros */
	--ap-azul-hover: #24a3da;
	--ap-azul-texto: #13759f;
	--ap-azul-suave: #e6f5fc;

	--ap-rojo: #d9363e;

	--ap-texto: #3c3c3b;

	/* Tokens semánticos: son los que cambian en el modo oscuro (brand-dark.css) */
	--ap-superficie: var(--ap-blanco);
	--ap-fondo: var(--ap-gris-claro);
	--ap-titulo: var(--ap-negro);

	/* Escala de espacios, radios y sombras */
	--ap-esp-1: 4px;
	--ap-esp-2: 8px;
	--ap-esp-3: 16px;
	--ap-esp-4: 24px;
	--ap-radio-sm: 6px;
	--ap-radio: 8px;
	--ap-sombra: 0 1px 2px rgba(1, 1, 1, 0.04), 0 2px 8px rgba(1, 1, 1, 0.05);
	--ap-sombra-flotante: 0 8px 24px rgba(1, 1, 1, 0.12);
	--ap-borde-suave: #e4e4e4;
	--ap-fila-hover: #eeeeee;
	--ap-fuente: 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--ap-fuente-corporativa: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* -------------------------------------------------------------------- Base */
body,
.tooltip, .popover, .dropdown-menu, .modal,
input, button, select, textarea, .btn, .form-control,
h1, h2, h3, h4, h5, h6 {
	font-family: var(--ap-fuente);
}
body {
	color: var(--ap-texto);
	background: var(--ap-fondo);
	border-top: 0;
	font-size: 14px;
	line-height: 1.5;
	/* Raleway usa números de estilo antiguo por defecto: forzamos cifras alineadas y
	   tabulares para fechas, IDs de paciente y tablas */
	font-variant-numeric: lining-nums tabular-nums;
	-moz-font-feature-settings: "lnum", "tnum";
	-webkit-font-feature-settings: "lnum", "tnum";
	font-feature-settings: "lnum", "tnum";
}
h1, h2, h3, h4, h5, h6 {
	color: var(--ap-titulo);
	font-weight: 600;
}
a {color: var(--ap-azul-texto)}
a:hover, a:focus {color: var(--ap-titulo)}
::selection {background: var(--ap-azul); color: var(--ap-negro)}

/* ------------------------------------------------------------------ Navbar */
.navbar {
	background: var(--ap-superficie);
	border: 0;
	border-bottom: 3px solid var(--ap-azul);
	box-shadow: none;
}
.navbar li a {color: var(--ap-texto)}
.navbar li a:hover, .navbar li a:focus {color: var(--ap-azul-texto)}
.navbar .caret {
	border-top-color: var(--ap-gris-oscuro);
	border-bottom-color: var(--ap-gris-oscuro);
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
	background-color: var(--ap-gris-claro);
	color: var(--ap-titulo);
}
.navbar-toggle {
	background: var(--ap-superficie);
	border-color: var(--ap-gris-medio);
}
.navbar-toggle:hover {background: var(--ap-gris-claro)}
.navbar-default .navbar-toggle .icon-bar {background-color: var(--ap-titulo)}
.clock-space {color: var(--ap-gris-oscuro)}

/* Logo + botón de menú (☰) a su izquierda */
.logo .ap-brand {
	display: flex;
	align-items: center;
	height: 46px;
}
.logo img {max-height: 40px}
.ap-brand #navbar-toggle {line-height: normal; margin-right: var(--ap-esp-2)}
.navbar .ap-menu-toggle,
.navbar .ap-menu-toggle.menuButton {
	width: 36px;
	height: 36px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--ap-radio-sm);
	color: var(--ap-texto) !important;
	font-size: 18px !important;
	line-height: 36px;
}
.navbar .ap-menu-toggle i {margin: 0}
.navbar .ap-menu-toggle:hover, .navbar .ap-menu-toggle:focus {background: var(--ap-gris-claro)}
/* Aviso de asignaciones nuevas con el menú oculto */
.navbar #show.menuButton.has-notification {
	background: var(--ap-rojo);
	color: var(--ap-blanco) !important;
}

/* Usuario: círculo con iniciales */
.navbar .ap-user-toggle {display: flex; align-items: center}
.ap-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-right: var(--ap-esp-2);
	border-radius: 50%;
	background: var(--ap-azul);
	color: var(--ap-blanco);
	font-size: 11px;
	font-weight: 700 !important;
	letter-spacing: .5px;
}
.navbar .ap-user-toggle .caret {margin-left: var(--ap-esp-1)}

/* ----------------------------------------------------------------- Dropdowns */
.dropdown-menu {
	padding: var(--ap-esp-1);
	background-color: var(--ap-superficie);
	border-color: var(--ap-borde-suave);
	border-radius: var(--ap-radio);
	box-shadow: var(--ap-sombra-flotante);
}
.dropdown-menu > li > a {padding: 7px 12px; border-radius: var(--ap-radio-sm)}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
	background: var(--ap-azul-suave);
	color: var(--ap-titulo);
}

/* ------------------------------------------------------------------- Sidebar */
/* Menú plano: sin círculos en los iconos ni separadores; el activo se marca con fondo azul
   suave y una barra azul a la izquierda */
.sidebar {
	background: var(--ap-superficie);
	color: var(--ap-texto);
}
.sidebar .sidebar-dropdown a {
	background: var(--ap-negro);
	border-top: 0;
	border-bottom: 0;
	box-shadow: none;
}
.sidebar #nav {padding: var(--ap-esp-2)}
.sidebar #nav > li > a {
	display: flex;
	align-items: center;
	margin-bottom: 2px;
	padding: 9px 12px;
	background: transparent;
	color: var(--ap-texto);
	border: 0;
	border-radius: var(--ap-radio-sm);
	box-shadow: none;
	font-size: 14px;
	font-weight: 500;
	transition: background-color .15s ease, color .15s ease;
}
.sidebar #nav li i {
	width: 20px;
	height: auto;
	margin-right: 10px;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--ap-gris-oscuro);
	font-size: 15px;
	line-height: inherit;
	text-align: center;
}
.sidebar #nav > li > a > span {margin-left: auto}
.sidebar #nav > li > a:hover {
	background: var(--ap-gris-claro);
	color: var(--ap-titulo);
	border: 0;
	font-weight: 500;
}
.sidebar #nav > li > a.open,
.sidebar #nav > li > a.subdrop {
	background: var(--ap-azul-suave);
	color: var(--ap-titulo);
	border: 0;
	box-shadow: inset 3px 0 0 var(--ap-azul);
	font-weight: 600;
}
.sidebar #nav > li > a:hover i,
.sidebar #nav > li > a.open i,
.sidebar #nav > li > a.subdrop i {
	background: transparent !important;
	border: 0;
	color: var(--ap-azul-texto);
}
.sidebar #nav > li > a:hover span i,
.sidebar #nav > li > a.open span i,
.sidebar #nav > li > a.subdrop span i {color: var(--ap-gris-oscuro)}
.sidebar #nav li ul {background: transparent; margin-bottom: 4px}
.sidebar #nav li ul li a {
	margin-bottom: 1px;
	padding: 7px 12px 7px 42px;
	color: var(--ap-texto);
	border: 0;
	border-radius: var(--ap-radio-sm);
	box-shadow: none;
	font-size: 13px;
}
.sidebar #nav li ul li a:hover {
	background: var(--ap-gris-claro);
	color: var(--ap-titulo);
	border: 0;
}
.sidebar #nav li ul li a.active {color: var(--ap-azul-texto); font-weight: 600}
.sidebar #nav a.has-notification,
.sidebar #nav a.has-notification:hover {
	background: var(--ap-rojo) !important;
	color: var(--ap-blanco) !important;
	box-shadow: none;
}
.sidebar #nav a.has-notification i {color: var(--ap-blanco) !important}
/* Botones del pie del menú (Ayuda, leyendas): discretos, como enlaces con borde */
.sidebar #nav .btn-menu {
	width: 100%;
	margin-top: var(--ap-esp-2);
	background: var(--ap-superficie);
	border: 1px solid var(--ap-gris-medio);
	color: var(--ap-texto);
	font-weight: 500;
}
.sidebar #nav .btn-menu:hover {
	background: var(--ap-gris-claro);
	border-color: var(--ap-gris-oscuro);
	color: var(--ap-titulo);
}
.sidebar #nav .btn-menu i {width: auto; margin-right: 4px; color: inherit}

/* ---------------------------------------------------------------- Main area */
.mainbar {
	background: var(--ap-fondo);
	border-left: 1px solid var(--ap-borde-suave);
}
.mainbar .page-head {
	padding: 12px var(--ap-esp-4);
	background: var(--ap-superficie);
	border-bottom: 1px solid var(--ap-borde-suave);
	box-shadow: none;
}
.mainbar .page-head h2 {
	color: var(--ap-titulo);
	font-size: 22px;
	font-weight: 700;
	line-height: 32px;
}
.mainbar .bread-crumb {font-size: 12px; margin-top: 6px}
.mainbar .bread-crumb, .mainbar .bread-crumb a.bread-current {color: var(--ap-gris-oscuro)}
.mainbar .bread-crumb a {color: var(--ap-texto)}
.mainbar .matter {
	padding: var(--ap-esp-3) var(--ap-esp-2);
	border-top: 0;
}

/* ------------------------------------------------------------------- Widgets */
/* Tarjetas: esquinas redondeadas y sombra suave en lugar de bordes grises marcados */
.widget {
	margin-top: 0;
	margin-bottom: var(--ap-esp-3);
	background: var(--ap-superficie);
	border: 1px solid var(--ap-borde-suave);
	border-radius: var(--ap-radio);
	box-shadow: var(--ap-sombra);
}
.widget .widget-head, .modal-header {
	padding: 12px var(--ap-esp-3);
	background: var(--ap-superficie);
	border-top: 0;
	border-bottom: 1px solid var(--ap-borde-suave);
	border-radius: var(--ap-radio) var(--ap-radio) 0 0;
	box-shadow: none;
	text-shadow: none;
	color: var(--ap-titulo);
	font-size: 15px;
	font-weight: 600;
}
.widget .padd, .modal-body {padding: var(--ap-esp-3)}
.widget .widget-foot, .modal-footer {
	padding: 10px var(--ap-esp-3);
	background: var(--ap-gris-claro);
	border-top: 1px solid var(--ap-borde-suave);
	border-bottom: 0;
	border-radius: 0 0 var(--ap-radio) var(--ap-radio);
	box-shadow: none;
	text-shadow: none;
	color: var(--ap-texto);
}
.widget hr {border-top-color: var(--ap-borde-suave); border-bottom: 0}
.widget .widget-head .widget-icons a {color: var(--ap-gris-oscuro)}
.widget .widget-head .widget-icons a:hover {color: var(--ap-azul-texto)}
.modal-content {
	background-color: var(--ap-superficie);
	border: 0;
	border-radius: var(--ap-radio);
	box-shadow: var(--ap-sombra-flotante);
}
.modal-backdrop.in {opacity: .4}

/* -------------------------------------------------------------------- Tablas */
.table > thead > tr > th,
#table_studies thead th, #table_assignments thead th {
	background: var(--ap-gris-claro);
	color: var(--ap-titulo);
	font-weight: 600;
	border-bottom: 2px solid var(--ap-gris-medio);
}
.table {font-size: 13px}
.table > thead > tr > th, .table > tbody > tr > td {padding: 8px 10px}
.table-hover > tbody > tr:hover > td:not(.colored),
.table-hover > tbody > tr:hover > th {background-color: var(--ap-fila-hover)}

/* ------------------------------------------------------------------- Botones */
.btn {
	border-radius: var(--ap-radio-sm);
	font-size: 13px !important;
	font-weight: 500;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-xs, .btn-sm {font-size: 12px !important}
.btn-primary,
.btn-info {
	background-color: var(--ap-azul);
	border-color: var(--ap-azul);
	color: var(--ap-blanco);
	font-weight: 600;
	text-shadow: none;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active,
.open .dropdown-toggle.btn-primary,
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active,
.open .dropdown-toggle.btn-info {
	background-color: var(--ap-azul-hover);
	border-color: var(--ap-azul-hover);
	color: var(--ap-blanco);
}
.btn-primary.disabled, .btn-primary[disabled],
.btn-info.disabled, .btn-info[disabled] {
	background-color: var(--ap-azul);
	border-color: var(--ap-azul);
}
.navbar .btn-info {color: var(--ap-blanco) !important}
.btn-default {
	background: var(--ap-superficie);
	border-color: var(--ap-gris-medio);
	color: var(--ap-texto);
}
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active {
	background: var(--ap-gris-claro);
	border-color: var(--ap-gris-oscuro);
	color: var(--ap-titulo);
}
.btn-link {color: var(--ap-azul-texto)}

/* ----------------------------------------------------------------- Formularios */
.form-control {
	border-color: var(--ap-gris-medio);
	border-radius: var(--ap-radio-sm);
	box-shadow: none;
	font-size: 13px;
}
.form-control:focus {
	border-color: var(--ap-azul);
	-webkit-box-shadow: 0 0 0 3px rgba(var(--ap-azul-rgb), 0.25);
	box-shadow: 0 0 0 3px rgba(var(--ap-azul-rgb), 0.25);
}
.input-group-addon {
	background: var(--ap-gris-claro);
	border-color: var(--ap-gris-medio);
}

/* ------------------------------------------------------- Navegación y estados */
.nav-tabs {border-bottom-color: var(--ap-gris-medio)}
.nav-tabs > li > a {color: var(--ap-texto)}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
	color: var(--ap-titulo);
	border-color: var(--ap-gris-medio) var(--ap-gris-medio) transparent;
	box-shadow: inset 0 3px 0 var(--ap-azul);
	font-weight: 600;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {background: var(--ap-azul); color: var(--ap-negro)}
.pagination > li > a, .pagination > li > span, .pagination li a {color: var(--ap-texto)}
.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover, .pagination > .active > span:hover,
ul.pagination a.active {
	background-color: var(--ap-azul);
	border-color: var(--ap-azul);
	color: var(--ap-negro);
}
.label-primary, .label-info, .badge-info, .progress-bar, .progress-bar-info {background-color: var(--ap-azul)}
.label-primary, .label-info {color: var(--ap-negro)}
.datepicker table tr td.active, .datepicker table tr td.active:hover,
.datepicker table tr td.active.active, .datepicker table tr td.active:hover.active {
	background: var(--ap-azul);
	color: var(--ap-negro);
	text-shadow: none;
}

/* ---------------------------------------------------------------- Login */
/* Pantallas públicas (layout master): fondo azul corporativo, como la portada del manual */
body.ap-public {background: var(--ap-azul)}
.admin-form .widget {
	border: 0;
	border-radius: 4px;
	box-shadow: 0 12px 32px rgba(1, 1, 1, 0.18);
}
.admin-form .widget .widget-head {
	box-shadow: none;
	border-bottom: 0;
	padding: 30px 40px 10px;
	text-align: center;
}
.admin-form .widget .widget-head img {margin: 0 auto; max-height: 90px}
.admin-form .padd {padding: 10px 25px 25px}
.admin-form .control-label {color: var(--ap-titulo); font-weight: 600}
.admin-form .btn-primary {font-weight: 600; padding-top: 9px; padding-bottom: 9px}

/* ------------------------------------------------- Restos de degradados y texturas */
/* style.css todavía tiene degradados y fondos PNG de la plantilla original */
header {
	background: var(--ap-superficie);
	border-top: 0;
	border-bottom: 1px solid var(--ap-borde-suave);
}
.nav.nav-pills > li > a {
	background: var(--ap-superficie);
	border: 1px solid var(--ap-borde-suave);
	border-radius: var(--ap-radio-sm);
	color: var(--ap-texto);
	text-shadow: none;
}
a.has-notification {
	background: var(--ap-rojo) !important;
	border: 0;
	box-shadow: none;
	color: var(--ap-blanco) !important;
}
.pagination ul > li > a,
.pagination ul > li > span {
	background: var(--ap-superficie);
	border: 1px solid var(--ap-gris-medio);
	border-radius: var(--ap-radio-sm) !important;
	box-shadow: none;
	color: var(--ap-texto);
}
.pagination > li > a, .pagination > li > span {border-color: var(--ap-gris-medio)}
.pagination > li:first-child > a, .pagination > li:first-child > span {
	border-top-left-radius: var(--ap-radio-sm);
	border-bottom-left-radius: var(--ap-radio-sm);
}
.pagination > li:last-child > a, .pagination > li:last-child > span {
	border-top-right-radius: var(--ap-radio-sm);
	border-bottom-right-radius: var(--ap-radio-sm);
}
.today-datas li {
	background: var(--ap-superficie);
	border: 1px solid var(--ap-borde-suave);
	border-radius: var(--ap-radio);
	box-shadow: var(--ap-sombra);
	text-shadow: none;
}
footer {
	background: var(--ap-superficie);
	border-top: 1px solid var(--ap-borde-suave);
	color: var(--ap-gris-oscuro);
}
.well {
	background: var(--ap-gris-claro);
	border: 1px solid var(--ap-borde-suave);
	border-radius: var(--ap-radio);
	box-shadow: none;
}
.alert {border-radius: var(--ap-radio)}

/* ======================================================== Tabla de estudios */
/* Los estilos del módulo (modules/studies/style.css y sticky_table_styles.css) se cargan
   después de esta hoja, por eso estas reglas van prefijadas con .mainbar */

/* Barra de filtros: una sola franja blanca y compacta */
.mainbar #study_filters {margin-bottom: var(--ap-esp-3)}
.mainbar #study_filters .widget-head {
	padding: 10px 12px;
	border-bottom: 0;
	border-radius: var(--ap-radio);
	font-size: 13px;
	font-weight: 400;
}
.mainbar #study_filters .form-control,
.mainbar #study_filters .input-sm {
	height: 32px;
	font-size: 13px !important;
}
.mainbar #study_filters .btn {height: 32px; line-height: 1.2}
.mainbar #study_filters #force_autorefresh {
	width: 32px;
	margin: 0;
	padding: 0;
	background: var(--ap-superficie);
	border: 1px solid var(--ap-gris-medio);
	color: var(--ap-texto);
}
.mainbar #study_filters #force_autorefresh:hover {background: var(--ap-gris-claro); color: var(--ap-titulo)}
.mainbar #study_filters .input-group-addon {color: var(--ap-gris-oscuro)}

/* Contenedor de la tabla */
.mainbar .studies_row .widget {overflow: hidden}

/* Cabecera: plana, con la columna ordenada marcada en azul */
.mainbar #table_studies > thead > tr > th {
	padding: 9px 8px;
	background: var(--ap-gris-claro);
	background-image: none;
	border: 0;
	border-bottom: 1px solid var(--ap-borde-suave);
	color: var(--ap-titulo);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .2px;
	vertical-align: middle;
	white-space: nowrap;
}
.mainbar #table_studies > thead > tr > th[data-sortingtype] {cursor: pointer}
.mainbar #table_studies > thead > tr > th[data-sortingtype]:hover {color: var(--ap-azul-texto)}
.mainbar #table_studies > thead > tr > th.active {
	color: var(--ap-azul-texto);
	box-shadow: inset 0 -2px 0 var(--ap-azul);
}
/* Segunda fila de la cabecera: filtros por columna */
.mainbar #table_studies > thead > tr > th.filter {
	padding: 6px 4px;
	background: var(--ap-superficie);
	border-bottom: 1px solid var(--ap-gris-medio);
	font-weight: 400;
}
.mainbar #table_studies > thead > tr > th.filter .form-control {
	height: 28px;
	padding: 3px 6px;
	font-size: 12px;
}

/* Filas: algo más altas y sin bordes verticales */
.mainbar #table_studies,
.mainbar #table_studies.table-bordered {border: 0}
.mainbar #table_studies > tbody > tr > td {
	padding: 6px 8px;
	border: 0;
	border-bottom: 1px solid var(--ap-borde-suave);
	color: var(--ap-titulo);
	font-size: 13px;
}
.mainbar #table_studies > tbody > tr:hover > td:not(.colored) {background-color: var(--ap-fila-hover) !important}
.mainbar #table_studies > tbody > tr:hover > td.colored {box-shadow: inset 0 0 0 9999px rgba(1, 1, 1, 0.04)}

/* Estados por color (configurados por cada centro): se suaviza el color de la fila con
   una capa blanca y la primera celda conserva el color puro como franja a la izquierda.
   Para volver al color pleno basta con eliminar este bloque. */
.mainbar #table_studies > tbody > tr > td.colored {
	background-image: linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35));
}
.mainbar #table_studies > tbody > tr > td.colored:first-child {
	background-image: linear-gradient(to right, transparent 4px, rgba(255, 255, 255, 0.35) 4px);
}

/* Pie: recuento, filas por página y paginación */
.mainbar #table_studies > tfoot > tr > th {
	padding: 10px 8px;
	background: var(--ap-superficie);
	border: 0;
	border-top: 1px solid var(--ap-borde-suave);
	color: var(--ap-gris-oscuro);
	font-size: 12px;
	font-weight: 500;
	text-align: left;
}
.mainbar #table_studies .select_ipp .form-control {height: 30px; margin-right: var(--ap-esp-2)}

/* Opción "cabecera fija" (configuración del centro o del usuario) */
.mainbar .studies_table_container #table_studies th,
.mainbar .studies_table_container #table_studies td {border-left: 0; border-right: 0; border-top: 0}
.mainbar .studies_table_container #table_studies > thead {box-shadow: 0 1px 0 var(--ap-borde-suave)}

/* ================================================================ Login */
/* Dos columnas: panel azul con el símbolo y el tagline, formulario sobre blanco */
.ap-login {
	display: flex;
	min-height: 100vh;
	background: var(--ap-superficie);
}
body.ap-public {padding-top: 0}
.ap-login-brand, .ap-login-main {min-width: 0}
.ap-login-main .container {width: auto; max-width: 100%}
.ap-login-brand {
	display: flex;
	flex: 1 1 50%;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 48px;
	background: var(--ap-azul);
}
.ap-login-symbol {width: 260px; max-width: 60%; height: auto}
/* Tagline: Helvetica Light según el manual */
.ap-login-tagline {
	margin-top: 32px;
	color: var(--ap-blanco);
	font-family: var(--ap-fuente-corporativa);
	font-size: 26px;
	font-weight: 300;
	letter-spacing: .3px;
}
.ap-login-main {
	display: flex;
	flex: 1 1 50%;
	align-items: center;
	justify-content: center;
	padding: var(--ap-esp-4);
}
.ap-login .admin-form {width: 100%; max-width: 440px; margin: 0 auto}
.ap-login .admin-form .widget {
	border: 0;
	box-shadow: none;
	background: transparent;
}
.ap-login .admin-form .widget .widget-head {padding: 0 0 24px; background: transparent}
.ap-login .admin-form .padd {padding: 0}
.ap-login .admin-form .form-control {height: 40px; font-size: 14px}
.ap-login .admin-form .btn-primary {height: 42px; font-size: 14px !important}
.ap-login .admin-form .form-horizontal .control-label {text-align: left; font-size: 13px}
@media (max-width: 991px) {
	.ap-login-brand {display: none}
	.ap-login {background: var(--ap-azul)}
	.ap-login .admin-form .widget {
		padding: var(--ap-esp-4);
		background: var(--ap-superficie);
		box-shadow: var(--ap-sombra-flotante);
	}
}
/* Etiquetas encima de los campos */
.ap-login .form-horizontal .form-group {margin-left: 0; margin-right: 0}
.ap-login .form-horizontal .form-group > [class*="col-lg-"] {
	float: none;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}
.ap-login .form-horizontal .control-label {padding-top: 0; margin-bottom: 6px}
.ap-login .admin-form p.center {margin-top: var(--ap-esp-3)}

/* ======================================================== Estados vacíos y carga */
/* El símbolo del logotipo, en gris y muy suave, acompaña los mensajes sin resultados */
.ap-empty-symbol {
	display: block;
	width: 72px;
	height: auto;
	margin: 0 auto var(--ap-esp-3);
	filter: grayscale(1);
	opacity: .18;
}
.mainbar #table_studies > tbody > tr > td.ap-empty {
	padding: 48px var(--ap-esp-3);
	background: var(--ap-superficie);
	color: var(--ap-gris-oscuro);
	font-size: 14px;
	cursor: default;
}

/* Recarga de la tabla de estudios: el símbolo late en lugar del spinner */
#loading-row {
	z-index: 10;
	width: 64px;
	height: 60px;
	margin-left: -32px;
	background: url('../img/brand/simbolo_actualpacs.png') center / contain no-repeat;
	animation: ap-latido 1.2s ease-in-out infinite;
}
#loading-row .lds-ring {display: none}
@keyframes ap-latido {
	0%, 100% {opacity: .35; transform: scale(.92)}
	50% {opacity: 1; transform: scale(1)}
}
@media (prefers-reduced-motion: reduce) {
	#loading-row {animation: none; opacity: .6}
}

/* ======================================================== Menú plegado: columna de iconos */
/* La genera sidebar-rail.js; solo se muestra cuando el menú lateral está oculto */
.ap-rail {
	display: none;
	position: fixed;
	top: 58px;
	bottom: 0;
	left: 0;
	z-index: 60;
	width: 56px;
	padding: var(--ap-esp-2) 0;
	background: var(--ap-superficie);
	border-right: 1px solid var(--ap-borde-suave);
	overflow-y: auto;
}
body.ap-rail-on .ap-rail {display: block}
/* general.js pone margin-left: 0 en línea al ocultar el menú */
body.ap-rail-on .mainbar {margin-left: 56px !important}
.ap-rail a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0 auto 4px;
	border-radius: var(--ap-radio-sm);
	color: var(--ap-gris-oscuro);
	font-size: 17px;
	transition: background-color .15s ease, color .15s ease;
}
.ap-rail a:hover {background: var(--ap-gris-claro); color: var(--ap-titulo)}
.ap-rail a.open {
	background: var(--ap-azul-suave);
	color: var(--ap-azul-texto);
	box-shadow: inset 3px 0 0 var(--ap-azul);
}
.ap-rail a.has-notification {background: var(--ap-rojo); color: var(--ap-blanco)}
.ap-rail a i {margin: 0}
@media (max-width: 767px) {
	body.ap-rail-on .ap-rail {display: none}
	body.ap-rail-on .mainbar {margin-left: 0 !important}
}

/* ================================================================ Foco visible */
/* style.css quita el contorno de foco a todo; lo recuperamos solo al navegar con el teclado */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible,
.sidebar #nav a:focus-visible,
.ap-rail a:focus-visible {
	outline: 2px solid var(--ap-azul) !important;
	outline-offset: 2px;
}
.dropdown-menu > li > a:focus-visible {outline-offset: -2px}

/* ================================================================ Animaciones */
@keyframes ap-aparecer {
	from {opacity: 0; transform: translateY(-4px)}
	to {opacity: 1; transform: translateY(0)}
}
.open > .dropdown-menu {animation: ap-aparecer .15s ease-out}
.modal.fade .modal-dialog {transition: transform .2s ease-out}
.ap-avatar, .ap-menu-toggle, .nav-tabs > li > a, .pagination > li > a {
	transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* ================================================================ Notificaciones */
/* noty 2 (jquery.noty.js, themes/default.js pinta los colores en línea) y noty 3 (tema relax):
   tarjeta con franja de color según el tipo */
.noty_bar,
.noty_theme__relax.noty_bar {
	margin: var(--ap-esp-2) 0;
	background: var(--ap-superficie) !important;
	border: 1px solid var(--ap-borde-suave) !important;
	border-left: 4px solid var(--ap-gris-oscuro) !important;
	border-radius: var(--ap-radio) !important;
	box-shadow: var(--ap-sombra-flotante) !important;
	color: var(--ap-titulo) !important;
}
.noty_bar .noty_message,
.noty_bar .noty_text,
.noty_theme__relax.noty_bar .noty_body {
	padding: 12px var(--ap-esp-3) !important;
	color: var(--ap-titulo) !important;
	font-family: var(--ap-fuente);
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 1.45 !important;
	text-align: left !important;
}
.noty_bar .noty_text {padding: 0 !important}
.noty_bar .noty_buttons,
.noty_theme__relax.noty_bar .noty_buttons {
	padding: var(--ap-esp-2) var(--ap-esp-3) !important;
	background: transparent !important;
	border-top: 1px solid var(--ap-borde-suave) !important;
	text-align: right;
}
/* En noty 2 los colores en línea (y la clase de tipo) van en el <li> que envuelve la tarjeta */
ul[id^="noty_"] > li {
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
.noty_bar.noty_type__success, .noty_type__success > .noty_bar {border-left-color: #46a758 !important}
.noty_bar.noty_type__error, .noty_type__error > .noty_bar {border-left-color: var(--ap-rojo) !important}
.noty_bar.noty_type__warning, .noty_type__warning > .noty_bar {border-left-color: #f0ad4e !important}
.noty_bar.noty_type__information, .noty_type__information > .noty_bar,
.noty_bar.noty_type__info {border-left-color: var(--ap-azul) !important}
.noty_theme__relax .noty_progressbar {background-color: var(--ap-azul); opacity: .4}
.noty_close_button {color: var(--ap-gris-oscuro); background: transparent !important}

/* ================================================================ DataTables */
/* DataTablesSimple/datatables.css se carga después y fija blancos y #333: se sobrescribe
   con .mainbar delante para que siga los tokens (y por tanto el modo oscuro) */
.mainbar table.dataTable tbody tr {background-color: var(--ap-superficie)}
.mainbar table.dataTable thead th,
.mainbar table.dataTable tfoot th,
.mainbar table.dataTable.no-footer {border-color: var(--ap-borde-suave)}
.mainbar .dataTables_wrapper .dataTables_length,
.mainbar .dataTables_wrapper .dataTables_filter,
.mainbar .dataTables_wrapper .dataTables_info,
.mainbar .dataTables_wrapper .dataTables_paginate {color: var(--ap-texto)}
.mainbar .dataTables_wrapper .dataTables_info {color: var(--ap-gris-oscuro)}
.mainbar .dataTables_wrapper .dataTables_paginate .paginate_button {
	background: transparent !important;
	border: 1px solid transparent !important;
	border-radius: var(--ap-radio-sm);
	color: var(--ap-texto) !important;
}
.mainbar .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	background: var(--ap-gris-claro) !important;
	border-color: var(--ap-borde-suave) !important;
	color: var(--ap-titulo) !important;
}
.mainbar .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.mainbar .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
	background: var(--ap-azul) !important;
	border-color: var(--ap-azul) !important;
	color: var(--ap-negro) !important;
}
.mainbar .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.mainbar .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
	background: transparent !important;
	border-color: transparent !important;
	color: var(--ap-gris-oscuro) !important;
}
.mainbar .dataTables_wrapper .dataTables_processing {
	background: var(--ap-superficie);
	border: 1px solid var(--ap-borde-suave);
	border-radius: var(--ap-radio);
	box-shadow: var(--ap-sombra-flotante);
	color: var(--ap-titulo);
}

/* ================================================================ Unir al informe (joinpdf) */
/* modules/joinpdf/style.css fija blancos; la miniatura del PDF (canvas) se queda blanca */
.mainbar #joinPdfList {
	background: var(--ap-fondo);
	border: 1px solid var(--ap-borde-suave);
	border-radius: var(--ap-radio);
}
.mainbar .pdf-card {
	background: var(--ap-superficie);
	border: 1px solid var(--ap-borde-suave);
	border-radius: var(--ap-radio-sm);
	color: var(--ap-texto);
}
.mainbar .pdf-card:hover {background: var(--ap-gris-claro)}
.mainbar .pdf-card canvas {border-color: var(--ap-borde-suave)}
.mainbar .pdf-card .order-number {background: var(--ap-azul); color: var(--ap-negro)}
.mainbar #joinPdfList li.drag-over .pdf-card {border: 2px dashed var(--ap-azul)}
.mainbar .drop-indicator {background: var(--ap-azul)}

/* Login con imagen corporativa del cliente */
.ap-powered-by {
	margin-top: var(--ap-esp-4);
	color: var(--ap-gris-oscuro);
	font-size: 11px;
	letter-spacing: .3px;
	text-align: center;
}

/* ================================================================ Cabecera: reloj, usuario e idioma */
/* Reloj y usuario en una sola línea, centrados verticalmente en la barra */
@media (min-width: 768px) {
	.navbar .user_profile {
		display: flex;
		align-items: center;
		height: 52px;
		margin-top: 0;
	}
	.navbar .user_profile > li {float: none}
}
.navbar .clock-space {
	position: static;
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 var(--ap-esp-2) 0 0;
	font-size: 13px;
	line-height: 1;
	white-space: nowrap;
}
.navbar .clock-space i {margin: 0}
.navbar .user_profile .ap-user-toggle {padding: 8px 12px}

/* Idioma dentro del menú del usuario */
.dropdown-menu .dropdown-header {
	padding: 6px 12px 4px;
	color: var(--ap-gris-oscuro);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .4px;
	text-transform: uppercase;
}
.dropdown-menu .dropdown-header i {margin-right: 4px}
.ap-lang-check {width: 14px; color: var(--ap-azul-texto)}
.ap-lang-option:not(.ap-lang-current) .ap-lang-check {visibility: hidden}
.ap-lang-current > a {font-weight: 600}
.dropdown-menu .divider {margin: 4px 0; background-color: var(--ap-borde-suave)}

/* ================================================================ Leyenda de columnas (estudios) */
/* style.css fija colores claros: las muestras imitan ahora la cabecera de la tabla */
.accordion-titulo {
	color: var(--ap-texto);
	border-color: var(--ap-borde-suave);
	border-radius: var(--ap-radio-sm);
	font-size: 15px;
	font-weight: 400;
}
.accordion-titulo:hover, .accordion-titulo:focus {background: var(--ap-azul-suave); color: var(--ap-titulo)}
.accordion-titulo.open {color: var(--ap-titulo); font-weight: 600}
.accordion-titulo span.toggle-icon {top: 50%; transform: translateY(-50%); color: var(--ap-gris-oscuro); font-size: 20px}
.accordion-content {color: var(--ap-texto); font-size: 13px}
.btn-preview-legend {
	min-height: 32px;
	background: var(--ap-gris-claro);
	border: 1px solid var(--ap-borde-suave);
	border-radius: var(--ap-radio-sm);
	box-shadow: none;
	color: var(--ap-titulo);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
}