:root {
    --pt-ink: #0f2a22;
    --pt-soft: #5b6b64;
    --pt-green: #2f5d45;
    --pt-green-deep: #183a2b;
    --pt-line: #e3e6e1;
    --pt-bg: #f3f4f1;
    --pt-ok: #2fa45a;
    --pt-low: #e0a100;
    --pt-out: #c23d3d;
}

* {
    box-sizing: border-box;
}

.pt-body {
    margin: 0;
    background: var(--pt-bg);
    color: var(--pt-ink);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- pantallas de login / contraseña ---------- */
.pt-auth {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px 16px;
}

.pt-auth__card {
    width: 100%;
    max-width: 400px;
    background: #fff;
    border: 1px solid var(--pt-line);
    border-radius: 16px;
    box-shadow: 0 10px 30px -18px rgba(0,0,0,.35);
    padding: 28px 24px;
    text-align: center;
}

.pt-auth__logo {
    max-width: 200px;
    margin-bottom: 14px;
}

.pt-auth__title {
    margin: 0;
    font-size: 22px;
}

.pt-auth__sub {
    margin: 6px 0 18px;
    color: var(--pt-soft);
    font-size: 14px;
}

.pt-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}

.pt-label {
    font-size: 13px;
    font-weight: 600;
    margin-top: 8px;
}

.pt-hint {
    font-size: 12px;
    color: var(--pt-soft);
}

.pt-input {
    width: 100%;
    border: 1px solid #cfd5cf;
    border-radius: 8px;
    padding: 11px 12px;
    font-size: 15px;
    background: #fff;
    color: var(--pt-ink);
}

    .pt-input:focus {
        outline: 2px solid rgba(47,93,69,.25);
        border-color: var(--pt-green);
    }

.pt-code {
    letter-spacing: .3em;
    font-weight: 700;
    text-align: center;
}

.pt-pass {
    position: relative;
}

    .pt-pass .pt-input {
        padding-right: 44px;
    }

.pt-pass__ver {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    font-size: 18px;
    color: var(--pt-soft);
    cursor: pointer;
}

.pt-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    margin: 10px 0 4px;
}

.pt-err {
    color: var(--pt-out);
    font-size: 12.5px;
    min-height: 16px;
}

.pt-alert {
    background: #fdecec;
    color: var(--pt-out);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13.5px;
}

    .pt-alert ul {
        margin: 0;
        padding-left: 18px;
    }

.validation-summary-valid {
    display: none;
}

.pt-ok {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    text-align: left;
    background: #ecf7ef;
    border-radius: 10px;
    padding: 12px 14px;
    margin: 0 0 16px;
}

    .pt-ok i {
        font-size: 22px;
        color: var(--pt-ok);
    }

    .pt-ok p {
        margin: 0;
        font-size: 14px;
    }

/* ---------- botones ---------- */
.pt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--pt-green);
    border-radius: 8px;
    background: var(--pt-green);
    color: #fff;
    padding: 12px 16px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
    margin-top: 10px;
}

    .pt-btn:hover {
        background: var(--pt-green-deep);
        color: #fff;
    }

.pt-btn--ghost {
    background: #fff;
    color: var(--pt-green);
}

    .pt-btn--ghost:hover {
        background: #eef4ef;
        color: var(--pt-green);
    }

.pt-btn--sm {
    padding: 8px 12px;
    font-size: 13.5px;
    margin-top: 0;
}

.pt-link {
    display: block;
    text-align: center;
    margin-top: 12px;
    font-size: 13.5px;
    color: var(--pt-green);
}

/* ---------- barra superior ---------- */
.pt-top {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #fff;
    border-bottom: 1px solid var(--pt-line);
    padding: 10px 16px;
}

.pt-top__logo {
    height: 44px;
    display: block;
}

.pt-top__user {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

    .pt-top__user form {
        margin: 0;
    }

/* ---------- contenido ---------- */
.pt-main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 16px 40px;
}

