/* ==========================================================================
   SIAC UI — estilos base de las vistas reconstruidas (Bootstrap 4, sin Kendo)
   Paleta institucional del Gobierno de México
   ========================================================================== */
:root {
    /* Paleta del Sistema Nacional de Diseño (snd.gob.mx/estilos/colores) y guía GOB.mx v3.
       Principales: guinda 900, verde 900 y dorado 600. */
    --snd-guinda-100: #F3E4E9; --snd-guinda-200: #E1BDC9; --snd-guinda-300: #CE92A6; --snd-guinda-400: #BA6783;
    --snd-guinda-500: #A84565; --snd-guinda-600: #9B2247; --snd-guinda-700: #8E1D3F; --snd-guinda-800: #781838;
    --snd-guinda-900: #611232; --snd-guinda-950: #4A0C26;
    --snd-verde-100: #E0E9E8; --snd-verde-200: #B3C8C6; --snd-verde-300: #82A4A0; --snd-verde-400: #51807A;
    --snd-verde-500: #335955; --snd-verde-600: #004D40; --snd-verde-700: #004339; --snd-verde-800: #003931;
    --snd-verde-900: #002F2A; --snd-verde-950: #001D1A;
    --snd-dorado-100: #F6F2EA; --snd-dorado-200: #E4D9C0; --snd-dorado-300: #DBCCAB; --snd-dorado-400: #C9B280;
    --snd-dorado-500: #B79956; --snd-dorado-600: #A57F2C; --snd-dorado-700: #846623; --snd-dorado-800: #634C1A;
    --snd-dorado-900: #423312; --snd-dorado-950: #32260D;
    --snd-neutro-100: #FFFFFF; --snd-neutro-200: #F9F9F9; --snd-neutro-300: #F3F3F3; --snd-neutro-400: #DDDDDD;
    --snd-neutro-500: #AAAAAA; --snd-neutro-600: #767676; --snd-neutro-700: #434343; --snd-neutro-800: #161A1D;
    /* Primitivos semánticos: 100 = fondo, 500 = texto/acento */
    --snd-rojo-100: #FAE5E5; --snd-rojo-500: #9B0F15;          /* error */
    --snd-verde-ok-100: #F0FAF5; --snd-verde-ok-500: #086308;  /* éxito */
    --snd-azul-100: #EDF2FE; --snd-azul-500: #224497;          /* información */
    --snd-amarillo-100: #FFEB99; --snd-amarillo-500: #684700;  /* alerta */
    --snd-morado-100: #ECE2F5; --snd-morado-500: #6708C1;
    --snd-naranja-100: #F9D9A9; --snd-naranja-500: #6E3700;

    /* Roles del sistema (se usan en todas las hojas SIAC) */
    --siac-guinda: var(--snd-guinda-600);
    --siac-guinda-oscuro: var(--snd-guinda-900);
    --siac-guinda-suave: var(--snd-guinda-100);
    --siac-dorado: var(--snd-dorado-600);
    --siac-dorado-claro: var(--snd-dorado-300);
    --siac-dorado-suave: var(--snd-dorado-100);
    /* Encabezados de tabla (grids de Kendo y tablas HTML): guinda principal con letra blanca */
    --siac-tabla-encabezado: var(--snd-guinda-900);
    --siac-verde: var(--snd-verde-ok-500);
    --siac-verde-suave: var(--snd-verde-ok-100);
    --siac-rojo: var(--snd-rojo-500);
    --siac-rojo-suave: var(--snd-rojo-100);
    --siac-gris: var(--snd-neutro-600);
    --siac-borde: var(--snd-neutro-400);
    --siac-borde-campo: var(--snd-neutro-400);
    --siac-fondo: var(--snd-neutro-300);
    --siac-texto: var(--snd-neutro-800);
    --siac-radio: 10px;
    --siac-sombra: 0 1px 3px rgba(22, 26, 29, .06), 0 1px 2px rgba(22, 26, 29, .04);
    --siac-fuente-titulos: 'Patria', 'Noto Sans', Georgia, serif;
}

/* Tipografía institucional Patria (títulos h1–h3, guía GOB.mx v3). Archivos en wwwroot/fonts/patria
   (los mismos que publica framework-gb.cdn.gob.mx). El texto general sigue en Noto Sans. */
