/* Taller Mackauto — fase 1 (fichas). */

/* =====================================================================
   F1-03 · Teléfono con «Llamar» y «WhatsApp» (components/mack/telefono)
   ===================================================================== */
.mack-tel {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.625rem;
    min-width: 0;
}

.mack-tel--vacio {
    color: #64748b;
    font-size: 0.8125rem;
    font-weight: 600;
}

.mack-tel__numero {
    color: var(--mack-navy-950, #111a33);
    font-weight: 800;
    white-space: nowrap;
}

.mack-tel__acciones {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

.mack-tel__boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3125rem;
    min-height: 2rem;
    padding: 0 0.625rem;
    border: 1px solid var(--mack-borde, #dde1ea);
    border-radius: 10px;
    background: #fff;
    color: var(--mack-navy, #202f57);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.mack-tel__boton:hover {
    border-color: var(--mack-navy, #202f57);
    color: var(--mack-navy-950, #111a33);
}

.mack-tel__boton:focus-visible {
    outline: 3px solid rgb(32 47 87 / 0.35);
    outline-offset: 1px;
}

.mack-tel__icono {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* El verde de WhatsApp solo en su icono. */
.mack-tel__icono--whatsapp {
    color: #25d366;
}

/* Variante «botones»: número grande y botones anchos (móvil). */
.mack-tel--botones {
    display: flex;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.mack-tel--botones .mack-tel__numero {
    font-size: 1.125rem;
}

.mack-tel--botones .mack-tel__boton {
    min-height: 2.5rem;
    padding: 0 0.875rem;
    font-size: 0.875rem;
}

/* Móvil: dedo = 44 px como mínimo. */
@media (max-width: 767px) {
    .mack-tel__boton {
        min-height: 2.75rem;
        padding: 0 0.875rem;
    }

    .mack-tel--botones {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .mack-tel--botones .mack-tel__acciones {
        display: flex;
        width: 100%;
    }

    .mack-tel--botones .mack-tel__boton {
        flex: 1 1 0;
        min-height: 3rem;
        font-size: 0.9375rem;
    }
}

/* Ficha de cliente: el teléfono ocupa su propia línea en el móvil. */
@media (max-width: 767px) {
    .mack-hub-telefono {
        flex-basis: 100%;
    }
}

/* Ficha de cliente, pestaña Trabajo: fuera el checklist americano
   («Avería apuntada · Inspección apuntada · Presupuesto enviado · Trabajo autorizado»). */
.mack-hub-trabajo .ops-orientation-snippet__confidence {
    display: none !important;
}

/* =====================================================================
   F1-03 · Tarjetas de las listas (Reparaciones, Vehículos, Clientes)
   Toda la tarjeta es el enlace: el enlace principal se estira con ::after.
   ===================================================================== */
.ops-job-card.mack-tarjeta {
    position: relative;
    gap: 0.25rem;
    padding: 0.75rem 0.875rem 0.75rem 1rem;
    cursor: pointer;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.ops-job-card.mack-tarjeta:hover {
    border-color: var(--mack-navy, #202f57);
    box-shadow: 0 2px 8px rgb(17 26 51 / 0.08);
}

.ops-job-card.mack-tarjeta:focus-within {
    outline: 3px solid rgb(32 47 87 / 0.35);
    outline-offset: 2px;
}

.mack-tarjeta p {
    margin: 0;
}

.mack-tarjeta__cabeza {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
}

.mack-tarjeta__enlace {
    color: inherit;
    text-decoration: none;
}

.mack-tarjeta__enlace::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.mack-tarjeta__enlace:focus-visible {
    outline: none;
}

/* Lo que tiene su propio enlace (Llamar, WhatsApp) queda por encima. */
.mack-tarjeta .mack-tel {
    position: relative;
    z-index: 2;
}

.mack-tarjeta__matricula {
    color: var(--mack-navy-950, #111a33);
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.5rem;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mack-tarjeta__nombre {
    min-width: 0;
    color: var(--mack-navy-950, #111a33);
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.375rem;
    overflow-wrap: anywhere;
}

.mack-tarjeta__numero {
    flex-shrink: 0;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.mack-tarjeta__coche {
    color: #1e293b;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.25rem;
}

.mack-tarjeta__persona {
    color: #475569;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.125rem;
}

.mack-tarjeta__averia {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: #64748b;
    font-size: 0.8125rem;
    line-height: 1.125rem;
}

.mack-tarjeta__coches {
    color: #334155;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25rem;
}

.mack-tarjeta__matriculas {
    color: var(--mack-navy-950, #111a33);
    font-weight: 800;
    letter-spacing: 0.03em;
}

/* Estado en su propia línea y sin cortar. */
.mack-tarjeta__estado {
    margin-top: 0.125rem !important;
}

.mack-tarjeta .mack-tarjeta__estado .ops-status-chip {
    max-width: 100%;
    overflow: visible;
    padding: 0.1875rem 0.5625rem;
    font-size: 0.6875rem;
    line-height: 1rem;
    text-overflow: clip;
    white-space: normal;
}

.mack-tarjeta__fecha {
    color: #475569;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25rem;
}

.mack-entrada__dias {
    color: var(--mack-red, #cb1824);
    font-weight: 700;
}

.mack-tarjeta--cliente .mack-tel {
    margin-top: 0.125rem;
}