.pt-h1 {
    margin: 0;
    font-size: 24px;
}

.pt-sub {
    margin: 4px 0 18px;
    color: var(--pt-soft);
    font-size: 14px;
}

.pt-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13.5px;
    color: var(--pt-green);
    text-decoration: none;
    margin-bottom: 8px;
}

/* elegir empresa */
.pt-empresas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.pt-empresa {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--pt-line);
    border-radius: 16px;
    padding: 28px 20px;
    text-decoration: none;
    color: var(--pt-ink);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

    .pt-empresa:hover {
        border-color: var(--pt-green);
        box-shadow: 0 10px 24px -16px rgba(0,0,0,.4);
        transform: translateY(-2px);
    }

    .pt-empresa img {
        height: 70px;
        max-width: 220px;
        object-fit: contain;
        margin-bottom: 8px;
    }

    .pt-empresa b {
        font-size: 17px;
    }

    .pt-empresa span {
        font-size: 13px;
        color: var(--pt-soft);
    }

.pt-empresa__go {
    position: absolute;
    right: 16px;
    top: 16px;
    color: var(--pt-green);
    font-size: 20px;
}

/* barra de filtros */
.pt-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.pt-select {
    width: auto;
    min-width: 220px;
    padding: 9px 10px;
}

.pt-week {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pt-week__label {
    min-width: 170px;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
}

.pt-icon-btn {
    width: 38px;
    height: 38px;
    border: 1px solid #cfd5cf;
    border-radius: 8px;
    background: #fff;
    font-size: 18px;
    cursor: pointer;
    color: var(--pt-ink);
}

    .pt-icon-btn:disabled {
        opacity: .4;
        cursor: default;
    }

.pt-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    font-size: 12.5px;
    color: var(--pt-soft);
    margin-bottom: 12px;
}

.pt-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    vertical-align: -1px;
}

.pt-dot--ok {
    background: var(--pt-ok);
}

.pt-dot--low {
    background: var(--pt-low);
}

.pt-dot--out {
    background: var(--pt-out);
}

.pt-updated {
    margin-left: auto;
}

/* tabla */
.pt-card {
    background: #fff;
    border: 1px solid var(--pt-line);
    border-radius: 14px;
    overflow: hidden;
}

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

.pt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .pt-table th, .pt-table td {
        padding: 9px 12px;
        text-align: center;
        border-bottom: 1px solid #f0f1ee;
        white-space: nowrap;
    }

    .pt-table thead th {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--pt-soft);
        background: #fafbf9;
    }

    .pt-table th:first-child, .pt-table td:first-child {
        text-align: left;
        position: sticky;
        left: 0;
        background: inherit;
    }

    .pt-table tbody td:first-child {
        background: #fff;
        font-weight: 600;
    }

.pt-dia td {
    background: #f1f5f2 !important;
    font-weight: 800;

    color: var(--pt-green-deep);
}

.pt-dia.is-hoy td {
    background: #e3efe7 !important;
}

.pt-dia small {
    font-weight: 600;
    color: var(--pt-soft);
    margin-left: 6px;
    text-transform: none;
}

.pt-cell {
    display: inline-block;
    min-width: 44px;
    border-radius: 6px;
    padding: 4px 8px;
    font-weight: 700;
}

.pt-cell--ok {
    background: #e6f5ea;
    color: #1e7a41;
}

.pt-cell--low {
    background: #fff4d6;
    color: #8a6200;
}

.pt-cell--out {
    background: #fdecec;
    color: var(--pt-out);
}

.pt-cell--na {
    color: #b7bdb8;
    font-weight: 400;
}

.pt-empty, .pt-loading {
    text-align: center;
    color: var(--pt-soft);
    padding: 30px 10px;
    margin: 0;
}

@media (max-width: 600px) {
    .pt-top__logo {
        height: 34px;
    }

    .pt-top__user > span, .pt-hide-sm {
        display: none;
    }

    .pt-select {
        width: 100%;
    }

    .pt-week {
        width: 100%;
        justify-content: space-between;
    }

    .pt-updated {
        width: 100%;
        margin-left: 0;
    }
}
.pt-logo-negro {
    filter: brightness(0);
}

