/* =========================================================
   PATHROVER – THEME PRO (Backpack 4.1 / CoreUI 2)
   ========================================================= */

/* ---------- Tokens de color & layout ---------- */
:root {
    /* Brand */
    --pr-brand: #1BA5C1;
    /* cian (links/activo) */
    --pr-brand-600: #1593ac;
    --pr-accent: #EE7C3D;
    /* naranja (acciones/primary) */

    /* Semánticos & neutros */
    --pr-text: #0f172a;
    /* zinc-900 */
    --pr-muted: #64748b;
    /* slate-500 */
    --pr-sep: #94a3b8;
    /* slate-400 (sep breadcrumb) */
    --pr-border: rgba(0, 0, 0, .06);

    /* Feedback */
    --pr-success: #22c55e;
    --pr-success-600: #16a34a;
    --pr-danger: #dc2626;
    --pr-danger-600: #b91c1c;
    --pr-warning: #f59e0b;
    --pr-warning-600: #d97706;

    /* FX */
    --pr-brand-bg: rgba(27, 165, 193, .10);
    --shadow-md: 0 2px 10px rgba(0, 0, 0, .06);

    /* Layout */
    --header-h: 56px;
    --beta-h: 0px;
    /* pon 28px si tu franja BETA es fija */
}

/* =========================================================
     LAYOUT
     ========================================================= */
.app-body {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.app-body>.sidebar {
    background: #f8fafc !important;
    /* gris muy claro (antes blanco) */
    border-right: 1px solid var(--pr-border);
    height: 100vh !important;
    position: sticky !important;
    top: var(--beta-h);
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 1020;
}

.app-body>.sidebar::before,
.app-body>.sidebar::after {
    content: none !important;
}

.app-body>.sidebar .sidebar-nav {
    padding: 8px 4px;
}

/* Sidebar links */
.app-body>.sidebar .nav .nav-link,
.app-body>.sidebar .nav .nav-dropdown-toggle {
    color: var(--pr-text) !important;
    border-radius: 10px;
    margin: 2px 6px;
    padding: 10px 12px !important;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.15s ease, color 0.15s ease;
}

.app-body>.sidebar .nav .nav-link i,
.app-body>.sidebar .nav .nav-dropdown-toggle i {
    width: 20px;
    text-align: center;
    font-size: 1.1rem !important;
    color: var(--pr-accent) !important;
}

.app-body>.sidebar .nav .nav-link:hover,
.app-body>.sidebar .nav .nav-dropdown-toggle:hover {
    color: var(--pr-brand) !important;
    background: rgba(27, 165, 193, 0.08) !important;
    /* leve cian translúcido */
}

.app-body>.sidebar .nav .nav-link.active,
.app-body>.sidebar .nav li.open>.nav-dropdown-toggle {
    color: var(--pr-text) !important;
    background: #e2e8f0 !important;
    /* gris más fuerte que el fondo */
    border-left: 4px solid var(--pr-accent);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
}


/* Dropdowns */
.app-body>.sidebar .nav .nav-dropdown.c-show>.nav-dropdown-items {
    background: #f8fafc !important;
    margin: 4px 6px 6px 6px;
    padding: 4px;
    border: 1px solid var(--pr-border);
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.app-body>.sidebar .nav .nav-dropdown-items .nav-link {
    padding: 8px 10px 8px 30px !important;
    border-radius: 8px;
}

/* Header */
.app-header.navbar {
    position: sticky;
    top: var(--beta-h);
    height: var(--header-h);
    background: #fff !important;
    border-bottom: 1px solid var(--pr-border) !important;
    box-shadow: var(--shadow-md) !important;
    z-index: 1031;
    display: flex;
    align-items: center;
    padding: 0 12px;
}

.app-header .navbar-toggler {
    color: var(--pr-text) !important;
    border: 0;
    margin-right: 6px;
}

.app-header .navbar-toggler:hover {
    color: var(--pr-brand) !important;
}

.app-header .navbar-brand {
    display: flex;
    align-items: center;
    padding: 0 6px;
    margin: 0;
}

.app-header .navbar-brand img {
    height: 28px;
    width: auto;
    display: block;
    filter: none !important;
    transition: transform .2s ease;
}

.app-header .navbar-brand img:hover {
    transform: scale(1.03);
}

/* Main */
.app-body .main {
    width: 100%;
    padding-top: 16px;
}

.app-body .main .container-fluid {
    margin-top: 8px;
}

/* =========================================================
     COMPONENTES BASE
     ========================================================= */
/* Cards */
.card {
    border-radius: 12px;
    border: 1px solid var(--pr-border);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .04);
}

/* Botones (rellenos = texto/íconos blancos) */
.btn {
    font-weight: 600;
}

/* Solo botones "rellenos", NO .btn-link ni .btn-light */
.btn:not(.btn-link):not(.btn-light),
.btn:not(.btn-link):not(.btn-light) a,
a.btn:not(.btn-link):not(.btn-light) {
    color: #fff !important;
    text-decoration: none !important;
}

.btn:not(.btn-link):not(.btn-light) i {
    color: #fff !important;
}

/* .btn-link hereda color (para acciones en tabla) */
.btn-link,
.btn-link i {
    color: inherit !important;
    text-decoration: none !important;
}

/* Primary = naranja; hover = cian */
.btn-primary {
    background: var(--pr-accent) !important;
    border-color: var(--pr-accent) !important;
    box-shadow: 0 2px 6px rgba(238, 124, 61, .25);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--pr-brand) !important;
    border-color: var(--pr-brand) !important;
    box-shadow: 0 3px 8px rgba(27, 165, 193, .25);
}

