:root {
    /* Paleta de marca Argenway. color-bg/text/primary/secondary vienen de
       SiteConfig (el Admin los puede cambiar desde Configuracion); los
       valores de aca son solo el fallback si todavia no cargo nada. El
       navy profundo (--color-navy-deep/--color-navy) es el "chrome" fijo
       de marca (topbar, login) y no es configurable. */
    --color-bg: #F3F5F9;
    --color-card: #FFFFFF;
    --color-text: #1B2238;
    --color-muted: #6B7688;
    --color-border: #E1E5EE;
    --color-nav-hover: #E7F2F8;
    --color-primary: #0099CD;
    --color-primary-dark: #0678A3;
    --color-secondary: #293053;
    --color-secondary-dark: #1B2038;
    --color-badge-admin: #293053;
    --color-badge-gerente: #6B3FA0;
    --color-badge-lider: #0099CD;
    --color-badge-soporte: #C98A2E;
    --color-badge-empleado: #6E86AD;
    --shadow-card: 0 1px 2px rgba(27, 34, 56, 0.06);

    --color-navy-deep: #0a0e1c;
    --color-navy: #293053;
    --color-topbar-text: #EAF0FA;
    --color-topbar-muted: #9FAFCB;
    --color-topbar-hover: rgba(255, 255, 255, 0.09);
}

* {
    box-sizing: border-box;
}

/* Iconos minimalistas (ver directorio/templatetags/icons.py): heredan el
   color del texto (stroke="currentColor"), asi que respetan la paleta de
   marca sin necesitar reglas de color propias. */
.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    vertical-align: -3px;
    margin-right: 6px;
}

.icon-text {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.icon-text .icon {
    margin-right: 0;
}

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
}

a, .btn, .btn-outline, .card, .stat, tr {
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.card:hover {
    box-shadow: 0 3px 10px rgba(74, 46, 34, 0.09);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 153, 205, 0.18);
}

.btn:active {
    transform: translateY(1px);
}

/* ---------- Estructura general: sidebar + contenido ---------- */

.app-shell {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
}

.sidebar {
    --sidebar-width: 232px;
    width: var(--sidebar-width);
    flex-shrink: 0;
    background: linear-gradient(165deg, var(--color-navy-deep) 0%, var(--color-navy) 100%);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    transition: width 0.18s ease;
    z-index: 40;
}

body.sidebar-collapsed .sidebar {
    --sidebar-width: 68px;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-topbar-text);
    padding: 18px 16px;
    white-space: nowrap;
    overflow: hidden;
}

.brand-logo-chip {
    background: #fff;
    border-radius: 8px;
    padding: 4px 7px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 0;
    max-width: 100%;
    overflow: hidden;
}

