html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* =========================================================
   PLAN AVANZA - PLAN DE ATRAQUE
   ========================================================= */

:root {
    --avz-navy: #081f3a;
    --avz-blue: #0f3b5f;
    --avz-cyan: #2c7f86;
    --avz-cyan-soft: #e5f7f8;
    --avz-green: #0f766e;
    --avz-bg: #f3f7fb;
    --avz-card: #ffffff;
    --avz-text: #102033;
    --avz-muted: #64748b;
    --avz-border: #e5edf5;
    --avz-shadow: 0 18px 45px rgba(15, 35, 55, .10);
    --avz-shadow-soft: 0 10px 28px rgba(15, 35, 55, .07);
}

.avz-plan-page {
    min-height: 100vh;
    padding: 2rem;
    background: radial-gradient(circle at top left, rgba(44,127,134,.18), transparent 28rem), radial-gradient(circle at top right, rgba(8,31,58,.12), transparent 26rem), var(--avz-bg);
}

.avz-hero {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    margin-bottom: 1.25rem;
    box-shadow: var(--avz-shadow);
    background: linear-gradient(135deg, #081f3a 0%, #0f3b5f 45%, #2c7f86 100%);
}

    .avz-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(120deg, rgba(255,255,255,.13), transparent 45%), radial-gradient(circle at 15% 15%, rgba(255,255,255,.22), transparent 16rem), radial-gradient(circle at 85% 35%, rgba(255,255,255,.16), transparent 13rem);
        pointer-events: none;
    }

.avz-hero-bg {
    position: absolute;
    right: -5rem;
    bottom: -8rem;
    width: 28rem;
    height: 28rem;
    border-radius: 999px;
    background: rgba(255,255,255,.09);
    filter: blur(1px);
}

.avz-hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    padding: 2.3rem;
    color: #fff;
}

.avz-kicker {
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .78rem;
    font-weight: 700;
    opacity: .82;
    margin-bottom: .65rem;
}

.avz-hero h1 {
    font-size: clamp(2.2rem, 4vw, 4.2rem);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: .95;
    margin: 0;
}

.avz-hero p {
    max-width: 760px;
    margin: .85rem 0 0;
    font-size: 1.05rem;
    opacity: .9;
}

.avz-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: 1.25rem;
}

    .avz-hero-tags span {
        padding: .45rem .8rem;
        border-radius: 999px;
        background: rgba(255,255,255,.13);
        border: 1px solid rgba(255,255,255,.18);
        font-size: .78rem;
        font-weight: 700;
        backdrop-filter: blur(10px);
    }

.avz-date-panel {
    width: min(360px, 100%);
    padding: 1.35rem;
    border-radius: 24px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.24);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
    backdrop-filter: blur(14px);
}

    .avz-date-panel span {
        display: block;
        font-size: .78rem;
        opacity: .8;
        margin-bottom: .4rem;
    }

    .avz-date-panel strong {
        display: block;
        font-size: 1.08rem;
        text-transform: capitalize;
        line-height: 1.25;
    }

.avz-date-panel-footer {
    margin-top: 1rem;
    padding-top: .9rem;
    border-top: 1px solid rgba(255,255,255,.18);
    font-size: .8rem;
    opacity: .88;
}

.avz-filter-panel {
    display: grid;
    grid-template-columns: auto minmax(220px, 360px) auto;
    align-items: end;
    gap: 1rem;
    padding: 1rem;
    margin-bottom: 1.25rem;
    border: 1px solid rgba(226,232,240,.85);
    border-radius: 24px;
    background: rgba(255,255,255,.86);
    box-shadow: var(--avz-shadow-soft);
    backdrop-filter: blur(12px);
}

.avz-quick-dates,
.avz-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.avz-date-field label {
    display: block;
    color: var(--avz-muted);
    font-size: .78rem;
    font-weight: 700;
    margin-bottom: .25rem;
}

.avz-input-date {
    height: 44px;
    border-radius: 14px;
    border: 1px solid var(--avz-border);
}

.btn-avz {
    height: 44px;
    border: 0;
    border-radius: 14px;
    padding: 0 1rem;
    font-weight: 800;
    transition: all .18s ease;
    white-space: nowrap;
}

    .btn-avz.primary {
        color: #fff;
        background: linear-gradient(135deg, #0f3b5f, #2c7f86);
        box-shadow: 0 10px 20px rgba(44,127,134,.22);
    }

        .btn-avz.primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 14px 24px rgba(44,127,134,.28);
        }

    .btn-avz.ghost {
        color: var(--avz-blue);
        background: #fff;
        border: 1px solid var(--avz-border);
    }

        .btn-avz.ghost:hover {
            background: #f8fafc;
        }

    .btn-avz.soft {
        color: var(--avz-cyan);
        background: var(--avz-cyan-soft);
    }

    .btn-avz.disabled {
        color: #94a3b8;
        background: #f1f5f9;
        cursor: not-allowed;
    }