@font-face {
    font-family: 'Patria';
    src: url('../fonts/patria/Patria_Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Patria';
    src: url('../fonts/patria/Patria_Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Patria';
    src: url('../fonts/patria/Patria_Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Títulos con Patria (los tamaños no cambian) */
.siac-page-title,
.siac-card-title,
.siac-brand-sigla,
.siac-sectores-intro h1,
.siac-sector h2,
.siac .panel-hdr h2,
.siac .k-window-title,
.siac .k-expander-title,
.siac .modal-title {
    font-family: var(--siac-fuente-titulos);
}

/* Las descripciones dentro de un título siguen en Noto Sans */
.siac-card-title small,
.siac .panel-hdr h2 small,
.siac .panel-hdr h2 span {
    font-family: 'Noto Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
}

html, body {
    min-height: 100%;
}

body.siac {
    display: flex;
    flex-direction: column;
    background-color: var(--siac-fondo);
    color: var(--siac-texto);
    font-family: 'Noto Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: .875rem;
}

.siac a:not(.btn) {
    color: var(--siac-guinda);
}

.siac a:not(.btn):hover {
    color: var(--siac-guinda-oscuro);
}

/* app.bundle.css (SmartAdmin) fuerza el subrayado en a[target]; aquí no lo queremos */
.siac a[target]:not(.btn) {
    text-decoration: none !important;
}

/* Encabezado
   ========================================================================== */
.siac-header {
    position: sticky;
    top: 0;
    z-index: 1030;
}

.siac-header-bar {
    display: flex;
    align-items: center;
    min-height: 64px;
    padding: 0 1.5rem;
    background-color: var(--siac-guinda-oscuro);
    border-bottom: 3px solid var(--siac-dorado);
}

.siac-brand {
    display: flex;
    align-items: center;
    margin-right: 2rem;
    color: #fff !important;
    text-decoration: none !important;
}

.siac-brand-sigla {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.siac-brand-texto {
    margin-left: .85rem;
    padding-left: .85rem;
    border-left: 1px solid rgba(255, 255, 255, .35);
    font-size: .72rem;
    line-height: 1.25;
    opacity: .85;
}

/* Logo de la Secretaría antes de la marca SIAC. El PNG (transparente) es guinda/dorado;
   sobre el fondo guinda se pinta en blanco */
.siac-header-logo-contenedor {
    display: flex;
    align-items: center;
}

.siac-header-logo {
    height: 44px;
    width: auto;
    margin-right: 1.5rem;
    padding-right: 1.5rem;
    border-right: 1px solid rgba(255, 255, 255, .35);
    filter: brightness(0) invert(1);
}

.siac-nav {
    display: flex;
    flex: 1;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    list-style: none;
}

.siac-nav a,
.siac-nav button {
    display: flex;
    align-items: center;
    height: 64px;
    padding: 0 1rem;
    color: rgba(255, 255, 255, .85) !important;
    font-size: .875rem;
    text-decoration: none !important;
    transition: background-color .15s, color .15s;
}

/* "Salir" es un botón dentro de un formulario POST */
.siac-nav form {
    margin: 0;
}

.siac-nav button {
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.siac-nav a i,
.siac-nav button i {
    margin-right: .45rem;
    color: var(--siac-dorado-claro);
}

.siac-nav a:hover,
.siac-nav a.active,
.siac-nav button:hover {
    background-color: var(--siac-guinda);
    color: #fff !important;
}

.siac-nav-toggle {
    display: none;
    margin-left: auto;
    padding: .4rem .65rem;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 6px;
    background: transparent;
    color: #fff;
}

/* Barra de usuario (ViewComponent MultiUsuario) */
.siac-userbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.5rem;
    padding: .6rem 1.5rem;
    background-color: #fff;
    border-bottom: 1px solid var(--siac-borde);
}

.siac-avatar {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--siac-guinda-suave);
    color: var(--siac-guinda);
    font-weight: 700;
}

.siac-userbar-nombre {
    font-weight: 600;
    line-height: 1.2;
}

.siac-userbar-perfil {
    color: var(--siac-gris);
    font-size: .78rem;
}

/* Servicios, perfil y "Otras opciones" van juntos a la derecha */
.siac-userbar-derecha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.5rem;
    margin-left: auto;
}

.siac-servicios {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.siac-servicio {
    display: inline-flex;
    align-items: center;
    padding: .3rem .7rem;
    border: 1px solid var(--siac-borde);
    border-radius: 999px;
    background: #fff;
    color: var(--siac-gris);
    font-size: .78rem;
    cursor: pointer;
    transition: all .15s;
}

.siac-servicio img {
    width: 18px;
    margin-right: .4rem;
}

.siac-servicio:hover {
    border-color: var(--siac-dorado);
    color: var(--siac-guinda-oscuro);
}

.siac-servicio.active {
    border-color: var(--siac-guinda);
    background-color: var(--siac-guinda);
    color: #fff;
}

.siac-servicio.active img {
    filter: brightness(0) invert(1);
}

.siac-userbar select {
    min-width: 260px;
}

/* "Otras opciones": se despliega al pasar el cursor, con foco de teclado o con clic (.abierto, ver _Layout) */
.siac-otras {
    position: relative;
}

.siac-otras-boton {
    display: inline-flex;
    align-items: center;
    padding: .3rem .8rem;
    border: 1px solid var(--siac-borde);
    border-radius: 999px;
    background: #fff;
    color: var(--siac-gris);
    font-size: .78rem;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.siac-otras-boton > i:first-child {
    margin-right: .4rem;
    color: var(--siac-dorado);
}

.siac-otras-flecha {
    margin-left: .45rem;
    font-size: .7rem;
    transition: transform .2s;
}

.siac-otras:hover .siac-otras-boton,
.siac-otras.abierto .siac-otras-boton,
.siac-otras-boton:focus-visible {
    border-color: var(--siac-dorado);
    color: var(--siac-guinda-oscuro);
}

/* El menú cuelga del botón; el padding superior (transparente) evita que se cierre al bajar el cursor */
.siac-otras-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1040;
    min-width: 220px;
    margin: 0;
    padding: .4rem 0 0;
    list-style: none;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .15s, transform .15s, visibility 0s .15s;
}

.siac-otras-menu::before {
    content: "";
    position: absolute;
    top: .4rem;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    border: 1px solid var(--siac-borde);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(22, 26, 29, .12);
}

.siac-otras-menu li:first-child a {
    margin-top: .3rem;
}

.siac-otras-menu li:last-child a {
    margin-bottom: .3rem;
}

.siac-otras:hover .siac-otras-menu,
.siac-otras:focus-within .siac-otras-menu,
.siac-otras.abierto .siac-otras-menu {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .15s, transform .15s;
}

.siac-otras:hover .siac-otras-flecha,
.siac-otras.abierto .siac-otras-flecha {
    transform: rotate(180deg);
}

.siac-otras-menu a {
    display: flex;
    align-items: center;
    padding: .5rem 1rem;
    color: var(--siac-texto);
    font-size: .85rem;
    text-decoration: none;
}

.siac-otras-menu a i {
    width: 1.1rem;
    margin-right: .6rem;
    color: var(--siac-dorado);
    text-align: center;
}

.siac-otras-menu a:hover,
.siac-otras-menu a:focus {
    background-color: var(--siac-guinda-suave);
    color: var(--siac-guinda-oscuro);
}

/* Página
   ========================================================================== */
.siac-main {
    flex: 1;
}

.siac-page {
    max-width: 1600px;
    margin: 0 auto;
    padding: 1.5rem;
}

.siac-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 .75rem;
    padding: 0;
    list-style: none;
    color: var(--siac-gris);
    font-size: .78rem;
}

.siac-breadcrumb li + li::before {
    content: "/";
    padding: 0 .5rem;
    color: var(--snd-neutro-500);
}

.siac-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.siac-page-title {
    margin: 0;
    color: var(--siac-guinda-oscuro);
    font-size: 1.6rem;
    font-weight: 700;
}

.siac-page-title i {
    margin-right: .4rem;
    color: var(--siac-dorado);
}

.siac-page-desc {
    max-width: 52rem;
    margin: .35rem 0 0;
    color: var(--siac-gris);
}

/* Botón de regresar (layout) a la izquierda del título */
.siac-page-titulo {
    display: flex;
    align-items: flex-start;
}

.siac-back {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-right: .85rem;
    border: 1px solid var(--siac-borde);
    border-radius: 50%;
    background: #fff;
    color: var(--siac-guinda);
    cursor: pointer;
    text-decoration: none !important;
    transition: background-color .15s, border-color .15s, color .15s;
}

.siac-back[hidden] {
    display: none;
}

.siac-back:hover,
.siac-back:focus-visible {
    border-color: var(--siac-guinda);
    background-color: var(--siac-guinda);
    color: #fff;
}

.siac-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.siac-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--siac-borde);
    background: #fff;
    color: var(--siac-gris);
    font-size: .75rem;
    text-align: center;
}

/* Botones
   ========================================================================== */
.siac .btn {
    border-radius: 6px;
    font-weight: 600;
}

.siac .btn-primary {
    border-color: var(--siac-guinda);
    background-color: var(--siac-guinda);
    box-shadow: none;
}

.siac .btn-primary:hover,
.siac .btn-primary:focus,
.siac .btn-primary:not(:disabled):active {
    border-color: var(--siac-guinda-oscuro);
    background-color: var(--siac-guinda-oscuro);
}

.siac .btn-primary:disabled {
    border-color: var(--snd-guinda-300);
    background-color: var(--snd-guinda-300);
}

.siac .btn-outline-siac {
    border: 1px solid var(--siac-borde);
    background-color: #fff;
    color: var(--siac-texto);
}

.siac .btn-outline-siac:hover {
    border-color: var(--siac-dorado);
    background-color: var(--siac-dorado-suave);
    color: var(--siac-guinda-oscuro);
}

.siac .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--siac-gris);
}

