/* =========================================================
   Theme refresh — Certificados Gerscol
   Loaded after style.css. Keeps the existing brand colors
   (navy + olive green) but modernizes components and fixes
   responsive behavior. Prefer editing this file over the
   legacy style.css.
   ========================================================= */

:root {
    --navy-900: #0c2b55;
    --navy-700: #16386b;
    --navy-500: #435d7d;
    --green-600: #6e8330;
    --green-500: #82983c;
    --green-400: #8ca13a;
    --yellow-500: #e0cc18;
    --red-500: #d9534f;
    --ink: #2c3e50;
    --muted: #6b7a90;
    --bg: #f4f6f9;
    --surface: #ffffff;
    --border: #e6e9ef;
    --radius: 10px;
    --radius-sm: 6px;
    --shadow-sm: 0 1px 2px rgba(16, 30, 54, 0.06);
    --shadow-md: 0 6px 16px rgba(16, 30, 54, 0.08);
    --shadow-lg: 0 12px 30px rgba(16, 30, 54, 0.12);
}

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--bg);
    color: var(--ink);
    overflow-x: hidden;
}

a {
    color: var(--navy-500);
}

a:hover {
    color: var(--green-600);
}

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
    color: var(--ink);
    font-weight: 600;
}

/* -------------------------------------------------
   Layout / wrapper
   ------------------------------------------------- */
.wrapper {
    min-height: 100vh;
    align-items: stretch;
}

#content {
    background: var(--bg);
    min-width: 0; /* allow flex child to shrink instead of forcing page-wide overflow */
}

.container, .container-xl, .container-fluid {
    max-width: 100%;
}

/* -------------------------------------------------
   Sidebar
   ------------------------------------------------- */
#sidebar {
    background: linear-gradient(180deg, var(--navy-900) 0%, #0a2246 100%) !important;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    z-index: 1040;
}

#sidebar .p-4.pt-5 {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-top: 1.5rem !important;
}

#sidebar .imglogo {
    max-width: 100%;
    width: auto;
    height: 48px;
    margin: 0 0 1.5rem 0;
}

#sidebar ul.components {
    flex: 1 1 auto;
}

#sidebar ul li a {
    border-bottom: none;
    border-radius: var(--radius-sm);
    padding: 0.7rem 0.9rem;
    margin-bottom: 0.15rem;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.75);
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

#sidebar ul li a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    transform: translateX(2px);
}

#sidebar ul li.active > a {
    background: var(--green-500);
    color: #fff !important;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

#sidebar .btn-logout {
    width: 100% !important;
    justify-content: flex-start !important;
    background: transparent !important;
    border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    margin-top: 0.5rem;
    padding: 0.6rem 0.9rem;
}

.btn-logout:hover,
.btn-logout:focus {
    background: var(--red-500) !important;
    border-color: var(--red-500) !important;
    color: #fff !important;
}

#sidebar .footer {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#sidebar .footer p {
    font-size: 0.75rem;
}

#sidebar .footer a {
    color: rgba(255, 255, 255, 0.8);
}

.custom-menu .btn.btn-primary {
    box-shadow: var(--shadow-sm);
}

/* Mobile sidebar: overlay instead of squeezing content, plus backdrop */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(12, 43, 85, 0.45);
    z-index: 1030;
}

/* Mobile top bar: logo + toggle, always visible (open or closed) so the
   brand isn't hidden away until the drawer is opened. Desktop keeps the
   sidebar visible at all times with its own logo, so this stays hidden
   there. */
.mobile-topbar {
    display: none;
}

@media (max-width: 991.98px) {
    .mobile-topbar {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 56px;
        padding: 0 1rem;
        background: linear-gradient(90deg, var(--navy-900) 0%, var(--navy-500) 100%);
        box-shadow: var(--shadow-sm);
        z-index: 1050;
    }

    .mobile-topbar-logo {
        height: 26px;
        width: auto;
    }

    /* Perfect circle, regardless of the legacy "button { width: 100%
       !important }" rule in style.css or any padding .btn normally has. */
    .mobile-topbar #sidebarCollapse {
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
}

