/**
 * PHP Study App — Hoja de estilos principal
 *
 * Estética aproximada a 2009–2011: panel tipo phpMyAdmin / WordPress 3.x /
 * foros phpBB. Cabeceras con degradado corto, bordes de 1px, botones biselados,
 * Tahoma/Verdana, sin glassmorphism ni tarjetas “saas”.
 */

body {
    margin: 0;
    padding: 0;
    font-family: Tahoma, Verdana, Arial, sans-serif;
    font-size: 12px;
    line-height: 1.45;
    color: #222222;
    background-color: #c5cdd4;
    min-width: 980px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

a {
    color: #0055aa;
    text-decoration: underline;
}

a:hover {
    color: #cc4400;
}

code {
    font-family: "Courier New", Courier, monospace;
    font-size: 11px;
    background-color: #f4f4e8;
    color: #333333;
    padding: 1px 3px;
    border: 1px solid #cccccc;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.app-layout {
    display: table;
    width: 100%;
    min-height: 100vh;
    border-collapse: collapse;
}

.app-sidebar,
.app-main {
    display: table-cell;
    vertical-align: top;
}

.app-sidebar {
    width: 210px;
    background-color: #1a3a5c;
    background-image: linear-gradient(to right, #163250, #1a3a5c);
    color: #d6e0ea;
    border-right: 1px solid #0e2438;
}

.sidebar-brand {
    padding: 10px 10px 8px 10px;
    background-color: #122a44;
    border-bottom: 1px solid #0a1c2c;
    overflow: hidden;
}

.brand-badge {
    float: left;
    width: 32px;
    height: 32px;
    line-height: 30px;
    text-align: center;
    margin-right: 8px;
    background-color: #e8eef4;
    border: 1px solid #8aa0b4;
    font-size: 16px;
}

.brand-info {
    overflow: hidden;
}

.brand-title {
    display: block;
    font-size: 13px;
    font-weight: bold;
    color: #ffee99;
    text-shadow: 1px 1px 0 #0a1c2c;
}

.brand-subtitle {
    display: block;
    font-size: 10px;
    color: #8aa0b4;
    margin-top: 2px;
}

.sidebar-nav {
    padding: 8px 0 12px 0;
}

.nav-section-title {
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #7a93a8;
    padding: 10px 12px 3px 12px;
    border-top: 1px solid #254a6c;
}

.nav-item {
    display: block;
    padding: 5px 12px 5px 14px;
    color: #d6e0ea;
    font-size: 12px;
    text-decoration: none;
    border-left: 3px solid transparent;
}

.nav-item:hover {
    background-color: #245078;
    color: #ffffff;
    text-decoration: none;
}

.nav-item.active {
    background-color: #0e2438;
    color: #ffffff;
    font-weight: bold;
    border-left: 3px solid #f0c040;
}

.nav-icon {
    display: inline-block;
    width: 16px;
    text-align: center;
    margin-right: 4px;
    font-size: 11px;
}

.sidebar-user {
    margin-top: 20px;
    padding: 8px 10px;
    border-top: 1px solid #0a1c2c;
    background-color: #122a44;
    overflow: hidden;
    position: relative;
}

.user-avatar {
    float: left;
    width: 28px;
    height: 28px;
    line-height: 26px;
    text-align: center;
    margin-right: 8px;
    background-color: #245078;
    border: 1px solid #3d6a90;
    font-size: 12px;
}

.user-details {
    overflow: hidden;
    padding-right: 30px;
}

.user-name {
    display: block;
    font-weight: bold;
    color: #ffffff;
    font-size: 11px;
}

.user-status {
    display: block;
    color: #8aa0b4;
    font-size: 10px;
}

.btn-auth-action {
    position: absolute;
    right: 8px;
    top: 10px;
    width: 24px;
    height: 24px;
    background-color: #245078;
    border: 1px solid #3d6a90;
    color: #d6e0ea;
    cursor: pointer;
    font-size: 11px;
}

.btn-auth-action:hover {
    background-color: #2e628c;
    color: #ffffff;
}

.app-main {
    background-color: #e8ecef;
}

.main-header {
    height: 36px;
    padding: 0 12px;
    background-color: #f0f0f0;
    background-image: linear-gradient(to bottom, #ffffff, #dcdcdc);
    border-bottom: 1px solid #9aa4ae;
    overflow: hidden;
    line-height: 36px;
}

.header-breadcrumbs {
    float: left;
    font-size: 11px;
    color: #555555;
}

.breadcrumb-root {
    color: #777777;
}

.breadcrumb-separator {
    margin: 0 4px;
    color: #999999;
}

.breadcrumb-current {
    font-weight: bold;
    color: #222222;
}

.header-actions {
    float: right;
}

.tag-tech,
.tag-status,
.tag-badge-clean {
    display: inline-block;
    font-size: 10px;
    padding: 1px 6px;
    margin-left: 4px;
    border: 1px solid #b0b8c0;
    background-color: #ececec;
    color: #444444;
    font-family: "Courier New", Courier, monospace;
}

.tag-badge-clean {
    background-color: #dff0d8;
    border-color: #94c47a;
    color: #2d6620;
    font-family: Tahoma, Verdana, Arial, sans-serif;
}

.content-body {
    padding: 12px 14px 20px 14px;
}

.main-footer {
    padding: 8px 12px;
    border-top: 1px solid #b8c0c8;
    background-color: #dce2e8;
    font-size: 10px;
    color: #666666;
    text-align: center;
}

.main-footer p {
    margin: 0;
}

/* ==========================================================================
   Dashboard
   ========================================================================== */

.dashboard-container {
    max-width: 1080px;
}

.welcome-card,
.auth-notice-card,
.dashboard-grid,
.flex-between,
.plan-item-header,
.saved-plan-header,
.topics-cards-grid,
.interview-question-header,
.question-block-header,
.modal-header {
    zoom: 1;
}

.welcome-card::after,
.auth-notice-card::after,
.dashboard-grid::after,
.flex-between::after,
.plan-item-header::after,
.saved-plan-header::after,
.topics-cards-grid::after {
    content: "";
    display: table;
    clear: both;
}

.welcome-card {
    background-color: #f7f4e8;
    border: 1px solid #c8bf9a;
    margin-bottom: 12px;
    overflow: hidden;
}

.welcome-content {
    float: left;
    width: 72%;
    padding: 12px 14px;
}

.welcome-content h1 {
    margin: 0 0 6px 0;
    font-size: 16px;
    font-weight: bold;
    color: #1a3a5c;
}

.welcome-content p {
    margin: 0;
    font-size: 12px;
    color: #444444;
}

.welcome-stats {
    float: right;
    width: 26%;
    padding: 10px 10px 10px 0;
}

.stat-pill {
    background-color: #ffffff;
    border: 1px solid #c8bf9a;
    padding: 6px 8px;
    margin-bottom: 6px;
    text-align: center;
}

.stat-num {
    display: block;
    font-size: 18px;
    font-weight: bold;
    color: #1a3a5c;
}

.stat-desc {
    display: block;
    font-size: 10px;
    color: #666666;
}

.auth-notice-card {
    background-color: #fff8d0;
    border: 1px solid #e0c060;
    padding: 8px 10px;
    margin-bottom: 12px;
    overflow: hidden;
    font-size: 11px;
    color: #5a4a18;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.auth-notice-text {
    padding-right: 12px;
}

.auth-notice-actions {
    text-align: right;
    white-space: nowrap;
}

.dashboard-grid {
    width: 100%;
    margin-bottom: 12px;
    overflow: hidden;
}

.dashboard-grid > .panel-card:first-child {
    float: left;
    width: 38%;
}

.dashboard-grid > .panel-card:last-child {
    float: right;
    width: 60%;
}

.panel-card,
.panel {
    background-color: #ffffff;
    border: 1px solid #9aa4ae;
    margin-bottom: 12px;
}

.panel-header {
    padding: 6px 10px;
    background-color: #3d6a94;
    background-image: linear-gradient(to bottom, #4a7cac, #2f5578);
    border-bottom: 1px solid #23405c;
    color: #ffffff;
    overflow: hidden;
}

.panel-header h2 {
    margin: 0;
    font-size: 13px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 1px 0 #1a3048;
}

.panel-subtitle {
    display: block;
    font-size: 10px;
    color: #d0e0f0;
    margin-top: 1px;
}

.flex-between {
    overflow: hidden;
}

.flex-between > div:first-child {
    float: left;
}

.panel-actions,
.flex-between > .panel-actions,
.flex-between > button,
.flex-between > .btn {
    float: right;
}

.panel-body,
.clean-form,
.plan-content-view {
    padding: 10px 12px;
}

.page-header {
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #b8c0c8;
}

.page-header h1 {
    margin: 0;
    font-size: 16px;
    color: #1a3a5c;
}

.page-header p {
    margin: 4px 0 0 0;
    color: #555555;
}

.notice-bar {
    background-color: #fff8d0;
    border: 1px solid #e0c060;
    padding: 8px 10px;
    margin-bottom: 12px;
    overflow: hidden;
    font-size: 11px;
}

.notice-actions {
    float: right;
}

/* ==========================================================================
   Formularios
   ========================================================================== */

.form-group {
    margin-bottom: 10px;
}

.form-group label {
    display: block;
    font-size: 11px;
    font-weight: bold;
    color: #333333;
    margin-bottom: 3px;
}

.form-control {
    width: 100%;
    padding: 4px 6px;
    font-size: 12px;
    font-family: Tahoma, Verdana, Arial, sans-serif;
    color: #222222;
    background-color: #ffffff;
    border: 1px solid #7a8a99;
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.12);
}

.form-control:focus {
    outline: none;
    border-color: #3d6a94;
    background-color: #fffff4;
}

.form-help {
    display: block;
    font-size: 10px;
    color: #777777;
    margin-top: 2px;
}

.experience-selector {
    overflow: hidden;
}

/* Cambio (plan de repaso): el nivel se elige pulsando el botón, sin el círculo del radio.
   El <input> se oculta solo a la vista (no display:none): así sigue recibiendo el foco
   con el teclado (Tab y flechas) y el "required" del formulario funciona. El <label>
   que envuelve input + span marca el radio al pulsar el span. */
.radio-pill {
    float: left;
    width: 33%;
    cursor: pointer;
    position: relative; /* referencia del input absoluto: se queda dentro de su botón */
}

.radio-pill input {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.radio-pill span {
    display: block;
    padding: 4px 4px;
    text-align: center;
    font-size: 10px;
    background-color: #f0f0f0;
    background-image: linear-gradient(to bottom, #ffffff, #e0e0e0);
    border: 1px solid #9aa4ae;
    color: #444444;
    margin-right: 4px;
    cursor: pointer; /* el span es ahora lo que se pulsa */
    /* ".form-group label" pone en negrita todo el label; sin esto los tres botones irían en
       negrita y el marcado no se distinguiría por el peso, solo por el color. */
    font-weight: normal;
}

.radio-pill input:checked + span {
    background-color: #dce8f4;
    background-image: linear-gradient(to bottom, #e8f0f8, #c8d8e8);
    border-color: #3d6a94;
    color: #1a3a5c;
    font-weight: bold;
}

/* Sin círculo visible, el foco con teclado se marca en el propio botón (punteado fino) */
.radio-pill input:focus-visible + span {
    outline: 1px dotted #1a3a5c;
    outline-offset: 1px;
}

/* Modo de alto contraste de Windows: el sistema sustituye los colores y el botón marcado
   se vería igual que los demás. Se le da un borde grueso con el color de selección del sistema. */
@media (forced-colors: active) {
    .radio-pill input:checked + span {
        border: 2px solid Highlight;
    }
}

.form-actions {
    margin-top: 8px;
}

/* ==========================================================================
   Botones (bisel Web 2.0)
   ========================================================================== */

.btn {
    display: inline-block;
    padding: 4px 12px;
    font-size: 11px;
    font-family: Tahoma, Verdana, Arial, sans-serif;
    font-weight: bold;
    border-radius: 3px;
    cursor: pointer;
    text-decoration: none !important;
    line-height: 1.3;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.btn-primary {
    background-color: #3d6a94;
    background-image: linear-gradient(to bottom, #5a90c0, #2f5578);
    color: #ffffff;
    border: 1px solid #23405c;
    text-shadow: 0 1px 0 #1a3048;
}

.btn-primary:hover {
    background-image: linear-gradient(to bottom, #6aa0d0, #3d6a94);
    color: #ffffff;
}

.btn-secondary {
    background-color: #e8e8e8;
    background-image: linear-gradient(to bottom, #ffffff, #d0d0d0);
    border: 1px solid #888888;
    color: #222222;
}

.btn-secondary:hover {
    background-image: linear-gradient(to bottom, #ffffff, #c0c0c0);
    color: #000000;
    text-decoration: none !important;
}

.btn-sm {
    padding: 2px 8px;
    font-size: 10px;
}

.btn-block {
    width: 100%;
    text-align: center;
}

.btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* ==========================================================================
   Plan generado y listas
   ========================================================================== */

.empty-state {
    text-align: center;
    padding: 28px 16px;
    color: #777777;
}

.empty-state-icon {
    font-size: 28px;
    margin-bottom: 6px;
}

.empty-state h3 {
    margin: 0 0 4px 0;
    font-size: 13px;
    color: #555555;
}

.empty-state p {
    margin: 0 auto;
    font-size: 11px;
    max-width: 320px;
}

.plan-item,
.plan-item-box {
    border: 1px solid #c0c8d0;
    border-top: 1px solid #d8dee4;
    padding: 8px 10px;
    margin-bottom: 6px;
    background-color: #f7f9fb;
}

.plan-item-header {
    overflow: hidden;
    margin-bottom: 4px;
}

.plan-item-title {
    float: left;
    font-size: 12px;
    font-weight: bold;
    color: #1a3a5c;
}

.plan-item-tag {
    float: right;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    background-color: #e8f0f8;
    color: #2f5578;
    padding: 1px 5px;
    border: 1px solid #b0c4d8;
}

.plan-item-desc {
    margin: 0;
    font-size: 11px;
    color: #555555;
}

.topics-list {
    border-top: 1px solid #c0c8d0;
    padding-top: 6px;
}

.saved-plans-section {
    clear: both;
}

.saved-plans-grid,
.saved-plans-list {
    width: 100%;
}

.saved-plan-card,
.saved-plan-row {
    background-color: #ffffff;
    border: 1px solid #c0c8d0;
    border-bottom: 1px solid #b0b8c0;
    padding: 8px 10px;
    margin-bottom: 6px;
    overflow: hidden;
}

.saved-plan-header {
    overflow: hidden;
    margin-bottom: 3px;
}

.saved-plan-title,
.saved-plan-name {
    font-weight: bold;
    color: #1a3a5c;
    font-size: 12px;
}

.saved-plan-id {
    float: right;
    font-family: "Courier New", Courier, monospace;
    font-size: 10px;
    color: #888888;
}

.saved-plan-meta {
    font-size: 11px;
    color: #555555;
}

.saved-plan-topics-count {
    font-size: 10px;
    color: #666666;
    margin-top: 3px;
}

.saved-plan-footer,
.saved-plan-actions {
    margin-top: 6px;
    text-align: right;
}

/* ==========================================================================
   Temas de entrevista
   ========================================================================== */

.topics-section {
    clear: both;
    background-color: #ffffff;
    border: 1px solid #9aa4ae;
    padding: 0 0 10px 0;
}

.section-title-box,
.section-header {
    padding: 8px 12px;
    background-color: #3d6a94;
    background-image: linear-gradient(to bottom, #4a7cac, #2f5578);
    border-bottom: 1px solid #23405c;
    color: #ffffff;
}

.section-title-box h2,
.section-header h2 {
    margin: 0;
    font-size: 13px;
    color: #ffffff;
}

.section-title-box p,
.section-header p {
    margin: 3px 0 0 0;
    font-size: 11px;
    color: #d0e0f0;
}

.topics-cards-grid {
    padding: 10px 12px 0 12px;
    overflow: hidden;
}

.topic-item-card {
    float: left;
    width: 32%;
    margin-right: 2%;
    margin-bottom: 10px;
    border: 1px solid #c0c8d0;
    background-color: #f7f9fb;
    padding: 8px 10px;
    min-height: 160px;
}

.topic-item-card:last-child {
    margin-right: 0;
}

.topic-tag,
.topic-category {
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    color: #6a7a88;
    margin-bottom: 4px;
}

.topic-item-card h3,
.topic-title {
    margin: 0 0 6px 0;
    font-size: 12px;
    color: #1a3a5c;
}

.topic-item-card p,
.topic-desc {
    margin: 0 0 8px 0;
    font-size: 11px;
    color: #444444;
}

.topic-footer,
.topic-side {
    overflow: hidden;
    border-top: 1px dotted #c0c8d0;
    padding-top: 6px;
}

.topic-badge,
.topic-level {
    float: left;
    font-size: 10px;
    color: #666666;
    padding-top: 3px;
}

.topic-footer .btn {
    float: right;
}

.topic-row {
    padding: 8px 10px;
    border-bottom: 1px solid #d0d6dc;
    overflow: hidden;
}

/* ==========================================================================
   Modales
   ========================================================================== */

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.45);
    z-index: 1000;
    padding: 40px 20px 20px 20px;
    /* El JS abre el modal con display:flex; aquí se centra el diálogo. */
    align-items: flex-start;
    justify-content: center;
}

.modal-dialog {
    background-color: #ffffff;
    width: 400px;
    margin: 0 auto;
    border: 2px solid #1a3a5c;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.modal-dialog-lg {
    width: 640px;
}

.modal-header {
    padding: 6px 10px;
    background-color: #3d6a94;
    background-image: linear-gradient(to bottom, #4a7cac, #2f5578);
    border-bottom: 1px solid #23405c;
    overflow: hidden;
    color: #ffffff;
}

.modal-header h3 {
    margin: 0;
    font-size: 13px;
    color: #ffffff;
}

.modal-header .tag-tech {
    background-color: #2f5578;
    border-color: #1a3048;
    color: #e8f0f8;
}

.modal-close {
    float: right;
    background-color: #8a3030;
    border: 1px solid #5c1818;
    color: #ffffff;
    cursor: pointer;
    padding: 0 6px;
    font-size: 12px;
    line-height: 18px;
}

.modal-close:hover {
    background-color: #b03838;
}

.modal-body {
    padding: 12px;
}

.modal-footer-switch {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #c0c8d0;
    text-align: center;
    font-size: 11px;
    color: #555555;
}

.alert-error {
    background-color: #f8d8d8;
    border: 1px solid #c06060;
    color: #8a2020;
    padding: 6px 8px;
    font-size: 11px;
    margin-bottom: 10px;
}

/* ==========================================================================
   Preguntas de entrevista
   ========================================================================== */

.interview-question-box,
.question-block {
    border: 1px solid #c0c8d0;
    margin-bottom: 10px;
    background-color: #ffffff;
}

.interview-question-header,
.question-block-header {
    padding: 6px 8px;
    background-color: #eceff2;
    border-bottom: 1px solid #c0c8d0;
    overflow: hidden;
}

.question-title,
.question-text {
    font-size: 12px;
    font-weight: bold;
    color: #1a3a5c;
}

.question-level-tag {
    float: right;
    font-size: 9px;
    font-weight: bold;
    padding: 1px 5px;
    border: 1px solid #b0b8c0;
    color: #555555;
}

.question-block-body {
    padding: 8px 10px;
}

.concept-box,
.concept-value {
    background-color: #eef4e8;
    border: 1px solid #c0d0b0;
    border-left: 3px solid #5a8a40;
    padding: 6px 8px;
    margin: 8px 0;
    font-size: 11px;
}

.concept-label {
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    color: #777777;
}

.model-answer-box,
.answer-text {
    font-size: 12px;
    color: #222222;
    margin: 8px 0;
}

.code-block,
.code-snippet-box,
.code-snippet-box code {
    display: block;
    background-color: #1e2830;
    color: #d8e0c8;
    padding: 8px 10px;
    font-family: "Courier New", Courier, monospace;
    font-size: 11px;
    overflow-x: auto;
    white-space: pre;
    border: 1px solid #0e1418;
    margin: 4px 0 0 0;
}

/* ==========================================================================
   Botón de sesión y menú (cambio 19)
   El botón de sesión pasa de un emoji a texto ("Entrar" / "Salir"): necesita
   ancho automático. El botón "Menú" solo se muestra en pantallas estrechas.
   ========================================================================== */

.btn-auth-action {
    width: auto;
    padding: 0 6px;
}

.user-details {
    padding-right: 48px;
}

.menu-toggle {
    display: none;
}

/* ==========================================================================
   Responsive (cambio 19)
   El diseño original es de escritorio (~2010, 980px mínimo). Por encima de
   900px no cambia nada; por debajo, todo se apila en una columna y el menú
   lateral pasa a ser una barra superior desplegable. Solo se reorganiza el
   espacio: colores, bordes, degradados y tipografía son los mismos.
   ========================================================================== */

@media (max-width: 900px) {
    body {
        min-width: 0;
    }

    /* La tabla de dos columnas (sidebar | contenido) pasa a bloques apilados. */
    .app-layout,
    .app-sidebar,
    .app-main {
        display: block;
        width: 100%;
    }

    .app-layout {
        min-height: 0;
    }

    .app-sidebar {
        border-right: 0;
        border-bottom: 1px solid #0e2438;
    }

    .sidebar-brand {
        position: relative;
    }

    .menu-toggle {
        display: block;
        position: absolute;
        right: 10px;
        top: 12px;
    }

    /* Menú recogido por defecto; app.js añade .nav-open al pulsar "Menú". */
    .sidebar-nav {
        display: none;
    }

    .app-sidebar.nav-open .sidebar-nav {
        display: block;
    }

    .sidebar-user {
        margin-top: 0;
    }

    .main-header {
        height: auto;
        line-height: 1.4;
        padding: 6px 10px;
    }

    .header-actions {
        display: none;
    }

    .content-body {
        padding: 10px;
    }

    /* Bienvenida: texto arriba y contadores debajo, uno al lado del otro. */
    .welcome-content,
    .welcome-stats {
        float: none;
        width: 100%;
    }

    .welcome-stats {
        display: flex;
        gap: 6px;
        padding: 0 14px 12px 14px;
    }

    .stat-pill {
        flex: 1;
        margin-bottom: 0;
    }

    .auth-notice-card {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .auth-notice-actions {
        text-align: left;
    }

    /* Formulario y plan activo: una columna. */
    .dashboard-grid > .panel-card:first-child,
    .dashboard-grid > .panel-card:last-child {
        float: none;
        width: 100%;
    }

    .topic-item-card {
        float: none;
        width: 100%;
        margin-right: 0;
        min-height: 0;
    }

    .modal-backdrop {
        padding: 10px;
    }

    .modal-dialog,
    .modal-dialog-lg {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .radio-pill span {
        padding: 4px 2px;
    }

    /* Título y etiqueta de cada módulo del plan, uno debajo del otro. */
    .plan-item-title,
    .plan-item-tag {
        float: none;
    }

    .plan-item-tag {
        display: inline-block;
        margin-top: 4px;
    }

    .code-snippet-box,
    .code-snippet-box code {
        font-size: 10px;
    }
}

/* ==========================================================================
   Cambio 31: menú lateral fijo
   Al bajar por una página larga, el menú se quedaba arriba y se perdía. No se
   toca ninguna regla anterior: el menú se ve igual, solo deja de irse.
   - sticky solo desplaza una caja DENTRO de la que la contiene, y .app-sidebar
     es una celda tan alta como su tabla (.app-layout, toda la página): a la
     celda no le queda sitio para moverse. Por eso se fija .sidebar-inner
     (views/layout.php), que mide lo que el menú, y la celda sigue pintando el
     fondo azul hasta abajo.
   - Solo en escritorio: 901px es lo contrario del max-width: 900px del cambio 19.
     Por debajo, el menú sigue siendo la barra superior con el botón "Menú".
   ========================================================================== */

@media (min-width: 901px) {
    .sidebar-inner {
        position: sticky;
        top: 0;
        /* Si el menú es más alto que la ventana, se desplaza dentro de sí mismo
           y el bloque del usuario sigue siendo alcanzable. */
        max-height: 100vh;
        overflow-y: auto;
        /* El mismo fondo que la celda (inherit copia el de .app-sidebar, así no se
           repiten los colores). Chrome dibuja la caja fija en una capa aparte y, si
           esa capa es transparente, suaviza el texto en gris en vez de por
           subpíxeles (ClearType): los enlaces del menú se verían algo más finos.
           Con fondo, el texto se dibuja igual que antes. */
        background: inherit;
    }
}

/* Insignia "● Sin conexión" de la cabecera (app.js, cuando GET /health no da 200):
   los colores de .alert-error, el rojo que la app reserva para los errores de
   verdad. El texto también cambia: el color nunca va solo. */
.tag-badge-clean.api-offline {
    background-color: #f8d8d8;
    border-color: #c06060;
    color: #8a2020;
}