/* ============================================================
   LAYOUT · PANEL
   Pastel, tarjetas grandes redondeadas con sombra suave,
   sidebar flotante. Amable y visual. Acento salud/teal.
   Inspirado en Google Material · Notion · apps de salud.
   Se activa con body.theme-panel (APP_THEME=panel).
   ============================================================ */

body.theme-panel,
.theme-panel .page-wrapper,
.theme-panel .page-body {
    background: #eef5f3;
}

/* ---- Sidebar flotante redondeada ---- */
.theme-panel .girasol-sidebar {
    margin: 12px;
    border-radius: 20px;
    height: calc(100vh - 24px);
    background: linear-gradient(180deg, var(--girasol-primary), #0b5a54) !important;
    box-shadow: 0 10px 30px -12px rgba(15, 118, 110, 0.45);
}
.theme-panel .girasol-sidebar .navbar-brand {
    background: transparent;
}

/* ---- Topbar transparente sobre el pastel ---- */
.theme-panel .girasol-topbar {
    background: transparent;
    border-image: none !important;
    border-bottom: none;
    box-shadow: none;
}

/* ---- Tarjetas grandes, sombra suave, mucho radio ---- */
.theme-panel .card-girasol {
    border: none;
    border-radius: 20px;
    box-shadow: 0 4px 16px -6px rgba(20, 40, 60, 0.15);
}
.theme-panel .card-girasol .card-header {
    border-radius: 20px 20px 0 0;
}

/* ---- Controles tipo pastilla ---- */
.theme-panel .btn {
    border-radius: 14px;
}
.theme-panel .btn-girasol,
.theme-panel .badge {
    border-radius: 999px;
}

/* ---- Tablas aireadas dentro de las tarjetas ---- */
.theme-panel .table thead th {
    background: transparent;
}
.theme-panel .table td,
.theme-panel .table th {
    padding: 0.7rem 0.8rem;
}