@media (max-width: 991.98px) {
    /* style.css hides the sidebar on mobile with a hardcoded
       "margin-left: -250px", which only fully conceals it as long as the
       sidebar is exactly 250px wide. The <575.98px rule below makes it
       85vw instead — wider on small phones — so that fixed offset stopped
       covering the full width and left a sliver permanently visible.
       transform: translateX(-100%) always shifts it by its own full
       width, whatever that is, so this stays correct at any size. */
    /* The drawer's own big logo would otherwise sit right behind the
       fixed .mobile-topbar (same z-index stack, topbar on top) and get
       visually cut in half by it — the topbar's small logo already
       covers branding while the drawer is closed *or* open, so drop the
       duplicate and push the nav links below the topbar's height. */
    #sidebar .imglogo {
        display: none;
    }

    #sidebar .p-4.pt-5 {
        padding-top: calc(56px + 1rem) !important;
    }

    #sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        margin-left: 0 !important;
        transform: translateX(-100%);
    }

    #sidebar.active {
        transform: translateX(0);
    }

    #content {
        width: 100%;
        margin-left: 0 !important;
        padding-top: calc(56px + 1rem) !important;
    }

    body.sidebar-open .sidebar-backdrop {
        display: block;
    }

    body.sidebar-open {
        overflow: hidden;
    }
}

/* -------------------------------------------------
   Buttons
   ------------------------------------------------- */
.btn {
    border-radius: var(--radius-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.5rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}

.btn:hover, .btn:focus {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.btn:active {
    transform: translateY(0);
}

/* Secondary actions (refresh, export) read as outline/ghost buttons so the
   primary action (crear / nuevo) stands out as the one solid, filled button. */
.btn-azul {
    background-color: transparent !important;
    border: 1.5px solid var(--navy-500) !important;
    color: var(--navy-500) !important;
}

.btn-azul:hover, .btn-azul:focus {
    background-color: var(--navy-500) !important;
    border-color: var(--navy-500) !important;
    color: #fff !important;
}

.btn-verde {
    background-color: var(--green-500) !important;
    border-color: var(--green-500) !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(130, 152, 60, 0.35);
}

.btn-verde:hover, .btn-verde:focus {
    background-color: var(--green-600) !important;
    border-color: var(--green-600) !important;
    color: #fff !important;
}

.btn.btn-primary {
    background: var(--navy-500);
    border-color: var(--navy-500);
}

.btn.btn-primary:hover, .btn.btn-primary:focus {
    background: var(--navy-700) !important;
    border-color: var(--navy-700) !important;
}

.btn-success {
    background-color: var(--green-500) !important;
    border-color: var(--green-500) !important;
}

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

/* Row/table icon actions */
.pencil,
.butondel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: transparent;
    margin: 0 2px;
    transition: background-color 0.15s ease;
    vertical-align: middle;
}

.pencil:hover {
    background: rgba(67, 93, 125, 0.1);
}

.butondel:hover {
    background: rgba(217, 83, 79, 0.1);
}

.icon-view:hover {
    background: rgba(130, 152, 60, 0.12);
}

.pencil i {
    color: var(--navy-500);
}

.icon-view i {
    color: var(--green-500);
}

.butondel i {
    color: var(--red-500);
}

.pencil i,
.butondel i {
    font-size: 16px !important;
}

/* -------------------------------------------------
   Cards / table wrapper
   ------------------------------------------------- */
.table-wrapper {
    min-width: 0 !important;
    width: 100%;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 0;
    overflow: hidden;
}

.table-title {
    background: linear-gradient(90deg, var(--navy-900) 0%, var(--navy-500) 100%);
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 1.1rem 1.25rem;
    /* Safety net: if a viewport is too narrow to fit everything on one row
       (once nowrap kicks in below), scroll horizontally within the header
       bar instead of visually breaking it. */
    overflow-x: auto;
}

.table-title .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 0.85rem;
    margin: 0;
}

/* Bootstrap's col-sm-* give the title a fixed percentage width, which is
   what was starving the form of space and pushing the last button onto a
   second line. Let each side size to its own content instead (desktop
   only — on mobile they should stay full-width and stack, see below). */
@media (min-width: 768px) {
    .table-title .row > [class*="col-"] {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
        padding: 0;
    }
}

.table-title h2.table-head-title {
    font-size: 1.3rem;
    margin: 0;
    white-space: nowrap;
}

.table-title form {
    margin: 0;
}

.table-title .form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.table-title .form-row > .col,
.table-title .form-row > .col-auto {
    padding: 0;
    flex: 0 0 auto;
    width: auto;
}

