.cdff-app {
	/* Antes 880px — mucho más angosto que lo necesario para una tabla de 15 columnas,
	   forzaba scroll horizontal aun con espacio disponible en la página. Usa todo el ancho
	   que el tema de WordPress le dé al contenido, con un tope generoso solo para pantallas
	   muy anchas. */
	max-width: 1600px;
	width: 100%;
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.5;
	overflow-wrap: break-word;
	min-width: 0;
}

.cdff-app * {
	box-sizing: border-box;
	overflow-wrap: break-word;
	min-width: 0;
}

.cdff-app a {
	overflow-wrap: anywhere;
	word-break: break-word;
}

.cdff-app pre,
.cdff-app code {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.cdff-alert {
	padding: 12px 16px;
	border-radius: 4px;
	margin-bottom: 16px;
}

.cdff-alert--error {
	background: #fdecea;
	border: 1px solid #d93025;
	color: #611a15;
}

.cdff-loading {
	color: #555;
	font-size: 0.95em;
}

.cdff-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 12px;
	font-size: 0.75em;
	font-weight: 600;
	margin-left: 8px;
	vertical-align: middle;
}

.cdff-badge--fda_label,
.cdff-badge--cdc_factor {
	background: #d6f5e3;
	color: #0b6e4f;
}

.cdff-badge--published_ratio {
	background: #fff2cc;
	color: #7a5c00;
}

.cdff-badge--no_data {
	background: #f0f0f0;
	color: #555;
}

.cdff-source {
	font-size: 0.82em;
	color: #555;
	margin-top: 6px;
}

.cdff-price {
	font-size: 0.82em;
	font-weight: 600;
	color: #1a6b3c;
}

.cdff-hidden {
	display: none !important;
}

.cdff-mono-table-wrap {
	/* overflow-x: scroll (no "auto") a propósito — "auto" deja que el navegador/SO decida si
	   muestra la barra (en Windows con touch/precision touchpad o macOS con "mostrar barras
	   solo al desplazar" activado, el usuario no ve ninguna barra hasta que ya está
	   desplazando, sin pista visual de que hay más columnas). "scroll" fuerza que la pista de
	   la barra siempre se dibuje, aunque esté vacía si el contenido cabe. */
	overflow-x: scroll;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
	border: 1px solid #d9d9d9;
	border-radius: 6px;
	margin-bottom: 12px;
	scrollbar-width: auto;
	scrollbar-color: #0b6e4f #e6f5ee;
}

.cdff-mono-table-wrap::-webkit-scrollbar {
	height: 12px;
}

.cdff-mono-table-wrap::-webkit-scrollbar-track {
	background: #e6f5ee;
}

.cdff-mono-table-wrap::-webkit-scrollbar-thumb {
	background-color: #0b6e4f;
	border-radius: 6px;
}

.cdff-mono-table-wrap .cdff-mono-table {
	border-collapse: collapse;
	width: 100%;
	min-width: 1300px; /* +2 columnas (Dosis máxima, Lactancia separada de Embarazo) en esta ronda */
	font-size: 0.85em;
}

.cdff-mono-detail .cdff-mono-table-wrap .cdff-mono-table {
	min-width: 600px;
}

.cdff-mono-table th,
.cdff-mono-table td {
	border: 1px solid #e2e2e2;
	padding: 8px 10px;
	text-align: left;
	vertical-align: top;
}

.cdff-mono-table th {
	background: #f0faf6;
	position: sticky;
	top: 0;
}

.cdff-mono-row {
	cursor: pointer;
}

/* Recorta el texto de las celdas verbosas de la tabla corta a 2 líneas — el texto completo
   sigue disponible como tooltip (title=) y sin recortar dentro de la ficha desplegable. Evita
   que una sola celda larga (ej. "RAM importantes") estire toda la fila. */
tr.cdff-mono-row > td .cdff-clamp {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	max-height: 2.8em;
	cursor: help;
}

.cdff-price-cell {
	white-space: nowrap;
}

.cdff-price-cell .cdff-price {
	font-size: 0.9em;
}

.cdff-mono-row:hover {
	background: #f7fdfb;
}

.cdff-mono-detail td {
	background: #fafafa;
}

.cdff-category-heading {
	font-weight: 600;
	color: #0b6e4f;
	margin: 14px 0 4px;
}

.cdff-category-heading:first-of-type {
	margin-top: 4px;
}

.cdff-section-divider {
	border: none;
	border-top: 2px solid #0b6e4f;
	margin: 32px 0 24px;
}

.cdff-search-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
	flex-wrap: wrap;
}

.cdff-search-input {
	flex: 1 1 320px;
	padding: 10px 14px;
	font-size: 0.95em;
	border: 2px solid #0b6e4f;
	border-radius: 6px;
	min-width: 0;
}

.cdff-search-input:focus {
	outline: 2px solid #0b6e4f;
	outline-offset: 1px;
}

.cdff-search-count {
	font-size: 0.85em;
	color: #555;
	white-space: nowrap;
}

.cdff-print-btn {
	flex: 0 0 auto;
	padding: 10px 16px;
	font-size: 0.9em;
	font-weight: 600;
	color: #fff;
	background: #0b6e4f;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	white-space: nowrap;
}

.cdff-print-btn:hover {
	background: #095a40;
}

.cdff-print-hint {
	margin: -12px 0 20px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.cdff-comparativa-table {
	min-width: 1300px !important;
}

.cdff-comparativa-table tbody tr:nth-child(even) {
	background: #fafafa;
}

/* Sub-encabezado de cada categoría farmacológica en la sección de coadyuvantes. */
.cdff-group-heading {
	font-weight: 700;
	color: #0b6e4f;
	background: #f0faf6;
	border-left: 4px solid #0b6e4f;
	padding: 6px 10px;
	margin: 20px 0 8px;
	border-radius: 0 4px 4px 0;
}

/* El contenido imprimible (buildPrintOnlyContent en cdff-fichas.js) vive SIEMPRE oculto aquí
   en la página principal — nunca se muestra ni en pantalla ni al imprimir esta página. Es solo
   la fuente de datos que bindPrint() copia dentro de un <iframe> aislado con su propia hoja de
   estilos (PRINT_DOCUMENT_CSS, en JS) para imprimir ÚNICAMENTE el catálogo, sin el resto de la
   página (calculadoras, cabecera del tema, etc.) ni tener que ocultar por CSS elementos fuera
   del control de este plugin. */
#cdff-print-only {
	display: none !important;
}