.siac .btn-icon:hover {
    border-color: var(--siac-borde);
    background: #fff;
    color: var(--siac-guinda);
}

.siac .btn-icon.peligro:hover {
    color: var(--siac-rojo);
}

/* Tarjetas
   ========================================================================== */
.siac-card {
    margin-bottom: 1.5rem;
    border: 1px solid var(--siac-borde);
    border-radius: var(--siac-radio);
    background: #fff;
    box-shadow: var(--siac-sombra);
}

.siac-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--siac-borde);
}

.siac-card-title {
    margin: 0;
    color: var(--siac-guinda-oscuro);
    font-size: 1rem;
    font-weight: 700;
}

.siac-card-title small {
    display: block;
    margin-top: .15rem;
    color: var(--siac-gris);
    font-size: .78rem;
    font-weight: 400;
}

.siac-card-body {
    padding: 1.25rem;
}

/* Indicadores */
.siac-kpi {
    display: flex;
    align-items: center;
    height: calc(100% - 1.5rem);
    margin-bottom: 1.5rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--siac-borde);
    border-radius: var(--siac-radio);
    background: #fff;
    box-shadow: var(--siac-sombra);
}

.siac-kpi-icono {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-right: 1rem;
    border-radius: 12px;
    font-size: 1.3rem;
}