.table-title .text-right,
.table-title .col-sx-6 {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.table-title .btn {
    height: 40px;
    padding: 0 0.8rem;
    font-size: 0.8rem;
}

.table-title .form-row input.form-control {
    width: 190px !important;
    max-width: 100%;
    height: 40px !important;
}

.table-title .form-row input#datepicker {
    width: 140px !important;
}

.table-title .form-row input.search-input-wide {
    width: 250px !important;
}

.form-search {
    height: 40px;
    padding: 0 0.75rem !important;
    border-radius: var(--radius-sm) !important;
    min-width: 0;
}

/* Force everything onto one row once the sidebar stops being an overlay
   (>=992px). Below that it's fine — and expected — to wrap onto stacked
   rows. If a desktop window is narrow enough that it still doesn't fit,
   the header scrolls horizontally (see .table-title overflow-x above)
   instead of dropping a button onto a second line. */
@media (min-width: 992px) {
    .table-title .row,
    .table-title .form-row {
        flex-wrap: nowrap;
    }
}

.mb-3 {
    margin-left: 0 !important;
}

/* Only the actual table scrolls horizontally on small screens,
   not the header/search/actions above it. */
.table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-wrapper table {
    margin-bottom: 0;
    min-width: 640px;
}

table.table {
    background: var(--surface);
}

table.table thead th {
    background: #f7f9fc;
    color: var(--muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    border-bottom: 1px solid var(--border) !important;
    white-space: nowrap;
}

table.table td {
    vertical-align: middle;
}

.pagination-wrapper {
    padding: 1rem 1.25rem;
}

/* Empty-state fallback row shown when a table/search has no results */
table.table td.empty-state {
    padding: 0;
    border-top: none;
}

.empty-state-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 3.5rem 1.5rem;
    text-align: center;
    color: var(--muted);
}

.empty-state-inner i {
    font-size: 2.75rem;
    color: var(--border);
}

.empty-state-inner p {
    margin: 0;
    font-size: 0.95rem;
}

.empty-state-inner .btn {
    margin-top: 0.25rem;
}

.pagination {
    justify-content: flex-end;
    float: none !important;
}

/* -------------------------------------------------
   Forms (signup-form is reused by every create/edit view)
   ------------------------------------------------- */
.signup-form {
    width: 100%;
    max-width: 560px;
    padding: 0;
    font-size: 0.95rem;
}

.signup-form h2 {
    margin: 0 0 1.5rem 0 !important;
    font-size: 1.4rem;
    color: var(--ink);
}

.signup-form h2::before,
.signup-form h2::after {
    display: none;
}

.signup-form form {
    background: var(--surface);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius);
    padding: 1.75rem;
}

.signup-form .form-group {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.signup-form .form-group:first-child {
    margin-top: 0 !important;
}

.signup-form label {
    display: block;
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--muted);
    margin-bottom: 0.35rem;
}

/* The legacy stylesheet sets form-control text to a washed-out grey
   (#969fa4) that reads like placeholder text even when a real value is
   filled in. Force real, readable ink instead. */
.form-control {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--ink) !important;
    background-color: #fff !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control::placeholder {
    color: #a7b0bd !important;
}

.form-control:focus {
    border-color: var(--navy-500) !important;
    box-shadow: 0 0 0 3px rgba(67, 93, 125, 0.15) !important;
}

/* Native <select class="form-control"> — the bootstrap-select JS plugin
   is loaded but never initialized anywhere, so selects using it rendered
   as tiny, unstyled native dropdowns. Plain native selects, styled to
   match text inputs, are simpler and don't depend on that plugin. */
select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2.25rem !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23435D7D' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 14px;
}

/* Tom Select (searchable dropdowns for student/course pickers in the
   certificate form) — match the look of the other .form-control fields. */
.ts-wrapper .ts-control {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    min-height: 40px;
    padding: 0.375rem 0.75rem;
    box-shadow: none !important;
    background: #fff;
}

.ts-wrapper.focus .ts-control {
    border-color: var(--navy-500) !important;
    box-shadow: 0 0 0 3px rgba(67, 93, 125, 0.15) !important;
}

.ts-dropdown {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
}

.ts-dropdown .option.active,
.ts-dropdown .option:hover {
    background: var(--green-500);
    color: #fff;
}

