/* =============================================
   URL Personalización — Directorio de invitados
   ============================================= */

.urlp-dir-wrap {
    width: 100%;
    box-sizing: border-box;
}

/* Campo de búsqueda */
.urlp-dir-search-wrap {
    margin-bottom: 16px;
}

.urlp-dir-search {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    font-size: 1rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #111;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    -webkit-appearance: none;
}

.urlp-dir-search:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}

/* Lista */
.urlp-dir-list {
    width: 100%;
    box-sizing: border-box;
}

/* Items */
.urlp-dir-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
    transition: background-color .15s;
    box-sizing: border-box;
}

.urlp-dir-item:last-child {
    border-bottom: none;
}

.urlp-dir-item:hover {
    background-color: #f9fafb;
}

/* Nombre */
.urlp-dir-item-nombre {
    font-weight: 600;
    color: inherit;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Datos secundarios (boletos, clave, enlace) */
.urlp-dir-item-metas {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.urlp-dir-item-meta {
    font-size: .85em;
    color: #6b7280;
    white-space: nowrap;
}

.urlp-dir-item-clave {
    font-family: monospace;
    letter-spacing: .03em;
    background: #f3f4f6;
    padding: 1px 5px;
    border-radius: 3px;
}

.urlp-dir-sep {
    color: #d1d5db;
}

/* Enlace */
.urlp-dir-item-link {
    color: #6366f1;
    text-decoration: none;
    font-size: .85em;
}

.urlp-dir-item-link:hover {
    text-decoration: underline;
    color: #4f46e5;
}

/* Estados de carga / vacío */
.urlp-dir-loading,
.urlp-dir-empty {
    padding: 20px 16px;
    text-align: center;
    color: #9ca3af;
    font-size: .95rem;
}

/* Resaltado de coincidencia de búsqueda */
.urlp-dir-highlight {
    background: #fef08a;
    border-radius: 2px;
    padding: 0 1px;
}

/* =============================================
   Paginación — v1.5.0
   ============================================= */

.urlp-dir-paginacion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
}

.urlp-dir-paginacion-top  { margin-bottom: 14px; }
.urlp-dir-paginacion-bottom { margin-top: 14px; }

/* Info de totales */
.urlp-dir-pag-info {
    font-size: .85rem;
    color: #6b7280;
    margin-right: auto;
    white-space: nowrap;
}

/* Botones */
.urlp-dir-pag-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: 6px 12px;
    font-size: .875rem;
    line-height: 1;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #374151;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
    white-space: nowrap;
    box-sizing: border-box;
}

.urlp-dir-pag-btn:not(.activo):not(:disabled):hover {
    background-color: #f3f4f6;
    border-color: #9ca3af;
}

.urlp-dir-pag-btn.activo {
    background-color: #4f46e5;
    color: #fff;
    border-color: #4f46e5;
    cursor: default;
    font-weight: 700;
}

.urlp-dir-pag-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* Elipsis */
.urlp-dir-pag-ellipsis {
    color: #9ca3af;
    padding: 0 4px;
    align-self: center;
    font-size: .9rem;
}

/* Responsive: en pantallas pequeñas ocultar numerados y solo mostrar prev/next */
@media (max-width: 480px) {
    .urlp-dir-pag-num:not(.activo) { display: none; }
    .urlp-dir-pag-ellipsis         { display: none; }
    .urlp-dir-pag-info             { width: 100%; margin-right: 0; margin-bottom: 6px; }
    .urlp-dir-paginacion           { justify-content: space-between; }
}

/* =============================================
   Asistencia al evento — v1.6.1
   ============================================= */

.urlp-dir-asist-btns {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.urlp-dir-asist-btn {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: .78rem;
    font-weight: 600;
    border: 1px solid #d1d5db;
    border-radius: 20px;
    background: #f9fafb;
    color: #374151;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
    font-family: inherit;
    line-height: 1.3;
}

.urlp-dir-asist-btn:hover:not(:disabled) {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.urlp-dir-asist-btn.activo {
    background: #d1fae5;
    border-color: #6ee7b7;
    color: #065f46;
    cursor: default;
}

.urlp-dir-asist-btn.activo.no {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #991b1b;
}

.urlp-dir-asist-btn.reset {
    background: none;
    border: 1px solid #e5e7eb;
    color: #9ca3af;
    padding: 4px 7px;
    font-size: .75rem;
}
.urlp-dir-asist-btn.reset:hover { color: #6b7280; border-color: #9ca3af; }
.urlp-dir-asist-btn:disabled { opacity: .75; }

/* Badge solo-lectura */
.urlp-dir-asist-badge {
    display: inline-block;
    font-size: .78rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}
.urlp-dir-asist-badge.asistio    { background:#d1fae5; color:#065f46; }
.urlp-dir-asist-badge.no-asistio { background:#fee2e2; color:#991b1b; }

/* Ajuste de layout del item cuando hay botones de asistencia */
.urlp-dir-item:has(.urlp-dir-asist-btns) {
    flex-wrap: wrap;
    row-gap: 6px;
}