.brand-logo-chip img {
    height: 22px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

/* El logo real (wordmark, no un icono cuadrado) no entra prolijo en el
   riel angosto del sidebar colapsado, asi que ahi se reemplaza por una
   insignia con las iniciales de la empresa. */
.brand-logo-mini {
    display: none;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--color-primary);
    color: #fff;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

body.sidebar-collapsed .brand-logo-chip {
    display: none;
}

body.sidebar-collapsed .brand-logo-mini {
    display: flex;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 10px;
    flex: 1;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--color-topbar-muted);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar-nav a .icon-text {
    overflow: hidden;
}

.sidebar-nav a:hover {
    background: var(--color-topbar-hover);
    color: var(--color-topbar-text);
}

.sidebar-nav a.active {
    background: var(--color-primary);
    color: #fff;
}

.sidebar-footer {
    padding: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-toggle {
    display: flex;
    align-items: center;
    gap: 9px;
    background: none;
    border: none;
    color: var(--color-topbar-muted);
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-family: inherit;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar-toggle:hover {
    background: var(--color-topbar-hover);
    color: var(--color-topbar-text);
}

.sidebar-toggle .icon {
    transition: transform 0.18s ease;
}

body.sidebar-collapsed .sidebar-toggle .icon {
    transform: rotate(180deg);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    white-space: nowrap;
    overflow: hidden;
}

/* Solo se ve en modo colapsado (ver mas abajo): un circulo con la
   inicial, en vez del badge de rol + nombre completo, que no entran en
   el riel angosto y antes quedaban cortados contra el borde. */
.user-avatar-mini {
    display: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
}

body.sidebar-collapsed .user-avatar-mini {
    display: flex;
}

.user-chip {
    font-size: 0.85rem;
    color: var(--color-topbar-text);
    overflow: hidden;
    text-overflow: ellipsis;
}

.logout-link {
    display: flex;
    align-items: center;
    width: 100%;
    color: var(--color-topbar-muted);
    text-decoration: none;
    font-weight: 600;
    background: none;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
}

.logout-link:hover {
    background: var(--color-topbar-hover);
    color: var(--color-topbar-text);
}

/* Modo colapsado: se ocultan las etiquetas de texto y queda solo el
   riel de iconos, con el nombre completo disponible como tooltip
   (atributo title de cada link). */
body.sidebar-collapsed .nav-label,
body.sidebar-collapsed .sidebar-brand-text {
    display: none;
}

body.sidebar-collapsed .sidebar-brand {
    justify-content: center;
    padding: 18px 8px;
}

body.sidebar-collapsed .sidebar-nav a,
body.sidebar-collapsed .sidebar-toggle,
body.sidebar-collapsed .logout-link {
    justify-content: center;
}

body.sidebar-collapsed .sidebar-user {
    justify-content: center;
}

.app-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.topbar {
    background: linear-gradient(120deg, var(--color-navy-deep) 0%, var(--color-navy) 100%);
    padding: 13px 28px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar-title {
    font-weight: 600;
    font-size: 0.98rem;
    color: var(--color-topbar-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-nav-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--color-topbar-text);
    cursor: pointer;
    padding: 4px;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

/* ---------- Campana de notificaciones ---------- */

.notif-wrapper {
    position: relative;
}

.notif-bell {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-topbar-text);
    font-size: 1.1rem;
    padding: 4px;
    line-height: 1;
}

.notif-count {
    position: absolute;
    top: -3px;
    right: -5px;
    background: #C0392B;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 1px 5px;
    min-width: 14px;
    text-align: center;
}

.notif-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 34px;
    width: 300px;
    max-width: calc(100vw - 32px);
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(74, 46, 34, 0.12);
    z-index: 50;
    max-height: 340px;
    overflow-y: auto;
}

.notif-dropdown.open {
    display: block;
}

.notif-dropdown .notif-item {
    display: block;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.82rem;
}

.notif-dropdown .notif-item:last-child {
    border-bottom: none;
}

.notif-dropdown .notif-item:hover {
    background: var(--color-nav-hover);
}

.notif-dropdown .notif-empty {
    padding: 16px 14px;
    color: var(--color-muted);
    font-size: 0.82rem;
    text-align: center;
}

/* ---------- Layout general ---------- */

.container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 26px 32px 60px;
    min-width: 0;
}

.card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 18px;
    box-shadow: var(--shadow-card);
}

.chart-card-subtle {
    box-shadow: none;
    background: transparent;
}

.chart-card-subtle h2 {
    color: var(--color-text);
    opacity: 0.75;
}

.card h2 {
    margin-top: 0;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.grid-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.stat {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px;
}

.stat .stat-label {
    font-size: 0.78rem;
    color: var(--color-muted);
    margin: 0 0 4px;
}

.stat .stat-number {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
}

.stat .stat-number small {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--color-muted);
}

.stat-number.accent-primary { color: var(--color-primary); }
.stat-number.accent-secondary { color: var(--color-secondary); }

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    text-align: left;
    padding: 10px 8px;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.9rem;
}