.siac-kpi-valor {
    color: var(--siac-texto);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

.siac-kpi-etiqueta {
    margin-top: .3rem;
    color: var(--siac-gris);
    font-size: .8rem;
}

.siac-kpi.guinda .siac-kpi-icono { background: var(--siac-guinda-suave); color: var(--siac-guinda); }
.siac-kpi.dorado .siac-kpi-icono { background: var(--siac-dorado-suave); color: var(--snd-dorado-700); }
.siac-kpi.verde .siac-kpi-icono { background: var(--siac-verde-suave); color: var(--siac-verde); }

/* Formularios
   ========================================================================== */
.siac label,
.siac .siac-label {
    margin-bottom: .35rem;
    color: var(--snd-neutro-700);
    font-size: .8rem;
    font-weight: 600;
}

.siac .form-control,
.siac .custom-select {
    height: calc(1.5em + 1rem + 2px);
    border-color: var(--siac-borde-campo);
    border-radius: 6px;
    font-size: .875rem;
}

.siac textarea.form-control {
    height: auto;
}

.siac .form-control:focus,
.siac .custom-select:focus {
    border-color: var(--siac-guinda);
    box-shadow: 0 0 0 .2rem rgba(155, 34, 71, .12);
}

.siac .input-group-text {
    border-color: var(--siac-borde-campo);
    background: var(--siac-fondo);
    color: var(--siac-gris);
}

.siac-requerido::after {
    content: " *";
    color: var(--siac-guinda);
}

.siac-label-accion {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.siac-label-accion a,
.siac-label-accion button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--siac-guinda);
    font-size: .75rem;
    font-weight: 600;
}

/* Secciones dentro de un formulario */
.siac-seccion + .siac-seccion {
    margin-top: .5rem;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--siac-borde);
}

.siac-seccion-titulo {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    color: var(--siac-guinda-oscuro);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.siac-seccion-titulo i {
    margin-right: .5rem;
    color: var(--siac-dorado);
}

/* Control segmentado (reemplaza a kendo-radiogroup) */
.siac-segmentado {
    display: inline-flex;
    flex-wrap: wrap;
    padding: 3px;
    border: 1px solid var(--siac-borde);
    border-radius: 8px;
    background: var(--siac-fondo);
}

.siac-segmentado input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.siac-segmentado label {
    margin: 0;
    padding: .4rem .85rem;
    border-radius: 6px;
    color: var(--siac-gris);
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}

.siac-segmentado input:checked + label {
    background: #fff;
    color: var(--siac-guinda);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

.siac-segmentado input:focus-visible + label {
    outline: 2px solid var(--siac-guinda);
}

/* Opciones en tarjeta (radio grande) */
.siac-opciones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .75rem;
}

.siac-opcion {
    position: relative;
    margin: 0;
}

.siac-opcion input {
    position: absolute;
    opacity: 0;
}

.siac-opcion span {
    display: block;
    height: 100%;
    padding: .85rem 1rem .85rem 2.6rem;
    border: 1px solid var(--siac-borde-campo);
    border-radius: 8px;
    background: #fff;
    color: var(--siac-texto);
    font-weight: 400;
    cursor: pointer;
}

.siac-opcion span strong {
    display: block;
    font-weight: 700;
}

.siac-opcion span small {
    color: var(--siac-gris);
}

.siac-opcion span::before {
    content: "";
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 16px;
    height: 16px;
    border: 2px solid var(--snd-neutro-500);
    border-radius: 50%;
    background: #fff;
}

.siac-opcion input:checked + span {
    border-color: var(--siac-guinda);
    background: var(--siac-guinda-suave);
}

.siac-opcion input:checked + span::before {
    border-color: var(--siac-guinda);
    box-shadow: inset 0 0 0 3px #fff;
    background: var(--siac-guinda);
}

.siac-opcion input:focus-visible + span {
    outline: 2px solid var(--siac-guinda);
}

/* Interruptor (reemplaza a kendo-switch) */
.siac .custom-switch .custom-control-label {
    padding-top: .1rem;
    font-weight: 600;
}

.siac .custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--siac-guinda);
    background-color: var(--siac-guinda);
}

/* Validación (HTML5 + clases de Bootstrap) */
.siac .was-validated .form-control:invalid,
.siac .was-validated select:invalid + .ts-wrapper .ts-control {
    border-color: var(--siac-rojo);
}

.siac .was-validated select:invalid ~ .invalid-feedback {
    display: block;
}

.siac .was-validated .form-control:valid {
    border-color: var(--siac-borde-campo);
    background-image: none;
    padding-right: .75rem;
}

/* Barra fija de acciones al pie del formulario */
.siac-barra-acciones {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin: 0 -1.5rem -1.5rem;
    padding: .85rem 1.5rem;
    border-top: 1px solid var(--siac-borde);
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(4px);
}

/* Tom Select (reemplaza a kendo-combobox y kendo-multiselect) */
.siac .ts-wrapper .ts-control {
    min-height: calc(1.5em + 1rem + 2px);
    padding: .45rem .75rem;
    border-color: var(--siac-borde-campo);
    border-radius: 6px;
    font-size: .875rem;
    box-shadow: none;
}

.siac .ts-wrapper.focus .ts-control {
    border-color: var(--siac-guinda);
    box-shadow: 0 0 0 .2rem rgba(155, 34, 71, .12);
}

.siac .ts-wrapper.multi .ts-control > div {
    border: 0;
    border-radius: 999px;
    background: var(--siac-guinda-suave);
    color: var(--siac-guinda-oscuro);
}

.siac .ts-dropdown .active {
    background: var(--siac-guinda-suave);
    color: var(--siac-guinda-oscuro);
}

.siac .ts-wrapper.disabled .ts-control {
    background: var(--snd-neutro-300);
    opacity: 1;
}