/* ---------- selector de idioma ---------- */
.pt-lang {
    display: inline-flex;
    border: 1px solid var(--pt-line);
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
    font-size: 12.5px;
    font-weight: 600;
}

    .pt-lang a {
        padding: 5px 10px;
        color: var(--pt-soft);
        text-decoration: none;
        line-height: 1;
    }

        .pt-lang a:hover {
            color: var(--pt-green);
        }

        .pt-lang a.is-on {
            background: var(--pt-green);
            color: #fff;
        }

.pt-lang-corner {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 5;
}

/* ---------- elegir tipo de acceso (vendedor / admin) ---------- */
.pt-roles {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 6px;
    text-align: left;
}

.pt-role {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--pt-line);
    border-radius: 12px;
    background: #fff;
    color: var(--pt-ink);
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

    .pt-role:hover, .pt-role:focus-visible {
        border-color: var(--pt-green);
        box-shadow: 0 8px 20px -14px rgba(0,0,0,.4);
        transform: translateY(-1px);
    }

.pt-role__icon {
    font-size: 26px;
    color: var(--pt-green);
    flex-shrink: 0;
}

.pt-role__txt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

    .pt-role__txt b {
        font-size: 16px;
    }

    .pt-role__txt small {
        font-size: 13px;
        color: var(--pt-soft);
    }

.pt-role__go {
    color: var(--pt-soft);
    font-size: 18px;
}

/* link "Cambiar tipo de acceso" arriba de la tarjeta de login */
.pt-auth__back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 10px;
    font-size: 13.5px;
    align-self: flex-start;
}

.pt-auth__card .pt-auth__back {
    float: left;
}

.pt-auth__card .pt-auth__logo {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- admin: solicitudes ---------- */
.pt-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

    .pt-tabs a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 14px;
        border: 1px solid var(--pt-line);
        border-radius: 999px;
        background: #fff;
        color: var(--pt-soft);
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
    }

        .pt-tabs a span {
            min-width: 20px;
            padding: 1px 7px;
            border-radius: 999px;
            background: var(--pt-bg);
            font-size: 12px;
            text-align: center;
        }

        .pt-tabs a.is-on {
            background: var(--pt-green);
            border-color: var(--pt-green);
            color: #fff;
        }

            .pt-tabs a.is-on span {
                background: rgba(255,255,255,.2);
            }

.pt-reqs {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pt-req {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--pt-line);
    border-radius: 12px;
    padding: 14px 16px;
}

.pt-req__info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

    .pt-req__info b {
        font-size: 16px;
    }

    .pt-req__info span {
        font-size: 13.5px;
        color: var(--pt-soft);
        overflow-wrap: anywhere;
    }

.pt-req__acciones {
    display: flex;
    gap: 8px;
}

    .pt-req__acciones form {
        margin: 0;
    }

.pt-btn--danger {
    color: var(--pt-out);
    border-color: var(--pt-out);
}

    .pt-btn--danger:hover {
        background: #fdecec;
        color: var(--pt-out);
    }

@media (max-width: 600px) {
    .pt-req__acciones {
        width: 100%;
    }

        .pt-req__acciones form, .pt-req__acciones .pt-btn {
            flex: 1;
            width: 100%;
        }
}

/* ---------- modal de confirmación ---------- */
.pt-modal {
    width: min(420px, calc(100vw - 32px));
    border: 0;
    border-radius: 16px;
    padding: 26px 22px 20px;
    text-align: center;
    color: var(--pt-ink);
    box-shadow: 0 24px 60px -20px rgba(0,0,0,.45);
}

    .pt-modal::backdrop {
        background: rgba(15, 42, 34, .45);
        backdrop-filter: blur(2px);
    }

    .pt-modal[open] {
        animation: pt-modal-in .18s ease-out;
    }

