/* ===========================================
   Directorio WP v1.1.0 — Estilos principales
   Telfo NetWorks — https://www.telfo.com
   =========================================== */

/* --- Variables base (fallbacks si el PHP no las inyecta) --- */
.dwp-directorio,
.dwp-ficha {
    --dwp-primary:    #1a6fb0;
    --dwp-primary-bg: color-mix(in srgb, var(--dwp-primary) 12%, white);
    --dwp-pet:        #2d6a2d;
    --dwp-pet-bg:     #e8f5e8;
    --dwp-border:     #e0e0e0;
    --dwp-text:       #1a1a1a;
    --dwp-text-muted: #5a5a5a;
    --dwp-radius:     10px;
    --dwp-gap:        1.25rem;
    font-family: inherit;
    color: var(--dwp-text);
    box-sizing: border-box;
}

.dwp-directorio *,
.dwp-ficha * {
    box-sizing: border-box;
}

/* --- Título ----------------------------------------- */
.dwp-titulo {
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
}

/* --- Barra de filtros ------------------------------- */
.dwp-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    margin-bottom: 1.25rem;
    padding: 1rem 1.1rem;
    background: #f8f8f8;
    border: 1px solid var(--dwp-border);
    border-radius: var(--dwp-radius);
}

.dwp-busqueda {
    display: flex;
    flex: 1;
    min-width: 220px;
    gap: .5rem;
}

.dwp-busqueda input[type="search"] {
    flex: 1;
    padding: .5rem .85rem;
    border: 1px solid var(--dwp-border);
    border-radius: 6px;
    font-size: .9rem;
    background: #fff;
    color: var(--dwp-text);
}