/* Tabla de datos (reemplaza a kendo-grid)
   ========================================================================== */
.siac-tabla-herramientas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--siac-borde);
}

.siac-buscador {
    position: relative;
    flex: 1 1 260px;
    max-width: 360px;
}

.siac-buscador i {
    position: absolute;
    top: 50%;
    left: .8rem;
    color: var(--siac-gris);
    transform: translateY(-50%);
}

.siac-buscador input {
    padding-left: 2.2rem;
}

/* Buscador del menú de módulos: ocupa todo el ancho de las tarjetas */
.siac-buscador-modulos {
    max-width: none;
    margin-bottom: 1.25rem;
}

.siac .siac-buscador-modulos input {
    height: 46px;
    padding-left: 2.6rem;
    font-size: 1rem;
}

.siac-buscador-modulos i {
    left: 1rem;
    font-size: 1.05rem;
}

.siac-tabla-scroll {
    overflow: auto;
    max-height: 62vh;
}

.siac-tabla {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.siac-tabla thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--siac-tabla-encabezado);
    background: var(--siac-tabla-encabezado);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.siac-tabla thead th.ordenable {
    cursor: pointer;
    user-select: none;
}

.siac-tabla thead th.ordenable:hover {
    color: var(--snd-dorado-300);
}

.siac-tabla thead th .orden {
    margin-left: .35rem;
    opacity: .35;
}

.siac-tabla thead th.asc .orden,
.siac-tabla thead th.desc .orden {
    color: var(--snd-dorado-300);
    opacity: 1;
}

.siac-tabla tbody td {
    padding: .65rem 1rem;
    border-bottom: 1px solid var(--snd-neutro-300);
    vertical-align: middle;
}

.siac-tabla tbody tr.fila:hover td {
    background: var(--snd-neutro-200);
}

.siac-tabla tr.grupo td {
    padding: .5rem 1rem;
    border-bottom: 1px solid var(--siac-borde);
    background: var(--siac-dorado-suave);
    color: var(--siac-guinda-oscuro);
    font-weight: 700;
}

.siac-tabla tr.grupo .badge {
    margin-left: .5rem;
    background: #fff;
    color: var(--siac-gris);
    font-weight: 600;
}

.siac-tabla .vacio {
    padding: 3rem 1rem;
    color: var(--siac-gris);
    text-align: center;
}

.siac-tabla-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem 1.25rem;
    border-top: 1px solid var(--siac-borde);
    color: var(--siac-gris);
    font-size: .8rem;
}

.siac-paginador {
    display: flex;
    gap: .25rem;
}

.siac-paginador button {
    min-width: 32px;
    height: 32px;
    padding: 0 .5rem;
    border: 1px solid var(--siac-borde);
    border-radius: 6px;
    background: #fff;
    color: var(--siac-texto);
    font-weight: 600;
}

.siac-paginador button.active {
    border-color: var(--siac-guinda);
    background: var(--siac-guinda);
    color: #fff;
}

.siac-paginador button:disabled {
    opacity: .45;
}

/* Etiquetas de estado */
.siac-estado {
    display: inline-flex;
    align-items: center;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
}

.siac-estado::before {
    content: "";
    width: 6px;
    height: 6px;
    margin-right: .4rem;
    border-radius: 50%;
    background: currentColor;
}

.siac-estado.si { background: var(--siac-verde-suave); color: var(--siac-verde); }
.siac-estado.no { background: var(--siac-rojo-suave); color: var(--siac-rojo); }
.siac-estado.nuevo { background: var(--siac-dorado-suave); color: var(--snd-dorado-700); }

/* Menú principal (Home/Menu)
   ========================================================================== */
/* Etapas del menú de módulos (título numerado + sus tarjetas) */
.siac-etapa + .siac-etapa {
    margin-top: 2rem;
}

.siac-etapa-encabezado {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: .65rem;
    border-bottom: 1px solid var(--siac-borde);
}

.siac-etapa-numero {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-right: .85rem;
    border-radius: 50%;
    background: var(--siac-guinda);
    color: #fff;
    font-family: var(--siac-fuente-titulos);
    font-weight: 700;
}

.siac-etapa-titulo {
    margin: 0;
    color: var(--siac-guinda-oscuro);
    font-family: var(--siac-fuente-titulos);
    font-size: 1.15rem;
    font-weight: 700;
}

.siac-etapa-desc {
    margin: .1rem 0 0;
    color: var(--siac-gris);
    font-size: .82rem;
}

.siac-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1rem;
}

.siac-modulo {
    display: flex;
    flex-direction: column;
    min-height: 170px;
    padding: 1.25rem 1.1rem 1rem;
    border: 1px solid var(--siac-borde);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--siac-sombra);
    color: var(--siac-texto) !important;
    text-decoration: none !important;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}

.siac-modulo:hover,
.siac-modulo:focus {
    border-color: var(--siac-dorado);
    box-shadow: 0 8px 24px rgba(97, 18, 50, .12);
    transform: translateY(-2px);
}

.siac-modulo-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 1rem;
    border-radius: 14px;
    background: var(--snd-dorado-100);
    transition: background-color .2s;
}

/* Pictogramas del menú en dorado SND (#A57F2C, color "origen" de los pictogramas).
   El PNG original es negro: se usa como máscara (variable --pictograma con su url) y se pinta con el dorado.
   object-position saca el dibujo original de la caja; solo queda el fondo recortado por la máscara. */
