/**
 * Zoomubik Profesionales — Estilos públicos
 * v0.1.0
 *
 * Este CSS se carga SOLO en el front (no en admin).
 * Diseño a propósito diferente de las tarjetas de anuncio:
 * - Sin precio grande en verde
 * - Badge "Profesional" visible
 * - Fondo neutro para separar visualmente del contenido de viviendas
 */

/* =========================================================================
   BLOQUE CONTENEDOR
   Aparece al final de la página de provincia, NUNCA mezclado con viviendas.
   ========================================================================= */

.zm-profesionales-bloque {
    margin: 40px 0 20px;
    padding: 24px 16px;
    background: #f7f8fa;
    border-radius: 12px;
    border: 1px solid #e2e5ea;
}

.zm-profesionales-titulo {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.zm-profesionales-titulo::before {
    content: '🛠️';
    font-size: 20px;
}

.zm-profesionales-lista {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

/* =========================================================================
   FICHA INDIVIDUAL
   ========================================================================= */

.zm-prof-ficha {
    background: #fff;
    border: 1px solid #e2e5ea;
    border-radius: 10px;
    padding: 16px;
    position: relative;
    transition: box-shadow 0.2s ease;
}

.zm-prof-ficha:hover {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* Badge "Profesional" — esquina superior derecha */
.zm-prof-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #2563eb;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    line-height: 1.4;
}

/* Nombre comercial */
.zm-prof-nombre {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 4px;
    padding-right: 90px; /* espacio para el badge */
}

/* Foto de portada */
.zm-prof-foto-portada {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 12px;
    display: block;
}

/* Enlace a la ficha individual completa */
.zm-prof-ver-mas {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
    margin: 0 0 10px;
}

.zm-prof-ver-mas:hover {
    text-decoration: underline;
}

/* Aviso: ficha sin cuenta vinculada (creada manualmente sin registro) */
.zm-prof-sin-cuenta {
    font-size: 13px;
    color: #9ca3af;
    font-style: italic;
    margin: 8px 0 0;
}

/* Gremio */
.zm-prof-gremio {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 8px;
    font-weight: 500;
}

/* Icono por gremio */
.zm-prof-ficha[data-gremio="certificador_energetico"] .zm-prof-gremio::before {
    content: '⚡ ';
}
.zm-prof-ficha[data-gremio="gestoria"] .zm-prof-gremio::before {
    content: '📋 ';
}
.zm-prof-ficha[data-gremio="abogado_arrendamientos"] .zm-prof-gremio::before {
    content: '⚖️ ';
}
.zm-prof-ficha[data-gremio="seguros"] .zm-prof-gremio::before {
    content: '🛡️ ';
}
.zm-prof-ficha[data-gremio="tasador"] .zm-prof-gremio::before {
    content: '📐 ';
}
.zm-prof-ficha[data-gremio="fotografia"] .zm-prof-gremio::before {
    content: '📷 ';
}
.zm-prof-ficha[data-gremio="mudanzas"] .zm-prof-gremio::before {
    content: '📦 ';
}
.zm-prof-ficha[data-gremio="reformas"] .zm-prof-gremio::before {
    content: '🔨 ';
}
.zm-prof-ficha[data-gremio="limpieza"] .zm-prof-gremio::before {
    content: '🧹 ';
}
.zm-prof-ficha[data-gremio="agencia_inmobiliaria"] .zm-prof-gremio::before {
    content: '🏪 ';
}
.zm-prof-ficha[data-gremio="otros"] .zm-prof-gremio::before {
    content: '🔧 ';
}

/* Descripción */
.zm-prof-desc {
    font-size: 14px;
    color: #374151;
    line-height: 1.5;
    margin: 0 0 12px;
}

/* Botón de contacto */
.zm-prof-contactar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
    /* input a 16px para evitar zoom en Safari iOS */
    font-size: 16px;
}

.zm-prof-contactar:hover {
    background: #1d4ed8;
}

.zm-prof-contactar:active {
    background: #1e40af;
    transform: scale(0.98);
}

.zm-prof-contactar::before {
    content: '✉️';
    font-size: 14px;
}

/* Caja de contacto desplegable */
.zm-prof-contacto-caja {
    margin-top: 4px;
}

.zm-prof-contacto-texto {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 2px solid #d7e3f5;
    border-radius: 8px;
    font-size: 16px; /* evita zoom en Safari iOS */
    font-family: inherit;
    resize: vertical;
    margin-bottom: 8px;
}

.zm-prof-contacto-enviar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.zm-prof-contacto-enviar:hover {
    background: #1d4ed8;
}

.zm-prof-contacto-enviar:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}

.zm-prof-contactar-msg {
    display: block;
    font-size: 13px;
    margin-top: 6px;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

/* Tablet y escritorio: fichas en grid de 2 columnas */
@media (min-width: 640px) {
    .zm-profesionales-lista {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .zm-profesionales-bloque {
        padding: 28px 24px;
    }

    .zm-profesionales-titulo {
        font-size: 20px;
    }
}

/* Escritorio grande: hasta 3 columnas si hay muchos */
@media (min-width: 1024px) {
    .zm-profesionales-lista {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* =========================================================================
   CONTEXTO: dentro de la ficha de un anuncio (post-contacto)
   Versión más compacta con una sola columna y menos padding
   ========================================================================= */

.zm-anuncio-detalle {
    margin-top: 24px;
}

.zm-anuncio-detalle .zm-profesionales-bloque {
    margin: 24px 0 12px;
    padding: 16px 12px;
    border-radius: 8px;
}

.zm-anuncio-detalle .zm-profesionales-titulo {
    font-size: 15px;
    margin-bottom: 10px;
}

.zm-anuncio-detalle .zm-profesionales-lista {
    grid-template-columns: 1fr;
    gap: 8px;
}

.zm-anuncio-detalle .zm-prof-ficha {
    padding: 12px;
}

.zm-anuncio-detalle .zm-prof-nombre {
    font-size: 14px;
}

.zm-anuncio-detalle .zm-prof-contactar {
    padding: 8px 16px;
    font-size: 16px; /* mantener 16px para Safari iOS */
}

/* =========================================================================
   CTA DE CAPTACIÓN
   Se muestra en la ficha del anuncio cuando todavía no hay ningún
   profesional activo en la provincia. Tarjeta horizontal compacta,
   pensada para que pese más el icono que el texto.
   ========================================================================= */

.zm-prof-cta-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.zm-prof-cta-vacio-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.zm-prof-cta-vacio-btn {
    display: inline-block;
    text-decoration: none;
    background: #2563eb;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 24px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.zm-prof-cta-vacio-btn:hover {
    background: #1d4ed8;
}