/**
 * Aventura Sigüés - Estilos Sistema de Eventos v8.7.12
 * CSS para Modal de Inscripción, Menú de Navegación y Eventos
 */

/* ===============================================
   UTILIDADES GLOBALES
   =============================================== */

/* Clase para ocultar elementos - prioridad máxima con doble especificidad */
.ass-hidden.ass-hidden {
    display: none !important;
}

/* Layout de formularios - clases de ancho */
.ass-form-half {
    flex: 0 0 calc(50% - 0.75rem);
    min-width: 0;
}

.ass-form-full {
    flex: 0 0 100%;
    grid-column: 1 / -1;
}

.ass-form-third {
    flex: 0 0 calc(33.33% - 0.67rem);
    min-width: 0;
}

.ass-form-quarter {
    flex: 0 0 calc(25% - 0.75rem);
    min-width: 0;
}

/* Separadores de sección en formularios */
.ass-form-separator {
    border-top: 2px solid #e0e0e0;
    padding-top: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    grid-column: 1 / -1;
}

.ass-form-separator h4 {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    color: #4c7449;
}

/* ===============================================
   MODAL DE INSCRIPCIÓN
   =============================================== */

/* Overlay del modal */
.ass-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.ass-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Contenedor del modal */
.ass-modal-container {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 90%;
    width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.9) translateY(-20px);
    transition: all 0.3s ease;
}

.ass-modal-container.ass-modal-lg {
    width: 95vw;
    max-width: 1100px;
}

.ass-modal-overlay.active .ass-modal-container {
    transform: scale(1) translateY(0);
}

.ass-modal-container.ass-modal-small {
    max-width: 450px;
}

/* Header del modal */
.ass-modal-header {
    background: linear-gradient(135deg, #01455e 0%, #4c7449 100%);
    color: white;
    padding: 1.5rem 2rem;
    border-radius: 16px 16px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ass-modal-titulo {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.ass-modal-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 1.5rem;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.ass-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

/* Body del modal */
.ass-modal-body {
    padding: 2rem;
}

/* Prevenir scroll cuando modal está abierto */
body.ass-modal-open {
    overflow: hidden;
}

/* Información del evento en el modal */
.ass-evento-info {
    background: linear-gradient(135deg, #f7f9fc 0%, #e8f0f8 100%);
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    border: 1px solid #d4e3f0;
}

.ass-evento-nombre {
    margin: 0 0 0.75rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #2c5530;
}

.ass-evento-detalles {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.ass-detalle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #495057;
}

.ass-icon {
    font-size: 1.1rem;
}

/* Formulario de inscripción */
.ass-inscripcion-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.ass-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ass-form-group label {
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.95rem;
}

.ass-form-control {
    padding: 0.75rem 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.2s;
    font-family: inherit;
}

.ass-form-control:focus {
    outline: none;
    border-color: #4c7449;
    box-shadow: 0 0 0 3px rgba(76, 116, 73, 0.1);
}

/* Link "Ver condiciones" debajo del checkbox */
.ass-condiciones-toggle {
    display: block;
    color: #01455e;
    font-size: 0.8rem;
    text-decoration: underline;
    margin-top: 0.25rem;
    margin-left: 1.75rem;
}

/* Texto de condiciones desplegable */
.ass-condiciones-texto {
    background: #f8f9fa;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #01455e;
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    line-height: 1.6;
    color: #334155;
    max-height: 300px;
    overflow-y: auto;
}
.ass-condiciones-texto p {
    margin: 0 0 0.5rem 0;
}
.ass-condiciones-texto p:last-child {
    margin-bottom: 0;
}
.ass-condiciones-titulo {
    font-size: 0.85rem;
    font-weight: 700;
    color: #01455e;
    margin: 0.75rem 0 0.25rem 0;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid #e2e8f0;
}
.ass-condiciones-texto .ass-condiciones-titulo:first-child {
    margin-top: 0;
}
.ass-condiciones-texto ul {
    margin: 0.25rem 0 0.5rem 0;
    padding-left: 1.25rem;
}
.ass-condiciones-texto ul li {
    margin-bottom: 0.2rem;
}

.ass-checkbox-group {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 8px;
}

.ass-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    font-weight: normal;
}

.ass-checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.ass-checkbox-text {
    font-size: 1rem;
    color: #2c3e50;
}

.ass-campos-acompanantes {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    background: #f0f7f0;
    border-radius: 8px;
    border: 2px dashed #4c7449;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ass-help-text {
    font-size: 0.85rem;
    color: #6c757d;
}

.ass-required {
    color: #bb613e;
}

.ass-optional {
    color: #6c757d;
    font-weight: normal;
}

.ass-plazas-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(242, 184, 140, 0.15) 0%, rgba(242, 184, 140, 0.3) 100%);
    border-radius: 8px;
    border: 1px solid rgba(242, 184, 140, 0.5);
    font-size: 0.95rem;
}

.ass-plazas-numero {
    font-weight: 700;
    color: #bb613e;
}

/* Footer del modal */
.ass-modal-footer {
    padding: 1.5rem 2rem;
    background: rgba(219, 220, 184, 0.12);
    border-top: 1px solid rgba(219, 220, 184, 0.3);
    border-radius: 0 0 16px 16px;
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

.ass-btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ass-btn-primary {
    background: linear-gradient(135deg, #4c7449 0%, #5d8a59 100%);
    color: white;
}

.ass-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(76, 116, 73, 0.3);
}

.ass-btn-secondary {
    background: #01455e;
    color: white;
}

.ass-btn-secondary:hover {
    background: #013648;
}

.ass-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Sistema de notificaciones Toast */
.ass-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: white;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 300px;
    max-width: 500px;
    animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.ass-toast.ass-toast-success {
    border-left: 4px solid #4c7449;
}

.ass-toast.ass-toast-error {
    border-left: 4px solid #bb613e;
}

.ass-toast.ass-toast-warning {
    border-left: 4px solid #f2b88c;
}

.ass-toast-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.ass-toast-content {
    flex: 1;
}

.ass-toast-title {
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.ass-toast-message {
    font-size: 0.9rem;
    color: #6c757d;
}

/* ===============================================
   MENÚ DE NAVEGACIÓN
   =============================================== */

/* Header principal */
.ass-header-nav {
    background: linear-gradient(135deg, #4c7449 0%, #5d8a59 100%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: all 0.3s ease;
}

.ass-header-nav.sticky {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.ass-nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
}

/* Logo del club - CONTROL ESTRICTO DEL TAMAÑO */
.ass-nav-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: white;
    text-decoration: none;
    font-size: 1.25rem;
    font-weight: 700;
    transition: all 0.2s;
}

.ass-nav-logo:hover {
    transform: scale(1.05);
}

/* CONTROL ESPECÍFICO DEL TAMAÑO DEL EMOJI/LOGO */
.ass-nav-logo .ass-logo-icon {
    font-size: 1.75rem !important;
    line-height: 1 !important;
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
}

/* Imagen del logo - control estricto */
.ass-nav-logo img.ass-logo-icon {
    width: 45px !important;
    height: 45px !important;
    max-width: 45px !important;
    max-height: 45px !important;
    min-width: 45px !important;
    min-height: 45px !important;
    object-fit: contain !important;
    border-radius: 6px !important;
}

@media (max-width: 767px) {
    .ass-nav-logo img.ass-logo-icon {
        width: 36px !important;
        height: 36px !important;
        max-width: 36px !important;
        max-height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }
}

/* Botón hamburguesa (móvil) */
.ass-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
}

.ass-menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background: white;
    border-radius: 3px;
    transition: all 0.3s;
}

.ass-menu-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
}

.ass-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(7px, 7px);
}

.ass-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.ass-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Navegación principal */
.ass-nav-principal {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ass-nav-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s;
    font-weight: 500;
    font-size: 0.95rem;
}

.ass-nav-item:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.ass-nav-item.active {
    background: rgba(255, 255, 255, 0.2);
}

.ass-nav-icon {
    font-size: 1.1rem;
}

.ass-nav-badge {
    background: #bb613e;
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
}

/* ===============================================
   RESPONSIVE - MENÚ MÓVIL
   =============================================== */

@media (max-width: 767px) {
    /* Botón hamburguesa */
    .ass-menu-toggle {
        display: flex !important;
        z-index: 10000 !important;
    }
    
    /* Navegación móvil - SIMPLICADO AL MÁXIMO */
    .ass-nav-principal {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed !important;
        top: 70px !important;
        right: -280px !important;
        bottom: 0 !important;
        width: 280px !important;
        background: #4c7449 !important;
        padding: 1rem 0 !important;
        margin: 0 !important;
        box-shadow: -5px 0 20px rgba(0, 0, 0, 0.3) !important;
        transition: right 0.3s ease !important;
        overflow-y: auto !important;
        z-index: 9999 !important;
    }
    
    .ass-nav-principal.active {
        right: 0 !important;
    }
    
    /* Items del menú móvil */
    .ass-nav-item {
        display: block !important;
        color: white !important;
        background: transparent !important;
        padding: 1rem 1.5rem !important;
        margin: 0 !important;
        border: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 0 !important;
        text-align: left !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .ass-nav-item:hover,
    .ass-nav-item.active {
        background: rgba(255, 255, 255, 0.15) !important;
        color: white !important;
        transform: none !important;
    }
    
    .ass-nav-item .ass-nav-icon {
        display: inline-block !important;
        margin-right: 0.5rem !important;
    }
}

/* ===============================================
   ESTILOS PARA EVENTOS
   =============================================== */

/* Grid de eventos */
.ass-eventos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.ass-evento-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s;
    cursor: pointer;
}

.ass-evento-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.ass-evento-imagen {
    width: 100%;
    height: 140px;
    object-fit: cover;
}

.ass-evento-content {
    padding: 0.75rem 1rem;
}

.ass-evento-titulo {
    margin: 0 0 0.35rem 0;
    font-size: 1rem;
    font-weight: 700;
    color: #2c3e50;
}

.ass-evento-fecha {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6c757d;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
}

.ass-evento-descripcion {
    color: #495057;
    line-height: 1.5;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}

.ass-evento-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid #e0e0e0;
    background: #f8f9fa;
}

.ass-evento-footer .ass-btn {
    flex: none;
}

.ass-evento-plazas {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #6c757d;
}

.ass-plazas-disponibles {
    font-weight: 700;
    color: #4c7449;
}

.ass-plazas-disponibles.pocas {
    color: #f2b88c;
}

.ass-plazas-disponibles.completo {
    color: #bb613e;
}

/* Botones de acción */
.ass-btn-inscribir,
.ass-btn-cancelar {
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.ass-btn-inscribir {
    background: #4c7449;
    color: white;
}

.ass-btn-inscribir:hover {
    background: #3d5d3a;
    transform: scale(1.05);
}

.ass-btn-cancelar {
    background: #bb613e;
    color: white;
}

.ass-btn-cancelar:hover {
    background: #a3532f;
}

/* Estados de eventos */
.ass-estado-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
}

.ass-estado-abierto {
    background: rgba(76, 116, 73, 0.15);
    color: #4c7449;
}

.ass-estado-completo {
    background: rgba(187, 97, 62, 0.15);
    color: #bb613e;
}

.ass-estado-lista-espera {
    background: rgba(242, 184, 140, 0.25);
    color: #bb613e;
}

