/* ── School Bus Manager – Frontend CSS (Fase 3) ── */
/* Autor: Gerard Tolosa de sanscrit.net            */

:root {
    --sbm-primary:   #1a56db;
    --sbm-primary-l: #dbeafe;
    --sbm-success:   #057a55;
    --sbm-success-l: #d1fae5;
    --sbm-warning:   #92400e;
    --sbm-warning-l: #fef3c7;
    --sbm-danger:    #c81e1e;
    --sbm-danger-l:  #fee2e2;
    --sbm-neutral:   #6b7280;
    --sbm-border:    #e5e7eb;
    --sbm-bg:        #f9fafb;
    --sbm-radius:    10px;
    --sbm-font:      system-ui, -apple-system, sans-serif;
}

/* ── Wrapper ── */
.sbm-portal,
.sbm-driver-portal {
    max-width: 760px;
    margin: 0 auto;
    font-family: var(--sbm-font);
    color: #111827;
}

/* ── Header ── */
.sbm-portal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--sbm-border);
}
.sbm-portal-greeting { display: flex; align-items: center; gap: .8rem; }
.sbm-portal-icon { font-size: 2rem; line-height: 1; }
.sbm-portal-greeting h2 { margin: 0 0 .15rem; font-size: 1.3rem; }
.sbm-portal-greeting p  { margin: 0; font-size: .88rem; color: var(--sbm-neutral); }
.sbm-portal-logout {
    font-size: .8rem;
    color: var(--sbm-neutral);
    text-decoration: none;
    border: 1px solid var(--sbm-border);
    padding: .3rem .7rem;
    border-radius: 20px;
    transition: background .15s;
}
.sbm-portal-logout:hover { background: var(--sbm-bg); color: var(--sbm-danger); border-color: var(--sbm-danger); }