/* Estados semánticos */
.btn-success {
    background: var(--pr-success) !important;
    border-color: var(--pr-success) !important;
}

.btn-success:hover,
.btn-success:focus {
    background: var(--pr-success-600) !important;
    border-color: var(--pr-success-600) !important;
}

.btn-danger {
    background: var(--pr-danger) !important;
    border-color: var(--pr-danger) !important;
}

.btn-danger:hover,
.btn-danger:focus {
    background: var(--pr-danger-600) !important;
    border-color: var(--pr-danger-600) !important;
}

.btn-warning {
    background: var(--pr-warning) !important;
    border-color: var(--pr-warning) !important;
}

.btn-warning:hover,
.btn-warning:focus {
    background: var(--pr-warning-600) !important;
    border-color: var(--pr-warning-600) !important;
}

/* Outline claro coherente con brand */
.btn-light {
    color: var(--pr-brand) !important;
    background: #fff !important;
    border-color: rgba(27, 165, 193, .35) !important;
}

.btn-light i {
    color: var(--pr-brand) !important;
}

.btn-light:hover {
    background: rgba(27, 165, 193, .07) !important;
}

.form-control:focus {
    border-color: var(--pr-brand) !important;
    box-shadow: 0 0 0 .2rem rgba(27, 165, 193, .15) !important;
}

/* =========================================================
     LINKS / BREADCRUMB / ACCIONES / PAGINACIÓN
     ========================================================= */
/* Links globales */
a,
a:link,
a:visited {
    color: var(--pr-brand) !important;
    text-decoration: none !important;
    transition: color .15s ease, opacity .15s ease;
}

a:hover,
a:focus {
    color: var(--pr-accent) !important;
    opacity: .9;
    text-decoration: underline;
}

a:active {
    color: var(--pr-brand-600) !important;
}

/* Breadcrumb */
.breadcrumb {
    background: transparent !important;
    margin-bottom: 1rem;
    padding: .5rem 0;
}

.breadcrumb .breadcrumb-item {
    color: var(--pr-muted);
    font-weight: 500;
}

.breadcrumb .breadcrumb-item a {
    color: var(--pr-brand) !important;
}

.breadcrumb .breadcrumb-item a:hover {
    color: var(--pr-accent) !important;
    text-decoration: underline;
}

.breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    color: var(--pr-sep);
}

/* Acciones en tablas (como links) */
.table a {
    font-weight: 600;
    transition: color .15s ease, opacity .15s ease;
}

.table a:hover {
    text-decoration: underline;
}

/* Colores por tipo de acción */
.table a[href*="show"],
.table a[href*="preview"],
.table a[href*="view"] {
    color: var(--pr-brand) !important;
}

.table a[href*="edit"] {
    color: var(--pr-accent) !important;
}

.table a[href*="delete"],
.table a[href*="destroy"],
.table a.btn-danger {
    color: var(--pr-danger) !important;
}

.table a[href*="show"]:hover,
.table a[href*="preview"]:hover {
    color: var(--pr-accent) !important;
}

.table a[href*="edit"]:hover {
    color: var(--pr-brand) !important;
}

.table a[href*="delete"]:hover {
    color: var(--pr-danger-600) !important;
}

/* Paginación */
.pagination .page-link {
    color: var(--pr-brand) !important;
    border-color: rgba(27, 165, 193, .25) !important;
    transition: all .15s ease;
}

.pagination .page-link:hover {
    background: var(--pr-brand-bg) !important;
    color: var(--pr-accent) !important;
}

/* Focus accesible */
a:focus-visible {
    outline: 2px solid var(--pr-brand);
    outline-offset: 2px;
}

/* =========================================================
     Opcional: barra BETA fija
     ========================================================= */
.has-beta .app-header.navbar {
    top: 28px;
}

.has-beta .app-body>.sidebar {
    top: 28px;
}