/* ===========================================================================
   MiDoctor24h — identidad visual del ERP
   ===========================================================================

   Colores tomados del logo real (marca/logo.svg) y del sitio midoctor24h.com,
   no inventados:

       #182B38   azul marino    color dominante de la marca
       #0E3043   marino profundo
       #5DB154   verde          acento del logo
       #82BB31   verde lima     acento secundario del logo
       #199790   verde azulado  acento de la web

   ESTRATEGIA
   ----------
   Se trabaja sobre las variables CSS que Frappe YA define
   (frappe/public/scss/espresso/_colors.scss y common/css_variables.scss),
   que es su punto de extension previsto. Redefinir `--primary` propaga solo
   a decenas de componentes sin tocarlos uno a uno, y sobrevive a las
   actualizaciones de Frappe mucho mejor que perseguir clases concretas.

   Las reglas que si apuntan a clases van al final, son pocas y son inertes
   si la clase desaparece.

   MODO OSCURO
   -----------
   Frappe conmuta con [data-theme="dark"] en <html>. Cada variable de marca
   se define en los dos, porque el marino sobre fondo negro no se lee.
   =========================================================================== */

/* `:root:root` y no `:root` a secas: este fichero se inyecta por
   `web_include_css`, que el head.html renderiza ANTES de los bundles de
   Frappe. A igual especificidad gana el ultimo, asi que un `:root` normal
   perderia contra el `:root` de login.bundle.css. Duplicar el selector
   sube la especificidad a (0,2,0) y deja de importar el orden. */
:root:root {
	/* --- Paleta de marca --------------------------------------------- */
	--md-marino: #182b38;
	--md-marino-profundo: #0e3043;
	--md-marino-claro: #2c4a5e;
	--md-verde: #5db154;
	--md-verde-oscuro: #4a9243;
	--md-lima: #82bb31;
	--md-teal: #199790;
	/* El teal de la web da 3.58:1 sobre blanco: vale para un borde o un anillo
	   de foco (WCAG pide 3:1 para elementos de interfaz) pero NO para texto,
	   que exige 4.5:1. Los enlaces son texto, asi que llevan una version
	   oscurecida del mismo tono: 4.83:1. Medido, no estimado. */
	--md-teal-texto: #177f79;

	/* Tintes suaves, para fondos y estados sin gritar. */
	--md-marino-tinte: #eef2f5;
	--md-verde-tinte: #eef7ed;

	/* --- Lo que Frappe usa en todas partes ---------------------------- */
	/* --brand-color ya es var(--primary), asi que hereda solo. */
	--primary: var(--md-marino);
	--primary-color: var(--md-marino);
	--btn-primary: var(--md-marino);

	/* Fila seleccionada en la barra lateral: verde muy tenue en vez de gris,
	   para que se distinga de un simple hover. */
	--sidebar-select-color: var(--md-verde-tinte);

	/* El anillo de foco es accesibilidad, no decoracion: con el marino sobre
	   fondo claro hay contraste suficiente para verlo sin mirar dos veces. */
	--md-anillo-foco: 0 0 0 2px #fff, 0 0 0 4px var(--md-teal);
}

