*
* Aplicamos estilos para que funcionen igual que la nueva estructura
*/
.container.theme-showcase {
/* Resetear estilos que puedan interferir */
background-color: transparent;
/* Aplicar estructura flexbox similar a body */
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container.theme-showcase [ui-view="header"] {
flex: 0 0 auto;
background-color: var(--bg-white);
}
.container.theme-showcase [ui-view="main_content"] {
flex: 1 0 auto;
background-color: var(--bg-light);
}
.container.theme-showcase [ng-include*="footer"],
.container.theme-showcase footer {
flex: 0 0 auto;
background-color: var(--bg-white);
margin-top: auto;
}
/* ========================================
RESET Y NORMALIZACIÓN
======================================== */
/* Box sizing */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Links */
a {
color: var(--text-dark);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover,
a:focus {
color: var(--color-primary);
text-decoration: none;
}
/* Imágenes */
img {
max-width: 100%;
height: auto;
vertical-align: middle;
}
/* Listas */
ul,
ol {
margin-top: 0;
margin-bottom: 1rem;
}
/* Tablas */
table {
border-collapse: collapse;
width: 100%;
}
/* ========================================
UTILIDADES DE ESPACIADO
======================================== */
/* Margen superior/inferior para secciones */
.section-spacing {
padding-top: var(--spacing-4);
padding-bottom: var(--spacing-4);
}
/* Separador visual entre secciones */
.section-divider {
border-bottom: 1px solid var(--border-color);
margin-bottom: var(--spacing-4);
}
/* ========================================
RESPONSIVE
======================================== */
/* Tablet y menor */
@media (max-width: 991px) {
[ui-view="main_content"].container {
min-height: calc(100vh - 250px);
}
}
/* Mobile */
@media (max-width: 767px) {
html {
font-size: 14px; /* Reduce base en móvil */
}
body.diba {
padding-top: 5px;
padding-bottom: 10px;
font-size: 0.875rem; /* 14px */
}
[ui-view="main_content"].container {
min-height: calc(100vh - 300px);
}
.section-spacing {
padding-top: var(--spacing-3);
padding-bottom: var(--spacing-3);
}
}
/* ========================================
PRINT STYLES
======================================== */
@media print {
body {
background-color: white;
color: black;
}
[ui-view="header"],
[ng-include*="footer"],
footer {
page-break-inside: avoid;
}
[ui-view="main_content"] {
page-break-inside: auto;
}
}
/* ========================================
ACCESIBILIDAD
======================================== */
/* Focus visible */
/* NOTA: Estilos de focus comentados para no interferir con Bootstrap 3
en formularios de la zona central/principal. */
/*
*:focus {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
*/
/* Skip to main content link (oculto hasta focus) */
.skip-to-main {
position: absolute;
top: -40px;
left: 0;
background-color: var(--color-primary);
color: white;
padding: var(--spacing-2) var(--spacing-3);
z-index: 100;
text-decoration: none;
}
.skip-to-main:focus {
top: 0;
}
/* Screen reader only */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.sr-only-focusable:focus {
position: static;
width: auto;
height: auto;
overflow: visible;
clip: auto;
white-space: normal;
}
/* ========================================
ESTADOS DE CARGA
======================================== */
/* Mostrar mientras AngularJS inicializa */
[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
display: none !important;
}
/* ========================================
NOTAS DE DESARROLLO
======================================== */
/**
* Este archivo debe cargarse PRIMERO antes de otros componentes CSS
*
* Orden de carga recomendado:
* 1. diba2025-00-base.css (este archivo)
* 2. diba2025-01-fuentes.css
* 3. diba2025-02-colores-fondo.css
* ... resto de componentes
*
* Estructura HTML actual (con .container en ui-view):
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
* Alineación con maqueta.html:
* - body.diba con padding-top: 10px y background: #f3f3f4
* - font-size base: 16px (1rem)
* - Cada sección con su .container
* - Bootstrap 3 grid system (container, row, col-*)
*
* Compatibilidad con vistas legacy:
* Las vistas generadas (consultaseu_14.html, etc.) con estructura
*
siguen funcionando
* gracias a los estilos de compatibilidad en este archivo.
*/