@keyframes pt-modal-in {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to { opacity: 1; transform: none; }
}

.pt-modal__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #ecf7ef;
    color: var(--pt-ok);
    font-size: 28px;
}

    .pt-modal__icon.is-deny {
        background: #fdecec;
        color: var(--pt-out);
    }

.pt-modal__title {
    margin: 0 0 6px;
    font-size: 19px;
}

.pt-modal__text {
    margin: 0 0 20px;
    color: var(--pt-soft);
    font-size: 14.5px;
}

.pt-modal__acciones {
    display: flex;
    gap: 10px;
}

    .pt-modal__acciones .pt-btn {
        flex: 1;
    }

.pt-btn--danger-solid {
    background: var(--pt-out);
    border-color: var(--pt-out);
}

    .pt-btn--danger-solid:hover {
        background: #a83232;
        border-color: #a83232;
    }

/* ---------- admin: vendedores ---------- */
.pt-table--left th, .pt-table--left td {
    text-align: left;
}

.pt-chip {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    background: #eef4ef;
    color: var(--pt-green);
}

.pt-chip--nayari {
    background: #eef1f6;
    color: #34506e;
}

.pt-pwd {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

    .pt-pwd code {
        min-width: 70px;
        font-size: 13.5px;
        color: var(--pt-ink);
    }

.pt-muted {
    color: var(--pt-soft);
    font-size: 13.5px;
}

.pt-chip--off {
    margin-left: 6px;
    background: #fdecec;
    color: var(--pt-out);
}

/* Botón "Salir" (volver al sitio) en la pantalla de elegir acceso: esquina superior izquierda */
.pt-salir-sitio {
    position: absolute;
    top: 14px;
    left: 16px;
    z-index: 5;
}

/* Columna "Horario" fija al deslizar en celular: el encabezado necesita fondo
   propio (antes heredaba transparente y los nombres de vehículos pasaban por debajo) */
.pt-table thead th:first-child {
    background: #fafbf9;
    z-index: 2;
}

.pt-table tbody td:first-child {
    z-index: 1;
    box-shadow: 1px 0 0 var(--pt-line);
}

.pt-table thead th:first-child {
    box-shadow: 1px 0 0 var(--pt-line);
}

/* Filas que ocupan todo el ancho (fecha del día y "Sin salidas"): la celda es
   tan ancha como la tabla y no puede quedarse fija, así que lo que se fija es
   el texto de adentro. */
.pt-table td[colspan] {
    position: static;
    box-shadow: none;
}

.pt-fijo {
    position: sticky;
    left: 12px;
    display: inline-block;
}

/* Sin "rebote" al deslizar de lado en celular: al rebotar, la columna fija
   se movía y quedaba cortada ("ORARIO", "nes, 26…") */
.pt-table-wrap {
    overscroll-behavior-x: none;
    -webkit-overflow-scrolling: auto;
}

/* ---------- modal Aceptar: elegir vendedor ---------- */
.pt-modal:has(.pt-vendpick:not([hidden])) {
    width: min(520px, calc(100vw - 32px));
}

.pt-vendpick {
    text-align: left;
    margin: -6px 0 18px;
}

    .pt-vendpick .pt-input {
        width: 100%;
    }

.pt-vendpick__lista {
    margin-top: 8px;
    padding: 4px;
    height: auto;
    font-size: 14px;
}

    .pt-vendpick__lista option {
        padding: 7px 8px;
        border-radius: 6px;
    }

        .pt-vendpick__lista option:checked {
            background: #e3efe7;
            color: var(--pt-green-deep);
            font-weight: 600;
        }

.pt-vendpick__vacio {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--pt-soft);
}

.pt-vendpick__nota {
    display: flex;
    gap: 6px;
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: #8a5a00;
    background: #fff6e0;
    border-radius: 8px;
    padding: 8px 10px;
}

    .pt-vendpick__nota i {
        font-size: 16px;
        flex-shrink: 0;
    }