/* Calendario de eventos */
.ass-calendario-container {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.ass-calendario-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.ass-calendario-navegacion {
    display: flex;
    gap: 1rem;
}

.ass-btn-calendario {
    padding: 0.5rem 1rem;
    background: #4c7449;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.ass-btn-calendario:hover {
    background: #3d5d3a;
}

/* Responsive */
@media (max-width: 767px) {
    .ass-eventos-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        margin: 0.5rem 0;
    }

    .ass-evento-card {
        border-radius: 8px;
    }

    .ass-evento-header {
        padding: 0.5rem 0.75rem !important;
    }

    .ass-evento-icon {
        font-size: 18px !important;
    }

    .ass-evento-tipo {
        font-size: 11px !important;
    }

    .ass-evento-estado {
        font-size: 10px !important;
        padding: 2px 5px !important;
    }

    .ass-evento-content {
        padding: 0.5rem 0.75rem !important;
    }

    .ass-evento-titulo {
        font-size: 0.95rem !important;
        margin-bottom: 0.25rem !important;
    }

    .ass-evento-detalles p {
        margin: 0.1rem 0 !important;
        font-size: 0.8rem !important;
    }

    .ass-evento-descripcion {
        display: none !important;
    }

    .ass-evento-footer {
        padding: 0.4rem 0.75rem !important;
        gap: 0.4rem !important;
    }

    .ass-evento-footer .ass-btn {
        font-size: 0.8rem !important;
        padding: 0.35rem 0.75rem !important;
        width: auto !important;
    }

    /* Modal en móvil */
    .ass-modal-container {
        width: 95%;
        max-height: 85vh;
    }

    .ass-modal-header,
    .ass-modal-body,
    .ass-modal-footer {
        padding: 1rem;
    }

    .ass-modal-footer {
        flex-direction: column;
    }

    .ass-modal-footer .ass-btn {
        width: 100%;
    }
    
    /* Toast en móvil */
    #ass-toast-container {
        right: 10px;
        left: 10px;
        top: 80px;
    }
    
    .ass-toast {
        min-width: auto;
        max-width: none;
        right: 10px;
        left: 10px;
    }
}

/* ===============================================
   CARDS DE EVENTOS - ESTILOS DETALLADOS
   =============================================== */

.ass-evento-contenido {
    padding: 1.5rem;
}

.ass-evento-fecha-lugar {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: #4a5568;
}

.ass-evento-acciones {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

/* Estados de eventos específicos */
.ass-evento-estado {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.ass-evento-estado.proximo {
    background: rgba(151, 179, 208, 0.15);
    color: #01455e;
}

.ass-evento-estado.inscrito {
    background: rgba(76, 116, 73, 0.15);
    color: #4c7449;
}

.ass-evento-estado.completo {
    background: rgba(242, 184, 140, 0.2);
    color: #bb613e;
}

.ass-evento-estado.pasado {
    background: #f8f9fa;
    color: #6c757d;
}

/* ===============================================
   MEJORAS GENERALES
   =============================================== */

/* Animación fade in adicional */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeInUp 0.5s ease;
}

/* Breadcrumbs */
.ass-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0;
    font-size: 0.9rem;
    color: #718096;
}

.ass-breadcrumbs a {
    color: #4c7449;
    text-decoration: none;
}

.ass-breadcrumbs a:hover {
    text-decoration: underline;
}

.ass-breadcrumb-separator {
    color: #cbd5e0;
}

/* Mensaje vacío */
.ass-mensaje-vacio {
    text-align: center;
    padding: 3rem 2rem;
    background: #f7fafc;
    border-radius: 12px;
    color: #718096;
}

.ass-mensaje-vacio-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

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

@media (max-width: 1024px) {
    .ass-eventos-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 1.25rem;
    }
}

@media (max-width: 480px) {
    .ass-eventos-grid {
        grid-template-columns: 1fr;
    }
    
    .ass-evento-acciones {
        flex-direction: column;
    }
    
    .ass-evento-acciones .ass-btn {
        width: 100%;
    }
}

/* ===============================================
   TABLAS DE GESTIÓN - SCROLL HORIZONTAL MÓVIL
   =============================================== */

/* Contenedor con scroll para tablas de gestión */
.ass-eventos-tabla-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1rem 0;
}

/* Estilos base para tablas de gestión */
.ass-eventos-tabla {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    min-width: 600px; /* Ancho mínimo para forzar scroll */
}