.avz-summary-grid {
    display: grid;
    grid-template-columns: 1.3fr repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.avz-summary-card {
    position: relative;
    overflow: hidden;
    min-height: 128px;
    padding: 1.15rem;
    border: 1px solid rgba(226,232,240,.86);
    border-radius: 24px;
    background: #fff;
    box-shadow: var(--avz-shadow-soft);
}

    .avz-summary-card::after {
        content: "";
        position: absolute;
        right: -2rem;
        bottom: -2.5rem;
        width: 7rem;
        height: 7rem;
        border-radius: 999px;
        background: rgba(44,127,134,.08);
    }

    .avz-summary-card.featured {
        color: #fff;
        border: 0;
        background: linear-gradient(135deg, #0f3b5f, #12343b);
    }

        .avz-summary-card.featured::after {
            background: rgba(255,255,255,.1);
        }

    .avz-summary-card span {
        display: block;
        color: var(--avz-muted);
        font-size: .8rem;
        font-weight: 800;
        margin-bottom: .3rem;
    }

    .avz-summary-card.featured span,
    .avz-summary-card.featured small {
        color: rgba(255,255,255,.78);
    }

    .avz-summary-card strong {
        display: block;
        color: var(--avz-text);
        font-size: 2.45rem;
        font-weight: 900;
        line-height: 1;
    }

    .avz-summary-card.featured strong {
        color: #fff;
    }

    .avz-summary-card small {
        display: block;
        color: var(--avz-muted);
        margin-top: .65rem;
        font-size: .78rem;
    }

.avz-loading,
.avz-empty-state,
.avz-alert {
    border-radius: 24px;
    box-shadow: var(--avz-shadow-soft);
}

.avz-loading {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: #fff;
}

    .avz-loading strong,
    .avz-loading span {
        display: block;
    }

    .avz-loading span {
        color: var(--avz-muted);
        font-size: .88rem;
    }

.avz-empty-state {
    text-align: center;
    padding: 4rem 1rem;
    background: #fff;
    border: 1px dashed #cbd5e1;
}

.avz-empty-icon {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    margin: 0 auto 1rem;
    border-radius: 24px;
    background: var(--avz-cyan-soft);
    font-size: 2rem;
}

.avz-empty-state h3 {
    color: var(--avz-text);
    font-weight: 900;
    margin-bottom: .4rem;
}

.avz-empty-state p {
    color: var(--avz-muted);
    margin: 0;
}

.avz-plan-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.avz-section-card {
    overflow: hidden;
    border: 1px solid rgba(226,232,240,.88);
    border-radius: 26px;
    background: rgba(255,255,255,.92);
    box-shadow: var(--avz-shadow-soft);
}

    .avz-section-card summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1.15rem 1.25rem;
        border-bottom: 1px solid #edf2f7;
        background: linear-gradient(90deg, rgba(44,127,134,.08), transparent 55%), #fff;
    }

        .avz-section-card summary::-webkit-details-marker {
            display: none;
        }

.avz-section-title {
    display: flex;
    align-items: center;
    gap: .8rem;
}

.avz-section-dot {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, #2c7f86, #0f3b5f);
    box-shadow: 0 0 0 7px rgba(44,127,134,.12);
}

.avz-section-title strong {
    display: block;
    color: var(--avz-text);
    font-size: 1.08rem;
    font-weight: 900;
}

.avz-section-title small {
    display: block;
    color: var(--avz-muted);
    font-size: .82rem;
    margin-top: .15rem;
}

.avz-count-pill {
    min-width: 42px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    padding: 0 .8rem;
    border-radius: 999px;
    color: #0f766e;
    background: #dff7f6;
    font-weight: 900;
}

.avz-section-empty {
    padding: 1.4rem;
    color: var(--avz-muted);
    font-weight: 600;
}

.avz-table-wrap {
    overflow-x: auto;
}

.avz-table {
    margin: 0;
    min-width: 1180px;
    vertical-align: middle;
}

    .avz-table thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: .85rem .9rem;
        border-bottom: 1px solid #e5edf5;
        color: #475569;
        background: #f8fafc;
        font-size: .74rem;
        font-weight: 900;
        letter-spacing: .045em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .avz-table tbody td {
        padding: .95rem .9rem;
        color: #0f172a;
        border-bottom: 1px solid #eef2f7;
        font-size: .86rem;
    }

    .avz-table tbody tr:hover {
        background: #f8fcfd;
    }

.avz-row-number {
    display: inline-grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    border-radius: 12px;
    color: var(--avz-blue);
    background: #eef6ff;
    font-weight: 900;
}

.avz-vessel-cell strong {
    display: block;
    color: #0b2538;
    font-weight: 900;
    white-space: nowrap;
}

.avz-vessel-cell span,
.avz-muted-block {
    display: block;
    color: var(--avz-muted);
    font-size: .76rem;
    margin-top: .18rem;
    white-space: nowrap;
}

.avz-table td strong {
    font-weight: 900;
}

@media (max-width: 1200px) {
    .avz-filter-panel {
        grid-template-columns: 1fr;
    }

    .avz-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .avz-plan-page {
        padding: 1rem;
    }

    .avz-hero-content {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.5rem;
    }

    .avz-date-panel {
        width: 100%;
    }

    .avz-summary-grid {
        grid-template-columns: 1fr;
    }

    .avz-quick-dates,
    .avz-actions {
        width: 100%;
    }

    .btn-avz {
        flex: 1;
    }
}

/* =========================================================
   PLAN AVANZA - VISTA CLIENTE PLAN DE ATRAQUE
   ========================================================= */

.pa-page {
    --pa-navy: #09233f;
    --pa-blue: #0d3b66;
    --pa-teal: #247c83;
    --pa-green: #0f766e;
    --pa-bg: #f4f8fb;
    --pa-card: #ffffff;
    --pa-text: #102033;
    --pa-muted: #64748b;
    --pa-border: #e4edf5;
    --pa-soft: #eef7f8;
    --pa-shadow: 0 14px 35px rgba(15, 35, 55, .09);
    max-width: 1180px;
    margin: 0 auto;
    padding: 1.25rem;
    color: var(--pa-text);
}

.pa-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.4rem;
    margin-bottom: 1rem;
    border-radius: 22px;
    color: #fff;
    background: linear-gradient(135deg, #09233f, #247c83);
    box-shadow: var(--pa-shadow);
}

.pa-kicker {
    display: block;
    margin-bottom: .35rem;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    opacity: .78;
}

.pa-header h1 {
    margin: 0;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    font-weight: 900;
    letter-spacing: -.04em;
}

.pa-header p {
    margin: .35rem 0 0;
    opacity: .88;
}

.pa-date-card {
    min-width: 280px;
    padding: 1rem;
    border-radius: 18px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
}

    .pa-date-card span {
        display: block;
        font-size: .76rem;
        opacity: .75;
    }

    .pa-date-card strong {
        display: block;
        margin-top: .25rem;
        font-size: 1rem;
        text-transform: capitalize;
    }

    .pa-date-card small {
        display: block;
        margin-top: .65rem;
        padding-top: .65rem;
        border-top: 1px solid rgba(255,255,255,.18);
        opacity: .85;
    }

.pa-controls {
    display: grid;
    grid-template-columns: auto minmax(220px, 320px) auto;
    gap: .75rem;
    align-items: end;
    padding: .9rem;
    margin-bottom: 1rem;
    border-radius: 20px;
    background: var(--pa-card);
    box-shadow: var(--pa-shadow);
}

.pa-fast-buttons,
.pa-main-actions {
    display: flex;
    gap: .45rem;
    flex-wrap: wrap;
}

.pa-date-input label {
    display: block;
    margin-bottom: .25rem;
    color: var(--pa-muted);
    font-size: .75rem;
    font-weight: 800;
}

.pa-date-input .form-control,
.pa-search-box .form-control {
    min-height: 42px;
    border-radius: 13px;
    border: 1px solid var(--pa-border);
}

.pa-btn {
    min-height: 42px;
    padding: 0 .95rem;
    border: 0;
    border-radius: 13px;
    font-weight: 850;
    transition: .16s ease;
    white-space: nowrap;
}

.pa-btn-main {
    color: #fff;
    background: linear-gradient(135deg, var(--pa-blue), var(--pa-teal));
}

    .pa-btn-main:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 18px rgba(36, 124, 131, .22);
    }

.pa-btn-light {
    color: var(--pa-blue);
    background: #fff;
    border: 1px solid var(--pa-border);
}

.pa-btn-soft {
    color: var(--pa-teal);
    background: #e6f6f7;
}

.pa-btn-disabled {
    color: #94a3b8;
    background: #f1f5f9;
    cursor: not-allowed;
}

.pa-loading {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--pa-shadow);
}

    .pa-loading strong,
    .pa-loading span {
        display: block;
    }

    .pa-loading span {
        color: var(--pa-muted);
        font-size: .86rem;
    }

.pa-alert {
    border-radius: 18px;
}

.pa-empty {
    padding: 3rem 1rem;
    text-align: center;
    border: 1px dashed #cbd5e1;
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--pa-shadow);
}

.pa-empty-small {
    padding: 2rem 1rem;
}

.pa-empty-icon {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    margin: 0 auto 1rem;
    border-radius: 20px;
    background: #e6f6f7;
    font-size: 2rem;
}

.pa-empty h3 {
    margin-bottom: .35rem;
    font-weight: 900;
}

.pa-empty p {
    margin: 0;
    color: var(--pa-muted);
}

.pa-summary {
    display: grid;
    grid-template-columns: 1.3fr repeat(4, 1fr);
    gap: .75rem;
    margin-bottom: .85rem;
}

.pa-summary-card {
    padding: .95rem;
    border: 1px solid var(--pa-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--pa-shadow);
}

    .pa-summary-card span {
        display: block;
        color: var(--pa-muted);
        font-size: .74rem;
        font-weight: 850;
    }

    .pa-summary-card strong {
        display: block;
        margin-top: .25rem;
        color: var(--pa-text);
        font-size: 2rem;
        font-weight: 950;
        line-height: 1;
    }

    .pa-summary-card.pa-total {
        color: #fff;
        border: 0;
        background: linear-gradient(135deg, #09233f, #0d3b66);
    }

        .pa-summary-card.pa-total span,
        .pa-summary-card.pa-total strong {
            color: #fff;
        }

.pa-search-row {
    margin-bottom: .85rem;
}

.pa-search-box {
    padding: .85rem;
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--pa-shadow);
}

    .pa-search-box span {
        display: block;
        margin-bottom: .3rem;
        color: var(--pa-muted);
        font-size: .75rem;
        font-weight: 850;
    }

.pa-tabs {
    display: flex;
    gap: .45rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.pa-tab {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 38px;
    padding: 0 .8rem;
    border: 1px solid var(--pa-border);
    border-radius: 999px;
    color: var(--pa-blue);
    background: #fff;
    font-weight: 850;
}

    .pa-tab span {
        min-width: 26px;
        height: 24px;
        display: inline-grid;
        place-items: center;
        border-radius: 999px;
        color: var(--pa-teal);
        background: #e6f6f7;
        font-size: .78rem;
    }

    .pa-tab.active {
        color: #fff;
        border-color: transparent;
        background: linear-gradient(135deg, var(--pa-blue), var(--pa-teal));
    }

        .pa-tab.active span {
            color: var(--pa-blue);
            background: #fff;
        }

.pa-list {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.pa-vessel-card {
    overflow: hidden;
    padding: 1rem;
    border: 1px solid var(--pa-border);
    border-left: 6px solid var(--pa-teal);
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--pa-shadow);
}

    .pa-vessel-card.pa-status-berthed {
        border-left-color: #0f766e;
    }

    .pa-vessel-card.pa-status-programmed {
        border-left-color: #2563eb;
    }

    .pa-vessel-card.pa-status-anchor {
        border-left-color: #f59e0b;
    }

    .pa-vessel-card.pa-status-arrival {
        border-left-color: #7c3aed;
    }

    .pa-vessel-card.pa-status-undocked {
        border-left-color: #64748b;
    }

    .pa-vessel-card.pa-status-redocked {
        border-left-color: #db2777;
    }

.pa-vessel-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: .9rem;
}