[data-theme="dark"][data-theme="dark"] {
	/* Sobre fondo oscuro el marino desaparece: manda el verde. */
	--primary: var(--md-verde);
	--primary-color: var(--md-verde);
	--btn-primary: var(--md-verde);

	--md-marino-tinte: #1b2b33;
	--md-verde-tinte: #1c2f22;
	--sidebar-select-color: var(--md-verde-tinte);

	--md-anillo-foco: 0 0 0 2px var(--bg-color, #101010), 0 0 0 4px var(--md-verde);
}

/* ===========================================================================
   1. LOGO
   =========================================================================== */

/* CABECERA DE LA BARRA LATERAL DEL DESK
   -------------------------------------
   El logo salia diminuto y deformado. Dos causas, las dos medidas:

     desk/sidebar_header.scss:19   .header-logo { width:32px; height:32px }
     el <img> hereda               object-fit: fill

   Un lockup de 146x70 (2:1) metido en un cuadrado de 32x32 con `fill` no se
   encaja: se ESTIRA. De ahi que se viera aplastado e ilegible.

   ALTURA: 20px, y no mas. La cabecera son 208px y ahi caben tambien el bloque
   de titulo y el boton del chevron (16px). Medido con el CSS real del Desk:

       logo 26px (54x26) -> quedan 104px  ->  "MiDoctor24h ERP" SE CORTA
       logo 24px (50x24) -> quedan 108px  ->  SE CORTA
       logo 20px (42x20) -> quedan 116px  ->  cabe entero

   La primera version puso 26px porque el banco de pruebas se dejo fuera el
   boton del chevron. Medir sobre un modelo incompleto da un numero con toda la
   apariencia de estar medido.

   Las reglas de Frappe son (0,1,0); estas son (0,2,0) y (0,2,1), asi que ganan
   por especificidad y no hace falta un solo !important. */
.sidebar-header .sidebar-item-icon,
.sidebar-header .header-logo {
	width: auto;
	height: auto;
	max-width: none;
	flex: 0 0 auto;
	background-color: transparent;
}

.sidebar-header .header-logo img {
	height: 20px;
	width: auto;
	max-width: none;
	max-height: none;
	object-fit: contain;
}

/* Frappe deja 8px; no se toca. Subirlo le quitaba ancho al subtitulo, que es
   justo lo que no sobra aqui. */

/* El logo lleva el marino dentro del propio SVG, asi que en modo oscuro se
   sirve la variante blanca. Es un fichero distinto, no un filtro CSS: un
   `invert()` volveria cian los verdes de la marca. */
[data-theme="dark"] .sidebar-header .header-logo img[src*="logo-midoctor24h.svg"],
[data-theme="dark"] .navbar .app-logo[src*="logo-midoctor24h.svg"] {
	content: url("/assets/md24erp/images/logo-midoctor24h-blanco.svg");
}

/* La barra superior clasica (`.navbar`) sigue existiendo en las paginas web y
   en el modo antiguo; ahi el lockup tambien va a su proporcion. */
.navbar .navbar-brand img,
.navbar .app-logo {
	height: 26px;
	width: auto;
	max-width: none;
	object-fit: contain;
}

/* ===========================================================================
   2. BOTONES
   =========================================================================== */

.btn-primary,
.btn.btn-primary {
	background-color: var(--md-marino);
	border-color: var(--md-marino);
	color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
	background-color: var(--md-marino-profundo);
	border-color: var(--md-marino-profundo);
	color: #fff;
}

[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn.btn-primary {
	background-color: var(--md-verde);
	border-color: var(--md-verde);
	color: #0d1a10;
}

[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-primary:focus,
[data-theme="dark"] .btn-primary:active {
	background-color: var(--md-verde-oscuro);
	border-color: var(--md-verde-oscuro);
}

/* Foco visible SIEMPRE, no solo con teclado: en un ERP se navega mucho con
   Tab entre campos y perder el foco de vista cuesta tiempo real. */
.btn:focus-visible,
.form-control:focus,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
	box-shadow: var(--md-anillo-foco) !important;
	outline: none !important;
}

/* ===========================================================================
   3. ENLACES Y ACENTOS
   =========================================================================== */

a:not(.btn):not(.nav-link):not(.dropdown-item) {
	color: var(--md-teal-texto);
}

a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
	color: var(--md-marino-profundo);
}

[data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item) {
	color: var(--md-verde);
}

[data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
	color: var(--md-lima);
}

/* Franja de marca bajo la barra superior. Dos pixeles: suficiente para que
   el ERP se sienta de MiDoctor24h en cada pantalla, sin robar altura util. */
.navbar {
	border-bottom: 2px solid var(--md-verde) !important;
}

/* ===========================================================================
   4. LEGIBILIDAD DE LISTAS Y FORMULARIOS
   ===========================================================================
   Un ERP se mira ocho horas al dia. Estas son las que mas se notan. */

/* Bandas alternas: seguir una fila de 12 columnas sin perderse. */
.list-row-container:nth-child(even) {
	background-color: var(--md-marino-tinte);
}

[data-theme="dark"] .list-row-container:nth-child(even) {
	background-color: var(--md-marino-tinte);
}

.list-row-container:hover {
	background-color: var(--md-verde-tinte);
}

/* AQUI HABIA una regla que pegaba `.page-head` arriba con
   `top: var(--navbar-height, 48px)`. Se escribio pensando en la barra superior
   clasica de Frappe.

   El Desk v16 NO tiene barra superior: la navegacion es la barra lateral. Asi
   que ese `top: 48px` no dejaba sitio para nada, reservaba una franja muerta de
   48px por la que asomaban las tarjetas cortadas. Se veia como si la cabecera
   ocupase el doble de lo que debe.

   Eliminada. Era una mejora especulativa, escrita sin poder ver la pantalla, y
   el Desk ya resuelve eso por su cuenta.

/* Etiquetas de campo con algo mas de peso: distinguir etiqueta de valor de
   un vistazo es la mitad de leer un formulario. */
.form-group .control-label,
.frappe-control .control-label {
	font-weight: 600;
	color: var(--text-muted);
	letter-spacing: 0.01em;
}

/* ===========================================================================
   5. RESPONSIVE
   ===========================================================================
   El Desk de Frappe ya se adapta; lo que falla en un movil de verdad es el
   tamano de los blancos tactiles y las tablas que desbordan. */

@media (max-width: 767px) {
	/* 44px es el minimo recomendado para tocar con el pulgar sin fallar. */
	.btn,
	.list-row-container .list-row,
	.sidebar-item,
	.dropdown-item,
	.nav-link {
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	.btn-sm,
	.btn-xs {
		min-height: 38px;
		padding-left: 12px;
		padding-right: 12px;
	}

	/* Los campos con menos de 16px hacen que iOS acerque la pantalla al
	   enfocar, y el usuario queda con la vista descuadrada. */
	input.form-control,
	select.form-control,
	textarea.form-control,
	.frappe-control input,
	.frappe-control select {
		font-size: 16px !important;
	}

	/* Una tabla ancha no debe empujar la pagina entera: que se desplace
	   ella sola dentro de su caja. */
	.form-grid-container,
	.grid-body,
	.report-wrapper,
	.dt-scrollable {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Los botones de accion en columna llegan mejor al pulgar. */
	.page-actions {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
	}

	/* Margenes laterales mas ajustados: en 360px cada pixel cuenta. */
	.page-body,
	.container {
		padding-left: 12px;
		padding-right: 12px;
	}
}

/* Tablet: la barra lateral cabe, pero estrecha. */
@media (min-width: 768px) and (max-width: 1024px) {
	.layout-side-section {
		max-width: 200px;
	}
}

/* ===========================================================================
   6. PANTALLA DE ENTRADA
   ===========================================================================
   Es lo primero que ve cualquiera, y hoy es la de Frappe con su logo. */

.page-card,
.login-content {
	border-top: 3px solid var(--md-verde);
}

/* Aqui el logo manda: es la primera impresion y hay sitio de sobra.
   Frappe lo topa en `login.bundle.scss:407` con `img.app-logo { max-height:
   32px }` ANIDADO, que compila a un selector con elemento y por tanto mas
   especifico que `.page-card-head .app-logo`. Su tope recortaba mi altura sin
   que se viera el motivo: la regla se aplicaba, y el max-height la cortaba.
   El tope es de ellos y se anula a proposito, de ahi el !important. */
.page-card-head img.app-logo,
.login-content img.app-logo,
.for-login .page-card-head img {
	height: 48px !important;
	max-height: none !important;
	width: auto;
	margin-bottom: 4px;
}

/* El boton de entrar NO es `.btn-primary`: Frappe le pone `.btn-login` con
   `.btn-default`, y de ahi salia en negro #171717 pese a la marca. Lo mismo
   con los de registro y recuperacion de clave. */
.btn-login,
.btn-signup,
.btn-forgot,
.btn-login-with-email-link[type="submit"] {
	background-color: var(--md-marino) !important;
	border-color: var(--md-marino) !important;
	color: #fff !important;
}

.btn-login:hover,
.btn-signup:hover,
.btn-forgot:hover,
.btn-login-with-email-link[type="submit"]:hover {
	background-color: var(--md-marino-profundo) !important;
	border-color: var(--md-marino-profundo) !important;
}

/* Las opciones secundarias (entrar con enlace, volver a la clave) se quedan
   en gris a proposito: si todo grita, nada guia. */
.btn-login-option:not([type="submit"]) {
	background-color: var(--gray-100);
	color: var(--md-marino);
}

/* Que no se lea "Frappe Framework" en el pie de la entrada. */
.page-card .text-muted a[href*="frappe.io"],
.footer-powered {
	display: none !important;
}

/* En movil, Frappe presenta la tarjeta a sangre (sin margen ni esquinas
   redondeadas) y esta bien asi: parece una app, no una ficha flotante. Se
   respeta. Solo se ajusta el logo, que si tiene tope propio que anular. */
@media (max-width: 575px) {
	.page-card-head img.app-logo,
	.login-content img.app-logo {
		height: 40px !important;
	}
}