/* ── Alertas ── */
.sbm-alert {
    padding: .8rem 1rem;
    border-radius: 8px;
    font-size: .875rem;
    margin-bottom: 1rem;
    border-left: 4px solid transparent;
}
.sbm-alert-success { background: var(--sbm-success-l); border-color: var(--sbm-success); color: #065f46; }
.sbm-alert-warning { background: var(--sbm-warning-l); border-color: #d97706; color: var(--sbm-warning); }

/* ── Tarjeta de alumno ── */
.sbm-student-card {
    background: #fff;
    border: 1px solid var(--sbm-border);
    border-radius: var(--sbm-radius);
    padding: 1.4rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.sbm-student-card-header {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: 1rem;
    padding-bottom: .8rem;
    border-bottom: 1px solid var(--sbm-border);
}
.sbm-student-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--sbm-primary-l);
    color: var(--sbm-primary);
    font-weight: 700;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sbm-student-card-header h3 { margin: 0 0 .2rem; font-size: 1.05rem; }
.sbm-course-pill {
    display: inline-block;
    font-size: .72rem;
    background: var(--sbm-primary-l);
    color: var(--sbm-primary);
    border-radius: 20px;
    padding: .1rem .6rem;
    font-weight: 600;
}

/* ── Bloque inscripción ── */
.sbm-enrollment-block {
    padding: .9rem 0;
    border-bottom: 1px dashed var(--sbm-border);
}
.sbm-enrollment-block:last-child { border-bottom: none; }
.sbm-enrollment-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .6rem;
}
.sbm-enrollment-info { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.sbm-route-name { font-size: .95rem; }

.sbm-dir-badge {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    padding: .15rem .6rem;
    border-radius: 20px;
}
.sbm-dir-outbound { background: #dbeafe; color: #1e40af; }
.sbm-dir-inbound  { background: #ede9fe; color: #5b21b6; }

.sbm-enroll-status {
    font-size: .72rem;
    font-weight: 600;
    padding: .15rem .6rem;
    border-radius: 20px;
}
.sbm-enroll-status-active   { background: var(--sbm-success-l); color: var(--sbm-success); }
.sbm-enroll-status-inactive { background: var(--sbm-danger-l);  color: var(--sbm-danger); }
.sbm-enroll-status-pending  { background: var(--sbm-warning-l); color: var(--sbm-warning); }

/* ── Fila parada ── */
.sbm-stop-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .6rem;
    font-size: .88rem;
}
.sbm-stop-label { color: var(--sbm-neutral); font-size: .8rem; }
.sbm-stop-value { font-weight: 600; }
.sbm-pending-badge {
    font-size: .72rem;
    background: var(--sbm-warning-l);
    color: var(--sbm-warning);
    padding: .15rem .5rem;
    border-radius: 20px;
    font-weight: 600;
}
.sbm-link-btn {
    background: none;
    border: none;
    color: var(--sbm-primary);
    font-size: .8rem;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}
.sbm-link-btn:hover { color: #1648c0; }

/* ── Editor de días ── */
.sbm-days-editor {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    font-size: .85rem;
}
.sbm-days-label { color: var(--sbm-neutral); font-size: .8rem; }
.sbm-days-toggles { display: flex; gap: .3rem; }
/* Los estilos de sbm-day-toggle se aplican inline desde PHP+JS
   para máxima compatibilidad con temas WordPress.
   Solo definimos hover y focus aquí como mejora progresiva. */
.sbm-day-toggle {
    transition: background .15s, border-color .15s, color .15s;
    text-decoration: none !important;
    box-shadow: none !important;
}
.sbm-day-toggle:hover {
    background: #eff6ff !important;
    border-color: #93c5fd !important;
    color: #1e40af !important;
}
.sbm-day-toggle:focus,
.sbm-day-toggle:focus-visible {
    outline: 2px solid #1a56db !important;
    outline-offset: 2px !important;
}
.sbm-day-short { font-weight: 700; font-size: .75rem; }
.sbm-day-full  { font-size: .62rem; color: var(--sbm-neutral); }
.sbm-day-toggle.active .sbm-day-full { color: #3b82f6; }

.sbm-btn-portal {
    background: var(--sbm-primary);
    color: #fff;
    border: none;
    padding: .35rem .85rem;
    border-radius: 6px;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.sbm-btn-portal:hover { background: #1648c0; }
.sbm-days-feedback {
    font-size: .78rem;
    font-weight: 600;
}
.sbm-feedback-ok  { color: var(--sbm-success); }
.sbm-feedback-err { color: var(--sbm-danger); }

/* ── Formulario cambio de parada ── */
.sbm-stop-request-form {
    margin-top: .8rem;
    padding: 1rem;
    background: var(--sbm-bg);
    border-radius: 8px;
    border: 1px solid var(--sbm-border);
}
.sbm-stop-request-form h4 { margin: 0 0 .8rem; font-size: .9rem; }
.sbm-portal-field { margin-bottom: .7rem; }
.sbm-portal-field label { display: block; font-size: .78rem; font-weight: 600; color: #374151; margin-bottom: .25rem; }
.sbm-portal-field select,
.sbm-portal-field textarea {
    width: 100%;
    padding: .4rem .6rem;
    border: 1px solid var(--sbm-border);
    border-radius: 6px;
    font-size: .875rem;
    background: #fff;
    box-sizing: border-box;
}
.sbm-stop-request-actions { display: flex; gap: .5rem; align-items: center; }
.sbm-request-feedback { font-size: .8rem; font-weight: 600; margin-top: .5rem; }

/* ── Empty / error ── */
.sbm-portal-empty,
.sbm-driver-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--sbm-neutral);
}
.sbm-portal-empty span,
.sbm-driver-empty span { font-size: 2.5rem; display: block; margin-bottom: .6rem; }
.sbm-portal-error { color: var(--sbm-danger); font-size: .875rem; }
.sbm-no-enrollments { color: var(--sbm-neutral); font-style: italic; font-size: .875rem; }

/* ── Login ── */
.sbm-portal-login { text-align: center; padding: 2rem; }
.sbm-portal-btn {
    display: inline-block;
    background: var(--sbm-primary);
    color: #fff !important;
    padding: .6rem 1.4rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: background .15s;
}
.sbm-portal-btn:hover { background: #1648c0; }

/* ── Driver portal ── */
.sbm-driver-controls {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1.2rem;
}
.sbm-driver-route-tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.sbm-route-tab {
    background: #fff;
    border: 1.5px solid var(--sbm-border);
    border-radius: 8px;
    padding: .45rem .9rem;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .4rem;
    transition: border-color .12s, background .12s;
}
.sbm-route-tab.active { border-color: var(--sbm-primary); background: var(--sbm-primary-l); color: #1e40af; }
.sbm-dir-pill {
    font-size: .65rem;
    padding: .1rem .45rem;
    border-radius: 20px;
    font-weight: 700;
}
.sbm-dir-outbound { background: #dbeafe; color: #1e40af; }
.sbm-dir-inbound  { background: #ede9fe; color: #5b21b6; }

.sbm-driver-mode-switch { display: flex; gap: .4rem; }
.sbm-mode-btn {
    background: #fff;
    border: 1.5px solid var(--sbm-border);
    border-radius: 8px;
    padding: .4rem .9rem;
    font-size: .82rem;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.sbm-mode-btn.active { border-color: var(--sbm-primary); background: var(--sbm-primary-l); color: #1e40af; font-weight: 600; }

.sbm-driver-panel {
    background: #fff;
    border: 1px solid var(--sbm-border);
    border-radius: var(--sbm-radius);
    padding: 1.2rem;
    min-height: 120px;
}
.sbm-driver-loading { display: flex; align-items: center; gap: .5rem; color: var(--sbm-neutral); font-size: .88rem; }
.sbm-spinner {
    display: inline-block;
    width: 16px; height: 16px;
    border: 2px solid var(--sbm-border);
    border-top-color: var(--sbm-primary);
    border-radius: 50%;
    animation: sbm-spin .6s linear infinite;
}
@keyframes sbm-spin { to { transform: rotate(360deg); } }

.sbm-driver-count {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    margin-bottom: 1rem;
    padding-bottom: .7rem;
    border-bottom: 1px solid var(--sbm-border);
}
.sbm-driver-count-num   { font-size: 2rem; font-weight: 700; color: var(--sbm-primary); line-height: 1; }
.sbm-driver-count-label { font-size: .85rem; color: var(--sbm-neutral); }

.sbm-driver-stop-group { margin-bottom: 1rem; }
.sbm-driver-stop-name {
    font-weight: 700;
    font-size: .9rem;
    margin-bottom: .4rem;
    color: #374151;
}
.sbm-driver-stop-count { font-weight: 400; color: var(--sbm-neutral); font-size: .8rem; }
.sbm-driver-pax-list { list-style: none; margin: 0; padding: 0; }
.sbm-driver-pax-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .5rem;
    border-radius: 6px;
    font-size: .875rem;
    border-bottom: 1px solid var(--sbm-bg);
}
.sbm-driver-pax-item:nth-child(odd) { background: var(--sbm-bg); }
.sbm-driver-pax-name { font-weight: 600; flex: 1; }
.sbm-driver-pax-course {
    font-size: .72rem;
    background: var(--sbm-primary-l);
    color: #1e40af;
    padding: .1rem .5rem;
    border-radius: 20px;
}

/* ── Driver portal: controles nuevos ── */

.sbm-driver-route-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .75rem;
}

.sbm-driver-controls {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1.2rem;
}

.sbm-driver-datepicker {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    background: #fff;
    border: 1px solid var(--sbm-border);
    border-radius: var(--sbm-radius);
    padding: .75rem 1rem;
}
.sbm-driver-datepicker label {
    font-weight: 600;
    font-size: .88rem;
    color: #374151;
    white-space: nowrap;
}
.sbm-driver-datepicker input[type="date"] {
    padding: .35rem .6rem;
    border: 1.5px solid var(--sbm-border);
    border-radius: 6px;
    font-size: .9rem;
    font-family: inherit;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s;
}
.sbm-driver-datepicker input[type="date"]:focus {
    border-color: var(--sbm-primary);
    outline: none;
}
.sbm-date-label {
    font-size: .85rem;
    font-weight: 600;
}

.sbm-driver-mode-tabs {
    display: flex;
    gap: .4rem;
}
.sbm-mode-tab {
    background: #fff;
    border: 1.5px solid var(--sbm-border);
    border-radius: 8px;
    padding: .45rem 1rem;
    font-size: .875rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color .12s, background .12s, color .12s;
    font-weight: 500;
}
.sbm-mode-tab.active {
    border-color: var(--sbm-primary);
    background: var(--sbm-primary-l);
    color: #1e40af;
    font-weight: 700;
}

.sbm-driver-day-title {
    font-size: 1rem;
    font-weight: 700;
    color: #374151;
    margin-bottom: .8rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--sbm-primary-l);
}

.sbm-driver-weekend {
    text-align: center;
    padding: 2rem 1rem;
    color: #92400e;
    background: #fef3c7;
    border-radius: var(--sbm-radius);
}
.sbm-driver-weekend span { font-size: 2rem; display: block; margin-bottom: .5rem; }

/* ── Vista semanal ── */
.sbm-week-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .75rem;
}
@media (max-width: 700px) {
    .sbm-week-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
    .sbm-week-grid { grid-template-columns: 1fr; }
}

.sbm-week-day-col {
    background: #fff;
    border: 1px solid var(--sbm-border);
    border-radius: 8px;
    overflow: hidden;
}
.sbm-week-day-header {
    background: var(--sbm-primary);
    color: #fff;
    padding: .4rem .65rem;
    font-weight: 700;
    font-size: .85rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sbm-week-day-count {
    background: rgba(255,255,255,.25);
    border-radius: 20px;
    padding: .05rem .45rem;
    font-size: .75rem;
    font-weight: 600;
}
.sbm-week-stop {
    padding: .4rem .6rem;
    border-bottom: 1px solid var(--sbm-bg);
}
.sbm-week-stop:last-child { border-bottom: none; }
.sbm-week-stop-name {
    font-size: .75rem;
    font-weight: 700;
    color: #374151;
    margin-bottom: .2rem;
}
.sbm-week-pax-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sbm-week-pax-list li {
    font-size: .78rem;
    color: #374151;
    padding: .15rem 0;
    border-bottom: 1px dashed #f3f4f6;
}
.sbm-week-pax-list li:last-child { border-bottom: none; }
.sbm-week-pax-list em { color: var(--sbm-neutral); font-size: .72rem; }
.sbm-week-empty { color: var(--sbm-neutral); font-size: .8rem; padding: .5rem .6rem; margin: 0; }

#sbm-driver-panel {
    background: #fff;
    border: 1px solid var(--sbm-border);
    border-radius: var(--sbm-radius);
    padding: 1.2rem;
    min-height: 100px;
}

/* ── Secciones del portal ── */
.sbm-portal-section { margin-bottom: 2rem; }

.sbm-section-heading {
    font-size: .95rem;
    font-weight: 700;
    color: #374151;
    margin: 0 0 .9rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--sbm-border);
    display: flex;
    align-items: center;
    gap: .5rem;
}
.sbm-section-count {
    background: #e5e7eb;
    color: #374151;
    border-radius: 20px;
    padding: .05rem .55rem;
    font-size: .75rem;
    font-weight: 700;
}

/* ── Tarjetas de solicitud ── */
.sbm-req-card {
    background: #fff;
    border: 1px solid var(--sbm-border);
    border-left: 4px solid var(--sbm-border);
    border-radius: var(--sbm-radius);
    padding: .9rem 1.1rem;
    margin-bottom: .75rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.sbm-req-pending  { border-left-color: #d97706; }
.sbm-req-approved { border-left-color: var(--sbm-success); }
.sbm-req-rejected { border-left-color: var(--sbm-danger); }

.sbm-req-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .6rem;
}
.sbm-req-card-title {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
    font-size: .9rem;
}
.sbm-req-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
.sbm-dot-pending  { background: #d97706; }
.sbm-dot-approved { background: var(--sbm-success); }
.sbm-dot-rejected { background: var(--sbm-danger); }

.sbm-req-route {
    font-size: .78rem;
    color: var(--sbm-neutral);
    background: #f3f4f6;
    padding: .1rem .5rem;
    border-radius: 20px;
}
.sbm-req-badge {
    font-size: .72rem;
    font-weight: 700;
    padding: .2rem .65rem;
    border-radius: 20px;
}
.sbm-req-badge-pending  { background: #fef3c7; color: #92400e; }
.sbm-req-badge-approved { background: var(--sbm-success-l); color: var(--sbm-success); }
.sbm-req-badge-rejected { background: var(--sbm-danger-l); color: var(--sbm-danger); }

/* Cambio de parada: vieja → nueva */
.sbm-req-change {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    background: var(--sbm-bg);
    border-radius: 6px;
    padding: .5rem .8rem;
    margin-bottom: .6rem;
    font-size: .88rem;
}
.sbm-req-stop-from { color: #374151; font-weight: 500; }
.sbm-req-arrow-icon { color: var(--sbm-neutral); font-size: 1rem; }
.sbm-req-stop-to   { font-weight: 700; }
.sbm-stop-crossed  { text-decoration: line-through; color: var(--sbm-neutral); }
.sbm-stop-new      { color: var(--sbm-success); }
.sbm-stop-denied   { color: var(--sbm-danger); }

/* Fechas */
.sbm-req-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .8rem;
    font-size: .78rem;
    color: #6b7280;
    margin-bottom: .3rem;
}
.sbm-req-meta strong { color: #374151; }
.sbm-req-meta-sep { color: #d1d5db; }

.sbm-req-message {
    font-size: .82rem;
    color: #374151;
    font-style: italic;
    margin: .3rem 0 0;
}
.sbm-req-admin-note {
    font-size: .8rem;
    color: #6b7280;
    margin: .35rem 0 0;
    padding-top: .35rem;
    border-top: 1px dashed var(--sbm-border);
}