/* 1. DISEÑO DEL BLOG */
.item-content {
    border: 1px solid #ddd; padding: 25px 25px 30px 20px;
    border-radius: 7px; background: #fdfeff;
}

/* 2. ESTRUCTURA */
body { padding-top: 60px; padding-left: var(--at-width); transition: padding 0.3s ease; margin: 0; background-color: #f4f6f9; }
.header, .container-nav, .container-breadcrumb { display: none; }

/* 3. HEADER FIJO (#132f53) */
.u-at-header {
    position: fixed; top: 0; right: 0; left: var(--at-width);
    height: 60px; background-color: #132f53; z-index: 1000; transition: left 0.3s;
    display: flex; align-items: center; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.u-at-header-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 20px; }

/* BUSCADOR: Usabilidad total (Texto Blanco) */
.u-at-search-wrapper .input-group {
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
    border-radius: 4px; overflow: hidden; display: flex; height: 36px;
}
.u-at-search-wrapper .form-control {
    background: transparent !important; border: none !important; color: #fff !important;
    padding: 0 10px; font-size: 0.9rem; height: 100%; min-width: 150px;
}
.u-at-search-wrapper .form-control::placeholder { color: rgba(255,255,255,0.7) !important; }
.u-at-search-wrapper .btn-primary {
    background: rgba(255,255,255,0.1) !important; border: none !important; color: #fff !important; height: 100%;
}
.u-at-user-link { color: #fff; font-size: 1.8rem; display: flex; align-items: center; text-decoration: none; }

/* 4. SIDEBAR (Azules de Atum) */
.u-at-sidebar {
    position: fixed; top: 0; left: 0; width: var(--at-width);
    height: 100vh; background-color: #203146; color: #fff; z-index: 1100; transition: width 0.3s;
    display: flex; flex-direction: column;
}
.u-at-brand { background-color: #304a69; padding: 20px; text-align: center; }
.u-at-logo-img { width: var(--at-logo-width, 70px); max-height: 80px; height: auto; display: block; margin: 0 auto; }

.u-at-collapse-zone { background-color: #40628c; padding: 8px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.u-at-collapse-btn { background: none; border: none; color: #fff; width: 100%; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; cursor: pointer; }

/* 5. NAVEGACIÓN Y HOVER #f4f6f9 */
.u-at-nav { flex-grow: 1; overflow-y: auto; }
.u-at-nav ul { list-style: none; padding: 0; margin: 0; }
.u-at-item-row { display: flex; align-items: stretch; background-color: #283e58; border-bottom: 1px solid rgba(255,255,255,0.03); }
.u-at-item-row:hover { background-color: rgba(255, 255, 255, 0.05); }
.u-at-item-row:hover .u-at-label { color: #f4f6f9; }
.u-at-row-active { background-color: #304a69 !important; }

.u-at-link { display: flex; align-items: center; padding: 12px 18px; color: #fff; text-decoration: none; flex-grow: 1; }
.u-at-link i { margin-right: 12px; width: 20px; color: #fff; }

.u-at-indicator {
    width: 44px; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.15); border-left: 1px solid rgba(255,255,255,0.05); cursor: pointer;
}
.u-at-arrow { transition: transform 0.3s; color: #fff; font-size: 0.75rem; }

.u-at-submenu { background-color: #304a69; }
.u-at-submenu a { display: block; padding: 10px 15px 10px 50px; color: rgba(255,255,255,0.7); text-decoration: none; font-size: 0.85rem; }
.u-at-submenu a:hover { color: #f4f6f9; background-color: rgba(255,255,255,0.05); }

/* FOOTER: Aire de 60px y centrado real */
.u-at-sidebar-footer { background-color: #213245; padding: 30px 60px; border-top: 1px solid rgba(255,255,255,0.05); margin-top: auto; }
.u-at-footer-inner { text-align: center; width: 100%; color: rgba(255,255,255,0.6); font-size: 0.85rem; }

/* 6. COLAPSO */
body.u-at-collapsed { padding-left: 80px; }
body.u-at-collapsed .u-at-header { left: 80px; }
body.u-at-collapsed .u-at-sidebar { width: 80px; }
body.u-at-collapsed .u-at-label, body.u-at-collapsed .u-at-logo-text, body.u-at-collapsed .u-at-collapse-label, body.u-at-collapsed .u-at-submenu, body.u-at-collapsed .u-at-indicator { display: none !important; }
body.u-at-collapsed .u-at-logo-img { width: 45px; }

/* 7. MÓVIL */
@media (max-width: 992px) {
    body { padding-left: 0; }
    .u-at-header { left: 0; }
    .u-at-sidebar { left: calc(-1 * var(--at-width)); }
}