:root {
    --bg: #0b1320;
    --card: rgba(255, 255, 255, .06);
    --stroke: rgba(255, 255, 255, .12);
    --text: rgba(255, 255, 255, .92);
    --muted: rgba(255, 255, 255, .72);
    --shadow: 0 18px 60px rgba(0, 0, 0, .45);

    /* Colores “tipo CW verde” (los afinamos en el Paso 3 con tu logo) */
    --accent: #22c55e;
    --accent2: #16a34a;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    background:
        radial-gradient(1200px 600px at 20% 10%, rgba(34, 197, 94, .18), transparent 55%),
        radial-gradient(900px 500px at 85% 30%, rgba(34, 197, 94, .10), transparent 60%),
        var(--bg);
    color: var(--text);
}

.wrap {
    max-width: 980px;
    margin: 0 auto;
    padding: 28px 16px 60px;
}

.top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-dot {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    box-shadow: 0 12px 30px rgba(34, 197, 94, .25);
    border: 1px solid rgba(255, 255, 255, .18);
}

.title {
    font-weight: 800;
    letter-spacing: .2px;
}

.subtitle {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}

.pill {
    font-size: 12px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--stroke);
}

.card {
    width: min(520px, 100%);
    margin: 18px auto 0;
    padding: 22px;
    border-radius: 18px;
    background: var(--card);
    border: 1px solid var(--stroke);
    box-shadow: var(--shadow);
}

h1 {
    margin: 0 0 6px;
    font-size: 22px;
}

.muted {
    color: var(--muted);
    margin: 0 0 16px;
    line-height: 1.4;
}

label {
    display: block;
    font-size: 13px;
    color: var(--muted);
    margin: 12px 0 8px;
}

input {
    width: 100%;
    padding: 12px 12px;
    border-radius: 12px;
    border: 1px solid var(--stroke);
    background: rgba(0, 0, 0, .18);
    color: var(--text);
    outline: none;
}

input:focus {
    border-color: rgba(34, 197, 94, .55);
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .12);
}

button {
    width: 100%;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(34, 197, 94, .45);
    background: linear-gradient(135deg, rgba(34, 197, 94, .95), rgba(22, 163, 74, .95));
    color: #04110a;
    font-weight: 800;
    cursor: pointer;
}

button:hover {
    filter: brightness(1.02);
}

.msg {
    margin-top: 12px;
    font-size: 13px;
    color: var(--muted);
    min-height: 18px;
}

.foot {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed rgba(255, 255, 255, .14);
    font-size: 12px;
}

.actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.link {
    text-decoration: none;
    color: var(--text);
}

.result {
    margin-top: 16px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--stroke);
    background: rgba(0, 0, 0, .14);
}

.result-title {
    font-weight: 800;
    margin-bottom: 10px;
}

.result-body {
    display: grid;
    gap: 10px;
}

.kv {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .10);
}

.kv span {
    color: var(--muted);
}

.kv b {
    font-weight: 800;
}

.kv {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08)
}

.sep {
    height: 12px
}

.rep {
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 14px;
    margin-top: 10px;
    background: rgba(255, 255, 255, .04)
}

.repTitle {
    font-weight: 700;
    margin-bottom: 6px
}

.repLine {
    line-height: 1.25
}

.muted {
    opacity: .8
}

/* ===== Overlay ===== */
.ov[hidden] {
    display: none !important;
}

.ov {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 18px;
}

.ovBack {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(6px);
}

.ovCard {
    position: relative;
    width: min(620px, 96vw);
    max-height: 86vh;
    overflow: auto;
    border-radius: 18px;
    background: rgba(11, 19, 32, .92);
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 20px 70px rgba(0, 0, 0, .55);
    padding: 16px;
}

