:root {
font-size: 140%; /* Equivale a 18px si el base es 16px */
}
/* Colapsa el texto original "TBD" en la barra superior */
.md-header__topic:first-child .md-ellipsis {
font-size: 0;
}
/* Inyecta el nombre completo visualmente en su lugar */
.md-header__topic:first-child .md-ellipsis::before {
content: "Taller de Bases de Datos";
font-size: 1.05rem; /* El tamaño de fuente nativo del header */
font-weight: 700;
}
/* Grid de tarjetas */
.md-typeset .x-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: .75rem;
margin: .25rem 0 1rem;
}
/* Tarjeta clickeable (anchor) */
.md-typeset .x-card {
display: block;
position: relative; /* ← para posicionar el ícono */
padding: 1rem;
padding-right: 2.25rem; /* ← espacio para el ícono */
border: 1px solid var(--md-default-fg-color--lightest);
border-radius: .5rem;
background: var(--md-default-bg-color);
box-shadow: var(--md-shadow-z1);
color: inherit;
text-decoration: none;
transition: transform .08s ease, box-shadow .08s ease, border-color .08s ease;
}
.md-typeset .x-card:hover {
box-shadow: var(--md-shadow-z2);
border-color: var(--md-primary-fg-color);
transform: translateY(-1px);
}
/* Título: wrap + clamp a 2 líneas con elipsis */
.md-typeset .x-card-title {
font-weight: 600;
line-height: 1.25;
/* Romper palabras largas y ayudar a la separación */
overflow-wrap: anywhere; /* corta tokens largos (URLs, identificadores) */
word-break: break-word; /* fallback */
hyphens: auto; /* requiere lang="es" en para mejor silabeo */
/* Clamp multi-línea (1 línea) */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1; /* ← cambia a 3 si quieres tres líneas */
line-clamp: 1; /* especificación moderna (algunos navegadores) */
overflow: hidden;
text-overflow: ellipsis;
/* Mantiene altura uniforme para filas de cards */
/* min-height: calc(1.25em * 2); */ /* line-height × 2 líneas = ~2.5em */
}
/* -------- Flecha a la derecha (fallback con texto) -------- */
.md-typeset .x-card::after {
content: '›'; /* fallback: símbolo tipográfico */
position: absolute;
right: .75rem;
top: 50%;
transform: translateY(-50%);
font-size: 1.1rem;
color: var(--md-default-fg-color--lighter);
pointer-events: none; /* no bloquea el click */
transition: color .12s ease, transform .12s ease;
}
.md-typeset .x-card:hover::after {
color: var(--md-primary-fg-color);
transform: translateY(-50%) translateX(.1rem);
}
/* -------- Versión con SVG (si hay soporte de mask) -------- */
@supports (mask: url("")) or (-webkit-mask: url("")) {
.md-typeset .x-card::after {
content: "";
width: 1rem;
height: 1rem;
right: .75rem;
top: 50%;
transform: translateY(-50%);
position: absolute;
pointer-events: none;
/* Color del ícono: se toma de background-color */
background-color: var(--md-default-fg-color--lighter);
/* Chevron basado en máscara SVG (hereda color del background-color) */
mask: url("data:image/svg+xml;utf8,\
") no-repeat center / contain;
-webkit-mask: url("data:image/svg+xml;utf8,\
") no-repeat center / contain;
/* Quita el tamaño de fuente del fallback */
font-size: initial;
}
.md-typeset .x-card:hover::after {
background-color: var(--md-primary-fg-color);
transform: translateY(-50%) translateX(.1rem);
}
}
/* Ajuste fino por CSS (si prefieres en vez de inline) */
.md-header__button.md-logo img {
height: 46px !important;
width: auto !important;
}
h1, h2, h3 {
font-weight: bold !important;
color: black !important;
}
/* ANCHO DEL CONTENIDO PRINCIPAL */
.md-content {
max-width: 800px;
margin-left: 10px;
margin-right: 10px;
}
/* Estilo para tabla de encabezados de tareas: */
.md-typeset table.simple-kv {
width: 100%;
border-collapse: collapse;
font-size: .9em;
}
.md-typeset table.simple-kv td {
border-bottom: 1px solid #e5e7eb; /* gris claro */
padding: 0.4em 0.8em;
}
.md-typeset table.simple-kv td:first-child {
font-weight: 700;
width: 150px;
}
.md-typeset .pie_figura {
text-align: center;
font-size: 0.7em;
color: #666;
margin-top: 5px;
margin-bottom: 15px;
font-style: normal !important;
}
.center {
display: block !important; /* La convierte en un elemento de bloque */
margin-left: auto;
margin-right: auto; /* Centra el elemento de bloque */
}
/* Tamaño y color de menús laterales INICIO */
.md-sidebar {
font-size: 0.8em; /* 90% del tamaño original */
color: #666 !important; /* Color más tenue */
}
/* Tamaño y color del menú lateral FIN */