.dwp-busqueda button {
    padding: .5rem 1.1rem;
    background: var(--dwp-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: .9rem;
    white-space: nowrap;
    transition: opacity .15s;
}

.dwp-busqueda button:hover {
    opacity: .88;
}

.dwp-filtros-extra {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.dwp-filtros-extra select {
    padding: .45rem .75rem;
    border: 1px solid var(--dwp-border);
    border-radius: 6px;
    font-size: .85rem;
    background: #fff;
    color: var(--dwp-text);
    cursor: pointer;
}

.dwp-btn-pet {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: .42rem .9rem;
    background: #fff;
    border: 1px solid var(--dwp-border);
    border-radius: 20px;
    font-size: .82rem;
    color: var(--dwp-text-muted);
    text-decoration: none;
    transition: all .15s;
}

.dwp-btn-pet:hover,
.dwp-btn-pet.activo {
    background: var(--dwp-pet-bg);
    color: var(--dwp-pet);
    border-color: var(--dwp-pet);
}

.dwp-btn-reset {
    font-size: .82rem;
    color: var(--dwp-text-muted);
    text-decoration: none;
    padding: .42rem .75rem;
    border-radius: 6px;
    border: 1px solid var(--dwp-border);
    background: #fff;
    transition: all .15s;
}

.dwp-btn-reset:hover {
    background: #ffe8e8;
    border-color: #e07070;
    color: #a33;
}

/* --- Contador de resultados ------------------------ */
.dwp-resultados {
    font-size: .88rem;
    color: var(--dwp-text-muted);
    margin-bottom: 1rem;
}

/* --- Grid de tarjetas ------------------------------ */
.dwp-grid {
    display: grid;
    gap: var(--dwp-gap);
}

.dwp-cols-1 { grid-template-columns: 1fr; }
.dwp-cols-2 { grid-template-columns: repeat(2, 1fr); }
.dwp-cols-3 { grid-template-columns: repeat(3, 1fr); }
.dwp-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* --- Tarjeta individual ---------------------------- */
.dwp-card {
    background: #fff;
    border: 1px solid var(--dwp-border);
    border-radius: var(--dwp-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s, transform .2s;
}

.dwp-card:hover {
    box-shadow: 0 4px 18px rgba(0,0,0,.1);
    transform: translateY(-2px);
}

.dwp-card-img {
    position: relative;
    height: 180px;
    overflow: hidden;
    background: #f0f0f0;
}

.dwp-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dwp-no-img {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    background: #f5f5f5;
}

.dwp-badge-pet {
    position: absolute;
    top: .6rem;
    left: .6rem;
    background: var(--dwp-pet-bg);
    color: var(--dwp-pet);
    border: 1px solid var(--dwp-pet);
    border-radius: 20px;
    padding: 2px 10px;
    font-size: .75rem;
    font-weight: 600;
}

.dwp-card-body {
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.dwp-card-nombre {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 .4rem;
    line-height: 1.35;
}

.dwp-card-nombre a {
    color: var(--dwp-text);
    text-decoration: none;
}

.dwp-card-nombre a:hover {
    color: var(--dwp-primary);
}

.dwp-card-desc {
    font-size: .85rem;
    color: var(--dwp-text-muted);
    line-height: 1.5;
    margin-bottom: .75rem;
    flex: 1;
}

.dwp-card-meta {
    list-style: none;
    padding: 0;
    margin: 0 0 .85rem;
    font-size: .82rem;
    color: var(--dwp-text-muted);
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.dwp-card-meta a {
    color: var(--dwp-text-muted);
    text-decoration: none;
}

.dwp-card-meta a:hover {
    color: var(--dwp-primary);
}

.dwp-icon {
    font-size: .85rem;
    margin-right: 3px;
}

.dwp-card-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: auto;
}

/* --- Botones --------------------------------------- */
.dwp-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: .45rem 1rem;
    background: #fff;
    border: 1px solid var(--dwp-border);
    border-radius: 6px;
    font-size: .82rem;
    color: var(--dwp-text);
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.dwp-btn:hover {
    background: #f5f5f5;
    border-color: #bbb;
}

.dwp-btn-primary {
    background: var(--dwp-primary);
    color: #fff;
    border-color: var(--dwp-primary);
}

.dwp-btn-primary:hover {
    filter: brightness(.9);
    color: #fff;
}

.dwp-btn-maps {
    background: #e8f2fb;
    color: var(--dwp-primary);
    border-color: var(--dwp-primary);
}

.dwp-btn-maps:hover {
    background: #cfe3f7;
}

/* --- Paginación ------------------------------------ */
.dwp-paginacion {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.dwp-paginacion .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 .6rem;
    border: 1px solid var(--dwp-border);
    border-radius: 6px;
    font-size: .85rem;
    text-decoration: none;
    color: var(--dwp-text);
    background: #fff;
    transition: background .15s;
}

.dwp-paginacion .page-numbers.current {
    background: var(--dwp-primary);
    color: #fff;
    border-color: var(--dwp-primary);
}

.dwp-paginacion .page-numbers:hover:not(.current) {
    background: #f0f0f0;
}

/* --- Sin resultados -------------------------------- */
.dwp-no-resultados {
    padding: 2rem;
    text-align: center;
    color: var(--dwp-text-muted);
    background: #f9f9f9;
    border: 1px solid var(--dwp-border);
    border-radius: var(--dwp-radius);
}

/* ===========================================
   FICHA INDIVIDUAL
   =========================================== */
.dwp-ficha {
    max-width: 780px;
}

.dwp-ficha-img {
    width: 100%;
    border-radius: var(--dwp-radius);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.dwp-ficha-img img {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    display: block;
}

.dwp-ficha-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.dwp-ficha-nombre {
    font-size: 1.75rem;
    font-weight: 700;
    flex: 1;
    margin: 0;
    line-height: 1.25;
}

.dwp-ficha-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    margin-top: .3rem;
}

.dwp-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: .78rem;
    font-weight: 600;
    border: 1px solid;
}

.dwp-badge-pet {
    background: var(--dwp-pet-bg);
    color: var(--dwp-pet);
    border-color: var(--dwp-pet);
}

.dwp-badge-cat {
    background: #e8f2fb;
    color: var(--dwp-primary);
    border-color: var(--dwp-primary);
}

.dwp-ficha-desc {
    font-size: 1rem;
    line-height: 1.75;
    margin-bottom: 1.5rem;
}

.dwp-ficha-datos {
    background: #f9f9f9;
    border: 1px solid var(--dwp-border);
    border-radius: var(--dwp-radius);
    padding: 1.25rem 1.4rem;
    margin-bottom: 1.25rem;
}

.dwp-ficha-seccion {
    font-size: .78rem;
    font-weight: 700;
    color: var(--dwp-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0 0 .85rem;
}

.dwp-ficha-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.dwp-ficha-lista li {
    display: flex;
    align-items: baseline;
    gap: .75rem;
}

.dwp-ficha-label {
    font-size: .82rem;
    color: var(--dwp-text-muted);
    min-width: 110px;
    flex-shrink: 0;
}

.dwp-ficha-valor {
    font-size: .92rem;
    color: var(--dwp-text);
    word-break: break-word;
}

a.dwp-ficha-valor {
    color: var(--dwp-primary);
    text-decoration: none;
}

a.dwp-ficha-valor:hover {
    text-decoration: underline;
}

.dwp-pet-si {
    color: var(--dwp-pet);
    font-weight: 600;
}

.dwp-ficha-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.dwp-volver {
    margin-top: .5rem;
}

/* --- Responsive ------------------------------------ */
@media (max-width: 900px) {
    .dwp-cols-4 { grid-template-columns: repeat(2, 1fr); }
    .dwp-cols-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .dwp-cols-4,
    .dwp-cols-3,
    .dwp-cols-2 { grid-template-columns: 1fr; }

    .dwp-filtros { flex-direction: column; align-items: stretch; }
    .dwp-busqueda { min-width: 0; }
    .dwp-filtros-extra { justify-content: flex-start; }

    .dwp-ficha-header { flex-direction: column; gap: .5rem; }
    .dwp-ficha-nombre { font-size: 1.4rem; }
    .dwp-ficha-lista li { flex-direction: column; gap: .15rem; }
    .dwp-ficha-label { min-width: auto; }
}