.ovHead {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.ovTitle {
    font-weight: 900;
    font-size: 18px;
}

.ovSub {
    font-size: 12px;
    margin-top: 2px;
}

.ovX {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
    color: var(--text);
    cursor: pointer;
}

.ovBody {
    padding: 12px 4px 6px;
}

.ovActions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.btnSend {
    flex: 1;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(34, 197, 94, .45);
    background: linear-gradient(135deg, rgba(34, 197, 94, .95), rgba(22, 163, 74, .95));
    color: #04110a;
    font-weight: 900;
    cursor: pointer;
}

.btnCancel {
    width: 160px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .06);
    color: var(--text);
    font-weight: 800;
    cursor: pointer;
}

@media (max-width: 520px) {
    .ovActions {
        flex-direction: column;
    }

    .btnCancel {
        width: 100%;
    }
}

/* =========================
   LOGO ESQUINA (LOGIN + CONSULTA)
   ========================= */
.card {
    position: relative;
    /* necesario para ubicar logo absoluto */
}

/* Badge blanco */
.cwLogoWrap {
    position: absolute;
    top: 14px;
    right: 14px;
    background: #fff;
    padding: 10px 12px;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .25);
    border: 1px solid rgba(0, 0, 0, .08);
    z-index: 5;
}

/* Imagen dentro del badge */
.cwLogo {
    display: block;
    height: 44px;
    width: auto;
    object-fit: contain;
}

@media (max-width: 520px) {
    .cwLogoWrap {
        top: 12px;
        right: 12px;
        padding: 8px 10px;
        border-radius: 12px;
    }

    .cwLogo {
        height: 36px;
    }
}

/* =========================
   BOTÓN SALIR (CONSULTA)
   ========================= */
.btnOut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
    color: var(--text);
    text-decoration: none;
    font-weight: 800;
    line-height: 1;
}

.btnOut:hover {
    filter: brightness(1.05);
}

/* Badge blanco para el logo (arriba derecha) */
.cwLogoWrap {
    position: absolute;
    top: 14px;
    right: 14px;
    background: #fff;
    padding: 10px 12px;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .25);
    border: 1px solid rgba(255, 255, 255, .35);
}

.cwLogo {
    display: block;
    height: 44px;
    /* ajusta si quieres */
    width: auto;
}

/* Salir fuera del card (barra superior) */
.pageTop {
    width: min(520px, 100%);
    margin: 0 auto 10px;
    display: flex;
    justify-content: flex-start;
    /* o flex-end si lo quieres a la derecha */
}

/* =========================
   TOPBAR (CONSULTA)
   ========================= */
.topbar {
    width: min(520px, 100%);
    margin: 0 auto 10px;
    padding: 6px 0;
}

.topbarRow {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    /* izq - centro - der */
    align-items: center;
    /* ✅ misma línea vertical */
    gap: 12px;
}

.topbarLeft {
    justify-self: start;
}

.topbarCenter {
    justify-self: center;
}

.topbarRight {
    justify-self: end;
}

.topBtn {
    height: 56px;
    padding: 0 22px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
    color: var(--text);
    text-decoration: none;
    font-weight: 800;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    white-space: nowrap;
    cursor: pointer;
}

.topBtn:hover {
    filter: brightness(1.05);
}

.topBtn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* ✅ Fecha: solo texto, sin marco */
.topbarDate {
    margin-top: 10px;
    text-align: center;
    font-weight: 900;
    letter-spacing: .2px;
    font-size: 22px;
    opacity: .95;
}

/* =========================
   CALENDAR POPUP
   ========================= */
.calNav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 6px 0 12px;
}

.topBtnSm {
    height: 40px;
    padding: 0 14px;
    border-radius: 14px;
}

.calTitle {
    font-weight: 900;
}

.calGrid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

/* Botones de día */
.calDay,
.calDow {
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.calDow {
    opacity: .85;
    border: none;
    background: transparent;
}

.calDay:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.calDayEnabled {
    background: rgba(34, 197, 94, .20);
}

.calDaySelected {
    outline: 2px solid rgba(34, 197, 94, .9);
}

select.inp {
    width: 100%;
    padding: 12px 12px;
    border-radius: 12px;
    border: 1px solid var(--stroke);
    background: rgba(0, 0, 0, .18);
    color: var(--text);
    outline: none;
}

select.inp:focus {
    border-color: rgba(34, 197, 94, .55);
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .12);
}