th {
    color: var(--color-muted);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

th.sortable-col {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

th.sortable-col:hover {
    color: var(--color-text);
}

th.sortable-col::after {
    content: "\2195";
    margin-left: 5px;
    opacity: 0.4;
    font-size: 0.7rem;
}

th.sortable-col.sorted-asc::after {
    content: "\2191";
    opacity: 1;
    color: var(--color-primary);
}

th.sortable-col.sorted-desc::after {
    content: "\2193";
    opacity: 1;
    color: var(--color-primary);
}

tr:hover td {
    background: #F6F9FC;
}

a.row-link {
    color: var(--color-text);
    text-decoration: none;
    font-weight: 600;
}

a.row-link:hover {
    color: var(--color-primary);
}

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #fff;
}

.badge-admin { background: var(--color-badge-admin); }
.badge-gerente { background: var(--color-badge-gerente); }
.badge-lider { background: var(--color-badge-lider); }
.badge-soporte { background: var(--color-badge-soporte); }
.badge-empleado { background: var(--color-badge-empleado); }

.status-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #fff;
    white-space: normal;
    line-height: 1.3;
    text-align: center;
}
.status-pendiente { background: #C98A2E; }
.status-aprobado_responsable { background: #0099CD; }
.status-aprobado_gerente { background: #6B3FA0; }
.status-aprobado { background: #2E9E6B; }
.status-rechazado { background: #C0392B; }

.alert-danger {
    background: rgba(192, 57, 43, 0.08);
    border: 1px solid #C0392B;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 18px;
}
.alert-danger h2 {
    margin: 0 0 8px 0;
    font-size: 0.95rem;
    color: #C0392B;
}
.alert-danger table { margin-top: 6px; }

.alert-warning {
    background: rgba(201, 138, 46, 0.08);
    border: 1px solid #C98A2E;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 18px;
}
.alert-warning h2 {
    margin: 0 0 8px 0;
    font-size: 0.95rem;
    color: #8A5A15;
}
.alert-warning table { margin-top: 6px; }

/* ---------- Cumpleaños / cumpleargenway ---------- */
/* Tratamiento calido (dorado, igual paleta que feriados) para que esta
   tarjeta no se vea tan "fria" como una tabla administrativa mas: al
   fin y al cabo es la unica seccion de buena onda en medio de saldos,
   solicitudes y reportes. */

.card-birthdays {
    background: linear-gradient(135deg, rgba(227, 180, 99, 0.12) 0%, rgba(217, 160, 136, 0.08) 100%);
    border: 1px solid #E3B463;
}

.card-birthdays h2 {
    color: #8A5A15;
}

.birthday-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #E3B463;
    color: #fff;
    flex-shrink: 0;
}

.birthday-icon-badge .icon {
    margin-right: 0;
}

.birthday-row-today {
    color: #fff;
    background: #E3B463;
    padding: 2px 9px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.78rem;
    white-space: nowrap;
}

.birthday-frase {
    display: block;
    color: var(--color-muted);
    font-size: 0.78rem;
    margin-top: 2px;
}

.search-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.search-form input[type="text"] {
    flex: 1;
    min-width: 200px;
    padding: 9px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 0.9rem;
}

.search-form select {
    padding: 9px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
    background: #fff;
    color: var(--color-text);
}

.btn {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.btn:hover {
    background: var(--color-primary-dark);
}

.btn-secondary {
    background: var(--color-secondary);
}

.btn-secondary:hover {
    background: var(--color-secondary-dark);
}

.btn-outline {
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

.btn-outline:hover {
    background: #E7F2F8;
}

.btn-danger {
    background: #C0392B;
}

.btn-sm {
    padding: 5px 12px;
    font-size: 0.8rem;
}

.actions-inline {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ---------- Login ---------- */

.login-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    background: linear-gradient(160deg, var(--color-navy-deep) 0%, var(--color-navy) 100%);
}

.login-logo {
    display: block;
    max-width: 150px;
    width: 100%;
    height: auto;
    margin: 0 auto 28px;
    opacity: 0.92;
}

.login-box {
    background: #fff;
    border-radius: 14px;
    padding: 36px;
    width: 100%;
    max-width: 360px;
    box-shadow: 0 20px 60px rgba(10, 14, 28, 0.35);
}

.login-box h1 {
    text-align: center;
    margin-bottom: 4px;
    color: var(--color-secondary);
}

.login-box .subtitle {
    text-align: center;
    color: var(--color-muted);
    margin-top: 0;
    margin-bottom: 24px;
    font-size: 0.88rem;
}

/* Fila de campos lado a lado (fecha desde/hasta, nombre/sigla, etc.). Antes
   esto se repetia como estilo inline en cada template; se junta en una
   clase para poder forzar que se apilen en mobile desde un solo lugar
   (ver @media mas abajo) en vez de depender de que el flex-wrap calcule
   bien el ancho en cada pantalla. */
.form-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.form-row-end {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.field {
    margin-bottom: 16px;
}

.field label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.88rem;
    color: var(--color-muted);
}

.field input, .field select, .field textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
}

/* Los checkboxes no son campos de texto: sin esto heredaban
   width:100% + padding de la regla de arriba y quedaban como un
   cuadrado gigante estirado, empujando el texto de la etiqueta a la
   linea de abajo (se veia roto/descentrado). */
.field input[type="checkbox"] {
    width: auto;
    padding: 0;
    margin: 0 6px 0 0;
    vertical-align: middle;
    accent-color: var(--color-primary);
}

.field label:has(input[type="checkbox"]) {
    display: flex;
    align-items: center;
}

.messages {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}

.messages li {
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 0.88rem;
}

.messages .success { background: #E5F5EE; color: #1E7A50; }
.messages .error { background: #FBEAE8; color: #A8322A; }
.messages .warning { background: #FBF1DE; color: #8A5A15; }

.profile-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    overflow: hidden;
    flex-shrink: 0;
}

.avatar.avatar-sm {
    width: 30px;
    height: 30px;
    font-size: 0.78rem;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

dl.detail-list {
    display: grid;
    grid-template-columns: 160px 1fr;
    row-gap: 10px;
}

dl.detail-list dt {
    color: var(--color-muted);
    font-size: 0.83rem;
}

dl.detail-list dd {
    margin: 0;
}

.muted {
    color: var(--color-muted);
    font-size: 0.83rem;
}

.empty-state {
    text-align: center;
    color: var(--color-muted);
    padding: 26px 10px;
}

/* ---------- Calendario de equipo ---------- */

.calendar-scroll {
    overflow-x: auto;
}

.calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    min-width: 760px;
}

.calendar .weekday {
    text-align: center;
    font-size: 0.72rem;
    color: var(--color-muted);
    text-transform: uppercase;
    padding-bottom: 4px;
}

.calendar .day {
    min-height: 62px;
    min-width: 0;
    overflow: hidden;
    border-radius: 8px;
    padding: 6px;
    font-size: 0.75rem;
    background: #F6F9FC;
}

.calendar .day.out-of-month {
    background: transparent;
    color: #C7CEDC;
}

.calendar .day.day-finde {
    background: #EAEDF3;
}

.calendar .day.day-feriado {
    background: #FBF1DE;
    border: 1px solid #E3B463;
}

.calendar .day.day-feriado.out-of-month {
    background: #FBF1DE;
    opacity: 0.55;
}

.calendar .day .day-number {
    font-weight: 600;
    margin-bottom: 4px;
}

.calendar .day .feriado-chip {
    display: block;
    background: #E3B463;
    color: #5A3E0F;
    border-radius: 5px;
    padding: 1px 5px;
    margin-bottom: 2px;
    font-size: 0.66rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar .day .absence-chip {
    display: block;
    background: var(--color-nav-hover);
    color: var(--color-text);
    border-radius: 5px;
    padding: 1px 5px;
    margin-bottom: 2px;
    font-size: 0.66rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ---------- Responsive ---------- */

@media (max-width: 780px) {
    /* Red de seguridad: pase lo que pase adentro (una tabla ancha, un
       campo que no termina de encoger), la pagina completa no se
       desplaza horizontalmente. Si algo interno necesita mas ancho, es
       ese elemento puntual el que scrollea (ver .card mas abajo), no la
       pantalla entera. */
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* Filas de campos lado a lado (fecha desde/hasta, nombre/sigla, etc.):
       en vez de confiar en que el flex-wrap calcule bien cuando envolver
       segun el ancho de cada campo, en mobile se apilan directo, uno por
       renglon. Evita que un campo quede "pegado" al borde de la pantalla
       o que el texto de una etiqueta larga se corte a la mitad. */
    .form-row,
    .form-row-end {
        flex-direction: column;
    }

    .form-row > .field,
    .form-row-end > .field {
        min-width: 0 !important;
        width: 100%;
    }

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

    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        transform: translateX(-100%);
        transition: transform 0.18s ease;
        box-shadow: 4px 0 20px rgba(10, 14, 28, 0.25);
    }

    body.sidebar-collapsed .sidebar {
        --sidebar-width: 232px;
    }

    .sidebar.mobile-open {
        transform: translateX(0);
    }

    body.sidebar-collapsed .nav-label,
    body.sidebar-collapsed .sidebar-brand-text {
        display: inline;
    }

    body.sidebar-collapsed .sidebar-nav a,
    body.sidebar-collapsed .sidebar-toggle,
    body.sidebar-collapsed .logout-link,
    body.sidebar-collapsed .sidebar-user {
        justify-content: flex-start;
    }

    body.sidebar-collapsed .sidebar-brand {
        justify-content: flex-start;
        padding: 18px 16px;
    }

    body.sidebar-collapsed .brand-logo-chip {
        display: flex;
    }

    body.sidebar-collapsed .brand-logo-mini {
        display: none;
    }

    .sidebar-footer .sidebar-toggle {
        display: none;
    }

    dl.detail-list {
        grid-template-columns: 130px 1fr;
    }

    /* Tablas: en vez de achicar columnas hasta hacerlas ilegibles, se
       scrollea horizontalmente dentro de la tarjeta que ya las contiene
       (asi no hace falta envolver cada tabla del sistema en un div
       nuevo). El resto del contenido de la tarjeta (titulos, botones) no
       se ve afectado, solo la tabla si se pasa de ancho. */
    .card,
    .alert-warning,
    .alert-danger {
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
        overscroll-behavior-x: contain;
    }

    .card table,
    .alert-warning table,
    .alert-danger table {
        min-width: 560px;
    }

    .calendar-scroll {
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
        overscroll-behavior-x: contain;
    }

    .container {
        padding: 18px 14px 40px;
    }

    .profile-header {
        flex-wrap: wrap;
    }

    .actions-inline .btn,
    .actions-inline .btn-outline {
        flex: 1;
        text-align: center;
    }
}