.siac-modulo-icono img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    object-position: -9999px 0;
    background-color: var(--snd-dorado-600);
    -webkit-mask: var(--pictograma) center / contain no-repeat;
    mask: var(--pictograma) center / contain no-repeat;
    transition: background-color .2s;
}

.siac-modulo-icono i {
    color: var(--snd-dorado-600);
    font-size: 1.6rem;
}

.siac-modulo:hover .siac-modulo-icono {
    background: var(--snd-guinda-100);
}

.siac-modulo:hover .siac-modulo-icono img {
    background-color: var(--snd-guinda-600);
}

.siac-modulo:hover .siac-modulo-icono i {
    color: var(--snd-guinda-600);
}

.siac-modulo-nombre {
    flex: 1;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.3;
}

.siac-modulo-ir {
    display: flex;
    align-items: center;
    margin-top: .75rem;
    color: var(--siac-gris);
    font-size: .75rem;
    font-weight: 600;
}

.siac-modulo-ir i {
    margin-left: .35rem;
    transition: transform .15s;
}

.siac-modulo:hover .siac-modulo-ir {
    color: var(--siac-guinda);
}

.siac-modulo:hover .siac-modulo-ir i {
    transform: translateX(3px);
}

/* Selector de sector de infraestructura (Home/MenuSistema)
   ========================================================================== */
.siac-sectores-intro {
    max-width: 640px;
    margin: 2.5rem auto 2.5rem;
    text-align: center;
}

.siac-sectores-intro h1 {
    margin: 0;
    color: var(--siac-guinda-oscuro);
    font-size: clamp(1.75rem, 3.6vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
}

.siac-sectores-intro p {
    margin: 1rem auto 0;
    color: var(--siac-gris);
    font-size: .95rem;
    line-height: 1.8;
}

.siac-sectores-intro .divisor {
    width: 56px;
    height: 4px;
    margin: 1.4rem auto 0;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--siac-dorado), var(--siac-guinda));
}

.siac-sectores {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.6rem;
    max-width: 1120px;
    margin: 0 auto 3rem;
}

.siac-sector {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 300px;
    padding: 2.25rem 1.5rem 1.75rem;
    overflow: hidden;
    border: 1px solid var(--snd-dorado-200);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(97, 18, 50, .07);
    color: var(--siac-texto) !important;
    text-align: center;
    text-decoration: none !important;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    animation: siac-aparecer .6s ease both;
}

.siac-sector:nth-child(2) { animation-delay: .1s; }
.siac-sector:nth-child(3) { animation-delay: .2s; }

.siac-sector::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 5px;
    border-radius: 0 0 6px 6px;
    background: var(--siac-dorado);
    transition: left .3s ease, right .3s ease;
}

.siac-sector:hover,
.siac-sector:focus-visible {
    border-color: var(--snd-dorado-300);
    box-shadow: 0 22px 48px rgba(97, 18, 50, .13);
    transform: translateY(-8px);
}

.siac-sector:focus-visible {
    outline: 3px solid var(--siac-dorado);
    outline-offset: 4px;
}

.siac-sector:hover::before,
.siac-sector:focus-visible::before {
    left: 0;
    right: 0;
}