/* =========================
   TAB BAR: Padres / Transporte
   ========================= */
.tabBar {
    display: flex;
    gap: 10px;
    width: min(520px, 100%);
    margin: 14px auto 0;
}

.tabBtn {
    flex: 1;
    height: 52px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .70);
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
    margin-top: 0;
}

.tabBtn:hover {
    background: rgba(255, 255, 255, .10);
    color: var(--text);
    filter: none;
}

.tabBtn.tabActive {
    background: linear-gradient(135deg, rgba(34, 197, 94, .95), rgba(22, 163, 74, .95));
    border-color: transparent;
    color: #04110a;
    box-shadow: 0 4px 20px rgba(34, 197, 94, .30);
}

.tabIcon {
    font-size: 18px;
}

/* =========================
   PANEL TRANSITION
   ========================= */
.panelCard {
    margin-top: 14px;
    animation: fadeSlideIn .25s ease both;
}

@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =========================
   TRANSPORTE: Tipo de atraso toggle
   ========================= */
.typeToggle {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

.typeBtn {
    width: 100%;
    margin-top: 0;
    padding: 14px 18px;
    border-radius: 14px;
    border: 1.5px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .05);
    color: rgba(255, 255, 255, .75);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    text-align: left;
    transition: all .18s;
    line-height: 1.3;
}

.typeBtn:hover {
    background: rgba(255, 255, 255, .10);
    color: var(--text);
    filter: none;
}

.typeBtn.typeActive {
    background: rgba(34, 197, 94, .15);
    border-color: rgba(34, 197, 94, .55);
    color: var(--text);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .12);
}

/* =========================
   TRANSPORTE: Bus info card
   ========================= */
.busInfoCard {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(34, 197, 94, .30);
    background: rgba(34, 197, 94, .07);
    animation: fadeSlideIn .2s ease both;
}

.busInfoRow {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.busInfoRow:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.busInfoLabel {
    font-size: 12px;
    color: var(--muted);
    min-width: 88px;
    margin-top: 1px;
}

.busInfoVal {
    font-weight: 700;
    font-size: 14px;
    flex: 1;
    line-height: 1.4;
}

/* =========================
   TRANSPORTE: Lista de destinatarios en overlay
   ========================= */
.recipientList {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.recipientRow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .04);
}

.recipientIcon {
    font-size: 22px;
    flex-shrink: 0;
}

.recipientInfo {
    flex: 1;
}

.recipientName {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
}

.recipientTel {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}

.recipientRol {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(34, 197, 94, .18);
    color: rgba(34, 197, 94, .95);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    flex-shrink: 0;
}

.recipientRol.rolDueno {
    background: rgba(99, 179, 237, .18);
    color: rgba(99, 179, 237, .95);
}

/* Dot accent azul para Transporte */
.logoDotAlt {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    box-shadow: 0 12px 30px rgba(59, 130, 246, .25);
}

/* Banner de buseta seleccionada en overlay */
.ovBusBanner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
    border-radius: 12px;
    background: rgba(59, 130, 246, .10);
    border: 1px solid rgba(59, 130, 246, .25);
}

.ovBusBannerNum {
    font-size: 28px;
    font-weight: 900;
    color: rgba(99, 179, 237, .95);
    line-height: 1;
}

.ovBusBannerInfo {
    flex: 1;
}

.ovBusBannerName {
    font-weight: 800;
    font-size: 15px;
}

.ovBusBannerCoop {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}

.ovBusBannerTipo {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(34, 197, 94, .16);
    color: rgba(34, 197, 94, .95);
    font-weight: 700;
    flex-shrink: 0;
}