/* css/components/tabs.css */
.tabs {
    font-family: var(--sys-font);
    font-size: 12px;
}

menu[role="tablist"] {
    display: flex;
    margin: 0;
    padding: 0 0 0 4px;
    border-bottom: 1px solid #999;
    list-style: none;
}

button[role="tab"] {
    background: #f0f0f0;
    border: 1px solid #999;
    border-bottom: none;
    border-radius: 3px 3px 0 0;
    padding: 4px 10px;
    margin-right: 2px;
    margin-bottom: -1px; /* Solapa el borde inferior */
    cursor: default;
    color: var(--text-primary);
}

button[role="tab"][aria-selected="true"] {
    background: #ffffff;
    padding-bottom: 5px; /* Crece ligeramente */
    position: relative;
    z-index: 2;
}

button[role="tab"]:not([aria-selected="true"]):hover {
    background: #e5f1fb; /* Ligero hover estilo Win7 */
}

button[role="tab"][disabled] {
    color: var(--text-muted);
    text-shadow: 1px 1px 0px #fff;
}

article[role="tabpanel"] {
    background: #ffffff;
    border: 1px solid #999;
    border-top: none;
    padding: 12px;
}