/* MEZTLI IA — estilos frontend */

.meztli-modulo {
	max-width: 860px;
	margin: 2rem auto;
	font-family: inherit;
}

.meztli-disclaimer {
	font-size: 0.85rem;
	color: #5a5a5a;
	background: #f4f1ea;
	border-left: 3px solid #8a6d3b;
	padding: 0.6rem 0.9rem;
	margin: 0.5rem 0 1.2rem;
}

.meztli-acceso-restringido {
	padding: 1.5rem;
	background: #f8f8f8;
	border-radius: 6px;
	text-align: center;
}

/* Chat */
.meztli-chat-mensajes {
	min-height: 280px;
	max-height: 520px;
	overflow-y: auto;
	border: 1px solid #e0ddd4;
	border-radius: 8px;
	padding: 1rem;
	background: #fff;
	margin-bottom: 1rem;
}

.meztli-mensaje { margin-bottom: 1rem; }
.meztli-mensaje-usuario p {
	background: #1f3b57;
	color: #fff;
	padding: 0.6rem 0.9rem;
	border-radius: 10px 10px 2px 10px;
	display: inline-block;
	max-width: 80%;
	margin-left: auto;
}
.meztli-mensaje-usuario { text-align: right; }

.meztli-mensaje-ia .meztli-mensaje-contenido {
	background: #f4f1ea;
	padding: 0.8rem 1rem;
	border-radius: 10px 10px 10px 2px;
	max-width: 90%;
	overflow-x: auto;
}

/* Respuesta formateada desde Markdown (System Prompt de TLANEXTIA
 * devuelve estructura con ##, **negritas**, listas y separadores). */
.meztli-respuesta-formateada {
	line-height: 1.55;
}
.meztli-respuesta-formateada h3,
.meztli-respuesta-formateada h4,
.meztli-respuesta-formateada h5,
.meztli-respuesta-formateada h6 {
	margin: 0.9rem 0 0.4rem;
	color: #1f3b57;
	font-weight: 700;
}
.meztli-respuesta-formateada h3 { font-size: 1.05rem; }
.meztli-respuesta-formateada h4 { font-size: 1rem; }
.meztli-respuesta-formateada h5,
.meztli-respuesta-formateada h6 { font-size: 0.92rem; }
.meztli-respuesta-formateada p {
	margin: 0 0 0.6rem;
}
.meztli-respuesta-formateada ul {
	margin: 0 0 0.6rem;
	padding-left: 1.3rem;
}
.meztli-respuesta-formateada li {
	margin-bottom: 0.25rem;
}
.meztli-respuesta-formateada strong {
	color: #1f3b57;
}
.meztli-respuesta-formateada code {
	background: #e8e4d8;
	padding: 0.1rem 0.35rem;
	border-radius: 4px;
	font-size: 0.88em;
}
.meztli-respuesta-formateada hr {
	border: none;
	border-top: 1px solid #d8d4c8;
	margin: 0.8rem 0;
}
.meztli-respuesta-formateada blockquote {
	margin: 0 0 0.6rem;
	padding: 0.4rem 0.8rem;
	border-left: 3px solid #c97c2c;
	background: #fdf6ea;
	font-size: 0.92em;
	color: #5a4a30;
}
.meztli-tabla-respuesta {
	width: 100%;
	border-collapse: collapse;
	margin: 0.3rem 0 0.8rem;
	font-size: 0.9rem;
	background: #fff;
}
.meztli-tabla-respuesta th,
.meztli-tabla-respuesta td {
	border: 1px solid #d8d4c8;
	padding: 0.45rem 0.6rem;
	text-align: left;
	vertical-align: top;
}
.meztli-tabla-respuesta th {
	background: #ece6d6;
	color: #1f3b57;
	font-weight: 700;
}
.meztli-tabla-respuesta tbody tr:nth-child(even) {
	background: #faf8f2;
}
.meztli-respuesta-formateada > *:first-child {
	margin-top: 0;
}
.meztli-respuesta-formateada > *:last-child {
	margin-bottom: 0;
}

