/* Agenda de diagnóstico / cotización (oct 2026). La usan index.html y migracion.html dentro de una sección .cta-final.
   La lógica está en assets/agenda.js y el servidor en agenda.php. */
.diag-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 420px; gap: 56px; align-items: center; text-align: left; }
.diag-grid > * { min-width: 0; }
.diag-grid h2 { text-align: left; }
.diag-list { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 12px; }
.diag-list li { display: flex; gap: 10px; font-size: 17px; color: rgba(255,255,255,.95); }
.diag-list li::before { content: '✓'; color: var(--color-accent); font-weight: 800; }
.diag-alt { font-size: 15px; color: rgba(255,255,255,.85); }
.diag-alt a { color: white; font-weight: 700; text-decoration: underline; }
.diag-card { background: white; color: var(--color-text); border-radius: var(--radius-lg); padding: 24px; box-shadow: 0 20px 50px rgba(0,0,0,.18); display: flex; flex-direction: column; gap: 14px; }
.diag-card[hidden], .diag-card [hidden] { display: none !important; }
.diag-card h3 { margin: 0; font-size: 1.15rem; }
.cta-final .diag-card p { margin: 0; color: var(--color-text-soft); font-size: 14px; }
.diag-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.diag-mes { grid-column: 1 / -1; font-size: 15px; font-weight: 800; color: var(--color-text); text-align: center; margin-bottom: 2px; }
.diag-dow { font-size: 11.5px; font-weight: 700; color: var(--color-text-soft); text-align: center; text-transform: uppercase; }
.diag-day { padding: 7px 0; border: 1.5px solid var(--color-border); border-radius: 10px; background: white; cursor: pointer; font: inherit; color: var(--color-text); line-height: 1.1; }
.diag-day b { display: block; font-size: 16px; }
.diag-day small { font-size: 11px; color: var(--color-text-soft); }
.diag-day.vacio { visibility: hidden; }
.diag-day:disabled:not(.vacio), .diag-hour:disabled { background: var(--color-bg-soft); border-color: transparent; color: #b4b0bd; cursor: not-allowed; }
.diag-hour:disabled { text-decoration: line-through; }
.diag-day:disabled small { color: #c4c0cc; }
.diag-hours { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.diag-hour { padding: 8px 0; border: 1.5px solid var(--color-border); border-radius: 999px; background: white; cursor: pointer; font: inherit; font-weight: 700; font-size: 14px; color: var(--color-text); }
.diag-day:not(:disabled):hover, .diag-hour:not(:disabled):hover { border-color: var(--color-primary); }
.diag-day.on, .diag-hour.on { border-color: var(--color-primary); background: var(--color-primary); color: white; }
.diag-day.on small { color: rgba(255,255,255,.85); }
.diag-sub { font-size: 13px; font-weight: 800; color: var(--color-primary); }
.diag-sub small { font-weight: 500; color: var(--color-text-soft); }
.diag-slot { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 10px; background: var(--color-bg-soft); font-weight: 700; }
.diag-slot button { border: 0; background: none; color: var(--color-primary); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; padding: 0; }
.diag-card label { font-size: 12.5px; font-weight: 700; color: var(--color-text-soft); display: flex; flex-direction: column; gap: 4px; }
.diag-card input, .diag-card select { font: inherit; font-size: 15px; padding: 10px 12px; border: 1.5px solid var(--color-border); border-radius: 10px; background: white; color: var(--color-text); width: 100%; box-sizing: border-box; }
.diag-card input:focus, .diag-card select:focus { outline: none; border-color: var(--color-primary); }
.diag-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.diag-phone { display: grid; grid-template-columns: 68px 1fr; gap: 6px; }
.diag-phone select { padding-left: 8px; padding-right: 4px; }
.diag-btn { padding: 13px 20px; border: 0; border-radius: 999px; background: var(--color-accent); color: var(--color-text); font: inherit; font-weight: 800; font-size: 16px; cursor: pointer; }
.diag-btn:hover { background: #d49d00; }
.diag-btn:disabled { opacity: .6; cursor: default; }
.cta-final .diag-card .diag-error { padding: 9px 12px; border-radius: 10px; background: #fdecec; color: #b42318; font-weight: 600; }
.cta-final .diag-card .diag-note { font-size: 12.5px; text-align: center; }
.cta-final .diag-ok p { color: var(--color-text); font-size: 15.5px; line-height: 1.6; }
.diag-ok a { color: var(--color-primary); font-weight: 700; }
.diag-ok-btn { align-self: flex-start; padding: 11px 22px; border-radius: 999px; background: var(--color-primary); color: white !important; text-decoration: none; }
.diag-hp { position: absolute; left: -9999px; }
@media (max-width: 960px) { .diag-grid { grid-template-columns: 1fr; gap: 32px; } .diag-card { max-width: 480px; } }
@media (max-width: 420px) { .diag-card { padding: 20px 16px; } .diag-row { grid-template-columns: 1fr; } }