.pa-vessel-status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .55rem;
    margin-bottom: .45rem;
    border-radius: 999px;
    color: var(--pa-teal);
    background: #e6f6f7;
    font-size: .76rem;
    font-weight: 900;
}

    .pa-vessel-status span {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: currentColor;
    }

.pa-vessel-top h2 {
    margin: 0;
    color: var(--pa-text);
    font-size: 1.28rem;
    font-weight: 950;
    letter-spacing: -.02em;
}

.pa-vessel-sub {
    display: flex;
    gap: .55rem;
    flex-wrap: wrap;
    margin-top: .35rem;
    color: var(--pa-muted);
    font-size: .86rem;
}

    .pa-vessel-sub strong {
        color: var(--pa-text);
    }

    .pa-vessel-sub span {
        position: relative;
        padding-left: .65rem;
    }

        .pa-vessel-sub span::before {
            content: "·";
            position: absolute;
            left: 0;
            color: #94a3b8;
        }

.pa-vessel-number {
    min-width: 48px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: var(--pa-blue);
    background: #edf7ff;
    font-weight: 950;
}

.pa-vessel-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .65rem;
}

    .pa-vessel-grid > div,
    .pa-window-box {
        padding: .78rem;
        border: 1px solid #edf2f7;
        border-radius: 15px;
        background: #f8fafc;
    }

        .pa-vessel-grid span,
        .pa-window-box span,
        .pa-detail-grid span {
            display: block;
            color: var(--pa-muted);
            font-size: .72rem;
            font-weight: 850;
            margin-bottom: .2rem;
        }

        .pa-vessel-grid strong,
        .pa-window-box strong,
        .pa-detail-grid strong {
            display: block;
            color: var(--pa-text);
            font-size: .9rem;
            font-weight: 900;
        }

    .pa-vessel-grid small {
        display: block;
        margin-top: .15rem;
        color: var(--pa-muted);
    }

.pa-window-box {
    margin-top: .65rem;
    background: #faf5ff;
}

.pa-details {
    margin-top: .65rem;
}

    .pa-details summary {
        cursor: pointer;
        color: var(--pa-teal);
        font-weight: 900;
        font-size: .86rem;
    }

.pa-detail-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: .55rem;
    margin-top: .65rem;
}

    .pa-detail-grid > div {
        padding: .7rem;
        border: 1px solid #edf2f7;
        border-radius: 14px;
        background: #fff;
    }

@media (max-width: 1150px) {
    .pa-controls {
        grid-template-columns: 1fr;
    }

    .pa-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .pa-vessel-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pa-detail-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 760px) {
    .pa-page {
        padding: .75rem;
    }

    .pa-header {
        flex-direction: column;
        align-items: stretch;
    }

    .pa-date-card {
        min-width: 0;
    }

    .pa-fast-buttons,
    .pa-main-actions {
        width: 100%;
    }

        .pa-fast-buttons .pa-btn,
        .pa-main-actions .pa-btn {
            flex: 1;
        }

    .pa-summary {
        grid-template-columns: 1fr;
    }

    .pa-vessel-top {
        flex-direction: column;
    }

    .pa-vessel-number {
        width: 100%;
    }

    .pa-vessel-grid,
    .pa-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   PLAN AVANZA - PLAN DE ATRAQUE TABLAS
   ========================================================= */

.pta-page {
    --pta-navy: #09233f;
    --pta-blue: #0d3b66;
    --pta-teal: #247c83;
    --pta-bg: #f5f8fb;
    --pta-card: #ffffff;
    --pta-text: #102033;
    --pta-muted: #64748b;
    --pta-border: #e4edf5;
    --pta-soft: #eef7f8;
    --pta-shadow: 0 12px 30px rgba(15, 35, 55, .08);
    max-width: 100%;
    margin: 0;
    padding: 1.35rem 0 1.75rem;
    color: var(--pta-text);
}

.pta-migration {
    width: min(780px, 100%);
    margin: clamp(2rem, 8vh, 6rem) auto;
    padding: clamp(2rem, 5vw, 3.5rem);
    text-align: center;
    border: 1px solid var(--pta-border);
    border-top: 5px solid var(--pta-teal);
    border-radius: 24px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fcfc 100%);
    box-shadow: 0 22px 55px rgba(15, 35, 55, .12);
}

.pta-migration-logo {
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    margin: 0 auto 1rem;
    border-radius: 22px;
    background: #eefafa;
    border: 1px solid #d6eeee;
}

.pta-migration-logo img {
    width: 62px;
    height: 62px;
    object-fit: contain;
}

.pta-migration-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 .85rem;
    margin-bottom: 1rem;
    border-radius: 999px;
    color: #0f6b69;
    background: #e3f7f6;
    border: 1px solid #c9ecea;
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.pta-migration h1 {
    margin: 0;
    color: var(--pta-text);
    font-size: clamp(1.8rem, 4vw, 2.65rem);
    font-weight: 950;
    letter-spacing: -.035em;
}

.pta-migration-lead {
    max-width: 610px;
    margin: 1rem auto 1.4rem;
    color: var(--pta-muted);
    font-size: 1.05rem;
    line-height: 1.65;
}

.pta-migration-date {
    max-width: 560px;
    margin: 0 auto 1.35rem;
    padding: 1rem 1.2rem;
    border-radius: 16px;
    color: #ffffff;
    background: linear-gradient(135deg, #0d5559, #247c83);
    box-shadow: 0 10px 24px rgba(36, 124, 131, .20);
}

.pta-migration-date span,
.pta-migration-date strong {
    display: block;
}

.pta-migration-date span {
    margin-bottom: .25rem;
    font-size: .78rem;
    font-weight: 700;
    opacity: .88;
}

.pta-migration-date strong {
    font-size: clamp(1.05rem, 3vw, 1.35rem);
    font-weight: 950;
    text-transform: capitalize;
}

.pta-migration-note {
    max-width: 620px;
    margin: 0 auto;
    color: #526274;
    font-size: .92rem;
    line-height: 1.6;
}

.pta-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 1.25rem 1.4rem;
    margin-bottom: 1rem;
    border-radius: 20px;
    color: #fff;
    background: linear-gradient(135deg, #09233f, #247c83);
    box-shadow: var(--pta-shadow);
}

.pta-kicker {
    display: block;
    margin-bottom: .35rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .8;
}

.pta-header h1 {
    margin: 0;
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -.03em;
}

.pta-header p {
    margin: .25rem 0 0;
    opacity: .9;
}

.pta-date-box {
    min-width: 280px;
    padding: .9rem 1rem;
    border-radius: 16px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.2);
}

    .pta-date-box span {
        display: block;
        font-size: .74rem;
        opacity: .75;
    }

    .pta-date-box strong {
        display: block;
        margin-top: .2rem;
        text-transform: capitalize;
    }

    .pta-date-box small {
        display: block;
        margin-top: .45rem;
        opacity: .85;
    }

.pta-toolbar {
    display: grid;
    grid-template-columns: auto 210px minmax(260px, 1fr) auto;
    gap: .75rem;
    align-items: end;
    padding: .85rem;
    margin-bottom: 1rem;
    border-radius: 18px;
    background: var(--pta-card);
    box-shadow: var(--pta-shadow);
}

.pta-date-buttons,
.pta-actions {
    display: flex;
    gap: .45rem;
    flex-wrap: wrap;
}

.pta-field label {
    display: block;
    margin-bottom: .25rem;
    color: var(--pta-muted);
    font-size: .74rem;
    font-weight: 800;
}

.pta-field .form-control {
    min-height: 42px;
    border-radius: 12px;
    border: 1px solid var(--pta-border);
}

.pta-btn {
    min-height: 42px;
    padding: 0 .9rem;
    border: 0;
    border-radius: 12px;
    font-weight: 850;
    white-space: nowrap;
    transition: .16s ease;
}

.pta-btn-main {
    color: #fff;
    background: linear-gradient(135deg, var(--pta-blue), var(--pta-teal));
}

    .pta-btn-main:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 16px rgba(36, 124, 131, .22);
    }

.pta-btn-light {
    color: var(--pta-blue);
    background: #fff;
    border: 1px solid var(--pta-border);
}

.pta-btn-soft {
    color: var(--pta-teal);
    background: #e6f6f7;
}

.pta-btn-disabled {
    color: #94a3b8;
    background: #f1f5f9;
    cursor: not-allowed;
}