.siac-sector-icono {
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    margin-bottom: 1.5rem;
    border: 1px solid var(--snd-dorado-200);
    border-radius: 27px;
    background: linear-gradient(145deg, #fff, var(--snd-dorado-100));
    color: var(--snd-dorado-600);
    transition: background .3s ease, color .3s ease, transform .3s ease;
}

.siac-sector-icono svg {
    width: 43px;
    height: 43px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.siac-sector:hover .siac-sector-icono,
.siac-sector:focus-visible .siac-sector-icono {
    background: linear-gradient(145deg, var(--siac-guinda), var(--siac-guinda-oscuro));
    color: #fff;
    transform: scale(1.06);
}

.siac-sector h2 {
    margin: 0;
    color: var(--siac-guinda-oscuro);
    font-size: 1.25rem;
    font-weight: 800;
}

.siac-sector p {
    flex: 1;
    max-width: 260px;
    margin: .75rem 0 0;
    color: var(--siac-gris);
    font-size: .82rem;
    line-height: 1.8;
}

.siac-sector-ir {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    margin-top: 1.5rem;
    color: var(--siac-guinda);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.siac-sector-ir i {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--snd-dorado-200);
    border-radius: 50%;
    font-size: .8rem;
    transition: background .3s ease, color .3s ease, transform .3s ease, border-color .3s ease;
}

.siac-sector:hover .siac-sector-ir i {
    border-color: var(--siac-guinda-oscuro);
    background: var(--siac-guinda-oscuro);
    color: #fff;
    transform: translateX(4px);
}

/* Etiqueta del sector elegido (en el menú) */
/* Etiqueta "Sector: …" del menú de módulos, centrada en el encabezado de la página */
.siac-sector-actual {
    display: inline-flex;
    align-items: center;
    padding: .55rem 1.4rem;
    border: 1px solid var(--snd-dorado-200);
    border-radius: 999px;
    background: var(--siac-dorado-suave);
    color: var(--siac-guinda-oscuro);
    font-family: var(--siac-fuente-titulos);
    font-size: 1.15rem;
    font-weight: 700;
    white-space: nowrap;
}

.siac-sector-actual[hidden] {
    display: none;
}

.siac-sector-actual i {
    margin-right: .55rem;
    color: var(--siac-dorado);
}

/* Pantallas anchas: al centro de la fila del título. Más angostas: renglón propio, centrado */
.siac-page-header {
    position: relative;
}

@media (min-width: 1200px) {
    .siac-page-actions > .siac-sector-actual {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

@media (max-width: 1199.98px) {
    /* La etiqueta queda centrada en su renglón y los botones de la vista (p. ej. Exámenes) debajo */
    .siac-page-actions:has(> .siac-sector-actual:not([hidden])) {
        flex-basis: 100%;
        flex-direction: column;
        align-items: center;
    }
}

@keyframes siac-aparecer {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 991.98px) {
    .siac-sectores {
        grid-template-columns: 1fr;
        max-width: 460px;
    }

    .siac-sector {
        min-height: 0;
    }
}

/* Botón alternable (mostrar / ocultar) */
.siac .btn-alternar[aria-pressed="true"] {
    border-color: var(--siac-guinda);
    background: var(--siac-guinda-suave);
    color: var(--siac-guinda);
}

/* Indicador de carga (reemplaza a kendo-loader) */
.siac-cargando {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .6);
}

.siac-cargando.visible,
.siac-cargando[style*="block"] {
    display: flex !important;
}

.siac-cargando::after {
    content: "";
    width: 44px;
    height: 44px;
    border: 4px solid var(--siac-guinda-suave);
    border-top-color: var(--siac-guinda);
    border-radius: 50%;
    animation: siac-giro .8s linear infinite;
}

@keyframes siac-giro {
    to { transform: rotate(360deg); }
}

/* Modales */
.siac .modal-content {
    border: 0;
    border-radius: 12px;
}

.siac .modal-header {
    border-bottom-color: var(--siac-borde);
}

.siac .modal-title {
    color: var(--siac-guinda-oscuro);
    font-weight: 700;
}

/* SweetAlert2 con colores institucionales */
.swal2-styled.swal2-confirm {
    background-color: var(--siac-guinda) !important;
}

/* Ficha de datos (pares etiqueta / valor)
   ========================================================================== */
.siac-ficha {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem 1.5rem;
    margin: 0;
}

.siac-ficha dt {
    margin-bottom: .2rem;
    color: var(--siac-gris);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.siac-ficha dd {
    margin: 0;
    font-weight: 600;
    word-break: break-word;
}

.siac-ficha .ancho-completo {
    grid-column: 1 / -1;
}

.siac-ficha dd.texto {
    font-weight: 400;
    line-height: 1.5;
}

.siac-icono-titulo {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--siac-guinda-suave);
    color: var(--siac-guinda);
    font-size: 1.1rem;
}

.siac-clima {
    display: inline-flex;
    align-items: center;
}

.siac-clima img {
    width: 24px;
    margin-right: .4rem;
}

/* Pestañas (reemplaza kendo-tabstrip) */
.siac-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0 1.25rem;
    border-bottom: 1px solid var(--siac-borde);
}

.siac-tabs .nav-link {
    margin-bottom: -1px;
    padding: .85rem 1rem;
    border: 0;
    border-bottom: 3px solid transparent;
    color: var(--siac-gris) !important;
    font-weight: 600;
    white-space: nowrap;
}

.siac-tabs .nav-link:hover {
    color: var(--siac-guinda) !important;
}

.siac-tabs .nav-link.active {
    border-bottom-color: var(--siac-guinda);
    background: transparent;
    color: var(--siac-guinda) !important;
}

.siac-tabs .badge {
    margin-left: .35rem;
    background: var(--siac-fondo);
    color: var(--siac-gris);
}

.siac-tabs .nav-link.active .badge {
    background: var(--siac-guinda-suave);
    color: var(--siac-guinda);
}

/* Secciones plegables (reemplaza kendo-expansionpanel) */
.siac-plegable > .siac-card-header {
    cursor: pointer;
    user-select: none;
}

.siac-plegable > .siac-card-header .siac-chevron {
    margin-left: auto;
    color: var(--siac-gris);
    transition: transform .2s;
}

.siac-plegable > .siac-card-header.collapsed .siac-chevron {
    transform: rotate(-90deg);
}

.siac-plegable > .siac-card-header.collapsed {
    border-bottom-color: transparent;
}

.siac-contador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 .45rem;
    border-radius: 999px;
    background: var(--siac-guinda-suave);
    color: var(--siac-guinda);
    font-size: .75rem;
    font-weight: 700;
}

/* Galería de fotos (reemplaza kendo-scrollview) */
.siac-galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.siac-foto {
    overflow: hidden;
    border: 1px solid var(--siac-borde);
    border-radius: 10px;
    background: #fff;
}

.siac-foto-imagen {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    background: linear-gradient(135deg, var(--snd-dorado-200) 0%, var(--snd-dorado-300) 45%, var(--snd-dorado-500) 100%);
    color: rgba(97, 18, 50, .55);
    font-size: 2rem;
}

.siac-foto-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.siac-foto-pie {
    padding: .65rem .8rem;
    font-size: .75rem;
}

.siac-foto-pie p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0 0 .35rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.siac-foto-pie a {
    font-weight: 600;
}

/* Zona para adjuntar archivos (reemplaza kendo-upload) */
.siac-adjuntar {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
    border: 2px dashed var(--siac-borde-campo);
    border-radius: 10px;
    background: var(--siac-fondo);
    color: var(--siac-gris);
    text-align: center;
    transition: border-color .15s, background .15s;
}

.siac-adjuntar:hover,
.siac-adjuntar.sobre {
    border-color: var(--siac-dorado);
    background: var(--siac-dorado-suave);
}

.siac-adjuntar i {
    margin-bottom: .5rem;
    color: var(--siac-dorado);
    font-size: 1.8rem;
}

.siac-adjuntar input[type=file] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* Gráficas */
.siac-grafica {
    position: relative;
    height: 280px;
}

.siac-tipo {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: var(--siac-verde-suave);
    color: var(--siac-verde);
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
}

.siac-tipo.baja {
    background: var(--siac-rojo-suave);
    color: var(--siac-rojo);
}

.siac-tipo.alerta {
    background: var(--siac-dorado-suave);
    color: var(--snd-dorado-700);
}

.siac-tabla .btn-icon:disabled {
    opacity: .35;
    pointer-events: none;
}

/* Encabezados de tablas HTML de Bootstrap (.table): mismo guinda que los grids.
   Solo los th del thead; en el cuerpo los th son etiquetas de fila (máscaras de ensayes) */
.siac .table thead th {
    border-color: rgba(255, 255, 255, .18);
    background-color: var(--siac-tabla-encabezado);
    color: #fff;
    vertical-align: middle;
}

.siac .table thead th a {
    color: #fff;
}

/* Páginas públicas del login: registro de usuario y de empresa (_LayoutRegistro)
   ========================================================================== */
.siac-publico .siac-page {
    max-width: 1200px;
}

/* Enlace "Iniciar sesión" a la derecha del encabezado guinda */
.siac-publico-entrar {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding: .45rem 1rem;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 999px;
    color: #fff !important;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background-color .15s, border-color .15s;
}

.siac-publico-entrar i {
    margin-right: .5rem;
    color: var(--snd-dorado-300);
}

.siac-publico-entrar:hover {
    border-color: var(--snd-dorado-300);
    background-color: rgba(255, 255, 255, .08);
}

.siac-footer a {
    color: var(--siac-guinda);
    font-weight: 600;
}

/* Indicador de pasos del registro de empresa */
.siac-registro-pasos {
    padding: 1.25rem 1.5rem .75rem;
    background: var(--snd-neutro-200);
}

/* Las secciones que viven dentro de paneles que aparecen después (CURP, contrato) también llevan separador */
.siac-registro #pnlUser > .siac-seccion:first-child,
.siac-registro #pnlEmpresa > .siac-seccion:first-child {
    margin-top: .5rem;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--siac-borde);
}

