/* ==========================================================================
   Cor Diagnostico - Capa de marca
   Sobreescribe Material Kit con la paleta del logotipo.
   Cargar SIEMPRE despues de material-kit.css
   ========================================================================== */

:root {
	--cd-navy:        #16283C;
	--cd-navy-soft:   #1F3A56;
	--cd-teal:        #2BB6A8;
	--cd-teal-dark:   #1E9084;
	--cd-teal-light:  #58CEC2;
	--cd-gray:        #55606E;
	--cd-gray-light:  #8A97A6;
}

body,
.card,
.footer {
	font-family: "Poppins", "Roboto", "Helvetica Neue", Arial, sans-serif;
}

h1, h2, h3, h4, h5,
.card-title,
.navbar-brand {
	font-family: "Poppins", "Roboto", "Helvetica Neue", Arial, sans-serif;
	font-weight: 600;
}

/* --------------------------------------------------------------- Logotipo */
.cd-brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 6px 0;
	line-height: 1;
	text-decoration: none !important;
}

.cd-brand__mark {
	width: 46px;
	height: 44px;
	flex: 0 0 auto;
}

.cd-brand__mark .cd-heart {
	fill: none;
	stroke: #FFFFFF;
	stroke-width: 8;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.cd-brand__mark .cd-pulse {
	fill: none;
	stroke: var(--cd-teal);
	stroke-width: 8;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.cd-brand__text {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.cd-brand__name {
	font-size: 25px;
	font-weight: 600;
	letter-spacing: -0.3px;
	color: #FFFFFF;
	white-space: nowrap;
}

.cd-brand__name b {
	font-weight: 700;
}

.cd-brand__name span {
	font-weight: 300;
	color: #DCE3EA;
}

.cd-brand__tld {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 4px;
	color: var(--cd-teal);
	text-transform: uppercase;
}

/* Variante sobre fondo claro */
.cd-brand--dark .cd-brand__mark .cd-heart { stroke: var(--cd-navy); }
.cd-brand--dark .cd-brand__name           { color: var(--cd-navy); }
.cd-brand--dark .cd-brand__name span      { color: var(--cd-gray); }

/* Version compacta para mobile */
.cd-brand--sm .cd-brand__mark { width: 34px; height: 32px; }
.cd-brand--sm .cd-brand__name { font-size: 19px; }
.cd-brand--sm .cd-brand__tld  { font-size: 8px; letter-spacing: 3px; }

/* ------------------------------------------------------------------ Navbar */
.navbar.navbar-primary,
.navbar.navbar-transparent {
	background-color: transparent;
}

.navbar .navbar-nav > li > a.btn-white.btn-simple {
	color: #FFFFFF;
	font-weight: 500;
}

.navbar .navbar-nav > li > a.btn-white.btn-simple:hover {
	color: var(--cd-teal-light);
}

.navbar-toggle .icon-bar {
	background-color: #FFFFFF;
}

/* ------------------------------------------------- Cabecera / Hero visual */
.page-header.header-filter:before {
	background: linear-gradient(135deg,
		rgba(22, 40, 60, 0.93) 0%,
		rgba(22, 40, 60, 0.80) 45%,
		rgba(30, 144, 132, 0.72) 100%);
}

.page-header.header-filter:after {
	background: none;
}

.cd-hero-claim {
	color: #FFFFFF;
	text-align: center;
	margin-bottom: 70px;
}

.cd-hero-claim h2 {
	font-size: 34px;
	font-weight: 600;
	margin: 0 0 10px;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.cd-hero-claim p {
	font-size: 16px;
	font-weight: 300;
	color: #E3EAF0;
	margin: 0;
}

/* ------------------------------------------------------------------ Cards */
/* Las cards viven sobre el fondo azul del hero: los encabezados van en verde
   de marca para que tengan contraste. */
.card .header-primary,
.card .header-success {
	background: linear-gradient(60deg, var(--cd-teal-dark), var(--cd-teal));
	box-shadow: 0 12px 22px -10px rgba(30, 144, 132, 0.75);
}

.card .header-danger {
	background: linear-gradient(60deg, #E2725B, #C7503A);
	box-shadow: 0 12px 20px -12px rgba(199, 80, 58, 0.6);
}

.card [class*="header-"] .card-title {
	color: #FFFFFF;
}

/* ---------------------------------------------------------------- Botones */
.btn.btn-primary,
.btn.btn-primary:focus {
	background-color: var(--cd-teal);
	color: #FFFFFF;
	box-shadow: 0 2px 2px 0 rgba(43, 182, 168, 0.28),
	            0 3px 1px -2px rgba(43, 182, 168, 0.24),
	            0 1px 5px 0 rgba(43, 182, 168, 0.24);
}

.btn.btn-primary:hover,
.btn.btn-primary:active,
.btn.btn-primary.active {
	background-color: var(--cd-teal-dark);
	color: #FFFFFF;
}

.btn.btn-success,
.btn.btn-success:focus {
	background-color: var(--cd-navy-soft);
	color: #FFFFFF;
}

.btn.btn-success:hover,
.btn.btn-success:active {
	background-color: var(--cd-navy);
	color: #FFFFFF;
}

.btn.btn-danger.btn-link {
	color: var(--cd-gray);
}

/* ------------------------------------------------------------ Formularios */
.form-control:focus {
	border-color: var(--cd-teal);
}

.form-group.is-focused .form-control {
	background-image: linear-gradient(var(--cd-teal), var(--cd-teal)),
	                  linear-gradient(#D2D2D2, #D2D2D2);
}

.form-group.is-focused label,
.form-group.is-focused .control-label {
	color: var(--cd-teal-dark);
}

.input-group-addon .material-icons {
	color: var(--cd-navy-soft);
}

.checkbox label:hover,
a {
	color: var(--cd-teal-dark);
}

a:hover, a:focus {
	color: var(--cd-teal);
}

/* --------------------------------------------------------------- Alertas */
.alert.alert-success {
	background-color: var(--cd-teal);
}

/* -------------------------------------------------------------- Resultados */
#resultados.card {
	padding: 22px 20px 10px;
}

/* Solo el titulo de la tabla de resultados: si no, pisa (por especificidad de
   id) el blanco del encabezado de la card "No se encontro su informe". */
#resultados > h4 {
	color: var(--cd-navy);
	margin-top: 0;
	font-weight: 600;
}

#resultados .table > thead > tr > th {
	color: var(--cd-gray);
	border-bottom-color: #E4E9EE;
	font-weight: 600;
}

/* ------------------------------------------------------------------ Footer */
/* material-kit define "background: radial-gradient(...)" (shorthand): hay que
   pisarlo tambien con shorthand, no solo con background-color. */
.footer.footer-black {
	background: var(--cd-navy);
	background: linear-gradient(160deg, #1B3450 0%, var(--cd-navy) 60%, #0F1D2E 100%);
	background-size: auto;
	color: #C6D0DB;
}

.footer h5,
.footer.footer-black h5 {
	font-family: "Poppins", "Roboto", "Helvetica Neue", Arial, sans-serif;
	color: #FFFFFF;
	font-weight: 600;
	letter-spacing: 0.3px;
	border-bottom: 2px solid var(--cd-teal);
	display: inline-block;
	padding-bottom: 6px;
	margin-bottom: 18px;
}

.footer .social-feed .feed-line p,
.footer p {
	color: #C6D0DB;
	font-size: 13.5px;
	line-height: 1.6;
}

.footer .social-feed i,
.footer .feed-line i {
	color: var(--cd-teal);
}

.footer a {
	color: var(--cd-teal-light);
}

.footer a:hover {
	color: #FFFFFF;
}

.footer hr {
	border-color: rgba(255, 255, 255, 0.12);
}

.cd-doctor-name {
	color: #FFFFFF !important;
	font-size: 17px !important;
	font-weight: 600;
	margin-bottom: 2px;
}

.cd-doctor-role {
	color: var(--cd-teal-light) !important;
	font-size: 13px !important;
	margin-bottom: 12px;
}

.cd-matricula {
	display: inline-block;
	margin-top: 14px;
	padding: 5px 12px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 20px;
	font-size: 12px !important;
	letter-spacing: 0.5px;
	color: #E3EAF0 !important;
}

.cd-contact-mail {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
	font-size: 14px;
	word-break: break-all;
}

/* ------------------------------------------------------------------ Modal */
.modal-header .modal-title {
	color: var(--cd-navy);
	font-weight: 600;
}

/* --------------------------------------------------------------- Responsive */
@media (max-width: 991px) {
	.cd-hero-claim h2 { font-size: 27px; }
	.footer .col-md-3 { margin-bottom: 30px; }
}

/* ==========================================================================
   Hero: degradado de marca + trazado de ECG, sin foto de stock
   ========================================================================== */
.page-header.cd-hero {
	height: auto;
	min-height: 0;
	background-color: var(--cd-navy);
	background-image:
		url("../img/hero-ecg.svg"),
		radial-gradient(ellipse at 75% 15%, rgba(43, 182, 168, 0.30) 0%, rgba(43, 182, 168, 0) 55%),
		linear-gradient(150deg, #0F1D2E 0%, var(--cd-navy) 42%, #1B4A5A 100%);
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-position: center bottom, center, center;
	background-size: 100% auto, cover, cover;
	padding-bottom: 70px;
}

/* El overlay del template tapaba el degradado */
.page-header.cd-hero:before,
.page-header.cd-hero:after {
	display: none;
}

.page-header.cd-hero .container {
	padding-top: 130px;
}

@media (max-width: 767px) {
	.page-header.cd-hero .container { padding-top: 110px; }
}

/* Fondo general de la pagina (evita el gris del navegador bajo el contenido) */
html, body.login-page {
	background-color: var(--cd-navy);
}

/* La card de busqueda respira un poco mas */
.card.card-signup .content {
	padding-bottom: 10px;
}

.card.card-signup .footer {
	padding-bottom: 20px;
}

/* El pie no debe heredar el padding de .footer dentro de las cards */
.card .footer {
	background: none;
}

/* La card blanca se despega del fondo azul */
.page-header.cd-hero .card {
	box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.45);
}

/* Descripcion bajo el encabezado de cada card */
.card .description {
	color: var(--cd-gray);
	margin-top: 12px;
}

/* ==========================================================================
   Mobile: el contenido no debe desbordar horizontalmente
   ========================================================================== */
html, body {
	overflow-x: hidden;
	max-width: 100%;
}

@media (max-width: 767px) {

	.cd-hero-claim {
		margin-bottom: 55px;
	}

	.cd-hero-claim h2 {
		font-size: 24px;
		line-height: 1.25;
	}

	.cd-hero-claim p {
		font-size: 14px;
	}

	/* El navbar-brand de bootstrap tiene padding y float fijos que rompen
	   el ancho cuando el logo es un bloque flex. */
	.navbar .navbar-brand.cd-brand {
		float: none;
		height: auto;
		padding: 10px 0 10px 15px;
		max-width: calc(100% - 60px);
	}

	.cd-brand--sm .cd-brand__name {
		font-size: 17px;
		white-space: normal;
	}

	.cd-brand--sm .cd-brand__mark {
		width: 30px;
		height: 28px;
	}

	.navbar .navbar-toggle {
		margin-top: 14px;
	}

	.page-header.cd-hero .container,
	.footer .container {
		padding-left: 20px;
		padding-right: 20px;
	}

	.card .header-primary,
	.card .header-success,
	.card .header-danger {
		margin-left: 15px;
		margin-right: 15px;
	}

	#resultados .table td,
	#resultados .table th {
		font-size: 13px;
	}
}

/* Ayuda bajo el campo de DNI */
.cd-ayuda-dni {
	margin: 14px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--cd-gray-light);
	text-align: center;
}

/* El aviso de validacion va sobre el fondo azul del hero. El encabezado de la
   card sube con margen negativo, asi que necesita mas aire debajo del aviso. */
.page-header.cd-hero .alert {
	margin-bottom: 60px;
	box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.45);
}

/* ==========================================================================
   Tabla de resultados en pantallas chicas
   --------------------------------------------------------------------------
   Con la tabla normal, el boton "Descargar" queda fuera de la pantalla y el
   paciente tiene que arrastrar la tabla de costado para encontrarlo. Abajo de
   768px cada fila se apila: nombre del estudio arriba, boton abajo.
   ========================================================================== */
@media (max-width: 767px) {

	#resultados .table-responsive {
		overflow-x: visible;
		border: 0;
		margin-bottom: 0;
	}

	#resultados .table,
	#resultados .table tbody,
	#resultados .table tr,
	#resultados .table td {
		display: block;
		width: 100%;
	}

	/* Los encabezados (# / Estudio / Descargar) no aportan una vez apilado */
	#resultados .table thead {
		display: none;
	}

	#resultados .table tr {
		border-top: 1px solid var(--linea-tabla, #E4E9EE);
		padding: 16px 0 6px;
	}

	#resultados .table tr:first-child {
		border-top: 0;
		padding-top: 4px;
	}

	/* bootstrap pone white-space:nowrap en las celdas dentro de
	   .table-responsive por debajo de 768px: sin esto el nombre del
	   estudio se corta en vez de pasar a la linea siguiente. */
	#resultados .table td {
		border: 0;
		padding: 3px 0;
		text-align: left;
		white-space: normal;
	}

	/* El numero de fila solo tiene sentido en la tabla de varias columnas */
	#resultados .table td:first-child {
		display: none;
	}

	#resultados .table td a {
		word-break: break-word;
		line-height: 1.45;
	}

	#resultados .table td.td-actions {
		padding-top: 12px;
	}

	#resultados .table td.td-actions .btn {
		width: 100%;
		margin: 0;
	}
}