.pta-loading {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem;
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--pta-shadow);
}

    .pta-loading strong,
    .pta-loading span {
        display: block;
    }

    .pta-loading span {
        color: var(--pta-muted);
        font-size: .86rem;
    }

.pta-empty {
    padding: 2.5rem 1rem;
    text-align: center;
    border: 1px dashed #cbd5e1;
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--pta-shadow);
}

    .pta-empty h3 {
        margin-bottom: .3rem;
        font-weight: 900;
    }

    .pta-empty p {
        color: var(--pta-muted);
        margin: 0;
    }

.pta-summary {
    display: grid;
    grid-template-columns: 1.2fr repeat(5, 1fr);
    gap: .7rem;
    margin-bottom: 1rem;
}

.pta-summary-card {
    padding: .85rem;
    border: 1px solid var(--pta-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--pta-shadow);
}

    .pta-summary-card span {
        display: block;
        color: var(--pta-muted);
        font-size: .72rem;
        font-weight: 850;
    }

    .pta-summary-card strong {
        display: block;
        margin-top: .25rem;
        color: var(--pta-text);
        font-size: 1.65rem;
        font-weight: 950;
        line-height: 1;
    }

    .pta-summary-card.pta-featured {
        color: #fff;
        border: 0;
        background: linear-gradient(135deg, #09233f, #0d3b66);
    }

        .pta-summary-card.pta-featured span,
        .pta-summary-card.pta-featured strong {
            color: #fff;
        }

.pta-sections {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pta-section {
    overflow: hidden;
    border: 1px solid var(--pta-border);
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--pta-shadow);
}

.pta-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    background: linear-gradient(90deg, #f8fcfd, #ffffff);
    border-bottom: 1px solid var(--pta-border);
}

    .pta-section-header > div:first-child {
        display: grid;
        grid-template-columns: 18px 1fr;
        column-gap: .7rem;
        align-items: center;
    }

    .pta-section-header h2 {
        grid-column: 2;
        margin: 0;
        font-size: 1.08rem;
        font-weight: 950;
        color: var(--pta-text);
    }

    .pta-section-header p {
        grid-column: 2;
        margin: .1rem 0 0;
        color: var(--pta-muted);
        font-size: .82rem;
    }

.pta-status-dot {
    grid-row: span 2;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: var(--pta-teal);
    box-shadow: 0 0 0 7px rgba(36, 124, 131, .12);
}

    .pta-status-dot.berthed {
        background: #0f766e;
    }

    .pta-status-dot.anchored {
        background: #f59e0b;
    }

    .pta-status-dot.programmed {
        background: #2563eb;
    }

    .pta-status-dot.undocked {
        background: #64748b;
    }

    .pta-status-dot.redocked {
        background: #db2777;
    }

    .pta-status-dot.arrival {
        background: #7c3aed;
    }

.pta-section-count {
    min-width: 82px;
    padding: .5rem .7rem;
    border-radius: 14px;
    text-align: center;
    color: var(--pta-teal);
    background: #e6f6f7;
    font-size: 1.2rem;
    font-weight: 950;
}

    .pta-section-count span {
        display: block;
        margin-top: .1rem;
        font-size: .65rem;
        font-weight: 800;
    }

.pta-table-wrap {
    overflow-x: auto;
}

.pta-table {
    margin: 0;
    min-width: 1180px;
    vertical-align: middle;
}

    .pta-table thead th {
        padding: .75rem .8rem;
        border-bottom: 1px solid var(--pta-border);
        color: #475569;
        background: #f8fafc;
        font-size: .72rem;
        font-weight: 950;
        letter-spacing: .04em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .pta-table tbody td {
        padding: .85rem .8rem;
        border-bottom: 1px solid #edf2f7;
        color: #0f172a;
        font-size: .86rem;
    }

    .pta-table tbody tr:hover {
        background: #f8fcfd;
    }

    .pta-table tbody tr:last-child td {
        border-bottom: 0;
    }

.pta-number {
    display: inline-grid;
    place-items: center;
    min-width: 36px;
    height: 34px;
    border-radius: 12px;
    color: var(--pta-blue);
    background: #edf7ff;
    font-weight: 950;
}

.pta-vessel strong {
    display: block;
    color: #0b2538;
    font-weight: 950;
    white-space: nowrap;
}

.pta-vessel small {
    display: block;
    margin-top: .15rem;
    color: var(--pta-muted);
    font-size: .74rem;
    white-space: nowrap;
}

.pta-date-cell {
    white-space: nowrap;
    font-weight: 700;
}

.pta-cargo strong {
    font-weight: 900;
    white-space: nowrap;
}

.pta-ton {
    font-weight: 950;
    white-space: nowrap;
}

.pta-muelle strong {
    display: block;
    font-weight: 950;
    white-space: nowrap;
}

.pta-muelle small {
    display: block;
    margin-top: .15rem;
    color: var(--pta-muted);
    font-size: .74rem;
    white-space: nowrap;
}

.pta-no-data {
    padding: 1.2rem !important;
    color: var(--pta-muted) !important;
    font-weight: 800;
    text-align: center;
    background: #fbfdff;
}

@media (max-width: 1180px) {
    .pta-toolbar {
        grid-template-columns: 1fr;
    }

    .pta-summary {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 760px) {
    .pta-page {
        padding: .75rem;
    }

    .pta-header {
        flex-direction: column;
        align-items: stretch;
    }

    .pta-date-box {
        min-width: 0;
    }

    .pta-summary {
        grid-template-columns: 1fr;
    }

    .pta-date-buttons,
    .pta-actions {
        width: 100%;
    }

        .pta-date-buttons .pta-btn,
        .pta-actions .pta-btn {
            flex: 1;
        }
}
/* =========================================================
   PLAN AVANZA - SIDEBAR / MENU LATERAL
   ========================================================= */

.sidebar {
    background: linear-gradient(180deg, #09233f 0%, #0d3b66 48%, #247c83 100%) !important;
}

.avz-menu-top {
    min-height: 4.2rem;
    background: rgba(5, 22, 40, .35) !important;
    border-bottom: 1px solid rgba(255,255,255,.10);
}

.avz-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    color: #ffffff !important;
    font-weight: 900;
    letter-spacing: -.02em;
}

.avz-brand-icon {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 11px;
    color: #09233f;
    background: #ffffff;
    font-weight: 950;
    box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

.avz-nav-scrollable {
    padding-top: 1rem;
}

.avz-nav .nav-item {
    margin-bottom: .35rem;
}

.avz-nav .nav-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 46px;
    border-radius: 14px;
    color: rgba(255,255,255,.82) !important;
    font-weight: 750;
    transition: all .16s ease;
}

    .avz-nav .nav-link:hover {
        color: #ffffff !important;
        background: rgba(255,255,255,.10);
    }

    .avz-nav .nav-link.active {
        color: #09233f !important;
        background: #ffffff !important;
        box-shadow: 0 10px 24px rgba(0,0,0,.16);
    }

        .avz-nav .nav-link.active .bi {
            filter: none;
        }

/* Icono de barco para el menú */
.bi-ship-nav-menu {
    width: 1.25rem;
    height: 1.25rem;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 1.25rem 1.25rem;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5a.5.5 0 0 1 .5.5v1h2a1 1 0 0 1 .894.553L13 6.764V10h.5a.5.5 0 0 1 .447.724l-1.5 3A.5.5 0 0 1 12 14H4a.5.5 0 0 1-.447-.276l-1.5-3A.5.5 0 0 1 2.5 10H3V6.764l1.606-3.211A1 1 0 0 1 5.5 3h2V2a.5.5 0 0 1 .5-.5zM4 10h8V7H4v3zm1.5-6a.5.5 0 0 0-.447.276L4.191 6h7.618l-.862-1.724A.5.5 0 0 0 10.5 4h-5z'/%3E%3Cpath d='M2.5 11l1 2h9l1-2h-11z'/%3E%3C/svg%3E");
}

.avz-nav .nav-link.active .bi-ship-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2309233f' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5a.5.5 0 0 1 .5.5v1h2a1 1 0 0 1 .894.553L13 6.764V10h.5a.5.5 0 0 1 .447.724l-1.5 3A.5.5 0 0 1 12 14H4a.5.5 0 0 1-.447-.276l-1.5-3A.5.5 0 0 1 2.5 10H3V6.764l1.606-3.211A1 1 0 0 1 5.5 3h2V2a.5.5 0 0 1 .5-.5zM4 10h8V7H4v3zm1.5-6a.5.5 0 0 0-.447.276L4.191 6h7.618l-.862-1.724A.5.5 0 0 0 10.5 4h-5z'/%3E%3Cpath d='M2.5 11l1 2h9l1-2h-11z'/%3E%3C/svg%3E");
}

.pta-btn-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

    .pta-btn-link:hover {
        color: #247c83;
        text-decoration: none;
    }

/* =========================================================
   PLAN AVANZA - MOVIMIENTO / INTERACCIONES SUAVES
   ========================================================= */

/* Movimiento base para botones */
.pta-btn,
.pta-btn-link {
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}

    /* Efecto al pasar el mouse sobre botones activos */
    .pta-btn:not(.pta-btn-disabled):hover,
    .pta-btn-link:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 22px rgba(15, 35, 55, .16);
    }

    /* Efecto al hacer clic */
    .pta-btn:not(.pta-btn-disabled):active,
    .pta-btn-link:active {
        transform: translateY(-1px) scale(.98);
        box-shadow: 0 6px 14px rgba(15, 35, 55, .12);
    }

/* Cards resumen con movimiento elegante */
.pta-summary-card {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

    .pta-summary-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 38px rgba(15, 35, 55, .13);
        border-color: rgba(36, 124, 131, .25);
    }

    /* El card principal un poco más marcado */
    .pta-summary-card.pta-featured:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 42px rgba(9, 35, 63, .22);
    }