/* CURP y RFC se escriben en mayúsculas, pero el texto de ayuda no */
.siac-registro .text-uppercase::placeholder {
    text-transform: none;
}

/* Opciones en tarjeta a dos columnas como máximo */
.siac-opciones-2 {
    max-width: 640px;
}

/* Tabla editable de laboratorios */
.siac-tabla-registro th {
    padding: .6rem .75rem;
    border-top: 0;
    border-bottom: 1px solid var(--siac-tabla-encabezado);
    background: var(--siac-tabla-encabezado);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.siac-tabla-registro td {
    padding: .5rem .75rem;
    border-top: 1px solid var(--siac-borde);
    vertical-align: middle;
}

.siac-tabla-registro tfoot td {
    border-top: 2px solid var(--snd-dorado-200);
    background: var(--siac-dorado-suave);
}

.siac-tabla-vacia td,
.siac-lista-vacia {
    color: var(--siac-gris);
    font-size: .85rem;
    text-align: center;
}

.siac-lista-vacia {
    margin: 0 0 1rem;
    padding: 1.25rem 1rem;
    border: 1px dashed var(--siac-borde-campo);
    border-radius: 8px;
}

.siac-contador {
    background: var(--siac-guinda-suave);
    color: var(--siac-guinda);
    font-size: .75rem;
    letter-spacing: 0;
}

/* Responsivo
   ========================================================================== */
/* Pantallas medianas: no cabe el logo junto al menú completo */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .siac-brand-texto {
        display: none;
    }

    .siac-brand {
        margin-right: 1.25rem;
    }
}

@media (max-width: 575.98px) {
    .siac-header-logo {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .siac-header-bar {
        flex-wrap: wrap;
        padding: .5rem 1rem;
    }

    .siac-brand-texto {
        display: none;
    }

    .siac-brand {
        margin-right: 1rem;
    }

    .siac-header-logo {
        height: 30px;
        margin-right: 1rem;
        padding-right: 1rem;
    }

    .siac-nav-toggle {
        display: block;
    }

    .siac-nav {
        display: none;
        flex-basis: 100%;
        flex-direction: column;
    }

    .siac-nav.abierto {
        display: flex;
    }

    .siac-nav a,
    .siac-nav button {
        height: 44px;
    }

    .siac-userbar {
        padding: .6rem 1rem;
    }

    .siac-userbar-derecha {
        margin-left: 0;
    }

    .siac-page {
        padding: 1rem;
    }

    .siac-barra-acciones {
        margin: 0 -1rem -1rem;
        padding: .75rem 1rem;
    }
}