|
|
| Línea 1: |
Línea 1: |
| /* Los estilos CSS colocados aquí se aplicarán a todas las apariencias */ | | /* Mostrar solo en escritorio */ |
| /* TOC escondida en todas las vistas */
| | .nomobile { |
| .toc, #toc { display: none; } | | display: block; |
| | |
| /* Estilos para dispositivos móviles */
| |
| @media screen and (max-width: 767px) {
| |
| .mobile-only {
| |
| display: block;
| |
| }
| |
| .nomobile {
| |
| display: none;
| |
| }
| |
| } | | } |
|
| |
|
| /* Estilos para dispositivos de escritorio */
| | .mobile-only { |
| @media screen and (min-width: 768px) {
| | display: none; |
| .mobile-only {
| |
| display: none;
| |
| }
| |
| .nomobile {
| |
| display: block;
| |
| }
| |
| | |
| } | | } |
|
| |
|
| /* Estilo cuadrados Página Principal */ | | /* Cuadrados de escritorio */ |
| .square-container { | | .square-container { |
| margin: 0 auto;
| | display: flex; |
| width: 90%;
| | justify-content: center; |
| text-align: center;
| | align-items: center; |
| margin-bottom: 15px;
| | margin-bottom: 10px; |
| } | | } |
|
| |
|
| .square { | | .square { |
| border-radius: 16px;
| | width: 100%; |
| padding: 25px;
| | aspect-ratio: 1 / 1; |
| background-color: #f1d7ff;
| | background-color: #f5f5f5; |
| margin: 0;
| | border: 1px solid #ccc; |
| border: none;
| | padding: 10px; |
| width: 200px; /* Ancho fijo para todos los cuadrados */
| | box-sizing: border-box; |
| height: 80px; /* Altura fija para todos los cuadrados */
| | text-align: center; |
| | border-radius: 8px; |
| | transition: transform 0.2s; |
| | } |
| | |
| | .square:hover { |
| | transform: scale(1.03); |
| } | | } |
|
| |
|
| | /* Cuadrados en móviles */ |
| .square-mobile-container { | | .square-mobile-container { |
| margin: 0 auto;
| | display: flex; |
| width: 90%;
| | justify-content: center; |
| text-align: center;
| | margin-bottom: 10px; |
| margin-bottom: 15px;
| |
| } | | } |
|
| |
|
| .square-mobile { | | .square-mobile { |
| border-radius: 16px;
| | width: 100%; |
| padding: 25px;
| | background-color: #f5f5f5; |
| background-color: #f1d7ff;
| | border: 1px solid #ccc; |
| margin: 0;
| | padding: 10px; |
| border: none;
| | box-sizing: border-box; |
| width: 120px; /* Ancho fijo para todos los cuadrados */
| |
| height: 80px; /* Altura fija para todos los cuadrados */
| |
| }
| |
| | |
| /* Contenedor general para el video */
| |
| .video-container {
| |
| position: relative;
| |
| padding-bottom: 56.25%; /* Relación de aspecto 16:9 */
| |
| height: 0;
| |
| overflow: hidden;
| |
| background: #000;
| |
| max-width: 100%; /* El video ocupará el 100% del contenedor padre */
| |
| }
| |
| | |
| /* iFrame del video */
| |
| .video-container iframe {
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| width: 100%;
| |
| height: 100%;
| |
| border: 0;
| |
| }
| |
| | |
| /* Limita el tamaño máximo en escritorio */
| |
| @media (min-width: 768px) {
| |
| .video-container {
| |
| max-width: 560px; /* Limita el ancho del video en desktop */
| |
| padding-bottom: 315px; /* Mantén la relación 16:9 */
| |
| }
| |
| }
| |
| | |
| .wikitablelogo {
| |
| border-collapse: collapse;
| |
| width: auto; /* Ajusta el ancho según el contenido */
| |
| background-color: #F8F9FA; /* Fondo de la tabla */ | |
| margin-left: 0; /* Alinea la tabla a la izquierda */ | |
| }
| |
| | |
| .wikitablelogo th {
| |
| background-color: #EAECF0; /* Fondo de los encabezados */ | |
| color: #000; /* Texto negro para contraste */ | |
| text-align: center; | | text-align: center; |
| | border-radius: 8px; |
| } | | } |
|
| |
|
| .wikitablelogo td {
| | /* Responsive para móviles */ |
| background-color: #F8F9FA; /* Fondo de las celdas */
| | @media only screen and (max-width: 768px) { |
| }
| | .nomobile { |
| | | display: none; |
| .wikitablelogo td:nth-child(1),
| | } |
| .wikitablelogo th:nth-child(1) { width: 125px; }
| |
| | |
| .wikitablelogo td:nth-child(2),
| |
| .wikitablelogo th:nth-child(2) { width: 150px; }
| |
| | |
| .wikitablelogo td:nth-child(3),
| |
| .wikitablelogo th:nth-child(3) { width: 500px; }
| |
| | |
| .wikitablelogo td:nth-child(4),
| |
| .wikitablelogo th:nth-child(4) { width: 200px; }
| |
| | |
| .wikitablelogo td:nth-child(5),
| |
| .wikitablelogo th:nth-child(5) { width: 125px; }
| |
| | |
| .wikitablelogo tr:not(:first-child) { height: 5em; }
| |
| | |
| .wikitablelogo th, .wikitablelogo td {
| |
| border: 1px solid #A2A9B1; /* Bordes en gris oscuro */
| |
| padding: 5px; | |
| }
| |
| | |
| /* Estilo mejorado para tablas */
| |
| .prettytable { | |
| width: auto; /* Se ajusta al contenido */ | |
| border-collapse: collapse;
| |
| font-family: Arial, sans-serif;
| |
| font-size: 14px;
| |
| background: #fff;
| |
| border-radius: 8px;
| |
| overflow: hidden;
| |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
| |
| margin-left: 0; /* Alinear la tabla a la izquierda */
| |
| }
| |
| | |
| /* Encabezados con color degradado y centrados */
| |
| .prettytable th {
| |
| background: linear-gradient(135deg, #0073e6, #005bb5);
| |
| color: #fff;
| |
| padding: 12px;
| |
| text-align: center; /* Centramos los títulos */
| |
| font-weight: bold;
| |
| border-bottom: 2px solid #004a99;
| |
| width: 150px; /* Ancho fijo de cada celda */
| |
| }
| |
| | |
| /* Celdas */
| |
| .prettytable td {
| |
| padding: 10px;
| |
| border-bottom: 1px solid #ddd;
| |
| width: 150px; /* Ancho fijo de cada celda */
| |
| }
| |
| | |
| /* Alternancia de colores en filas */
| |
| .prettytable tr:nth-child(even) {
| |
| background: #f8f9fa;
| |
| }
| |
| | |
| /* Iluminar solo la celda (no el encabezado) con azul claro */
| |
| .prettytable td:hover {
| |
| background: #add8e6; /* Azul claro */
| |
| transition: background 0.3s ease-in-out;
| |
| }
| |
| | |
| /* Bordes redondeados en primera y última fila */
| |
| .prettytable tr:first-child th:first-child {
| |
| border-top-left-radius: 8px;
| |
| }
| |
| | |
| .prettytable tr:first-child th:last-child {
| |
| border-top-right-radius: 8px;
| |
| }
| |
| | |
| .prettytable tr:last-child td:first-child {
| |
| border-bottom-left-radius: 8px;
| |
| } | |
|
| |
|
| .prettytable tr:last-child td:last-child { | | .mobile-only { |
| border-bottom-right-radius: 8px; | | display: block; |
| | } |
| } | | } |
/* Mostrar solo en escritorio */
.nomobile {
display: block;
}
.mobile-only {
display: none;
}
/* Cuadrados de escritorio */
.square-container {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
.square {
width: 100%;
aspect-ratio: 1 / 1;
background-color: #f5f5f5;
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
text-align: center;
border-radius: 8px;
transition: transform 0.2s;
}
.square:hover {
transform: scale(1.03);
}
/* Cuadrados en móviles */
.square-mobile-container {
display: flex;
justify-content: center;
margin-bottom: 10px;
}
.square-mobile {
width: 100%;
background-color: #f5f5f5;
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
text-align: center;
border-radius: 8px;
}
/* Responsive para móviles */
@media only screen and (max-width: 768px) {
.nomobile {
display: none;
}
.mobile-only {
display: block;
}
}