/* ============================================================================
 * PARCHE v2 — Videollamada: modal de inicio y ficha de la reserva
 * ----------------------------------------------------------------------------
 * Se anade al FINAL de app.css a proposito.
 *
 * app.css tiene comentarios sin cerrar de una truncacion antigua, asi que la
 * seccion de llamadas no se puede localizar de forma fiable para parchearla en
 * su sitio. Al anadir al final, la ultima regla de igual especificidad gana, y
 * como aqui solo hay reglas nuevas o propiedades que la seccion original no
 * declara, no puede pisar nada de la pagina.
 * ========================================================================== */

/* ---------- Modal "¿Cómo quieres empezar?" ---------- */

/* Titulo y sub centrados.
 *
 * El boton de cerrar va en posicion absoluta arriba a la derecha (38px + 14px
 * de margen). Sin este padding, el titulo, al ir centrado, pasa por debajo y
 * acaba con el "? " medio tapado. El padding es simetrico, de modo que el
 * texto sigue saliendo centrado y lo que se evita es el solape. */
.start-modal__title {
    text-align: center;
    padding-inline: 46px;
}
.start-modal__sub {
    text-align: center;
    padding-inline: 46px;
}

@media (max-width: 640px) {
    /* Las dos opciones del modal se apilan y se centran. Sin esto, en movil el
       icono queda a la izquierda y el texto centrado al lado, que se lee como
       dos bloques descolocados. */
    .start-modal__opt {
        flex-direction: column;
        gap: 12px;
        padding: 18px;
        text-align: center;
    }
    /* El icono se centra con margin, no con align-items: asi el override deja
       de imponer el valor y el bloque conserva su own. */
    .start-modal__optIcon { margin-inline: auto; }
    .start-modal__optArrow { display: none; }
}

/* ===================================================================
   Ficha de una reserva: /schedule?t=TOKEN
   Lo que ve el cliente al confirmar y lo que hay tras el enlace del email.
   Columna estrecha y centrada, porque es una pantalla de una sola cosa y no
   tiene que competir con el resto de la pagina.
   =================================================================== */

.manage { max-width: 620px; margin-inline: auto; }

.manage__head { text-align: center; margin-bottom: 28px; }
.manage__icon {
    display: grid; place-items: center;
    width: 64px; height: 64px; margin: 0 auto 18px;
    border-radius: 50%; font-size: 26px;
    background: rgba(18, 185, 129, .12); color: #0d9f6e;
}
.manage__icon--ko { background: rgba(239, 68, 68, .12); color: #dc2626; }
.manage__title { margin: 0 0 8px; font-size: clamp(1.5rem, 3.4vw, 2rem); font-weight: 700; letter-spacing: -.01em; }
.manage__lead { margin: 0 0 24px; color: var(--c-text-muted); font-size: 1rem; line-height: 1.6; }

.manage__card {
    background: var(--c-bg-elev, #ffffff);
    border: 1px solid var(--c-border, #e2e8f0);
    border-radius: 16px;
    padding: clamp(22px, 4vw, 30px);
    margin-bottom: 20px;
    box-shadow: var(--c-shadow-md);
    color: var(--c-text);
}
.manage__card--peligro {
    box-shadow: none;
    background: var(--c-bg-muted, #f8fafc);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.manage__card--peligro .manage__sub,
.manage__card--peligro .manage__lead,
.manage__card--peligro form {
    text-align: center;
}

@media (max-width: 768px) {
    .manage {
        margin-top: -50px;
    }
}
.manage__sub { margin: 0 0 8px; font-size: 1.1rem; font-weight: 700; color: var(--c-text); }

.manage__datos { margin: 0; display: grid; gap: 0; }
.manage__dato {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding: 12px 0; border-bottom: 1px solid var(--c-border, #e2e8f0);
}
.manage__dato:last-child { border-bottom: 0; }
.manage__dato dt { margin: 0; color: var(--c-text-muted); font-size: .92rem; }
.manage__dato dd { margin: 0; text-align: right; font-weight: 600; word-break: break-word; }

/* El mensaje del cliente es largo y no cabe en una columna a la derecha. */
.manage__dato--ancho { display: block; }
.manage__dato--ancho dd { margin-top: 6px; text-align: left; font-weight: 400; line-height: 1.6; color: var(--c-text); }

@media (max-width: 560px) {
    .manage__dato { display: block; }
    .manage__dato dd { margin-top: 4px; text-align: left; }
    .manage__dato--ancho dd { margin-top: 6px; }
}