/* Secciones de tablas con movimiento suave */
.pta-section {
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

    .pta-section:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 40px rgba(15, 35, 55, .12);
        border-color: rgba(36, 124, 131, .22);
    }

        /* Encabezado de cada tabla más vivo al pasar mouse */
        .pta-section:hover .pta-section-header {
            background: linear-gradient(90deg, #f0fbfc, #ffffff);
        }

/* Badge de registros con movimiento sutil */
.pta-section-count {
    transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.pta-section:hover .pta-section-count {
    transform: scale(1.04);
    box-shadow: 0 8px 18px rgba(36, 124, 131, .14);
}

/* Filas de tabla más identificables */
.pta-table tbody tr {
    transition: background-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

    .pta-table tbody tr:hover {
        background: #f2fbfc;
    }

/* Número de buque con efecto */
.pta-number {
    transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.pta-table tbody tr:hover .pta-number {
    transform: scale(1.06);
    background: #dff4f6;
    box-shadow: 0 6px 14px rgba(36, 124, 131, .14);
}

/* Campo de búsqueda y fecha con enfoque más bonito */
.pta-field .form-control {
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

    .pta-field .form-control:focus {
        border-color: rgba(36, 124, 131, .55);
        box-shadow: 0 0 0 .22rem rgba(36, 124, 131, .13);
        transform: translateY(-1px);
    }

/* Header principal con entrada suave */
.pta-header {
    animation: ptaFadeUp .35s ease both;
}

/* Toolbar entra un poquito después */
.pta-toolbar {
    animation: ptaFadeUp .42s ease both;
}

/* Resumen entra suave */
.pta-summary-card {
    animation: ptaFadeUp .45s ease both;
}

/* Secciones entran suave */
.pta-section {
    animation: ptaFadeUp .48s ease both;
}

/* Pequeño delay progresivo para que se sienta moderno */
.pta-summary-card:nth-child(1) {
    animation-delay: .02s;
}

.pta-summary-card:nth-child(2) {
    animation-delay: .05s;
}

.pta-summary-card:nth-child(3) {
    animation-delay: .08s;
}

.pta-summary-card:nth-child(4) {
    animation-delay: .11s;
}

.pta-summary-card:nth-child(5) {
    animation-delay: .14s;
}

.pta-summary-card:nth-child(6) {
    animation-delay: .17s;
}

.pta-section:nth-child(1) {
    animation-delay: .05s;
}

.pta-section:nth-child(2) {
    animation-delay: .08s;
}

.pta-section:nth-child(3) {
    animation-delay: .11s;
}

.pta-section:nth-child(4) {
    animation-delay: .14s;
}

.pta-section:nth-child(5) {
    animation-delay: .17s;
}

.pta-section:nth-child(6) {
    animation-delay: .20s;
}

@keyframes ptaFadeUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Respeta usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
    .pta-btn,
    .pta-btn-link,
    .pta-summary-card,
    .pta-section,
    .pta-section-count,
    .pta-table tbody tr,
    .pta-number,
    .pta-field .form-control,
    .pta-header,
    .pta-toolbar {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/* =========================================================
   PLAN AVANZA - TOPBAR USUARIO
   ========================================================= */

.avz-user-topbar {
    justify-content: flex-end !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e5edf5;
}

.avz-user-box {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.avz-user-greeting {
    color: #102033;
    font-weight: 900;
    font-size: 1.05rem;
}

.avz-logout-btn {
    min-height: 42px;
    padding: 0 1.1rem;
    border: 0;
    border-radius: 12px;
    color: #ffffff;
    background: linear-gradient(135deg, #0d3b66, #247c83);
    font-weight: 850;
    transition: transform .18s ease, box-shadow .18s ease;
}

    .avz-logout-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(36, 124, 131, .22);
    }

    .avz-logout-btn:active {
        transform: translateY(0) scale(.98);
    }

.avz-logout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

    .avz-logout-btn:hover {
        color: #ffffff;
        text-decoration: none;
    }

.redirecting-page {
    min-height: 60vh;
    display: grid;
    place-items: center;
    text-align: center;
    color: #64748b;
}

    .redirecting-page .spinner-border {
        margin-bottom: 1rem;
    }

/* =========================================================
   PLAN AVANZA - AZURE PORTAL LOOK OVERRIDE
   ========================================================= */

html,
body {
    font-family: "Segoe UI", SegoeUI, Arial, sans-serif;
    background: #f3f2f1;
    color: #323130;
}

.content {
    padding-top: 0 !important;
}

.pta-page {
    --pta-azure: #0078d4;
    --pta-azure-dark: #004578;
    --pta-bg: #f3f2f1;
    --pta-card: #ffffff;
    --pta-text: #323130;
    --pta-muted: #605e5c;
    --pta-border: #edebe9;
    --pta-border-strong: #d2d0ce;
    --pta-soft: #f8f8f8;
    --pta-shadow: none;
    max-width: none !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--pta-text);
}

.pta-header {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 18px 20px;
    margin: 0 0 12px;
    border-radius: 2px;
    color: #323130;
    background: #ffffff;
    border: 1px solid var(--pta-border);
    border-left: 4px solid var(--pta-azure);
    box-shadow: none;
}

.pta-header::before {
    content: "Inicio  >  Plan AVANZA  >  Plan de Atraque";
    position: absolute;
    top: -1.35rem;
    left: 0;
    color: #605e5c;
    font-size: 12px;
    font-weight: 500;
}

.pta-kicker {
    display: block;
    margin-bottom: 4px;
    color: #605e5c;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    opacity: 1;
}

.pta-header h1 {
    margin: 0;
    color: #323130;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: normal;
}

.pta-header p {
    margin: 5px 0 0;
    color: #605e5c;
    font-size: 13px;
    opacity: 1;
}

.pta-date-box {
    min-width: 300px;
    padding: 12px 14px;
    border-radius: 2px;
    background: #f8f8f8;
    border: 1px solid var(--pta-border);
}

.pta-date-box span {
    color: #605e5c;
    font-size: 12px;
    opacity: 1;
}

.pta-date-box strong {
    margin-top: 4px;
    color: #323130;
    font-size: 14px;
    font-weight: 600;
    text-transform: capitalize;
}

.pta-date-box small {
    margin-top: 6px;
    color: #605e5c;
    font-size: 12px;
    opacity: 1;
}

.pta-toolbar {
    display: grid;
    grid-template-columns: auto 190px minmax(280px, 1fr) auto;
    gap: 10px;
    align-items: end;
    padding: 12px;
    margin-bottom: 12px;
    border-radius: 2px;
    background: #ffffff;
    border: 1px solid var(--pta-border);
    box-shadow: none;
}

.pta-date-buttons,
.pta-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.pta-field label {
    display: block;
    margin-bottom: 4px;
    color: #605e5c;
    font-size: 12px;
    font-weight: 600;
}

.pta-field .form-control {
    min-height: 34px;
    height: 34px;
    border-radius: 2px;
    border: 1px solid #8a8886;
    color: #323130;
    font-size: 13px;
    box-shadow: none;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.pta-field .form-control:focus {
    border-color: #0078d4;
    box-shadow: inset 0 0 0 1px #0078d4;
    transform: none;
}

.pta-btn,
.pta-btn-link {
    min-height: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-radius: 2px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.pta-btn-main {
    color: #ffffff;
    background: #0078d4;
    border-color: #0078d4;
}

.pta-btn-main:hover,
.pta-btn-link.pta-btn-main:hover {
    color: #ffffff;
    background: #106ebe;
    border-color: #106ebe;
    transform: none;
    box-shadow: none;
}

.pta-btn-light {
    color: #323130;
    background: #ffffff;
    border-color: #8a8886;
}

.pta-btn-light:hover {
    color: #201f1e;
    background: #f3f2f1;
    transform: none;
    box-shadow: none;
}

.pta-btn-soft {
    color: #0078d4;
    background: #ffffff;
    border-color: #8a8886;
}

.pta-btn-soft:hover,
.pta-btn-link:hover {
    color: #005a9e;
    background: #f3f2f1;
    border-color: #605e5c;
    text-decoration: none;
    transform: none;
    box-shadow: none;
}

.pta-btn-disabled {
    color: #a19f9d;
    background: #f3f2f1;
    border-color: #e1dfdd;
    cursor: not-allowed;
}

.pta-summary {
    display: grid;
    grid-template-columns: 1.15fr repeat(5, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.pta-summary-card {
    min-height: 78px;
    padding: 12px 14px;
    border: 1px solid var(--pta-border);
    border-radius: 2px;
    background: #ffffff;
    box-shadow: none;
    transition: none;
}

.pta-summary-card:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--pta-border-strong);
}

.pta-summary-card span {
    display: block;
    color: #605e5c;
    font-size: 12px;
    font-weight: 600;
}

.pta-summary-card strong {
    display: block;
    margin-top: 6px;
    color: #323130;
    font-size: 26px;
    font-weight: 600;
    line-height: 1;
}

.pta-summary-card.pta-featured {
    color: #ffffff;
    border-color: #0078d4;
    background: #0078d4;
}

.pta-summary-card.pta-featured:hover {
    transform: none;
    box-shadow: none;
}

.pta-summary-card.pta-featured span,
.pta-summary-card.pta-featured strong {
    color: #ffffff;
}

.pta-sections {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pta-section {
    overflow: hidden;
    border: 1px solid var(--pta-border);
    border-radius: 2px;
    background: #ffffff;
    box-shadow: none;
    transition: none;
    animation: none !important;
}

.pta-section:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--pta-border-strong);
}

.pta-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #ffffff;
    border-bottom: 1px solid var(--pta-border);
}

.pta-section:hover .pta-section-header {
    background: #ffffff;
}

.pta-section-header > div:first-child {
    display: grid;
    grid-template-columns: 16px 1fr;
    column-gap: 8px;
    align-items: center;
}

.pta-section-header h2 {
    grid-column: 2;
    margin: 0;
    color: #323130;
    font-size: 17px;
    font-weight: 600;
}

.pta-section-header p {
    grid-column: 2;
    margin: 2px 0 0;
    color: #605e5c;
    font-size: 12px;
}

.pta-status-dot {
    grid-row: span 2;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #0078d4;
    box-shadow: none;
}

.pta-status-dot.berthed { background: #107c10; }
.pta-status-dot.anchored { background: #ffb900; }
.pta-status-dot.programmed { background: #0078d4; }
.pta-status-dot.undocked { background: #605e5c; }
.pta-status-dot.redocked { background: #c239b3; }
.pta-status-dot.arrival { background: #5c2d91; }

.pta-section-count {
    min-width: 74px;
    padding: 6px 10px;
    border-radius: 2px;
    text-align: center;
    color: #0078d4;
    background: #f3f9fd;
    border: 1px solid #c7e0f4;
    font-size: 18px;
    font-weight: 600;
    transition: none;
}

.pta-section:hover .pta-section-count {
    transform: none;
    box-shadow: none;
}

.pta-section-count span {
    display: block;
    margin-top: 0;
    font-size: 11px;
    font-weight: 600;
}

.pta-table-wrap {
    overflow-x: auto;
}

.pta-table {
    margin: 0;
    min-width: 1180px;
    vertical-align: middle;
    border-collapse: collapse;
}

.pta-table thead th {
    padding: 9px 10px;
    border-bottom: 1px solid #d2d0ce;
    color: #323130;
    background: #f3f2f1;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: uppercase;
    white-space: nowrap;
}

.pta-table tbody td {
    padding: 11px 10px;
    border-bottom: 1px solid #edebe9;
    color: #323130;
    font-size: 13px;
}

.pta-table tbody tr {
    transition: none;
}

.pta-table tbody tr:hover {
    background: #f8f8f8;
}

.pta-number {
    display: inline-grid;
    place-items: center;
    min-width: 28px;
    height: 26px;
    border-radius: 2px;
    color: #0078d4;
    background: #eff6fc;
    border: 1px solid #c7e0f4;
    font-weight: 600;
    transition: none;
}

.pta-table tbody tr:hover .pta-number {
    transform: none;
    background: #eff6fc;
    box-shadow: none;
}

.pta-vessel strong,
.pta-cargo strong,
.pta-muelle strong {
    color: #323130;
    font-weight: 600;
    white-space: nowrap;
}

.pta-vessel small,
.pta-muelle small {
    display: block;
    margin-top: 2px;
    color: #605e5c;
    font-size: 12px;
    white-space: nowrap;
}

.pta-date-cell,
.pta-ton {
    white-space: nowrap;
    font-weight: 600;
}

.pta-no-data {
    padding: 18px !important;
    color: #605e5c !important;
    font-weight: 600;
    text-align: center;
    background: #ffffff;
}

.pta-loading,
.pta-empty,
.pta-alert {
    border-radius: 2px;
    box-shadow: none;
}

.pta-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #ffffff;
    border: 1px solid var(--pta-border);
}

.pta-loading span {
    color: #605e5c;
    font-size: 13px;
}

.pta-empty {
    padding: 44px 16px;
    text-align: center;
    border: 1px dashed #c8c6c4;
    background: #ffffff;
}

.pta-empty h3 {
    color: #323130;
    font-size: 22px;
    font-weight: 600;
}

.pta-empty p {
    color: #605e5c;
    margin: 0;
}

@media (max-width: 1180px) {
    .pta-toolbar {
        grid-template-columns: 1fr;
    }

    .pta-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .pta-header::before {
        display: none;
    }
}

@media (max-width: 760px) {
    .pta-page {
        padding: 0 !important;
    }

    .pta-header {
        flex-direction: column;
        align-items: stretch;
    }

    .pta-date-box {
        min-width: 0;
    }

    .pta-summary {
        grid-template-columns: 1fr;
    }

    .pta-date-buttons,
    .pta-actions {
        width: 100%;
    }

    .pta-date-buttons .pta-btn,
    .pta-actions .pta-btn {
        flex: 1;
    }
}

/* =========================================================
   PLAN AVANZA - VISTA CLIENTE PROFESIONAL SIN MENÚ LATERAL
   Última capa visual: limpia, sobria, similar a App Conciliaciones
   ========================================================= */

html,
body {
    font-family: "Segoe UI", Arial, sans-serif !important;
    background: #f4f8fa !important;
    color: #1f3446 !important;
    font-size: 14px;
}

.content {
    padding: 0 !important;
}

.pta-page {
    --pta-navy: #073f43;
    --pta-blue: #0b5560;
    --pta-teal: #0f7f7b;
    --pta-teal-2: #168f8a;
    --pta-bg: #f4f8fa;
    --pta-card: #ffffff;
    --pta-text: #1f3446;
    --pta-muted: #65798b;
    --pta-border: #d8e5ea;
    --pta-border-soft: #e8f0f3;
    --pta-soft: #eef8f8;
    --pta-shadow: 0 1px 2px rgba(15, 35, 55, .04), 0 10px 24px rgba(15, 35, 55, .045);
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--pta-text) !important;
}

.pta-header,
.pta-toolbar,
.pta-summary-card,
.pta-section,
.pta-loading,
.pta-empty {
    animation: none !important;
}

.pta-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 18px 20px !important;
    margin: 0 0 14px !important;
    border-radius: 10px !important;
    color: var(--pta-text) !important;
    background: #ffffff !important;
    border: 1px solid var(--pta-border) !important;
    border-left: 5px solid var(--pta-teal) !important;
    box-shadow: var(--pta-shadow) !important;
}

.pta-header::before {
    display: none !important;
}

.pta-kicker {
    display: block !important;
    margin-bottom: 5px !important;
    color: var(--pta-teal) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    opacity: 1 !important;
}

.pta-header h1 {
    margin: 0 !important;
    color: #172b3a !important;
    font-size: 28px !important;
    font-weight: 650 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.08 !important;
}

.pta-header p {
    margin: 6px 0 0 !important;
    color: var(--pta-muted) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

.pta-date-box {
    min-width: 290px !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    background: #f7fbfc !important;
    border: 1px solid var(--pta-border) !important;
}

.pta-date-box span {
    display: block !important;
    color: var(--pta-muted) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    opacity: 1 !important;
}

.pta-date-box strong {
    display: block !important;
    margin-top: 4px !important;
    color: var(--pta-text) !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    text-transform: capitalize !important;
}

.pta-date-box small {
    display: block !important;
    margin-top: 7px !important;
    color: var(--pta-muted) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

.pta-toolbar {
    display: grid !important;
    grid-template-columns: auto 190px minmax(280px, 1fr) auto !important;
    gap: 10px !important;
    align-items: end !important;
    padding: 12px !important;
    margin: 0 0 14px !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    border: 1px solid var(--pta-border) !important;
    box-shadow: var(--pta-shadow) !important;
}

.pta-date-buttons,
.pta-actions {
    display: flex !important;
    gap: 7px !important;
    flex-wrap: wrap !important;
}

.pta-field label {
    display: block !important;
    margin-bottom: 5px !important;
    color: #526a7c !important;
    font-size: 12px !important;
    font-weight: 650 !important;
}

.pta-field .form-control {
    min-height: 38px !important;
    height: 38px !important;
    border-radius: 8px !important;
    border: 1px solid #cbd9df !important;
    color: var(--pta-text) !important;
    background: #ffffff !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    box-shadow: none !important;
    transition: border-color .16s ease, box-shadow .16s ease !important;
}

.pta-field .form-control:focus {
    border-color: rgba(15,127,123,.7) !important;
    box-shadow: 0 0 0 .18rem rgba(15,127,123,.10) !important;
    transform: none !important;
}

.pta-btn,
.pta-btn-link {
    min-height: 38px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 13px !important;
    border-radius: 8px !important;
    border: 1px solid transparent !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease !important;
}

.pta-btn:not(.pta-btn-disabled):hover,
.pta-btn-link:hover,
.pta-btn:not(.pta-btn-disabled):active,
.pta-btn-link:active {
    transform: none !important;
}

.pta-btn-main {
    color: #ffffff !important;
    background: #0f7f7b !important;
    border-color: #0f7f7b !important;
    box-shadow: 0 5px 12px rgba(15,127,123,.14) !important;
}

.pta-btn-main:hover {
    color: #ffffff !important;
    background: #0b6f6b !important;
    border-color: #0b6f6b !important;
    box-shadow: 0 7px 16px rgba(15,127,123,.18) !important;
}

.pta-btn-light {
    color: #0b5560 !important;
    background: #ffffff !important;
    border-color: #d8e5ea !important;
}

.pta-btn-light:hover {
    background: #f6fbfb !important;
    border-color: #b8d2d6 !important;
}

.pta-btn-soft {
    color: #0f7f7b !important;
    background: #eaf8f7 !important;
    border-color: #d3eeec !important;
}

.pta-btn-soft:hover,
.pta-btn-link:hover {
    color: #0a6f6b !important;
    background: #dff5f4 !important;
    border-color: #bfe3e0 !important;
    text-decoration: none !important;
}

.pta-btn-disabled {
    color: #9aa9b5 !important;
    background: #f1f5f7 !important;
    border-color: #e3ebef !important;
    cursor: not-allowed !important;
}

.pta-summary {
    display: grid !important;
    grid-template-columns: 1.15fr repeat(5, minmax(130px, 1fr)) !important;
    gap: 10px !important;
    margin: 0 0 14px !important;
}

.pta-summary-card {
    min-height: 76px !important;
    padding: 12px 14px !important;
    border: 1px solid var(--pta-border) !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: var(--pta-shadow) !important;
    transition: border-color .16s ease, box-shadow .16s ease !important;
}

.pta-summary-card:hover {
    transform: none !important;
    box-shadow: var(--pta-shadow) !important;
    border-color: #c2d7dd !important;
}

.pta-summary-card span {
    display: block !important;
    color: #526a7c !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.pta-summary-card strong {
    display: block !important;
    margin-top: 7px !important;
    color: #172b3a !important;
    font-size: 25px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
}

.pta-summary-card.pta-featured {
    color: #ffffff !important;
    border-color: #0b6f6b !important;
    background: linear-gradient(135deg, #07464a, #0f7f7b) !important;
}

.pta-summary-card.pta-featured:hover {
    transform: none !important;
    box-shadow: var(--pta-shadow) !important;
}

.pta-summary-card.pta-featured span,
.pta-summary-card.pta-featured strong {
    color: #ffffff !important;
}

.pta-sections {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

.pta-section {
    overflow: hidden !important;
    border: 1px solid var(--pta-border) !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: var(--pta-shadow) !important;
    transition: border-color .16s ease !important;
}

.pta-section:hover {
    transform: none !important;
    box-shadow: var(--pta-shadow) !important;
    border-color: #c2d7dd !important;
}

.pta-section-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 13px 15px !important;
    background: #f9fcfd !important;
    border-bottom: 1px solid var(--pta-border) !important;
}

.pta-section:hover .pta-section-header {
    background: #f9fcfd !important;
}

.pta-section-header > div:first-child {
    display: grid !important;
    grid-template-columns: 14px 1fr !important;
    column-gap: 10px !important;
    align-items: center !important;
}

.pta-section-header h2 {
    grid-column: 2 !important;
    margin: 0 !important;
    color: #172b3a !important;
    font-size: 17px !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
}

.pta-section-header p {
    grid-column: 2 !important;
    margin: 2px 0 0 !important;
    color: var(--pta-muted) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}

.pta-status-dot {
    grid-row: span 2 !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 999px !important;
    background: var(--pta-teal) !important;
    box-shadow: 0 0 0 5px rgba(15,127,123,.10) !important;
}

.pta-status-dot.berthed { background: #0f7f7b !important; }
.pta-status-dot.anchored { background: #f3a014 !important; }
.pta-status-dot.programmed { background: #2b7de9 !important; }
.pta-status-dot.undocked { background: #8496a5 !important; }
.pta-status-dot.redocked { background: #d43a91 !important; }
.pta-status-dot.arrival { background: #7c55c7 !important; }

.pta-section-count {
    min-width: 70px !important;
    padding: 7px 9px !important;
    border-radius: 9px !important;
    text-align: center !important;
    color: #0f7f7b !important;
    background: #e9f8f7 !important;
    border: 1px solid #d3eeec !important;
    font-size: 18px !important;
    font-weight: 650 !important;
    transition: none !important;
}

.pta-section:hover .pta-section-count {
    transform: none !important;
    box-shadow: none !important;
}

.pta-section-count span {
    display: block !important;
    margin-top: 1px !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
}

.pta-table-wrap {
    overflow-x: auto !important;
}

.pta-table {
    width: 100% !important;
    margin: 0 !important;
    min-width: 1180px !important;
    vertical-align: middle !important;
    border-collapse: collapse !important;
}

.pta-table thead th {
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--pta-border) !important;
    color: #41586b !important;
    background: #f4f8fa !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    letter-spacing: .01em !important;
    text-transform: none !important;
    white-space: nowrap !important;
}

.pta-table tbody td {
    padding: 13px 12px !important;
    border-bottom: 1px solid var(--pta-border-soft) !important;
    color: #1f3446 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
}

.pta-table tbody tr {
    transition: background-color .14s ease !important;
}

.pta-table tbody tr:hover {
    background: #f7fbfc !important;
}

.pta-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

.pta-number {
    display: inline-grid !important;
    place-items: center !important;
    min-width: 30px !important;
    height: 28px !important;
    border-radius: 8px !important;
    color: #0f7f7b !important;
    background: #e9f8f7 !important;
    border: 1px solid #d3eeec !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    transition: none !important;
}

.pta-table tbody tr:hover .pta-number {
    transform: none !important;
    background: #e9f8f7 !important;
    box-shadow: none !important;
}

.pta-vessel strong,
.pta-cargo strong,
.pta-muelle strong,
.pta-table td strong {
    color: #1f3446 !important;
    font-weight: 650 !important;
    white-space: nowrap !important;
}

.pta-vessel small,
.pta-muelle small {
    display: block !important;
    margin-top: 2px !important;
    color: #66798a !important;
    font-size: 11.5px !important;
    font-weight: 400 !important;
    white-space: nowrap !important;
}

.pta-date-cell,
.pta-ton {
    white-space: nowrap !important;
    font-weight: 600 !important;
}

.pta-no-data {
    padding: 18px !important;
    color: #65798b !important;
    font-weight: 600 !important;
    text-align: center !important;
    background: #ffffff !important;
}

.pta-loading,
.pta-empty,
.pta-alert {
    border-radius: 10px !important;
    box-shadow: var(--pta-shadow) !important;
}

.pta-loading {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px !important;
    background: #ffffff !important;
    border: 1px solid var(--pta-border) !important;
}

.pta-loading strong {
    display: block !important;
    font-weight: 650 !important;
}

.pta-loading span {
    display: block !important;
    color: var(--pta-muted) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}

.pta-empty {
    padding: 44px 16px !important;
    text-align: center !important;
    border: 1px dashed #cbd9df !important;
    background: #ffffff !important;
}

.pta-empty h3 {
    color: #172b3a !important;
    font-size: 22px !important;
    font-weight: 650 !important;
}

.pta-empty p {
    color: var(--pta-muted) !important;
    margin: 0 !important;
    font-weight: 400 !important;
}

@media (max-width: 1180px) {
    .pta-toolbar {
        grid-template-columns: 1fr !important;
    }

    .pta-summary {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 760px) {
    .pta-header {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .pta-date-box {
        min-width: 0 !important;
    }

    .pta-summary {
        grid-template-columns: 1fr !important;
    }

    .pta-date-buttons,
    .pta-actions {
        width: 100% !important;
    }

    .pta-date-buttons .pta-btn,
    .pta-actions .pta-btn {
        flex: 1 !important;
    }
}

/* =========================================================
   PLAN AVANZA - TABLAS CLIENTE CLARAS
   ========================================================= */

.pta-table.pta-table-plan {
    min-width: 1620px !important;
}

.pta-table.pta-table-arrivals {
    min-width: 1120px !important;
}

.pta-table thead th {
    padding: 10px 11px !important;
    color: #3b5163 !important;
    background: #f5f8fa !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border-bottom: 1px solid #d8e3e8 !important;
}

.pta-table tbody td {
    padding: 12px 11px !important;
    color: #213547 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #e6eef2 !important;
}

.pta-ship-name,
.pta-cargo,
.pta-muelle-name {
    color: #172b3a !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

.pta-date-cell {
    color: #243b4d !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}

.pta-ton {
    color: #172b3a !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

.pta-table tbody tr:hover {
    background: #f8fbfc !important;
}

.pta-number {
    min-width: 28px !important;
    height: 26px !important;
    border-radius: 7px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.pta-no-data {
    padding: 20px !important;
    color: #647789 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    background: #ffffff !important;
}

/* =========================================================
   PLAN AVANZA - TAG NOMBRE DEL BUQUE
   ========================================================= */

.pta-ship-tag {
    display: inline-flex !important;
    align-items: center !important;
    max-width: 260px !important;
    padding: 5px 9px !important;
    border-radius: 8px !important;
    color: #0d3440 !important;
    background: linear-gradient(135deg, #eefbf9, #f8ffff) !important;
    border: 1px solid #cfecea !important;
    border-left: 4px solid #0f8f8a !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    box-shadow: 0 5px 12px rgba(15, 127, 123, .06) !important;
}

.pta-table tbody tr:hover .pta-ship-tag {
    border-color: #b6dfdc !important;
    border-left-color: #0b7672 !important;
    background: linear-gradient(135deg, #e7f8f6, #ffffff) !important;
}

.pta-table thead th:nth-child(3),
.pta-table tbody td:nth-child(3) {
    min-width: 190px !important;
}

/* =========================================================
   PLAN AVANZA - TOQUES MODERNOS CLIENTE
   ========================================================= */

/* Encabezado de tabla fijo al hacer scroll horizontal/vertical */
.pta-table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
}

/* Separación visual más limpia dentro de las tablas largas */
.pta-table-wrap {
    border-top: 1px solid #e4eef2 !important;
}

/* Hover profesional: marca suave a la izquierda sin cargar el diseño */
.pta-table tbody tr:hover td:first-child {
    box-shadow: inset 4px 0 0 #0f8f8a !important;
}

.pta-table tbody tr:hover td {
    background: #f7fcfc !important;
}

/* Tags modernos para datos clave */
.pta-cargo-tag,
.pta-muelle-tag,
.pta-side-tag,
.pta-operator-tag {
    display: inline-flex !important;
    align-items: center !important;
    max-width: 230px !important;
    min-height: 24px !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
}

.pta-cargo-tag {
    color: #17324d !important;
    background: #eef6ff !important;
    border: 1px solid #cfe4f8 !important;
}

.pta-muelle-tag {
    color: #0d5f5b !important;
    background: #e8f8f6 !important;
    border: 1px solid #cbe9e6 !important;
}

.pta-side-tag {
    color: #5d4a00 !important;
    background: #fff8dc !important;
    border: 1px solid #f2e4a7 !important;
}

.pta-operator-tag {
    color: #4b5563 !important;
    background: #f3f6f8 !important;
    border: 1px solid #dde6eb !important;
}

.pta-table tbody tr:hover .pta-cargo-tag {
    background: #e6f1fd !important;
    border-color: #bdd9f3 !important;
}

.pta-table tbody tr:hover .pta-muelle-tag {
    background: #def3f1 !important;
    border-color: #b8dfdc !important;
}

.pta-table tbody tr:hover .pta-side-tag {
    background: #fff3bd !important;
    border-color: #ead37c !important;
}

/* Encabezado de sección con línea superior moderna y sobria */
.pta-section {
    position: relative !important;
}

.pta-section::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, #0f8f8a, rgba(15,143,138,0.12)) !important;
    z-index: 2 !important;
}

.pta-section-header {
    padding-top: 15px !important;
}

/* Estado vacío un poco más cuidado */
.pta-no-data {
    position: relative !important;
    color: #647789 !important;
    font-weight: 500 !important;
}

.pta-no-data::before {
    content: "—" !important;
    display: inline-grid !important;
    place-items: center !important;
    width: 22px !important;
    height: 22px !important;
    margin-right: 8px !important;
    border-radius: 999px !important;
    color: #8aa0af !important;
    background: #f3f7f9 !important;
    border: 1px solid #dde8ee !important;
}

/* Tarjetas superiores con detalle más moderno pero discreto */
.pta-summary-card {
    position: relative !important;
    overflow: hidden !important;
}

.pta-summary-card::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 3px !important;
    background: rgba(15, 143, 138, .18) !important;
}

.pta-summary-card.pta-featured::after {
    background: rgba(255, 255, 255, .35) !important;
}

/* Ajustes de ancho para columnas con tags */
.pta-table thead th:nth-child(12),
.pta-table tbody td:nth-child(12) {
    min-width: 140px !important;
}

.pta-table thead th:nth-child(14),
.pta-table tbody td:nth-child(14) {
    min-width: 130px !important;
}

.pta-table thead th:nth-child(15),
.pta-table tbody td:nth-child(15) {
    min-width: 110px !important;
}

/* =========================================================
   PLAN AVANZA - NOMBRE BUQUE EN DOS LINEAS
   ========================================================= */

.pta-ship-tag {
    max-width: 180px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.18 !important;
    min-height: 28px !important;
    align-items: center !important;
}

.pta-table thead th:nth-child(3),
.pta-table tbody td:nth-child(3) {
    min-width: 190px !important;
    max-width: 210px !important;
}


/* =========================================================
   PLAN AVANZA - BANDERAS REALES FLAGCDN
   ========================================================= */

.pta-flag-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 4px 9px !important;
    border-radius: 999px !important;
    background: #f4f8fb !important;
    border: 1px solid #dbe7ee !important;
    color: #29465b !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.pta-flag-img {
    width: 24px !important;
    height: 18px !important;
    object-fit: cover !important;
    border-radius: 3px !important;
    box-shadow: 0 0 0 1px rgba(15, 35, 55, .12) !important;
    flex: 0 0 auto !important;
}

.pta-flag-text {
    color: #314b60 !important;
}

.pta-table thead th:nth-child(7),
.pta-table tbody td:nth-child(7) {
    min-width: 135px !important;
}