.meztli-mensaje-fuentes {
	font-size: 0.78rem;
	color: #6b6b6b;
	margin-top: 0.3rem;
}

.meztli-aviso-sin-fundamento {
	background: #fdf2e9;
	border-left: 3px solid #c97c2c;
	padding: 0.6rem 0.9rem;
	font-size: 0.9rem;
}

.meztli-aviso {
	background: #fdecea;
	border-left: 4px solid #c0392b;
	padding: 0.8rem 1rem;
	border-radius: 6px;
	margin: 0.8rem 0;
	color: #7a2a20;
}
.meztli-exito-documento {
	background: #e8f5e9;
	border-left: 4px solid #2e7d32;
	padding: 0.9rem 1.1rem;
	border-radius: 6px;
	margin: 0.8rem 0;
	color: #1b4d20;
	font-size: 0.95rem;
	line-height: 1.5;
}

.meztli-btn-revision-secundario {
	margin-top: 0.4rem;
	font-size: 0.8rem;
	background: none;
	border: 1px solid #8a6d3b;
	color: #8a6d3b;
	border-radius: 4px;
	padding: 0.3rem 0.6rem;
	cursor: pointer;
}

.meztli-btn-revision-destacado {
	background: #c97c2c;
	border-color: #c97c2c;
	color: #fff;
	font-weight: 600;
	display: block;
	width: 100%;
}

.meztli-chat-form { display: flex; gap: 0.6rem; }
.meztli-chat-form textarea {
	flex: 1;
	min-height: 48px;
	padding: 0.6rem;
	border-radius: 6px;
	border: 1px solid #ccc;
	resize: vertical;
}
.meztli-chat-form button,
.meztli-constructor button,
.meztli-auditoria button {
	background: #1f3b57;
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 0.6rem 1.2rem;
	cursor: pointer;
}

/* Documento generado */
.meztli-banner-borrador {
	background: #fff3cd;
	border: 1px solid #e0c060;
	padding: 0.6rem 0.9rem;
	border-radius: 6px;
	margin-bottom: 1rem;
}
.meztli-clausula { margin-bottom: 0.8rem; line-height: 1.5; }
.meztli-resumen-lista {
	margin: 0;
	padding-left: 1.4rem;
}
.meztli-resumen-lista li {
	margin-bottom: 0.6rem;
	line-height: 1.5;
}
.meztli-analisis-servicio ul {
	margin: 0;
	padding-left: 1.4rem;
}
.meztli-analisis-servicio li {
	margin-bottom: 0.7rem;
	line-height: 1.5;
}

.meztli-badge-ia-libre {
	display: inline-block;
	background: #fff3cd;
	color: #7a5c00;
	border: 1px solid #e0c060;
	border-radius: 4px;
	padding: 0.15rem 0.5rem;
	font-size: 0.78rem;
	margin-top: 0.2rem;
}

