/* ── Sticky footer para páginas de cita pública ────────────────────────── */

body:has(.pc-tipo-grid),
body:has(.pc-grid) {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body:has(.pc-tipo-grid) > .container,
body:has(.pc-grid) > .container {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

body:has(.pc-tipo-grid) > .container > .content,
body:has(.pc-grid) > .container > .content {
    flex: 1 0 auto;
    min-height: 600px;
}

/* ── Centrado vertical del selector ─────────────────────────────────────── */

.solicitar-cita {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 500px;
}

/* ── Selector de tipo ───────────────────────────────────────────────────── */

.pc-tipo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    max-width: 700px;
    margin: 0 auto;
}

.pc-tipo-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.75rem;
    border: 2px solid var(--tipo-color, #3498db);
    border-radius: 12px;
    background: #fff;
    text-decoration: none;
    color: #212529;
    font-weight: 600;
    font-size: 1rem;
    min-width: 220px;
    transition: background 0.15s, color 0.15s, transform 0.1s;
}

.pc-tipo-card:hover {
    background: var(--tipo-color, #3498db);
    color: #fff;
    transform: translateY(-2px);
}

.pc-tipo-card:hover .pc-tipo-dot {
    background: #fff !important;
}

.pc-tipo-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background 0.15s;
}

.pc-tipo-label {
    flex: 1;
}

.pc-tipo-arrow {
    opacity: 0.4;
    font-size: 0.85rem;
    transition: opacity 0.15s;
}

.pc-tipo-card:hover .pc-tipo-arrow {
    opacity: 1;
}

/* ── Cabecera del calendario ────────────────────────────────────────────── */

.pc-tipo-badge {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Mini-calendario ────────────────────────────────────────────────────── */

.pc-day-headers,
.pc-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.pc-day-headers > div {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6c757d;
    padding: 4px 0 6px;
}

.pc-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    border-radius: 50%;
    border: 2px solid transparent;
    line-height: 1;
    transition: background 0.1s, color 0.1s;
}

.pc-cell--empty {
    pointer-events: none;
}

.pc-cell--past,
.pc-cell--unavail {
    color: #ced4da;
    cursor: not-allowed;
}

.pc-cell--loading {
    color: #dee2e6;
    animation: pc-pulse 1.4s ease-in-out infinite;
}

.pc-cell--free {
    cursor: pointer;
    font-weight: 600;
    position: relative;
}

.pc-cell--free:not(.pc-cell--selected)::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
}

.pc-cell--free:not(.pc-cell--selected):hover {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
}

.pc-cell--selected {
    font-weight: 700;
}

@keyframes pc-pulse {
    0%, 100% { opacity: 0.4; }
    50%       { opacity: 1; }
}

/* ── Leyenda ────────────────────────────────────────────────────────────── */

.pc-legend {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #ced4da;
    vertical-align: middle;
    margin-right: 3px;
}

.pc-legend--free {
    border-width: 2px;
}

.pc-legend--unavail {
    background: #f0f0f0;
    border-color: #e0e0e0;
}

/* ── Panel de chips ─────────────────────────────────────────────────────── */

.pc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pc-chip {
    padding: 6px 18px;
    border-radius: 20px;
    border: 2px solid;
    background: transparent;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.pc-chip:hover {
    color: #fff !important;
    background: currentColor;
}

.pc-slots-loading {
    display: flex;
    align-items: center;
    color: #6c757d;
    font-size: 0.9rem;
    padding: 0.5rem 0;
}