/* Cannis Asesores (cara pública) — tarjeta.css
   La tarjeta de un profesional en la vidriera. DERIVADO de public/css/repronline/v3/embudo.css (§6, `rp-medico`) con el prefijo rp- → as-.
   Se parte de Repronline a propósito: Asesores NO depende del bundle de Repronline (lo arma `php artisan repronline:css` y no está en git).

   Cuatro bloques, en el orden en que se lee una tarjeta: quién es, qué lo respalda, cuándo puede atender y cuánto cuesta, con el botón al
   lado del precio. Lo de Repronline que Asesores no tiene (express, matrícula, «Ver agenda» que abre un modal) se sacó; «Ver perfil» ocupa el
   lugar de «Ver agenda» y es un enlace. */

.as-medico {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: var(--w-s4);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radio);
    background: var(--w-surface);
    transition: border-color var(--w-transicion), background var(--w-transicion), transform var(--w-transicion);
}

.as-medico:hover {
    border-color: var(--w-border-fuerte);
    background: var(--w-surface-2);
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .as-medico:hover { transform: none; }
}

/* 1. Identidad */

.as-medico__persona {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: var(--w-s3);
}

.as-medico__retrato {
    position: relative;
    width: 64px;
    height: 64px;
}

.as-medico__retrato img,
.as-medico__iniciales {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.as-medico__iniciales {
    display: grid;
    place-items: center;
    border: 1px solid var(--w-border-fuerte);
    background: var(--w-menta-suave);
    color: var(--w-menta);
    font-family: var(--w-font-titulos);
    font-size: 1.15rem;
    font-weight: 700;
}

.as-medico__sello {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 2px solid var(--w-navy);
    background: var(--w-menta);
    color: var(--w-ink);
}

.as-medico__sello .w-ico { width: 0.72em; height: 0.72em; }

.as-medico__quien { min-width: 0; }

.as-medico__nombre {
    font-family: var(--w-font-titulos);
    font-size: 1.1rem;
    line-height: 1.2;
    color: var(--w-text);
    overflow-wrap: anywhere;
    /* El título traía el margen de fábrica y separaba la organización del nombre
       como si fueran dos datos distintos. Son el mismo: quién te atiende. */
    margin: 0;
}

/* El nombre ES el enlace al perfil: se ve como el nombre y no como un enlace, hasta que se pasa por encima. */
.as-medico__nombre a {
    color: inherit;
    text-decoration: none;
    transition: color var(--w-transicion);
    /* Un renglón de 21 px era un blanco difícil de acertar con el dedo: el aire de arriba y de abajo suma al área del enlace y se
       descuenta del margen, así que la tarjeta no crece. */
    display: inline-block;
    padding-block: 0.3rem;
    margin-block: -0.3rem;
}

.as-medico__nombre a:hover {
    color: var(--w-menta);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.as-medico__org {
    display: block;
    margin-top: 0.15rem;
    color: var(--w-muted);
    font-size: 0.84rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

/* 2. Respaldo: qué es y cómo atiende */

.as-medico__respaldo {
    display: flex;
    flex-wrap: wrap;
    gap: var(--w-s1);
    margin: var(--w-s3) 0 0;
    padding: 0;
    list-style: none;
}

.as-medico__marca {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    margin: 0;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--w-border);
    /* Un título o un lugar largos se parten en dos renglones: el radio se achica para que la píldora no se vuelva una cápsula. */
    border-radius: 16px;
    color: var(--w-text-soft);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.as-medico__marca .w-ico { width: 0.85em; height: 0.85em; color: var(--w-menta); }

/* «Forma de atención a confirmar»: todavía no dice nada, y el chip lo dice con menos voz. */
.as-medico__marca--neutro {
    border-style: dashed;
    color: var(--w-muted);
}

.as-medico__marca--neutro .w-ico { color: var(--w-muted); }

/* 3. Disponibilidad */

.as-medico__turno {
    display: flex;
    align-items: center;
    gap: var(--w-s2);
    margin-top: var(--w-s3);
    padding: var(--w-s2) var(--w-s3);
    border-radius: var(--w-radio-sm);
    background: var(--w-menta-suave-2);
    color: var(--w-text-soft);
    font-size: 0.85rem;
}

.as-medico__turno .w-ico { color: var(--w-menta); flex-shrink: 0; }

.as-medico__turno-texto {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    line-height: 1.4;
}

.as-medico__turno-rotulo {
    display: block;
    color: var(--w-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.as-medico__turno-valor { display: block; }
.as-medico__turno strong { color: var(--w-text); font-weight: 700; }

.as-medico__turno--vacio { background: var(--w-surface-2); }
.as-medico__turno--vacio .w-ico { color: var(--w-muted); }

/* «Ver perfil» ocupa el lugar del «Ver agenda» de Repronline: un enlace en menta, subrayado, al borde de la caja. */
.as-medico .as-medico__agenda {
    margin-left: auto;
    flex-shrink: 0;
    padding: 0.5rem 0.25rem;
    font-size: 0.8rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* 4. Precio y acción */

.as-medico__pie {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--w-s3);
    margin-top: auto;
    padding-top: var(--w-s4);
}

.as-medico__precio {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
}

.as-medico__precio-rotulo {
    color: var(--w-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.as-medico__precio-cifra {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.4rem;
    font-family: var(--w-font-titulos);
    font-size: 1.3rem;
    color: var(--w-text);
}

/* El equivalente en pesos de un precio en dólares: va al lado, chico y apagado. Sin esto la cifra principal no se distingue de él. */
.as-medico__precio-sec {
    color: var(--w-muted);
    font-family: var(--w-font-texto);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

/* «Precio a confirmar» no es un precio: se lee como lo que es, un aviso, y no con la voz de una cifra. */
.as-medico__precio-cifra.es-a-confirmar {
    font-family: var(--w-font-texto);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--w-muted);
}

.as-medico__pie .w-btn { flex-shrink: 0; }

/* La flecha es de adorno y va por CSS: el texto del botón tiene que ser «Reservar» y nada más. */
.as-medico__reservar::after {
    content: '';
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* En el perfil propio no hay nada que reservar: una pastilla en lugar del botón. */
.as-medico__es-mio {
    flex-shrink: 0;
    padding: 0.5rem 1rem;
    border: 1px solid var(--w-border-fuerte);
    border-radius: 999px;
    background: var(--w-menta-suave);
    color: var(--w-menta);
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Teléfonos angostos (320–360 px): menos aire en la tarjeta y «Ver perfil» baja a su renglón si el horario no entra al lado. */
@media (max-width: 360px) {
    .as-medico { padding: var(--w-s3); }
    .as-medico__turno { flex-wrap: wrap; }
    .as-medico__turno-texto { flex: 1 1 9rem; }
    .as-medico .as-medico__agenda { margin-left: 0; }
}

@media (max-width: 480px) {
    .as-medico__pie { flex-direction: column; align-items: stretch; gap: var(--w-s2); }
    .as-medico__pie .w-btn { width: 100%; }
    .as-medico__es-mio { text-align: center; }

    /* Objetivos táctiles de 44 px en teléfono. El nombre y «Ver perfil» crecen hacia el aire de la tarjeta (margen negativo) y no la estiran;
       «Reservar» ya ocupa todo el ancho y sólo gana alto. */
    .as-medico__nombre a { padding-block: 0.55rem; margin-block: -0.55rem; }
    .as-medico .as-medico__agenda { min-height: 44px; margin-block: -0.45rem; }
    .as-medico__reservar { min-height: 44px; }
}