.ass-eventos-tabla thead {
    background: linear-gradient(135deg, #4c7449 0%, #5d8a59 100%);
}

.ass-eventos-tabla thead th {
    color: white;
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}

.ass-eventos-tabla tbody td {
    padding: 1rem;
    border-bottom: 1px solid #e0e0e0;
}

.ass-eventos-tabla tbody tr:hover {
    background: #f8f9fa;
}

/* Responsive móvil para tablas */
@media (max-width: 768px) {
    .ass-eventos-tabla-container {
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    /* Indicador visual de scroll */
    .ass-eventos-tabla-container::after {
        content: '← Desliza para ver más →';
        display: block;
        text-align: center;
        padding: 0.75rem;
        background: #f7fafc;
        color: #6c757d;
        font-size: 0.8125rem;
        font-style: italic;
        border-top: 1px solid #e0e0e0;
    }
    
    .ass-eventos-tabla thead th {
        padding: 0.75rem;
        font-size: 0.875rem;
    }
    
    .ass-eventos-tabla tbody td {
        padding: 0.75rem;
        font-size: 0.875rem;
    }
}
/* ===============================================
   CSS ADICIONAL v8.7.1
   Modal "Ver más" y Formulario de Edición
   ===============================================
   
   Añadir este CSS al final de ass-eventos.css
   =============================================== */

/* ===============================================
   MODAL "VER MÁS" - TAMAÑO GRANDE
   =============================================== */

.ass-modal-large {
    max-width: 800px !important;
}

/* Builder de campos dentro del modal de edición */
.ass-modal-lg .ass-campo-builder-listas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.ass-modal-lg .ass-campos-disponibles,
.ass-modal-lg .ass-campos-asignados {
    max-height: 350px;
    overflow-y: auto;
}

.ass-modal-lg .ass-config-input {
    width: 80px;
    padding: 0.2rem 0.4rem;
    font-size: 0.8rem;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
}

.ass-modal-lg .ass-campo-asignado {
    flex-wrap: wrap;
}

.ass-evento-detalle-completo {
    padding: 0;
}

/* Grid de detalles del evento */
.ass-evento-detalle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.ass-detalle-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.ass-detalle-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.ass-detalle-item strong {
    display: block;
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ass-detalle-item p {
    margin: 0;
    font-size: 1rem;
    color: #2c3e50;
    font-weight: 600;
}

/* Secciones de descripción */
.ass-evento-descripcion-completa,
.ass-evento-requisitos,
.ass-evento-material {
    margin-top: 2rem;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.ass-evento-descripcion-completa h3,
.ass-evento-requisitos h3,
.ass-evento-material h3 {
    margin: 0 0 1rem 0;
    font-size: 1.125rem;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ass-descripcion-texto,
.ass-requisitos-texto,
.ass-material-texto {
    line-height: 1.6;
    color: #495057;
}

/* ===============================================
   FORMULARIO DE EDICIÓN
   =============================================== */

.ass-formulario-edicion-container {
    background: white;
    border: 2px solid #4c7449;
    border-radius: 12px;
    margin-bottom: 2rem;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(76, 116, 73, 0.15);
}

.ass-formulario-edicion-header {
    background: linear-gradient(135deg, #4c7449 0%, #5d8a59 100%);
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ass-formulario-edicion-header h3 {
    margin: 0;
    color: white;
    font-size: 1.25rem;
    font-weight: 600;
}

.ass-formulario-edicion-header .ass-btn {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.ass-formulario-edicion-header .ass-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.ass-formulario-edicion {
    padding: 2rem;
}

/* Filas del formulario */
.ass-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.ass-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ass-form-group label {
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.95rem;
}

.ass-form-group .ass-form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.2s;
    font-family: inherit;
}

.ass-form-group .ass-form-control:focus {
    outline: none;
    border-color: #4c7449;
    box-shadow: 0 0 0 3px rgba(76, 116, 73, 0.1);
}

.ass-form-group textarea.ass-form-control {
    resize: vertical;
    min-height: 100px;
}

/* Footer del formulario */
.ass-formulario-edicion-footer {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 2px solid #f0f0f0;
    margin-top: 1.5rem;
}

/* ===============================================
   RESPONSIVE PARA NUEVOS ELEMENTOS
   =============================================== */

@media (max-width: 768px) {
    /* Modal grande en móvil */
    .ass-modal-large {
        max-width: 95% !important;
    }
    
    /* Grid de detalles más compacto */
    .ass-evento-detalle-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .ass-detalle-item {
        padding: 0.75rem;
    }
    
    /* Formulario de edición en móvil */
    .ass-formulario-edicion-header {
        padding: 1rem;
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .ass-formulario-edicion-header .ass-btn {
        width: 100%;
    }
    
    .ass-formulario-edicion {
        padding: 1rem;
    }
    
    .ass-form-row {
        flex-direction: column;
        gap: 1rem;
    }

    .ass-formulario-edicion-footer {
        flex-direction: column-reverse;
    }
    
    .ass-formulario-edicion-footer .ass-btn {
        width: 100%;
    }
}

/* ========================================
   BOTÓN TOGGLE CREAR EVENTO (DASHBOARD)
   ======================================== */

#toggle-crear-evento {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 20px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    border: 2px solid var(--ass-verde, #4a7c59) !important;
    background: white !important;
    color: var(--ass-verde, #4a7c59) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

#toggle-crear-evento:hover {
    background: var(--ass-verde, #4a7c59) !important;
    color: white !important;
}

#toggle-crear-evento .show-text,
#toggle-crear-evento .hide-text {
    display: inline-block !important;
}

/* ========================================
   FORMULARIO INLINE CREAR EVENTO
   ======================================== */

#formulario-crear-evento {
    margin-top: 1.5rem !important;
    padding: 2rem !important;
    background: white !important;
    border-radius: 12px !important;
    border: 2px solid #e0e0e0 !important;
}

/* Ajustes para el formulario dentro del dashboard */
.ass-dashboard-eventos-crear .ass-crear-evento-container {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.ass-dashboard-eventos-crear .ass-form-header {
    margin-bottom: 1.5rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 2px solid #e0e0e0 !important;
}

.ass-dashboard-eventos-crear .ass-form-header h2 {
    margin: 0 0 0.5rem 0 !important;
    font-size: 1.5rem !important;
    color: var(--ass-verde, #4a7c59) !important;
}

.ass-dashboard-eventos-crear .ass-form-header p {
    margin: 0 !important;
    color: #666 !important;
    font-size: 14px !important;
}

/* ========================================
   FORMULARIO EDICIÓN INLINE
   ======================================== */

.ass-evento-form-container {
    margin-top: 1rem !important;
    padding: 1.5rem !important;
    background: #f8f9fa !important;
    border-radius: 8px !important;
    border: 2px solid #e0e0e0 !important;
}

.ass-form-editar-evento {
    display: grid !important;
    gap: 1rem !important;
}

.ass-form-editar-evento .ass-form-group {
    margin-bottom: 0 !important;
}

.ass-form-editar-evento label {
    display: block !important;
    margin-bottom: 0.5rem !important;
    font-weight: 600 !important;
    color: #333 !important;
    font-size: 14px !important;
}

.ass-form-editar-evento input[type="text"],
.ass-form-editar-evento input[type="number"],
.ass-form-editar-evento input[type="datetime-local"],
.ass-form-editar-evento select,
.ass-form-editar-evento textarea {
    width: 100% !important;
    padding: 10px 12px !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    transition: border-color 0.3s ease !important;
}

.ass-form-editar-evento input:focus,
.ass-form-editar-evento select:focus,
.ass-form-editar-evento textarea:focus {
    outline: none !important;
    border-color: var(--ass-verde, #4a7c59) !important;
}

.ass-form-editar-evento textarea {
    min-height: 100px !important;
    resize: vertical !important;
}

/* Botones del formulario de edición */
.ass-evento-form-actions {
    display: flex !important;
    gap: 1rem !important;
    margin-top: 1.5rem !important;
    padding-top: 1rem !important;
    border-top: 2px solid #ddd !important;
}

.ass-btn-guardar-edicion,
.ass-btn-cancelar-edicion {
    flex: 1 !important;
    padding: 12px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.ass-btn-guardar-edicion {
    background: var(--ass-verde, #4a7c59) !important;
    color: white !important;
}

.ass-btn-guardar-edicion:hover {
    background: #3d6849 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(74, 124, 89, 0.3) !important;
}

.ass-btn-cancelar-edicion {
    background: #6c757d !important;
    color: white !important;
}

.ass-btn-cancelar-edicion:hover {
    background: #5a6268 !important;
}

.ass-btn-guardar-edicion:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* ========================================
   LOADING STATE
   ======================================== */

.ass-loading {
    text-align: center !important;
    padding: 2rem !important;
    color: #666 !important;
    font-size: 16px !important;
}

/* ========================================
   MENSAJES DE ERROR/SUCCESS EN FORMULARIOS
   ======================================== */

.ass-form-message {
    padding: 12px 16px !important;
    margin-bottom: 1rem !important;
    border-radius: 8px !important;
    font-size: 14px !important;
}

.ass-form-message.error {
    background: #fee !important;
    border: 1px solid #fcc !important;
    color: #c33 !important;
}

.ass-form-message.success {
    background: #efe !important;
    border: 1px solid #cfc !important;
    color: #3c3 !important;
}

/* ========================================
   FIX PARA OVERFLOW EN TABLAS (DASHBOARD)
   ======================================== */

/* Asegurar que el formulario inline en tablas no rompa el layout */
.ass-evento-form-row td {
    padding: 0 !important;
}

.ass-evento-form-row .ass-evento-form-container {
    width: 100% !important;
    overflow-x: auto !important;
}

@media (max-width: 767px) {
    .ass-evento-form-row {
        display: block !important;
        width: 100% !important;
    }
    
    .ass-evento-form-row td {
        display: block !important;
        width: 100% !important;
    }
}
/* ========================================
   MODALES - MEJORA GENERAL
   ======================================== */

.ass-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem !important;
}

.ass-modal-container {
    background: white !important;
    border-radius: 12px !important;
    max-width: 90% !important;
    width: 600px !important;
    max-height: 90vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Override para modal de edición de evento (builder de campos necesita más espacio) */
.ass-modal-overlay .ass-modal-container.ass-modal-lg {
    width: 95vw !important;
    max-width: 1100px !important;
}

/* Modal de inscripcion mas ancho en desktop */
@media (min-width: 768px) {
    .ass-modal-container {
        width: 750px !important;
    }
    .ass-modal-overlay .ass-modal-container.ass-modal-lg {
        width: 95vw !important;
        max-width: 1100px !important;
    }
}

/* Layout mejorado para formulario de edición en desktop */
@media (min-width: 768px) {
    .ass-modal-lg .ass-modal-body {
        padding: 2rem 2.5rem !important;
    }
    /* Form rows con flex-basis más grande en modal amplio */
    .ass-modal-lg .ass-form-row > .ass-form-group {
        flex: 1 1 200px;
    }
}

/* Secciones del formulario de edición */
.ass-form-section-campos {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(219, 220, 184, 0.15);
    border-radius: 8px;
    border: 1px solid rgba(219, 220, 184, 0.4);
}

.ass-form-section-publico {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(151, 179, 208, 0.08);
    border-radius: 8px;
    border: 1px solid rgba(151, 179, 208, 0.25);
}

.ass-modal-body {
    overflow-y: auto !important;
    padding: 1.5rem !important;
    flex: 1 !important;
}

/* ========================================
   FORMULARIOS GENERALES - MEJORA BASE
   ======================================== */

/* Todos los formularios del plugin */
.ass-evento-form,
.ass-crear-evento-container form,
.ass-formulario-edicion,
#ass-form-crear-evento {
    width: 100% !important;
}

.ass-form-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    margin-bottom: 1rem !important;
}

.ass-form-row > .ass-form-group {
    flex: 1 1 250px;
    min-width: 0;
}

.ass-form-group {
    margin-bottom: 1rem !important;
}

.ass-form-group label {
    display: block !important;
    margin-bottom: 0.5rem !important;
    font-weight: 600 !important;
    color: #333 !important;
    font-size: 14px !important;
}

.ass-form-control,
.ass-evento-form input[type="text"],
.ass-evento-form input[type="number"],
.ass-evento-form input[type="datetime-local"],
.ass-evento-form input[type="date"],
.ass-evento-form input[type="time"],
.ass-evento-form input[type="email"],
.ass-evento-form select,
.ass-evento-form textarea {
    width: 100% !important;
    padding: 10px 12px !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
}

.ass-evento-form textarea {
    min-height: 100px !important;
    resize: vertical !important;
}

/* ========================================
   RESPONSIVE MÓVIL (< 768px)
   ======================================== */

@media (max-width: 767px) {
    
    /* ===== BOTÓN TOGGLE ===== */
    #toggle-crear-evento {
        width: 100% !important;
        justify-content: center !important;
        padding: 14px 20px !important;
        font-size: 15px !important;
        margin-bottom: 1rem !important;
    }
    
    /* ===== CONTAINER PRINCIPAL ===== */
    .ass-dashboard-eventos-crear {
        padding: 1rem !important;
        margin: 0 -1rem 1rem -1rem !important; /* Compensar padding del contenedor padre */
        border-radius: 0 !important; /* Sin bordes en móvil para aprovechar espacio */
    }
    
    /* ===== FORMULARIO CREAR EVENTO ===== */
    #formulario-crear-evento {
        padding: 1rem !important;
        margin: 1rem 0 0 0 !important;
        border-radius: 8px !important;
        /* CRÍTICO: Ancho completo en móvil */
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* ===== HEADER DEL FORMULARIO ===== */
    .ass-dashboard-eventos-crear .ass-form-header h2,
    .ass-form-header h2 {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
    }
    
    .ass-dashboard-eventos-crear .ass-form-header p,
    .ass-form-header p {
        font-size: 13px !important;
    }
    
    /* ===== FILAS DE FORMULARIO ===== */
    .ass-form-row {
        flex-direction: column !important; /* Una sola columna en móvil */
        gap: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }

    /* ===== GRUPOS DE FORMULARIO ===== */
    .ass-form-group,
    .ass-form-group.ass-form-half,
    .ass-form-group.ass-form-third,
    .ass-form-group.ass-form-quarter {
        flex: 0 0 100% !important;
        width: 100% !important;
    }
    
    .ass-form-group label {
        font-size: 14px !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* ===== INPUTS, SELECTS, TEXTAREAS ===== */
    /* CRÍTICO: Inputs más grandes para móvil (mejor UX táctil) */
    .ass-form-control,
    .ass-evento-form input[type="text"],
    .ass-evento-form input[type="number"],
    .ass-evento-form input[type="datetime-local"],
    .ass-evento-form input[type="date"],
    .ass-evento-form input[type="time"],
    .ass-evento-form input[type="email"],
    .ass-evento-form select,
    .ass-evento-form textarea,
    .ass-form-editar-evento input,
    .ass-form-editar-evento select,
    .ass-form-editar-evento textarea {
        padding: 14px 12px !important; /* Más padding para móvil */
        font-size: 16px !important; /* 16px evita zoom automático en iOS */
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .ass-evento-form textarea,
    .ass-form-editar-evento textarea {
        min-height: 120px !important;
    }
    
    /* ===== FORMULARIO EDICIÓN INLINE ===== */
    .ass-evento-form-container {
        padding: 1rem !important;
        margin: 0.5rem 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .ass-form-editar-evento {
        grid-template-columns: 1fr !important;
    }
    
    /* ===== BOTONES DE ACCIÓN ===== */
    .ass-evento-form-actions,
    .ass-formulario-edicion-footer {
        flex-direction: column !important;
        gap: 0.75rem !important;
        padding-top: 1rem !important;
        margin-top: 1rem !important;
    }
    
    .ass-btn-guardar-edicion,
    .ass-btn-cancelar-edicion,
    .ass-evento-form button[type="submit"],
    .ass-evento-form button[type="button"] {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 15px !important;
    }
    
    /* ===== MODALES EN MÓVIL ===== */
    .ass-modal-overlay {
        padding: 0.5rem !important;
        align-items: flex-start !important; /* Alinear arriba en móvil */
    }
    
    .ass-modal-container {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 95vh !important;
        margin: 0.5rem 0 !important;
        border-radius: 12px !important;
    }
    
    .ass-modal-body {
        padding: 1rem !important;
        max-height: calc(95vh - 140px) !important; /* Espacio para header y footer */
    }
    
    .ass-modal-header {
        padding: 1rem !important;
    }

    .ass-modal-header h2,
    .ass-modal-titulo {
        font-size: 1.25rem !important;
    }

    /* Modal de edición en móvil */
    .ass-modal-container.ass-modal-lg {
        width: 100% !important;
        max-width: 100% !important;
    }

    .ass-modal-lg .ass-campo-builder-listas {
        grid-template-columns: 1fr !important;
    }

    .ass-modal-lg .ass-form-row {
        flex-direction: column !important;
    }
    
    .ass-modal-footer {
        padding: 1rem !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    .ass-modal-footer .ass-btn {
        width: 100% !important;
    }
    
    /* ===== MODAL "VER MÁS" ESPECÍFICO ===== */
    .ass-modal-ver-evento .ass-modal-container {
        width: 100% !important;
    }
    
    .ass-evento-detalle-completo {
        padding: 0 !important;
    }
    
    .ass-detalle-seccion {
        margin-bottom: 1.5rem !important;
    }
    
    .ass-detalle-item {
        padding: 0.75rem 0 !important;
        font-size: 14px !important;
    }
    
    .ass-detalle-label {
        font-size: 13px !important;
        display: block !important;
        margin-bottom: 0.25rem !important;
    }
    
    .ass-detalle-valor {
        font-size: 14px !important;
    }
    
    /* ===== MODAL INSCRIPCIÓN ===== */
    .ass-inscripcion-form {
        width: 100% !important;
    }
    
    .ass-campos-acompanantes {
        padding: 1rem 0 !important;
    }
    
    .ass-checkbox-group {
        padding: 1rem 0 !important;
    }
    
    .ass-checkbox-label {
        font-size: 15px !important;
        padding: 12px !important;
    }
    
    /* ===== INFORMACIÓN DE EVENTO ===== */
    .ass-evento-info {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    .ass-evento-nombre {
        font-size: 1.25rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .ass-evento-detalles {
        gap: 0.75rem !important;
    }
    
    /* ===== PLAZAS INFO ===== */
    .ass-plazas-info {
        padding: 0.75rem !important;
        font-size: 14px !important;
    }
    
    /* ===== HELP TEXT ===== */
    .ass-help-text,
    small.ass-help-text {
        font-size: 12px !important;
    }
    
    /* ===== REQUIRED INDICATOR ===== */
    .ass-required {
        font-size: 14px !important;
    }
}

/* ========================================
   RESPONSIVE TABLET (768px - 1024px)
   ======================================== */

@media (min-width: 768px) and (max-width: 1024px) {

    #formulario-crear-evento {
        padding: 1.5rem !important;
    }

    .ass-form-row > .ass-form-group {
        flex: 1 1 calc(50% - 0.5rem);
    }

    /* Campos con textarea ocupan toda la fila en tablet */
    .ass-form-row > .ass-form-group:has(textarea) {
        flex: 0 0 100%;
    }

    .ass-evento-form-actions {
        flex-direction: row !important;
    }

    .ass-modal-container {
        width: 85% !important;
        max-width: 700px !important;
    }
    .ass-modal-container.ass-modal-lg {
        width: 95vw !important;
        max-width: 1100px !important;
    }
}

/* ========================================
   LOADING STATE
   ======================================== */

.ass-loading {
    text-align: center !important;
    padding: 2rem !important;
    color: #666 !important;
    font-size: 16px !important;
}

@media (max-width: 767px) {
    .ass-loading {
        padding: 1.5rem !important;
        font-size: 14px !important;
    }
}

/* ========================================
   MENSAJES DE ERROR/SUCCESS
   ======================================== */

.ass-form-message,
.ass-notice {
    padding: 12px 16px !important;
    margin-bottom: 1rem !important;
    border-radius: 8px !important;
    font-size: 14px !important;
}

.ass-form-message.error,
.ass-notice.error {
    background: #fee !important;
    border: 1px solid #fcc !important;
    color: #c33 !important;
}

.ass-form-message.success,
.ass-notice.success {
    background: #f0fff4 !important;
    border: 1px solid #c6f6d5 !important;
    color: #22543d !important;
}

.ass-form-message.warning,
.ass-notice.warning {
    background: rgba(242, 184, 140, 0.15) !important;
    border: 1px solid rgba(242, 184, 140, 0.5) !important;
    color: #bb613e !important;
}

@media (max-width: 767px) {
    .ass-form-message,
    .ass-notice {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }
}

/* ===============================================
   EVENTOS PÚBLICOS - INSCRIPCIONES EXTERNAS
   =============================================== */

/* Badge "Abierto al público" en tarjeta de evento */
.ass-badge-publico {
    display: inline-block;
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Badge "Externo" en tabla de gestores */
.ass-badge-externo {
    display: inline-block;
    background: #f2b88c;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Formulario público dentro del modal */
.ass-form-publico .ass-campo-grupo {
    margin-bottom: 1rem;
}

.ass-form-publico .ass-campo-grupo label {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: 500;
    font-size: 0.9rem;
}

/* Selector de campos al crear/editar evento */
.ass-campos-selector {
    margin-top: 0.75rem;
    padding: 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.ass-campos-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.ass-campo-check {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.8rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.ass-campo-check:hover {
    border-color: #01455e;
    background: rgba(151, 179, 208, 0.08);
}

.ass-campo-check input:checked + span {
    color: #01455e;
    font-weight: 600;
}

.ass-campo-check small {
    color: #94a3b8;
    font-size: 0.7rem;
}

/* Portal de inscripción externa */
.ass-portal-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem;
}

.ass-portal-busqueda {
    text-align: center;
}

.ass-portal-busqueda h2 {
    margin-bottom: 0.5rem;
}

.ass-portal-busqueda p {
    color: #64748b;
    margin-bottom: 1.5rem;
}

.ass-portal-busqueda .ass-form-group {
    text-align: left;
    margin-bottom: 1rem;
}

.ass-portal-detalle {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.ass-portal-detalle h3 {
    margin: 0 0 1rem;
    font-size: 1.3rem;
}

.ass-portal-detalle h4 {
    margin: 1rem 0 0.5rem;
    font-size: 1rem;
    color: #475569;
}

.ass-portal-detalle hr {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 1.5rem 0;
}

.ass-portal-loading {
    text-align: center;
    padding: 3rem;
    color: #64748b;
}

/* Gestión de campos dinámicos */
.ass-gestion-campos-container .ass-gestion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.ass-gestion-campos-container .ass-table code {
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.8rem;
}

#ass-form-campo-container {
    margin-top: 1.5rem;
}

#ass-form-campo-container .ass-form-section {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
}

/* Privacidad checkbox */
.ass-form-publico .ass-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.85rem;
    cursor: pointer;
}

.ass-form-publico .ass-checkbox-label input[type="checkbox"] {
    margin-top: 2px;
    min-width: 16px;
}

/* Responsive */
@media (max-width: 768px) {
    .ass-portal-container {
        padding: 1rem;
    }

    .ass-portal-detalle {
        padding: 1.5rem;
    }

    .ass-campos-grid {
        flex-direction: column;
    }

    .ass-campo-check {
        width: 100%;
    }
}

/* ===============================================
   CAMPOS REPETIDORES (COMENSALES)
   =============================================== */

.ass-comensales-container {
    margin-top: 1.25rem;
    padding: 1.25rem;
    background: linear-gradient(135deg, #f0f4f8 0%, #f8fafc 100%);
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.ass-comensales-container h4 {
    margin: 0 0 1rem 0;
    color: #1a365d;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ass-comensales-container h4::before {
    content: '👥';
    font-size: 1.2rem;
}

.ass-comensal-grupo {
    border: 1px solid #cbd5e0;
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.ass-comensal-grupo:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-color: #a0aec0;
}

.ass-comensal-grupo:last-child {
    margin-bottom: 0;
}

.ass-comensal-grupo legend {
    font-weight: 700;
    color: #01455e;
    font-size: 0.95rem;
    padding: 0.15rem 0.75rem;
    background: rgba(151, 179, 208, 0.12);
    border-radius: 6px;
}

.ass-comensal-grupo .ass-form-group {
    margin-bottom: 0.75rem;
}

.ass-comensal-grupo .ass-form-group:last-child {
    margin-bottom: 0;
}

.ass-comensal-grupo .ass-form-group label {
    font-size: 0.88rem;
    font-weight: 500;
    color: #4a5568;
    margin-bottom: 0.3rem;
    display: block;
}

.ass-comensal-grupo .ass-form-control {
    padding: 0.6rem 0.85rem;
    font-size: 0.92rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.ass-comensal-grupo .ass-form-control:focus {
    border-color: #01455e;
    box-shadow: 0 0 0 3px rgba(1, 69, 94, 0.12);
}

.ass-comensal-grupo .ass-radio-group,
.ass-comensal-grupo .ass-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    padding: 0.3rem 0;
}

.ass-comensal-grupo .ass-radio-label,
.ass-comensal-grupo .ass-checkbox-label {
    font-size: 0.88rem;
    font-weight: 400;
}

/* Plantillas rápidas */
.ass-plantillas-rapidas {
    padding: 0.75rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
}

/* ===============================================
   VISTA PÚBLICA DE INSCRIPCIONES
   =============================================== */

.ass-vista-inscripciones-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.ass-vista-inscripciones-container .ass-gestion-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #e2e8f0;
}

.ass-vista-inscripciones-container .ass-gestion-header h2 {
    margin: 0 0 0.35rem 0;
    font-size: 1.6rem;
    color: #1a365d;
}

.ass-vista-inscripciones-container .ass-gestion-header p {
    margin: 0;
    color: #718096;
    font-size: 0.95rem;
}

.ass-vista-inscripciones-container > p strong {
    font-size: 1.05rem;
}

#ass-tabla-inscripciones-publica {
    font-size: 0.85rem;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

#ass-tabla-inscripciones-publica thead {
    background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
}

#ass-tabla-inscripciones-publica th {
    white-space: nowrap;
    font-size: 0.78rem;
    padding: 0.65rem 0.6rem;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: none;
}

#ass-tabla-inscripciones-publica td {
    padding: 0.6rem;
    vertical-align: middle;
    border-bottom: 1px solid #edf2f7;
}

#ass-tabla-inscripciones-publica tbody tr {
    transition: background-color 0.15s ease;
}

#ass-tabla-inscripciones-publica tbody tr:hover {
    background-color: #f7fafc;
}

#ass-tabla-inscripciones-publica tbody tr:nth-child(even) {
    background-color: #fafbfc;
}

#ass-tabla-inscripciones-publica tbody tr:nth-child(even):hover {
    background-color: #f0f4f8;
}

/* ===============================================
   DASHBOARD INSCRIPCIONES - MOBILE FIRST (APP-LIKE)
   =============================================== */

/* Reset container */
.ass-vista-inscripciones-container.ass-vista-dashboard {
    max-width: 900px;
    padding: 0;
    box-sizing: border-box;
    padding-bottom: 80px; /* espacio para barra inferior */
}

/* --- Header sticky: topbar + stats + busqueda --- */
.ass-vista-dashboard .ass-vista-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    padding: 0.25rem 0.5rem 0.3rem;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* Topbar: titulo + fecha en una linea */
.ass-vista-dashboard .ass-vista-topbar {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: 0.2rem;
    overflow: hidden;
}

.ass-vista-dashboard .ass-vista-topbar-titulo {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: #01455e;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
}

.ass-vista-dashboard .ass-vista-topbar-fecha {
    font-size: 0.7rem;
    color: #718096;
    white-space: nowrap;
    flex-shrink: 0;
}

/* --- Stats grid: 4 en linea, ultra compactas --- */
.ass-vista-dashboard .ass-vista-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.25rem;
    margin-bottom: 0.25rem;
}

/* --- Stat cards con colores corporativos --- */
.ass-vista-dashboard .ass-stat-card {
    border: none;
    border-radius: 8px;
    padding: 0.3rem 0.15rem;
    text-align: center;
    box-sizing: border-box;
}

/* Inscritos: beige oliva */
.ass-vista-dashboard .ass-stat-card.ass-stat-inscritos {
    background: #dbdcb8;
}
.ass-vista-dashboard .ass-stat-card.ass-stat-inscritos .ass-stat-number { color: #01455e; }
.ass-vista-dashboard .ass-stat-card.ass-stat-inscritos .ass-stat-label { color: #4c7449; }

/* Pagados: verde bosque */
.ass-vista-dashboard .ass-stat-pagados {
    background: #4c7449;
}
.ass-vista-dashboard .ass-stat-pagados .ass-stat-number { color: #fff; }
.ass-vista-dashboard .ass-stat-pagados .ass-stat-label { color: rgba(255,255,255,0.8); }

/* Pendientes: terracota */
.ass-vista-dashboard .ass-stat-pendientes {
    background: #bb613e;
}
.ass-vista-dashboard .ass-stat-pendientes .ass-stat-number { color: #fff; }
.ass-vista-dashboard .ass-stat-pendientes .ass-stat-label { color: rgba(255,255,255,0.8); }

/* Recaudado: azul petróleo */
.ass-vista-dashboard .ass-stat-card.ass-stat-recaudado {
    background: #01455e;
}
.ass-vista-dashboard .ass-stat-card.ass-stat-recaudado .ass-stat-number { color: #fff; }
.ass-vista-dashboard .ass-stat-card.ass-stat-recaudado .ass-stat-label { color: rgba(255,255,255,0.8); }

.ass-vista-dashboard .ass-stat-number {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
}

.ass-vista-dashboard .ass-stat-label {
    display: block;
    font-size: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 0;
}

/* --- Stat cards como filtros clickables --- */
.ass-vista-dashboard .ass-stat-filter {
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.ass-vista-dashboard .ass-stat-filter:active {
    transform: scale(0.94);
}
.ass-vista-dashboard .ass-stat-filter.active {
    box-shadow: 0 0 0 2.5px #dbdcb8;
    transform: scale(1.03);
}

/* --- Busqueda inline en header --- */
.ass-vista-dashboard .ass-vista-search-inline {
    display: flex;
}

.ass-vista-dashboard .ass-vista-search-inline input[type="text"] {
    flex: 1;
    padding: 0.3rem 0.5rem;
    border: 1px solid #cbd5e0;
    border-radius: 6px;
    font-size: 14px;
    background: #f7fafc;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}

.ass-vista-dashboard .ass-vista-search-inline input[type="text"]:focus {
    background: #fff;
    border-color: #4c7449;
    outline: none;
}

/* ===============================================
   BARRA INFERIOR FIJA - TIPO APP
   =============================================== */
.ass-vista-dashboard .ass-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999999;
    display: flex;
    background: #01455e;
    border-top: 2px solid #dbdcb8;
    box-shadow: 0 -2px 12px rgba(1, 69, 94, 0.25);
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.ass-vista-dashboard .ass-bottom-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 0.15rem 0.5rem;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.6rem;
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    gap: 0.15rem;
    position: relative;
    transition: color 0.2s, background 0.2s;
}

.ass-vista-dashboard .ass-bottom-btn:active {
    background: rgba(255, 255, 255, 0.1);
}

.ass-vista-dashboard .ass-bottom-icon {
    font-size: 1.35rem;
    line-height: 1;
}

.ass-vista-dashboard .ass-bottom-label {
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1;
}

.ass-vista-dashboard .ass-bottom-count {
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1;
    color: #a0aec0;
}

/* Filtro activo en barra inferior */
.ass-vista-dashboard .ass-bottom-btn.ass-filter-btn.active {
    color: #4c7449;
    background: transparent;
    border: none;
}

.ass-vista-dashboard .ass-bottom-btn.ass-filter-btn.active .ass-bottom-count {
    color: #4c7449;
}

.ass-vista-dashboard .ass-bottom-btn.ass-filter-btn.active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 2px;
    background: #4c7449;
    border-radius: 0 0 2px 2px;
}

/* Colores corporativos para botones bottom bar (sobre fondo #01455e) */
.ass-vista-dashboard .ass-bottom-excel {
    color: #dbdcb8;
}

.ass-vista-dashboard .ass-bottom-inicio {
    color: #97b3d0;
}

/* Boton scan QR en barra inferior */
.ass-vista-dashboard .ass-bottom-qr {
    color: #fff;
}

/* Botones Resumen e Inscribir */
.ass-vista-dashboard .ass-bottom-resumen {
    color: #97b3d0;
}

.ass-vista-dashboard .ass-bottom-inscribir {
    color: #f2b88c;
}

.ass-vista-dashboard .ass-bottom-qr .ass-bottom-icon {
    font-size: 1.3rem;
}

/* QR reader dentro del modal */
#ass-qr-reader {
    border-radius: 8px;
    overflow: hidden;
}

#ass-qr-reader video {
    border-radius: 8px;
}

#ass-qr-reader__dashboard_section_swaplink {
    color: #4c7449 !important;
    font-size: 0.85rem !important;
}

/* --- Tarjetas de inscripcion --- */
.ass-vista-dashboard .ass-vista-cards {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.4rem 0.5rem;
}

.ass-vista-dashboard .ass-inscripcion-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.ass-vista-dashboard .ass-inscripcion-card.pagado {
    border-left: 4px solid #4c7449;
}

.ass-vista-dashboard .ass-inscripcion-card.no-pagado {
    border-left: 4px solid #bb613e;
}

.ass-vista-dashboard .ass-inscripcion-card.oculta {
    display: none !important;
}

/* Card main row */
.ass-vista-dashboard .ass-card-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.5rem;
    gap: 0.4rem;
}

.ass-vista-dashboard .ass-card-left {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1;
    min-width: 0;
}

.ass-vista-dashboard .ass-card-numero {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #01455e;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
    flex-shrink: 0;
}

.ass-vista-dashboard .ass-card-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ass-vista-dashboard .ass-card-nombre {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a202c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ass-vista-dashboard .ass-card-contacto {
    font-size: 0.7rem;
    color: #718096;
}

.ass-vista-dashboard .ass-card-contacto a {
    color: #01455e;
    text-decoration: none;
}

.ass-vista-dashboard .ass-badge-estado {
    display: inline-block;
    font-size: 0.58rem;
    font-weight: 600;
    padding: 1px 4px;
    border-radius: 4px;
    margin-top: 0.05rem;
    width: fit-content;
}

.ass-vista-dashboard .ass-badge-confirmado {
    background: #4c7449;
    color: #fff;
}

.ass-vista-dashboard .ass-badge-espera {
    background: #97b3d0;
    color: #01455e;
}

/* Card right: importe + toggle */
.ass-vista-dashboard .ass-card-right {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.ass-vista-dashboard .ass-card-importe {
    font-size: 0.85rem;
    font-weight: 700;
    color: #2d3748;
    white-space: nowrap;
}

/* --- Toggle switch de pago --- */
/* --- Toggle voluntario por item del repetidor --- */
.ass-vista-dashboard .ass-detail-grupo-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    margin-bottom: 0.15rem;
}

.ass-vista-dashboard .ass-voluntario-item-toggle {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}

.ass-vista-dashboard .ass-voluntario-item-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.ass-vista-dashboard .ass-voluntario-slider {
    position: relative;
    width: 30px;
    height: 16px;
    background-color: #d1d5db;
    border-radius: 8px;
    transition: background-color 0.3s;
}

.ass-vista-dashboard .ass-voluntario-slider::before {
    content: '';
    position: absolute;
    height: 12px;
    width: 12px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.ass-vista-dashboard .ass-voluntario-item-toggle input:checked + .ass-voluntario-slider {
    background-color: #f2b88c;
}

.ass-vista-dashboard .ass-voluntario-item-toggle input:checked + .ass-voluntario-slider::before {
    transform: translateX(14px);
}

.ass-vista-dashboard .ass-voluntario-label {
    font-size: 0.6rem;
    color: #9ca3af;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ass-vista-dashboard .ass-voluntario-item-toggle input:checked ~ .ass-voluntario-label {
    color: #bb613e;
}

.ass-vista-dashboard .ass-voluntario-item-toggle.saving {
    opacity: 0.5;
    pointer-events: none;
}

/* --- Tabla resumen modal --- */
.ass-tabla-resumen {
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.ass-resumen-fila {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid #e2e8f0;
    gap: 8px;
}
.ass-resumen-fila.ass-resumen-grupo {
    background: #4c7449;
    color: #fff;
    font-weight: 700;
    border-left: none;
    margin-top: 6px;
    border-radius: 4px;
}
.ass-resumen-fila.ass-resumen-grupo .ass-resumen-valor { color: #dbdcb8; }
.ass-resumen-fila.ass-resumen-economico {
    background: #01455e;
    color: #fff;
    font-weight: 700;
    border-left: none;
    margin-top: 6px;
    border-radius: 4px;
}
.ass-resumen-fila.ass-resumen-economico .ass-resumen-valor { color: #97b3d0; }
.ass-resumen-fila.ass-resumen-desglose {
    padding-left: 28px;
    font-size: 0.9rem;
    color: #4a5568;
}
.ass-resumen-label {
    flex: 1;
    min-width: 0;
}
.ass-resumen-valor {
    font-weight: 600;
    min-width: 40px;
    text-align: right;
    white-space: nowrap;
}

/* --- Pago parcial indicator --- */
.ass-card-pago-parcial {
    display: block;
    font-size: 0.65rem;
    color: #bb613e;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-align: right;
}

/* Item marcado como voluntario */
.ass-vista-dashboard .ass-detail-grupo-item.ass-voluntario-activo {
    background: rgba(242, 184, 140, 0.15);
    border-left: 3px solid #f2b88c;
    padding-left: 0.4rem;
}

.ass-vista-dashboard .ass-pago-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
    min-width: 44px;
}

.ass-vista-dashboard .ass-pago-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.ass-vista-dashboard .ass-pago-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #bb613e;
    border-radius: 24px;
    transition: background-color 0.3s;
}

.ass-vista-dashboard .ass-pago-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.ass-vista-dashboard .ass-pago-toggle input:checked + .ass-pago-slider {
    background-color: #4c7449;
}

.ass-vista-dashboard .ass-pago-toggle input:checked + .ass-pago-slider::before {
    transform: translateX(20px);
}

.ass-vista-dashboard .ass-pago-toggle.saving {
    opacity: 0.5;
    pointer-events: none;
}

/* --- Card detalles expandibles --- */
.ass-vista-dashboard .ass-card-details {
    padding: 0.5rem 0.6rem 0.6rem;
    border-top: 1px solid rgba(219, 220, 184, 0.5);
    background: rgba(219, 220, 184, 0.2);
}

.ass-vista-dashboard .ass-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 0;
    border-bottom: 1px solid #f0f2f5;
    font-size: 0.78rem;
    gap: 0.5rem;
}

.ass-vista-dashboard .ass-detail-row a {
    color: #01455e;
    text-decoration: none;
    word-break: break-all;
}

.ass-vista-dashboard .ass-detail-label {
    color: #718096;
    font-weight: 500;
    flex-shrink: 0;
}

.ass-vista-dashboard .ass-detail-value {
    color: #2d3748;
    font-weight: 600;
    text-align: right;
}

/* Desglose de total */
.ass-vista-dashboard .ass-detail-desglose {
    margin-top: 0.3rem;
    padding-top: 0.3rem;
    border-top: 1px dashed #cbd5e0;
}

.ass-vista-dashboard .ass-detail-desglose .ass-detail-row {
    font-size: 0.75rem;
    padding: 0.2rem 0;
}

.ass-vista-dashboard .ass-detail-descuento .ass-detail-label {
    color: #bb613e;
}

.ass-vista-dashboard .ass-detail-total {
    border-top: 1px solid #cbd5e0;
    border-bottom: none;
    padding-top: 0.3rem;
    margin-top: 0.15rem;
    font-size: 0.85rem;
}

.ass-vista-dashboard .ass-detail-grupo {
    margin-top: 0.5rem;
}

.ass-vista-dashboard .ass-detail-grupo-titulo {
    font-size: 0.78rem;
    color: #4c7449;
    margin: 0 0 0.3rem;
    font-weight: 600;
}

.ass-vista-dashboard .ass-detail-grupo-item {
    background: #fff;
    border: 1px solid #e6edea;
    border-radius: 6px;
    padding: 0.4rem 0.5rem;
    margin-bottom: 0.3rem;
    font-size: 0.75rem;
    line-height: 1.5;
}

.ass-vista-dashboard .ass-detail-grupo-item strong:first-child {
    display: block;
    color: #4c7449;
    margin-bottom: 0.1rem;
}

.ass-vista-dashboard .ass-detail-grupo-campo {
    display: inline-block;
    margin-right: 0.6rem;
    color: #4a5568;
}

/* Boton expandir */
.ass-vista-dashboard .ass-card-expand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    width: 100%;
    padding: 0.35rem;
    border: none;
    border-top: 1px solid rgba(219, 220, 184, 0.4);
    background: #dbdcb8;
    color: #01455e;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.ass-vista-dashboard .ass-card-expand:hover,
.ass-vista-dashboard .ass-card-expand:active {
    background: #cdd0a0;
}

.ass-vista-dashboard .ass-card-expand[aria-expanded="true"] .ass-expand-icon {
    transform: rotate(180deg);
}

.ass-vista-dashboard .ass-expand-icon {
    transition: transform 0.3s;
    font-size: 0.55rem;
}

/* --- RESPONSIVE --- */

/* Telefonos estrechos */
@media (max-width: 400px) {
    .ass-vista-dashboard .ass-stat-number {
        font-size: 0.85rem;
    }

    .ass-vista-dashboard .ass-stat-label {
        font-size: 0.45rem;
    }

    .ass-vista-dashboard .ass-card-importe {
        font-size: 0.78rem;
    }

    .ass-vista-dashboard .ass-card-nombre {
        font-size: 0.8rem;
    }

    .ass-vista-dashboard .ass-vista-topbar-titulo {
        font-size: 0.82rem;
    }

    .ass-vista-dashboard .ass-bottom-icon {
        font-size: 1.1rem;
    }

    .ass-vista-dashboard .ass-bottom-label {
        font-size: 0.55rem;
    }

    .ass-vista-dashboard .ass-bottom-btn {
        padding: 0.45rem 0.1rem 0.35rem;
    }
}

/* Tablet+ */
@media (min-width: 768px) {
    .ass-vista-inscripciones-container.ass-vista-dashboard {
        max-width: 900px;
        padding: 0 1.5rem;
        padding-bottom: 70px;
    }

    .ass-vista-dashboard .ass-vista-header {
        padding: 0.4rem 0 0.35rem;
    }

    .ass-vista-dashboard .ass-vista-topbar-titulo {
        font-size: 1.15rem;
    }

    .ass-vista-dashboard .ass-vista-topbar-fecha {
        font-size: 0.85rem;
    }

    .ass-vista-dashboard .ass-vista-stats {
        gap: 0.5rem;
    }

    .ass-vista-dashboard .ass-stat-number {
        font-size: 1.3rem;
    }

    .ass-vista-dashboard .ass-stat-card {
        padding: 0.4rem 0.3rem;
        border-radius: 8px;
    }

    .ass-vista-dashboard .ass-stat-label {
        font-size: 0.6rem;
    }

    .ass-vista-dashboard .ass-card-main {
        padding: 0.7rem 0.8rem;
        gap: 0.6rem;
    }

    .ass-vista-dashboard .ass-card-numero {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .ass-vista-dashboard .ass-card-nombre {
        font-size: 0.95rem;
    }

    .ass-vista-dashboard .ass-vista-cards {
        gap: 0.5rem;
        padding: 0.5rem 0;
    }

    /* Barra inferior mas grande en tablet */
    .ass-vista-dashboard .ass-bottom-bar {
        max-width: 900px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 12px 12px 0 0;
    }

    .ass-vista-dashboard .ass-bottom-btn {
        padding: 0.4rem 0.2rem 0.3rem;
    }

    .ass-vista-dashboard .ass-bottom-icon {
        font-size: 1.2rem;
    }

    .ass-vista-dashboard .ass-bottom-label {
        font-size: 0.65rem;
    }

    .ass-vista-dashboard .ass-bottom-count {
        font-size: 0.55rem;
    }
}

/* Desktop: listado tipo tabla, una fila por inscripcion */
@media (min-width: 1025px) {
    .ass-vista-inscripciones-container.ass-vista-dashboard {
        max-width: 1100px;
        padding-bottom: 80px;
    }

    .ass-vista-dashboard .ass-vista-cards {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .ass-vista-dashboard .ass-inscripcion-card {
        border-radius: 4px;
        box-shadow: none;
        border: 1px solid #edf2f7;
    }

    .ass-vista-dashboard .ass-inscripcion-card:hover {
        background: #f7fafc;
        border-color: #cbd5e0;
    }

    /* Card como fila horizontal compacta */
    .ass-vista-dashboard .ass-card-main {
        padding: 0.45rem 0.8rem;
        gap: 1rem;
    }

    .ass-vista-dashboard .ass-card-info {
        flex-direction: row;
        align-items: center;
        gap: 0.6rem;
    }

    .ass-vista-dashboard .ass-card-nombre {
        font-size: 0.9rem;
    }

    .ass-vista-dashboard .ass-card-contacto {
        font-size: 0.75rem;
    }

    .ass-vista-dashboard .ass-badge-estado {
        margin-top: 0;
    }

    .ass-vista-dashboard .ass-card-importe {
        font-size: 0.9rem;
    }

    /* Stats mas grandes en desktop */
    .ass-vista-dashboard .ass-stat-number {
        font-size: 1.5rem;
    }

    .ass-vista-dashboard .ass-stat-card {
        padding: 0.6rem 0.5rem;
    }

    .ass-vista-dashboard .ass-stat-label {
        font-size: 0.7rem;
    }

    /* Barra inferior centrada y compacta */
    .ass-vista-dashboard .ass-bottom-bar {
        max-width: 600px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 12px 12px 0 0;
    }

    .ass-vista-dashboard .ass-bottom-btn {
        padding: 0.5rem 0.3rem 0.4rem;
    }

    .ass-vista-dashboard .ass-bottom-icon {
        font-size: 1.3rem;
    }

    .ass-vista-dashboard .ass-bottom-label {
        font-size: 0.7rem;
    }

    /* Busqueda mas ancha */
    .ass-vista-dashboard .ass-vista-busqueda input {
        font-size: 0.9rem;
        padding: 0.5rem 0.8rem;
    }
}

/* --- Botones accion en card (editar/cancelar) --- */
.ass-vista-dashboard .ass-card-actions {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.6rem;
    padding-top: 0.5rem;
    border-top: 1px solid #edf2f7;
}

.ass-vista-dashboard .ass-btn-editar-inscripcion {
    flex: 1;
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
    border: 1px solid #4c7449;
    color: #4c7449;
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.ass-vista-dashboard .ass-btn-editar-inscripcion:active {
    background: #f0f7f0;
}

.ass-vista-dashboard .ass-btn-cancelar-inscripcion {
    flex: 1;
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
    border: 1px solid #e53e3e;
    color: #e53e3e;
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.ass-vista-dashboard .ass-btn-cancelar-inscripcion:active {
    background: #fff5f5;
}

/* --- Modal de edicion (mobile-first, full screen) --- */
.ass-dashboard-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.ass-dashboard-modal-overlay.visible {
    opacity: 1;
}

.ass-dashboard-modal {
    background: #fff;
    width: 100%;
    max-height: 95vh;
    border-radius: 16px 16px 0 0;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.3s;
}

.ass-dashboard-modal-overlay.visible .ass-dashboard-modal {
    transform: translateY(0);
}

.ass-dashboard-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: none;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    background: #01455e;
    border-radius: 16px 16px 0 0;
    z-index: 1;
}

.ass-dashboard-modal-header h3 {
    margin: 0;
    font-size: 1rem;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.ass-modal-cerrar {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    font-size: 1.2rem;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.ass-dashboard-modal-body {
    padding: 0.75rem;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}

/* Formulario dentro del modal */
.ass-dashboard-modal-body .ass-inscripcion-form .ass-form-group,
.ass-dashboard-modal-body .ass-inscripcion-form .ass-campo-grupo {
    margin-bottom: 0.75rem;
}

.ass-dashboard-modal-body .ass-inscripcion-form label {
    display: block;
    font-size: 0.82rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.25rem;
}

.ass-dashboard-modal-body .ass-inscripcion-form .ass-form-control {
    width: 100%;
    box-sizing: border-box;
    padding: 0.45rem 0.6rem;
    border: 1px solid #cbd5e0;
    border-radius: 6px;
    font-size: 16px;
    -webkit-appearance: none;
}

.ass-dashboard-modal-body .ass-comensal-grupo {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.6rem;
    margin-bottom: 0.5rem;
}

.ass-dashboard-modal-body .ass-comensal-grupo legend {
    font-size: 0.82rem;
    font-weight: 600;
    color: #4c7449;
    padding: 0 0.3rem;
}

/* Botones del formulario */
.ass-dashboard-form-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e2e8f0;
    position: sticky;
    bottom: 0;
    background: #fff;
    padding-bottom: 0.5rem;
}

.ass-dashboard-form-actions .ass-btn {
    flex: 1;
    padding: 0.6rem;
    font-size: 0.85rem;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    font-weight: 500;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.ass-dashboard-form-actions .ass-btn-primary {
    background: #4c7449;
    color: #fff;
    border: none;
}

.ass-dashboard-form-actions .ass-btn-outline {
    background: #fff;
    color: #bb613e;
    border: 1px solid #bb613e;
}

/* Tablet+: modal centrado */
@media (min-width: 768px) {
    .ass-dashboard-modal-overlay {
        align-items: center;
    }

    .ass-dashboard-modal {
        max-width: 600px;
        max-height: 85vh;
        border-radius: 12px;
        transform: scale(0.95);
    }

    .ass-dashboard-modal-overlay.visible .ass-dashboard-modal {
        transform: scale(1);
    }

    .ass-dashboard-modal-header {
        border-radius: 12px 12px 0 0;
    }

    .ass-dashboard-modal-body {
        padding: 1rem 1.25rem;
    }
}

/* ===============================================
   PORTAL EDICIÓN
   =============================================== */

.ass-portal-detalle .ass-inscripcion-form {
    margin-top: 1.25rem;
}

.ass-portal-detalle .ass-inscripcion-form .ass-form-group {
    margin-bottom: 1rem;
}

.ass-portal-detalle .ass-inscripcion-form .ass-form-group label {
    font-weight: 500;
    font-size: 0.9rem;
    color: #374151;
    margin-bottom: 0.35rem;
    display: block;
}

.ass-portal-detalle .ass-inscripcion-form .ass-form-control {
    width: 100%;
    box-sizing: border-box;
}

/* Botones de acción del formulario de edición */
.ass-portal-edit-actions {
    margin-top: 1.5rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Datos de inscripción en vista lectura del portal */
.ass-portal-detalle .ass-evento-detalles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 0.75rem 0;
    color: #4a5568;
}

.ass-portal-detalle .ass-evento-detalles p {
    margin: 0;
    font-size: 0.92rem;
}

/* Comensales en vista lectura del portal */
.ass-portal-comensal-item {
    margin-left: 0;
    margin-bottom: 0.75rem;
    padding: 0.85rem 1rem;
    background: linear-gradient(135deg, rgba(219, 220, 184, 0.1) 0%, rgba(219, 220, 184, 0.2) 100%);
    border-radius: 8px;
    border-left: 3px solid #01455e;
    font-size: 0.9rem;
    line-height: 1.5;
}

.ass-portal-comensal-item strong {
    color: #01455e;
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.88rem;
}

.ass-portal-comensal-item .ass-comensal-campos {
    color: #4a5568;
}

.ass-portal-comensal-item .ass-comensal-campos span {
    display: inline-block;
    margin-right: 0.75rem;
}

.ass-portal-comensal-item .ass-comensal-campos span::after {
    content: '|';
    margin-left: 0.75rem;
    color: #cbd5e0;
}

.ass-portal-comensal-item .ass-comensal-campos span:last-child::after {
    content: '';
}

/* ===============================================
   PORTAL: EXTRAS Y DATOS ADICIONALES
   =============================================== */

.ass-portal-extras {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #edf2f7;
}

.ass-portal-extras p {
    margin: 0.3rem 0;
    font-size: 0.92rem;
    color: #374151;
}

.ass-portal-extras p strong {
    color: #1a365d;
}

/* ===============================================
   DASHBOARD: SECCIÓN GESTIÓN DE CAMPOS
   =============================================== */

.ass-dashboard-campos-gestion {
    border: 1px solid rgba(151, 179, 208, 0.3);
}

.ass-dashboard-campos-gestion #toggle-gestion-campos {
    background: rgba(151, 179, 208, 0.1);
    color: #01455e;
    border: 1px solid rgba(151, 179, 208, 0.4);
    border-radius: 6px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

.ass-dashboard-campos-gestion #toggle-gestion-campos:hover {
    background: rgba(151, 179, 208, 0.2);
    border-color: rgba(151, 179, 208, 0.5);
}

#seccion-gestion-campos {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

/* Gestión de campos dentro del dashboard: tabla compacta */
#seccion-gestion-campos .ass-gestion-campos-container {
    padding: 0;
}

#seccion-gestion-campos .ass-gestion-campos-container h2 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

/* Badge repetidor en tabla de campos y selector */
.ass-campo-repetidor-badge {
    display: inline-block;
    background: linear-gradient(135deg, #97b3d0 0%, #01455e 100%);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-left: 0.25rem;
    vertical-align: middle;
}

/* Badge trigger en selector de campos */
.ass-campo-trigger-badge {
    display: inline-block;
    background: linear-gradient(135deg, #f2b88c 0%, #bb613e 100%);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
    letter-spacing: 0.3px;
    margin-left: 0.25rem;
    vertical-align: middle;
}

/* ===============================================
   DASHBOARD: BOTONES EXCEL Y ENLACE EN TABLA
   =============================================== */

.ass-table-actions .ass-btn-outline[title*="Excel"],
.ass-table-actions .ass-btn-outline[title*="Exportar"] {
    color: #4c7449;
    border-color: rgba(76, 116, 73, 0.2);
    background: rgba(76, 116, 73, 0.06);
}

.ass-table-actions .ass-btn-outline[title*="Excel"]:hover,
.ass-table-actions .ass-btn-outline[title*="Exportar"]:hover {
    background: rgba(76, 116, 73, 0.15);
    border-color: rgba(76, 116, 73, 0.3);
}

.ass-table-actions .ass-generar-enlace-publico {
    color: #01455e;
    border-color: rgba(151, 179, 208, 0.4);
    background: rgba(151, 179, 208, 0.1);
}

.ass-table-actions .ass-generar-enlace-publico:hover {
    background: rgba(151, 179, 208, 0.25);
    border-color: rgba(151, 179, 208, 0.5);
}

/* ===============================================
   RESPONSIVE PARA NUEVOS COMPONENTES
   =============================================== */

@media (max-width: 768px) {
    .ass-comensales-container {
        padding: 0.75rem;
        margin-top: 1rem;
    }

    .ass-comensal-grupo {
        padding: 0.85rem;
    }

    .ass-comensal-grupo legend {
        font-size: 0.85rem;
        padding: 0.1rem 0.5rem;
    }

    .ass-comensal-grupo .ass-form-control {
        padding: 0.5rem 0.7rem;
        font-size: 0.88rem;
    }

    .ass-vista-inscripciones-container {
        padding: 1rem 0.5rem;
    }

    .ass-vista-inscripciones-container .ass-gestion-header {
        flex-direction: column;
        align-items: stretch;
    }

    .ass-vista-inscripciones-container .ass-gestion-header h2 {
        font-size: 1.3rem;
    }

    #ass-tabla-inscripciones-publica {
        font-size: 0.72rem;
    }

    #ass-tabla-inscripciones-publica th,
    #ass-tabla-inscripciones-publica td {
        padding: 0.35rem 0.3rem;
    }

    #ass-tabla-inscripciones-publica th {
        font-size: 0.68rem;
    }

    .ass-portal-comensal-item {
        margin-left: 0;
        padding: 0.7rem 0.85rem;
    }

    .ass-portal-comensal-item .ass-comensal-campos span {
        display: block;
        margin-right: 0;
    }

    .ass-portal-comensal-item .ass-comensal-campos span::after {
        content: '';
    }

    .ass-portal-edit-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .ass-portal-edit-actions .ass-btn {
        width: 100%;
        text-align: center;
    }

    .ass-dashboard-campos-gestion {
        padding: 1rem !important;
    }

    #seccion-gestion-campos .ass-table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 480px) {
    .ass-comensales-container {
        padding: 0.5rem;
    }

    .ass-comensal-grupo {
        padding: 0.65rem;
    }

    .ass-vista-inscripciones-container .ass-gestion-header h2 {
        font-size: 1.15rem;
    }

    #ass-tabla-inscripciones-publica {
        font-size: 0.65rem;
    }

    .ass-portal-container {
        padding: 1rem 0.75rem;
    }

    .ass-portal-detalle {
        padding: 1.25rem;
    }
}

/* ══════════════════════════════════════════════════
   FORMULARIO DE CAMPOS - Separadores y layout
   ══════════════════════════════════════════════════ */

.ass-form-separator {
    border-top: 2px solid #e2e8f0;
    margin-top: 1.5rem;
    padding-top: 1rem;
}

.ass-form-separator h4 {
    margin: 0 0 0.25rem 0;
    color: #334155;
    font-size: 0.95rem;
    font-weight: 600;
}

.ass-form-separator .ass-help-text {
    display: block;
    margin-bottom: 0.75rem;
}

.ass-form-group.ass-form-quarter {
    flex: 0 0 calc(25% - 0.75rem);
}

.ass-form-group.ass-form-third {
    flex: 0 0 calc(33.33% - 0.67rem);
}

/* Badges en tabla de campos */
.ass-campo-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    margin: 0.1rem;
    white-space: nowrap;
}

.ass-badge-repetidor {
    background: rgba(151, 179, 208, 0.2);
    color: #01455e;
    border: 1px solid rgba(151, 179, 208, 0.4);
}

.ass-badge-validacion {
    background: rgba(76, 116, 73, 0.12);
    color: #4c7449;
    border: 1px solid rgba(76, 116, 73, 0.3);
}

.ass-badge-condicional {
    background: rgba(219, 220, 184, 0.3);
    color: #bb613e;
    border: 1px solid rgba(219, 220, 184, 0.6);
}

.ass-badge-gestor {
    background: rgba(242, 184, 140, 0.2);
    color: #bb613e;
    border: 1px solid rgba(242, 184, 140, 0.5);
}

.ass-badge-calculado {
    background: rgba(151, 179, 208, 0.12);
    color: #01455e;
    border: 1px solid rgba(151, 179, 208, 0.4);
}

/* Campo calculado - display del total */
.ass-calculado-display {
    font-size: 1rem;
    font-weight: 400;
    color: #01455e;
    background: linear-gradient(135deg, rgba(151, 179, 208, 0.08), rgba(151, 179, 208, 0.15));
    border: 2px solid rgba(151, 179, 208, 0.35);
    border-radius: 10px;
    text-align: left;
    padding: 0.75rem 1rem;
    margin-top: 0.25rem;
}

/* Desglose dentro del campo calculado */
.ass-calculado-desglose {
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed rgba(151, 179, 208, 0.4);
}

.ass-desglose-linea {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    font-weight: 400;
    color: #01455e;
    padding: 2px 0;
}

.ass-calculado-total {
    font-size: 1.3rem;
    font-weight: 700;
    color: #01455e;
    text-align: right;
}

/* Contenedor de grupo repetidor (generaliza .ass-comensales-container) */
.ass-repeater-container {
    margin-top: 0.5rem;
}

.ass-repeater-container h4 {
    color: #1a365d;
    font-size: 1rem;
    font-weight: 600;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 0.5rem;
}

/* Input de config en el builder */
.ass-config-input {
    width: 100px;
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.2rem 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 0.8rem;
}

.ass-config-input::placeholder {
    color: #9ca3af;
    font-size: 0.75rem;
}

@media (max-width: 768px) {
    .ass-form-group.ass-form-quarter,
    .ass-form-group.ass-form-third {
        flex: 0 0 100%;
    }
}

/* ══════════════════════════════════════════════════
   VALIDACIÓN - Estados de campo
   ══════════════════════════════════════════════════ */

.ass-campo-invalido {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

.ass-campo-error {
    display: none;
    color: #bb613e;
    font-size: 0.8rem;
    margin-top: 0.25rem;
    font-weight: 500;
}

/* Limpiar error al escribir */
.ass-campo-grupo input:focus,
.ass-campo-grupo select:focus,
.ass-campo-grupo textarea:focus {
    border-color: #01455e;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* ══════════════════════════════════════════════════
   CONSTRUCTOR DE FORMULARIO (Builder)
   ══════════════════════════════════════════════════ */

.ass-campo-builder {
    margin-top: 1rem;
}

.ass-campo-builder-listas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.ass-campo-builder-col h4 {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    color: #334155;
    font-weight: 600;
}

.ass-campo-builder-col h4 small {
    font-weight: 400;
    color: #94a3b8;
}

/* Campos disponibles */
.ass-campos-disponibles {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.25rem;
}

/* Campo imagen: tamaño controlado */
.ass-campo-imagen {
    text-align: center;
    margin: 0.5rem 0;
}
.ass-campo-imagen img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}
@media (min-width: 768px) {
    .ass-campo-imagen img {
        max-width: 400px;
    }
}

.ass-campo-disponible {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    margin-bottom: 0.25rem;
    background: #fff;
    transition: all 0.15s;
}

.ass-campo-disponible:hover {
    border-color: rgba(151, 179, 208, 0.5);
    background: rgba(151, 179, 208, 0.08);
}

.ass-campo-disponible.ass-campo-ya-asignado {
    opacity: 0.35;
    pointer-events: none;
}

.ass-campo-disponible-info {
    flex: 1;
    min-width: 0;
}

.ass-campo-disponible-nombre {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    color: #1e293b;
}

.ass-campo-disponible-tipo {
    font-size: 0.7rem;
    color: #94a3b8;
    text-transform: uppercase;
}

.ass-campo-disponible-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem;
}

.ass-campo-add-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: #01455e;
    color: #fff;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
}

.ass-campo-add-btn:hover {
    background: #2563eb;
}

/* Campos asignados */
.ass-campos-asignados {
    min-height: 120px;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    padding: 0.5rem;
    background: #f8fafc;
}

.ass-campos-asignados-vacio {
    color: #94a3b8;
    font-size: 0.85rem;
    text-align: center;
    padding: 2rem 0.5rem;
    font-style: italic;
    margin: 0;
}

.ass-campo-asignado {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid rgba(151, 179, 208, 0.4);
    border-radius: 6px;
    margin-bottom: 0.25rem;
    background: rgba(151, 179, 208, 0.08);
    transition: all 0.15s;
}

.ass-campo-asignado:hover {
    border-color: #01455e;
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.15);
}

.ass-campo-asignado-drag {
    cursor: grab;
    color: #94a3b8;
    font-size: 0.9rem;
}

.ass-campo-asignado-nombre {
    flex: 1;
    font-weight: 600;
    font-size: 0.85rem;
    color: #1e293b;
}

.ass-campo-asignado-tipo {
    font-size: 0.7rem;
    color: #64748b;
    text-transform: uppercase;
}

.ass-campo-asignado-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem;
}

.ass-campo-asignado-actions {
    display: flex;
    gap: 0.15rem;
}

.ass-campo-asignado-actions button {
    width: 24px;
    height: 24px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.ass-campo-asignado-actions button:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.ass-campo-remove:hover {
    background: #fef2f2 !important;
    border-color: #fca5a5 !important;
    color: #bb613e;
}

/* Drag & drop sortable */
.ass-campo-asignado-drag:active {
    cursor: grabbing;
}

.ass-campo-asignado.ui-sortable-helper {
    background: rgba(151, 179, 208, 0.2);
    border-color: #01455e;
    box-shadow: 0 4px 12px rgba(1, 69, 94, 0.2);
    z-index: 1000;
}

.ass-campo-sortable-placeholder {
    height: 38px;
    border: 2px dashed rgba(151, 179, 208, 0.5);
    border-radius: 6px;
    background: rgba(151, 179, 208, 0.06);
    margin-bottom: 0.25rem;
    visibility: visible !important;
}

/* Quick create form */
.ass-campo-quick-form {
    border: 1px solid rgba(151, 179, 208, 0.4);
    border-radius: 8px;
    padding: 0.75rem;
    margin-top: 0.5rem;
    background: rgba(151, 179, 208, 0.08);
}

.ass-campo-quick-form h5 {
    color: #01455e;
    font-size: 0.85rem;
}

/* Preview */
.ass-campo-preview {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 0.5rem;
    background: #fff;
}

.ass-preview-form .ass-preview-field {
    margin-bottom: 0.75rem;
}

.ass-preview-form .ass-preview-field label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
    color: #334155;
}

.ass-preview-form .ass-form-control:disabled {
    background: #f1f5f9;
    cursor: not-allowed;
}

/* ══════════════════════════════════════════════════
   FORMULARIO EMBEBIDO (shortcode)
   ══════════════════════════════════════════════════ */

.ass-formulario-embebido {
    max-width: 850px;
    margin: 0 auto;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Desktop: formulario en 2 columnas */
@media (min-width: 768px) {
    .ass-formulario-embebido .ass-form-group {
        display: inline-block;
        width: 48%;
        vertical-align: top;
        margin-right: 2%;
    }

    /* Campos que ocupan ancho completo */
    .ass-formulario-embebido .ass-form-group:has(.ass-calculado-display),
    .ass-formulario-embebido .ass-form-group:has(textarea),
    .ass-formulario-embebido .ass-form-group:has(.ass-checkbox-label),
    .ass-formulario-embebido .ass-comensal-grupo,
    .ass-formulario-embebido .ass-form-group.ass-form-group-full {
        display: block;
        width: 100%;
        margin-right: 0;
    }

    /* Repetidores siempre full width */
    .ass-formulario-embebido [class*="ass-repetidor"],
    .ass-formulario-embebido .ass-comensal-grupo {
        display: block;
        width: 100%;
    }

    /* Boton submit full width */
    .ass-formulario-embebido .ass-btn-submit-container,
    .ass-formulario-embebido button[type="submit"] {
        width: 100%;
    }
}

.ass-formulario-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e2e8f0;
}

.ass-formulario-header h3 {
    margin: 0 0 0.5rem;
    color: #1e293b;
    font-size: 1.3rem;
}

/* Bloque de descripción / menú en formulario de inscripción */
.ass-evento-descripcion-box {
    margin-top: 1rem;
    padding: 1rem 1.2rem;
    background: linear-gradient(135deg, #f0fdf4 0%, #f8fafc 100%);
    border: 1px solid #c6f6d5;
    border-left: 4px solid var(--ass-verde, #4c7449);
    border-radius: 10px;
}

.ass-descripcion-titulo {
    font-weight: 700;
    font-size: 1rem;
    color: var(--ass-verde-oscuro, #3a5837);
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.ass-descripcion-contenido {
    font-size: 0.92rem;
    line-height: 1.7;
    color: #334155;
}

.ass-descripcion-contenido p {
    margin: 0 0 0.4rem;
}

.ass-descripcion-contenido p:last-child {
    margin-bottom: 0;
}

@media (max-width: 600px) {
    .ass-evento-descripcion-box {
        margin-top: 0.8rem;
        padding: 0.8rem 1rem;
    }

    .ass-descripcion-titulo {
        font-size: 0.95rem;
    }

    .ass-descripcion-contenido {
        font-size: 0.88rem;
        line-height: 1.6;
    }
}

.ass-formulario-success .ass-notice {
    text-align: center;
    padding: 1.5rem;
    font-size: 1.1rem;
}

/* Campo read-only (para portal vista) */
.ass-campo-readonly {
    padding: 0.5rem 0;
    color: #334155;
    font-weight: 500;
}

/* Campo label mejorado */
.ass-campo-label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
    color: #334155;
}

/* ══════════════════════════════════════════════════
   CAMPO GRUPO - Wrapper de cada campo de formulario
   ══════════════════════════════════════════════════ */

.ass-campo-grupo {
    margin-bottom: 1rem;
}

.ass-campo-grupo.oculto {
    display: none;
}

.ass-campo-grupo .ass-campo-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.ass-campo-grupo .ass-campo-input:focus {
    outline: none;
    border-color: #01455e;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.ass-campo-grupo textarea.ass-campo-input {
    resize: vertical;
    min-height: 70px;
}

/* Checkbox y radio groups */
.ass-checkbox-group,
.ass-radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.ass-checkbox-label,
.ass-radio-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: #334155;
}

.ass-checkbox-label input[type="checkbox"],
.ass-radio-label input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: #4c7449;
    cursor: pointer;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════
   PORTAL DE INSCRIPCIÓN EXTERNA
   ══════════════════════════════════════════════════ */

.ass-portal-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 1rem;
}

.ass-portal-busqueda {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.ass-portal-busqueda h2 {
    margin: 0 0 0.5rem;
    font-size: 1.3rem;
    color: #1e293b;
}

.ass-portal-busqueda p {
    color: #64748b;
    margin-bottom: 1rem;
}

.ass-portal-loading {
    text-align: center;
    padding: 2rem;
    color: #64748b;
}

.ass-portal-detalle {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.ass-portal-detalle h3 {
    margin: 0 0 1rem;
    font-size: 1.2rem;
    color: #1e293b;
}

.ass-portal-detalle h4 {
    margin: 1rem 0 0.5rem;
    font-size: 1rem;
    color: #334155;
}

.ass-portal-detalle hr {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 1rem 0;
}

.ass-portal-detalle p {
    margin: 0.3rem 0;
    font-size: 0.9rem;
    color: #334155;
}

.ass-portal-detalle small {
    color: #94a3b8;
}

.ass-portal-extras {
    margin-top: 0.5rem;
    padding: 0.5rem 0;
}

.ass-portal-extras p {
    margin: 0.25rem 0;
}

.ass-portal-edit-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.ass-portal-edit-actions .ass-btn {
    flex: 1;
    min-width: 150px;
}

/* Comensales en portal */
.ass-portal-comensal-item {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}

.ass-portal-comensal-item strong {
    display: block;
    font-size: 0.85rem;
    color: #1e293b;
    margin-bottom: 0.4rem;
}

.ass-comensal-campos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.ass-comensal-campos span {
    font-size: 0.85rem;
    color: #475569;
}

/* Comensales fieldset (edición portal server-side) */
.ass-comensal-fieldset {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    background: #f8fafc;
}

.ass-comensal-fieldset legend {
    font-weight: 600;
    font-size: 0.9rem;
    color: #334155;
    padding: 0 0.5rem;
}

/* Evento detalles en portal */
.ass-evento-detalles {
    margin: 0.5rem 0;
}

.ass-evento-detalles p {
    margin: 0.2rem 0;
}

/* ══════════════════════════════════════════════════
   REQUIRED ASTERISK
   ══════════════════════════════════════════════════ */

.ass-required {
    color: #bb613e;
    font-weight: bold;
}

/* ══════════════════════════════════════════════════
   RESPONSIVE FINAL
   ══════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .ass-campo-builder-listas {
        grid-template-columns: 1fr;
    }

    .ass-campo-asignado-badges,
    .ass-campo-disponible-badges {
        display: none;
    }

    .ass-formulario-embebido {
        padding: 1rem;
    }

    .ass-portal-container {
        padding: 0.5rem;
    }

    .ass-portal-detalle {
        padding: 1rem;
    }

    .ass-portal-edit-actions {
        flex-direction: column;
    }

    .ass-portal-edit-actions .ass-btn {
        min-width: auto;
    }
}

@media (max-width: 480px) {
    .ass-campo-grupo .ass-campo-input {
        font-size: 16px; /* Prevents iOS zoom on focus */
    }

    .ass-portal-busqueda {
        padding: 1rem;
    }

    .ass-comensal-campos {
        flex-direction: column;
        gap: 0.25rem;
    }
}

/* ========================================
   OVERRIDE FINAL: Modal grande (editar/crear evento)
   Posición al final para máxima prioridad en cascada
   ======================================== */
.ass-modal-overlay .ass-modal-container.ass-modal-lg {
    width: 95vw !important;
    max-width: 1100px !important;
}
@media (max-width: 767px) {
    .ass-modal-overlay .ass-modal-container.ass-modal-lg {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ========================================
   PWA: Banner de instalación
   ======================================== */
#ass-pwa-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}
#ass-pwa-banner.ass-pwa-banner-visible {
    transform: translateY(0);
}
.ass-pwa-banner-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #01455e;
    color: #fff;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.2);
}
.ass-pwa-banner-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    flex-shrink: 0;
}
.ass-pwa-banner-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.ass-pwa-banner-text strong {
    font-size: 0.9rem;
}
.ass-pwa-banner-text span {
    font-size: 0.75rem;
    opacity: 0.8;
}
.ass-pwa-banner-btn {
    padding: 0.5rem 1rem;
    background: #4c7449;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.ass-pwa-banner-btn:active {
    background: #3a5c38;
}
.ass-pwa-banner-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.6);
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
}
.ass-pwa-banner-close:hover {
    color: #fff;
}