.signup-form small {
    display: block;
    color: var(--red-500);
    font-size: 0.78rem;
    margin-top: 0.3rem;
}

.signup-form .btn-block {
    margin-top: 0.5rem;
}

.card {
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}

.card-header {
    background: var(--navy-900);
    color: #fff;
    font-weight: 600;
    border-radius: var(--radius) var(--radius) 0 0 !important;
}

/* Legacy style.css forces `button, input, select, textarea { width: 100% !important }`
   site-wide. That's fine for form fields, but it breaks any button/icon-link that
   should stay content-sized (header actions, row action icons). Higher-specificity
   overrides below win regardless of source order. */
.btn,
a.pencil,
button.butondel,
#sidebarCollapse {
    width: auto !important;
}

/* -------------------------------------------------
   Public certificate lookup (/busqueda) — centered search,
   no data shown until a document number is submitted.
   ------------------------------------------------- */
.search-hero {
    max-width: 520px;
    margin: 3rem auto 2.5rem;
    padding: 2.5rem 2rem;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    text-align: center;
}

.search-hero-icon {
    font-size: 2.75rem;
    color: var(--green-500);
}

.search-hero h2 {
    margin: 0.75rem 0 0.4rem;
    font-size: 1.4rem;
    color: var(--ink);
}

.search-hero-subtitle {
    color: var(--muted);
    font-size: 0.9rem;
    margin: 0 0 1.5rem;
}

.search-hero-form {
    display: flex;
    gap: 0.5rem;
}

.search-hero-form .form-control {
    height: 44px !important;
    text-align: center;
    font-size: 1rem;
}

.search-hero-form .btn {
    height: 44px;
    width: auto !important;
    flex-shrink: 0;
    padding: 0 1.25rem;
}

@media (max-width: 480px) {
    .search-hero-form {
        flex-direction: column;
    }

    .search-hero-form .btn {
        width: 100% !important;
    }
}

.search-results {
    max-width: 720px;
    margin: 0 auto 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.search-result-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.1rem 1.25rem;
    flex-wrap: wrap;
}

.search-result-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(130, 152, 60, 0.12);
    color: var(--green-500);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.search-result-body {
    flex: 1 1 260px;
    min-width: 0;
}

.search-result-body h3 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--ink);
}

.search-result-name {
    margin: 0.15rem 0 0.5rem;
    color: var(--muted);
    font-size: 0.88rem;
}

.search-result-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    font-size: 0.8rem;
    color: var(--muted);
}

.search-result-meta i {
    margin-right: 0.25rem;
}

.search-empty {
    max-width: 480px;
    margin: 0 auto 2rem;
    text-align: center;
    color: var(--muted);
    padding: 1rem;
}

.search-empty i {
    font-size: 2.25rem;
    color: var(--border);
}

.search-empty p {
    margin: 0.5rem 0 0;
}

.search-empty-hint {
    font-size: 0.82rem;
    color: #a7b0bd;
}

/* -------------------------------------------------
   Widget fixes: dropdown overflow
   ------------------------------------------------- */
.dropdown-menu {
    max-width: 90vw;
}

/* Nothing else in the app renders a real Bootstrap .dropdown-menu anymore
   (bootstrap-select was removed) — the only thing that still gets this
   class is bootstrap-datepicker's calendar popup, which positions itself
   with inline top/left styles computed by JS. Forcing left/min-width here
   with !important, like earlier versions of this rule did, silently wins
   over that inline positioning and makes the calendar pop up in the wrong
   place. The actual broken source of that bug is two legacy rules in
   style.css (see there) — fixed at the source instead of patched here. */

/* -------------------------------------------------
   Responsive tweaks
   ------------------------------------------------- */
@media (max-width: 767.98px) {
    #content {
        padding: 1rem !important;
    }

    .table-title {
        padding: 1rem;
    }

    .table-title h2.table-head-title {
        font-size: 1.1rem;
    }

    .table-title .row > div {
        width: 100%;
    }

    .table-title .text-right,
    .table-title .col-sx-6,
    .table-title .form-row {
        justify-content: flex-start;
    }

    .table-title .btn span {
        display: none;
    }

    .table-title .btn {
        padding: 0.55rem 0.7rem;
    }

    .signup-form form {
        padding: 1.25rem;
    }
}

@media (max-width: 575.98px) {
    #sidebar {
        min-width: 85vw;
        max-width: 85vw;
    }
}