.meztli-generar-ia-bloque {
	display: flex;
	gap: 0.4rem;
	align-items: center;
	margin-top: 0.5rem;
	padding-top: 0.5rem;
	border-top: 1px dashed #d8d4c8;
}
.meztli-select-modo-ia {
	font-size: 0.82rem;
	padding: 0.3rem;
	border-radius: 5px;
	border: 1px solid #ccc;
}
.meztli-btn-generar-ia {
	background: #4a2e1f;
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 0.4rem 0.8rem;
	font-size: 0.85rem;
	cursor: pointer;
}
.meztli-btn-generar-ia:hover { background: #623e2b; }
.meztli-btn-generar-ia:disabled { opacity: 0.6; cursor: not-allowed; }

.meztli-firmas {
	margin-top: 1.2rem;
	padding-top: 0.8rem;
	border-top: 1px solid #d8d4c8;
}
.meztli-firma-bloque {
	display: inline-block;
	width: 47%;
	margin-right: 2%;
	vertical-align: top;
	margin-top: 1.5rem;
}
.meztli-linea-firma {
	margin-bottom: 0.2rem;
	font-size: 1.1rem;
}
.meztli-fecha-firma {
	margin-top: 1.5rem;
}

/* Estados de documento */
.meztli-estado-borrador { color: #8a6d3b; font-weight: 600; }
.meztli-estado-revision { color: #2c6fa3; font-weight: 600; }
.meztli-estado-revisado { color: #2e7d32; font-weight: 600; }
.meztli-estado-rechazado { color: #c62828; font-weight: 600; }

.meztli-tabla-documentos,
.meztli-tabla-hallazgos,
.meztli-tabla-fundamentos {
	width: 100%;
	border-collapse: collapse;
	margin-top: 1rem;
}
.meztli-tabla-documentos th, .meztli-tabla-documentos td,
.meztli-tabla-hallazgos th, .meztli-tabla-hallazgos td,
.meztli-tabla-fundamentos th, .meztli-tabla-fundamentos td {
	border: 1px solid #e0ddd4;
	padding: 0.5rem 0.7rem;
	text-align: left;
	font-size: 0.9rem;
}

.meztli-sin-fundamento { color: #c62828; }

.meztli-modal {
	position: fixed; inset: 0;
	background: rgba(0,0,0,0.45);
	display: flex; align-items: center; justify-content: center;
	z-index: 9999;
}
/* FIX 2026-06-21: el selector de clase .meztli-modal tiene más
 * especificidad que el atributo [hidden] nativo de HTML5, así que sin
 * esta regla el modal queda SIEMPRE visible al cargar la página
 * (bug real reportado: tono gris + botón "×" bloqueando toda la
 * página apenas se entra a /meztli-ia/, sin ninguna acción del
 * usuario). [hidden] debe ganar explícitamente sobre .meztli-modal. */
.meztli-modal[hidden] {
	display: none;
}
.meztli-modal-contenido {
	background: #fff; border-radius: 8px;
	max-width: 720px; max-height: 80vh; overflow-y: auto;
	padding: 1.5rem; position: relative;
}
.meztli-modal-cerrar {
	position: absolute; top: 0.6rem; right: 0.9rem;
	background: none; border: none; font-size: 1.4rem; cursor: pointer;
}

.meztli-formulario-dinamico .meztli-campo { margin-bottom: 1rem; }
.meztli-formulario-dinamico label { display: block; margin-bottom: 0.3rem; font-weight: 600; }
.meztli-formulario-dinamico input,
.meztli-formulario-dinamico textarea,
.meztli-formulario-dinamico select {
	width: 100%; padding: 0.5rem; border-radius: 6px; border: 1px solid #ccc;
}
.meztli-campo-error { color: #c62828; font-size: 0.85rem; margin-top: 0.2rem; }

/* Selector de modo y metadatos de respuesta (3 modos de consulta) */
.meztli-selector-modo {
	margin-bottom: 1rem;
	padding: 0.8rem;
	background: #f4f1ea;
	border-radius: 8px;
}
.meztli-selector-modo select {
	margin-left: 0.5rem;
	padding: 0.4rem;
	border-radius: 6px;
	border: 1px solid #ccc;
}
.meztli-modo-descripcion {
	font-size: 0.82rem;
	color: #5a5a5a;
	margin: 0.4rem 0 0;
}

.meztli-chat-acciones {
	display: flex;
	gap: 0.6rem;
	margin-bottom: 0.8rem;
}
.meztli-btn-secundario {
	background: #fff;
	border: 1px solid #1f3b57;
	color: #1f3b57;
	border-radius: 6px;
	padding: 0.45rem 0.9rem;
	font-size: 0.88rem;
	cursor: pointer;
}
.meztli-btn-secundario:hover {
	background: #f4f1ea;
}
.meztli-btn-secundario:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.meztli-metadatos-respuesta {
	margin-top: 0.6rem;
	font-size: 0.78rem;
	border-top: 1px dashed #d8d4c8;
	padding-top: 0.5rem;
}
.meztli-metadatos-respuesta table {
	width: 100%;
	border-collapse: collapse;
}
.meztli-metadatos-respuesta td {
	padding: 0.15rem 0.4rem 0.15rem 0;
	color: #6b6b6b;
	vertical-align: top;
}
.meztli-metadatos-respuesta td:first-child {
	font-weight: 600;
	white-space: nowrap;
	width: 1%;
}
.meztli-meta-advertencia {
	margin: 0.4rem 0 0;
	color: #8a6d3b;
	font-style: italic;
}

.meztli-fila-revision td {
	border-top: none;
	padding-top: 0;
}
.meztli-bloque-revision {
	background: #f4f1ea;
	border-left: 4px solid #1f3b57;
	border-radius: 0 0 6px 6px;
	padding: 0.8rem 1rem;
	margin-bottom: 0.6rem;
	font-size: 0.9rem;
	line-height: 1.5;
}
.meztli-bloque-revision p { margin: 0.3rem 0; }
.meztli-btn-descargar-revisado {
	display: inline-block;
	background: #1f3b57;
	color: #fff;
	padding: 0.4rem 0.9rem;
	border-radius: 6px;
	text-decoration: none;
	font-size: 0.88rem;
}
.meztli-btn-descargar-revisado:hover { background: #2a4f73; color: #fff; }

.meztli-nav-secciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 2px solid #1f3b57;
}
.meztli-nav-secciones a {
	padding: 0.5rem 0.9rem;
	border-radius: 6px;
	text-decoration: none;
	color: #1f3b57;
	background: #f4f1ea;
	font-size: 0.88rem;
}
.meztli-nav-secciones a:hover { background: #e6e0d2; }
.meztli-nav-secciones a.meztli-nav-activo {
	background: #1f3b57;
	color: #fff;
}
.meztli-nav-inicio {
	font-weight: 600;
	background: transparent !important;
	border: 1px solid #1f3b57;
}

.meztli-hub-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.2rem;
	margin-top: 1rem;
}
.meztli-hub-card {
	display: block;
	padding: 1.4rem;
	border-radius: 10px;
	background: #f4f1ea;
	border: 1px solid #e0ddd4;
	text-decoration: none;
	color: inherit;
	transition: transform 0.15s, box-shadow 0.15s;
}
.meztli-hub-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 4px 14px rgba(0,0,0,0.1);
	border-color: #1f3b57;
}
.meztli-hub-icono { font-size: 1.8rem; }
.meztli-hub-card h3 {
	margin: 0.5rem 0 0.4rem;
	color: #1f3b57;
	font-size: 1.05rem;
}
.meztli-hub-card p {
	margin: 0;
	font-size: 0.88rem;
	color: #5a5a5a;
	line-height: 1.4;
}

/* ── Auditoría de Documentos: ficha, checklist, opinión, badges ── */
/* AMPLIACIÓN 2026-06-22: estilos para la auditoría documental como
   abogado profesional — ver Meztli_Document_Auditor y
   Meztli_Risk_Report. Los colores de riesgo se fijan también inline
   en el HTML generado server-side donde ese HTML alimenta el PDF
   (TCPDF no carga este archivo), así que estas clases son la capa de
   presentación para el navegador únicamente. */

.meztli-auditoria-completada {
	background: #f4f1ea;
	border-left: 3px solid #1f3b57;
	border-radius: 6px;
	padding: 0.9rem 1.1rem;
	margin: 1rem 0 1.4rem;
}
.meztli-auditoria-completada p { margin: 0.3rem 0; }
.meztli-auditoria-completada .meztli-btn-descargar-pdf-auditoria {
	margin-top: 0.5rem;
}

.meztli-btn-descargar-pdf-auditoria {
	background: #1f3b57;
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 0.4rem 0.8rem;
	font-size: 0.85rem;
	cursor: pointer;
}
.meztli-btn-descargar-pdf-auditoria:hover { background: #2c5278; }
.meztli-btn-descargar-pdf-auditoria:disabled { opacity: 0.6; cursor: not-allowed; }

/* Badges de nivel de riesgo — usados en Mis Documentos, en el
   resultado inmediato de Auditoría, y dentro del informe renderizado
   (ficha/checklist reutilizan colores equivalentes fijados inline). */
.meztli-riesgo-bajo,
.meztli-riesgo-medio,
.meztli-riesgo-alto,
.meztli-riesgo-critico,
.meztli-riesgo-no-determinado {
	display: inline-block;
	border-radius: 4px;
	padding: 0.15rem 0.6rem;
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
}
.meztli-riesgo-bajo           { background: #e6f4ea; color: #2e7d32; }
.meztli-riesgo-medio          { background: #fff3cd; color: #8a6d00; }
.meztli-riesgo-alto           { background: #fdecea; color: #c62828; }
.meztli-riesgo-critico        { background: #f1e3f7; color: #7b1fa2; }
.meztli-riesgo-no-determinado { background: #eee;    color: #616161; }

.meztli-titulo-seccion-auditorias {
	margin-top: 2.2rem;
	padding-top: 1.2rem;
	border-top: 1px solid #e0ddd4;
}

.meztli-tabla-auditorias td { vertical-align: middle; }

/* Informe de Auditoría: ficha de identificación */
.meztli-tabla-ficha {
	width: 100%;
	border-collapse: collapse;
	margin: 0.6rem 0 1.2rem;
}
.meztli-tabla-ficha th, .meztli-tabla-ficha td {
	border: 1px solid #e0ddd4;
	padding: 0.45rem 0.7rem;
	font-size: 0.88rem;
	text-align: left;
	vertical-align: top;
}
.meztli-tabla-ficha th {
	width: 32%;
	background: #f4f1ea;
	color: #1f3b57;
	font-weight: 600;
}
.meztli-ficha-sin-dato { color: #8a8a8a; font-style: italic; }

/* Informe de Auditoría: checklist de cláusulas esperadas */
.meztli-aviso-checklist {
	font-size: 0.82rem;
	color: #5a5a5a;
	margin: 0.2rem 0 0.6rem;
}
.meztli-tabla-checklist {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.2rem;
	table-layout: fixed;
}
.meztli-tabla-checklist th, .meztli-tabla-checklist td {
	border: 1px solid #e0ddd4;
	padding: 0.5rem 0.7rem;
	font-size: 0.88rem;
	text-align: left;
	overflow-wrap: break-word;
}

/* ── Animación de carga temática: "revisión legal en curso" ──────
   Reemplaza el spinner genérico mientras dura la auditoría (puede
   tardar 30-90s porque encadena varias llamadas a Claude — ver
   Meztli_Document_Auditor::auditar()). El objetivo es transmitir que
   SÍ está pasando trabajo real, para que el usuario no piense que la
   página se congeló y la cierre o recargue a medio análisis. */
.meztli-loader-legal {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.7rem;
	padding: 1.8rem 1rem;
	text-align: center;
}
.meztli-loader-legal svg {
	width: 90px;
	height: 90px;
}
.meztli-loader-mensaje {
	font-size: 0.92rem;
	color: #3a3a3a;
	font-weight: 600;
	min-height: 1.3em;
	margin: 0;
}
.meztli-loader-aviso {
	font-size: 0.78rem;
	color: #8a8a8a;
	margin: 0;
}

.meztli-linea-doc { fill: #d8d4c8; }
@keyframes meztli-linea-resalta {
	0%, 80%, 100% { fill: #d8d4c8; }
	40% { fill: #c97c2c; }
}
.meztli-linea-1 { animation: meztli-linea-resalta 4s ease-in-out infinite; animation-delay: 0s; }
.meztli-linea-2 { animation: meztli-linea-resalta 4s ease-in-out infinite; animation-delay: 0.8s; }
.meztli-linea-3 { animation: meztli-linea-resalta 4s ease-in-out infinite; animation-delay: 1.6s; }
.meztli-linea-4 { animation: meztli-linea-resalta 4s ease-in-out infinite; animation-delay: 2.4s; }
.meztli-linea-5 { animation: meztli-linea-resalta 4s ease-in-out infinite; animation-delay: 3.2s; }

@keyframes meztli-lupa-recorrido {
	0%   { transform: translateY(-18px); }
	20%  { transform: translateY(-9px); }
	40%  { transform: translateY(0px); }
	60%  { transform: translateY(9px); }
	80%  { transform: translateY(18px); }
	100% { transform: translateY(-18px); }
}
.meztli-lupa-grupo {
	animation: meztli-lupa-recorrido 4s ease-in-out infinite;
	transform-origin: center;
}

/* Botones de acción tras la auditoría: asistencia / rectificación */
.meztli-btn-solicitar-asistencia,
.meztli-btn-solicitar-rectificacion {
	border: none;
	border-radius: 6px;
	padding: 0.4rem 0.8rem;
	font-size: 0.85rem;
	cursor: pointer;
	margin-top: 0.4rem;
	margin-right: 0.4rem;
}
.meztli-btn-solicitar-asistencia {
	background: #2c6fa3;
	color: #fff;
}
.meztli-btn-solicitar-asistencia:hover { background: #245a85; }
.meztli-btn-solicitar-rectificacion {
	background: #8a6d3b;
	color: #fff;
}
.meztli-btn-solicitar-rectificacion:hover { background: #6f5630; }
.meztli-btn-solicitar-asistencia:disabled,
.meztli-btn-solicitar-rectificacion:disabled { opacity: 0.6; cursor: not-allowed; }

.meztli-aviso-solicitud-enviada {
	display: inline-block;
	background: #e6f4ea;
	color: #2e7d32;
	border: 1px solid #b8dec0;
	border-radius: 4px;
	padding: 0.3rem 0.6rem;
	font-size: 0.82rem;
	margin-top: 0.4rem;
}

/* ── Biblioteca Jurídica: tarjetas de modo y sus fuentes ──────────
   Esta sección no tenía estilos propios antes — heredaba solo lo
   genérico de .meztli-modulo/.meztli-disclaimer. */
.meztli-modos-info {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1rem;
	margin-top: 1.2rem;
}
.meztli-modo-card {
	background: #fff;
	border: 1px solid #e0ddd4;
	border-radius: 10px;
	padding: 1.1rem 1.2rem;
}
.meztli-modo-card h4 {
	margin: 0 0 0.5rem;
	color: #1f3b57;
	font-size: 1rem;
}
.meztli-modo-card > p {
	font-size: 0.88rem;
	color: #4a4a4a;
	line-height: 1.45;
	margin: 0 0 0.8rem;
}
.meztli-btn-ver-fuentes-modo {
	background: #1f3b57;
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 0.4rem 0.8rem;
	font-size: 0.82rem;
	cursor: pointer;
}
.meztli-btn-ver-fuentes-modo:hover { background: #2c5278; }

.meztli-fuentes-modo {
	margin-top: 0.9rem;
	padding-top: 0.8rem;
	border-top: 1px dashed #d8d4c8;
	font-size: 0.88rem;
}
.meztli-fuentes-modo ul { margin: 0; padding-left: 1.2rem; }
.meztli-fuentes-modo li { margin-bottom: 0.35rem; }
.meztli-fuentes-modo .meztli-area-juridica { margin-bottom: 0.9rem; }
.meztli-fuentes-modo .meztli-area-juridica h5 {
	margin: 0 0 0.3rem;
	color: #8a6d3b;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.meztli-fuentes-modo .meztli-area-juridica:last-child { margin-bottom: 0; }

/* Informe de Auditoría: hallazgos por sección (tarjetas, no tabla — ver
   Meztli_Risk_Report::render_html(). El color del borde se fija inline
   en el HTML server-side, igual que en checklist/ficha, porque TCPDF
   no carga este archivo al generar el PDF. */
.meztli-hallazgo {
	background: #fafaf7;
	border-radius: 0 6px 6px 0;
	padding: 0.7rem 1rem;
	margin-bottom: 0.8rem;
}
.meztli-hallazgo p { margin: 0.3rem 0; }
.meztli-hallazgo-riesgo { font-size: 0.82rem; }

/* Informe de Auditoría: opinión profesional de cierre */
.meztli-opinion-profesional {
	background: #f4f1ea;
	border-left: 3px solid #8a6d3b;
	border-radius: 6px;
	padding: 0.9rem 1.1rem;
	margin-top: 1.4rem;
}
.meztli-opinion-profesional h4 { margin-top: 0; }
.meztli-opinion-profesional ol { padding-left: 1.4rem; }
.meztli-opinion-profesional li { margin-bottom: 0.4rem; }