/* Gestión de Compras - Concilia2 - Estilos */
:root {
    --color-primary: #9e1173;
    --color-primary-light: #c94bad;
    --color-primary-dark: #6e0c50;
    --color-success: #28a745;
    --color-warning: #ffc107;
    --color-danger: #dc3545;
    --color-info: #17a2b8;
    --color-light: #f8f9fa;
    --color-dark: #343a40;
    --border-radius: 12px;
    --box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#gestion-compras-panel, #usuarios-asignados-panel {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Panel header */
.panel-header {
    text-align: center;
    margin-bottom: 40px;
    background: #ffffff;
    color: var(--color-dark);
    padding: 28px 20px;
    border: 1px solid #e6e8ef;
    border-top: 3px solid var(--color-primary);
    border-radius: var(--border-radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
}

/* Sin efecto/animación detrás del título (aspecto profesional) */
.panel-header::before {
    content: none;
}

@keyframes shimmer {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(180deg); }
}

@keyframes skeleton-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.panel-header h1 {
    margin: 0 0 10px 0;
    font-size: 2.5rem;
    font-weight: 700;
    position: relative;
    z-index: 1;
    color: var(--color-primary-dark);
}

.panel-header p {
    margin: 0;
    font-size: 1.1rem;
    opacity: 1;
    position: relative;
    z-index: 1;
    color: #6b7280;
}

/* No orders state */
.no-orders {
    text-align: center;
    padding: 60px 20px;
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.no-orders-icon {
    font-size: 4rem;
    color: var(--color-primary);
    margin-bottom: 20px;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.no-orders h3 {
    color: var(--color-dark);
    margin-bottom: 10px;
}

.no-orders p {
    color: #6c757d;
    font-size: 1.1rem;
}

/* Orders grid */
.orders-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 30px;
}

/* Order card */
.order-card {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: visible;
    transition: var(--transition);
    border: 2px solid transparent;
    animation: slideInUp 0.5s ease-out;
    position: relative;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.order-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    border-color: var(--color-primary);
}

.order-header {
    padding: 18px 22px;
    background: #ffffff;
    border-bottom: 1px solid #eee;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.order-header.order-toggle { cursor: pointer; user-select: none; transition: background .2s; }
.order-header.order-toggle:hover { background: #f7f7f9; }
.order-header.order-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }

.order-header h3 {
    margin: 0 0 8px 0;
    color: var(--color-dark);
    font-size: 1.25rem;
    font-weight: 600;
}

/* --- Acordeón de pedido (cliente) --- */
.order-header-main { flex: 1 1 auto; min-width: 0; }
.order-header-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.order-chevron { flex: 0 0 auto; color: var(--color-primary); font-size: 1.15rem; transition: transform .3s ease; }
.order-card.is-open .order-chevron { transform: rotate(180deg); }
.order-mini { display: inline-block; font-size: .82rem; font-weight: 600; color: #555; background: rgba(0,0,0,.06); padding: 4px 10px; border-radius: 20px; }
.doc-pill { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; font-weight: 600; padding: 4px 11px; border-radius: 20px; white-space: nowrap; }
.doc-pill.is-ok { background: #e5f6ec; color: #1a7f45; }
.doc-pill.is-pending { background: #fdf0e3; color: #b3670a; }
/* Cuerpo plegable: animación de altura sin recortes (grid 0fr -> 1fr) */
.order-collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.order-card.is-open .order-collapse { grid-template-rows: 1fr; }
.order-collapse-inner { overflow: hidden; min-height: 0; }

.category-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.category-badge.curso-online {
    background: linear-gradient(135deg, #17a2b8, #138496);
    color: white;
}

.category-badge.curso-virtual {
    background: linear-gradient(135deg, #28a745, #1e7e34);
    color: white;
}

.category-badge.curso-presencial {
    background: linear-gradient(135deg, #ffc107, #e0a800);
    color: #212529;
}

/* Order info */
.order-info {
    padding: 16px 22px 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0 32px;
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
    padding: 9px 0;
    border-bottom: 1px solid #f0f0f0;
}

.info-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.info-item .label {
    font-weight: 600;
    color: var(--color-dark);
}

.info-item .value {
    color: #6c757d;
    font-weight: 500;
}

/* Status badges */
.status {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-completed, .status-wc-completed {
    background: var(--color-success);
    color: white;
}

.status-processing, .status-wc-processing {
    background: var(--color-info);
    color: white;
}

.status-on-hold, .status-wc-on-hold {
    background: var(--color-warning);
    color: #212529;
}

.status-pending, .status-wc-pending {
    background: #fd7e14;
    color: white;
}

.status-checkout-draft {
    background: #6c757d;
    color: white;
}

/* Order actions */
.order-actions {
    padding: 20px;
    background: #f8f9fa;
    border-top: 1px solid #eee;
}

/* Zona separada de documentos descargables (factura + diplomas), debajo de los datos del pedido. */
.order-downloads {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 14px 20px;
    background: #f8f9fa;
    border-top: 1px solid #eee;
}
.order-downloads-title {
    font-weight: 600;
    color: #374151;
}
.order-download-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: #fff;
    border: 1px solid #d3d7e3;
    border-radius: 8px;
    color: #9d1873;
    font-weight: 500;
    text-decoration: none;
}
.order-download-link:hover {
    background: #faf2f8;
    border-color: #9d1873;
}

.btn-primary, .btn-secondary, .btn-warning, .btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.95rem;
    width: 100%;
    justify-content: center;
    margin-bottom: 10px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: white;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(158, 17, 115, 0.3);
}

.btn-secondary {
    background: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background: #545b62;
    transform: translateY(-2px);
}

.btn-warning {
    background: var(--color-warning);
    color: #212529;
}

.btn-warning:hover {
    background: #e0a800;
    transform: translateY(-2px);
}

.btn-danger {
    background: var(--color-danger);
    color: white;
}

.btn-danger:hover {
    background: #c82333;
    transform: translateY(-2px);
}

/* Secciones desplegables */
.expandable-section {
    margin-top: 0;
    border-top: 2px solid var(--color-primary);
    background: #ffffff;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    overflow: hidden;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: var(--color-primary);
    color: white;
}

.section-header h4 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
}

.close-section-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    padding: 8px;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-section-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.section-content {
    padding: 25px;
}

/* Información del curso inline */
.course-info-inline {
    background: #e9ecef;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    border-left: 4px solid var(--color-primary);
}

.course-info-inline p {
    margin: 5px 0;
    color: var(--color-dark);
}

/* File upload inline */
.file-upload-section h5 {
    color: var(--color-dark);
    margin-bottom: 15px;
    font-size: 1rem;
    font-weight: 600;
}

.file-upload-area-inline {
    margin-bottom: 15px;
}

.file-upload-zone {
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    background: #f8f9fa;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.file-upload-zone:hover {
    border-color: var(--color-primary);
    background: rgba(158, 17, 115, 0.05);
}

.file-upload-zone.file-selected {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    border-color: var(--color-success);
    color: #155724;
}

.file-upload-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
    color: var(--color-primary);
}

.file-upload-zone.file-selected .file-upload-icon {
    color: var(--color-success);
}

.file-upload-text p {
    margin: 0 0 5px 0;
    font-weight: 600;
    color: var(--color-dark);
}

.file-upload-text small {
    color: #6c757d;
    font-size: 0.85rem;
}

.file-upload-zone.file-selected .file-upload-text p,
.file-upload-zone.file-selected .file-upload-text small {
    color: #155724;
}

/* Template download inline */
.template-download-inline {
    text-align: center;
    margin: 15px 0;
    padding: 10px;
    background: #e7f3ff;
    border-radius: 6px;
    border: 1px solid #b3d9ff;
}

.template-download-inline p {
    margin: 0;
    color: #004085;
}

.download-template-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
}

.download-template-link:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.file-template-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
    font-size: 14px;
    transition: var(--transition);
}

.file-template-link i {
    color: var(--color-primary);
}

.file-template-link:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.file-template-note {
    margin-top: 8px;
    font-size: 13px;
    color: #304262;
    line-height: 1.5;
}

/* Upload actions */
.upload-actions {
    text-align: center;
    margin-top: 20px;
}

.upload-users-file-btn:disabled {
    background: #6c757d;
    cursor: not-allowed;
    transform: none;
}

/* Tabla de usuarios inline */
.users-table-container {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: white;
}

.users-table-inline {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.users-table-inline th {
    background: var(--color-primary);
    color: white;
    padding: 12px 10px;
    text-align: left;
    font-weight: 600;
    font-size: 0.9rem;
    position: sticky;
    top: 0;
    z-index: 10;
}

.users-table-inline td {
    padding: 12px 10px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
    font-size: 0.9rem;
}

.users-table-inline tbody tr:hover {
    background-color: rgba(158, 17, 115, 0.05);
}

.users-table-inline tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}

.users-table-inline tbody tr:nth-child(even):hover {
    background-color: rgba(158, 17, 115, 0.05);
}

.users-table-inline a {
    color: var(--color-primary);
    text-decoration: none;
}

.users-table-inline a:hover {
    text-decoration: underline;
}

/* Botones pequeños */
.btn-small {
    padding: 6px 12px;
    font-size: 0.8rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 32px;
    height: 32px;
}

.btn-small:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Formulario de documentación */
.documentation-form {
    background: white;
    border-radius: 8px;
    padding: 0;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--color-dark);
    font-size: 1rem;
}

.form-hint {
    margin: 0 0 10px;
    color: #6c757d;
    font-size: 0.95rem;
}

.comunes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

/* Las tarjetas NO se estiran a la misma altura total (si no, una sin subir —con menos
   botones debajo— haría crecer su caja de más). En su lugar, todas las CAJAS tienen la
   misma altura fija y quedan alineadas arriba; debajo va su contenido propio. */
.comunes-grid { align-items: start; }
.comunes-grid .file-upload-inline .file-upload-zone {
    width: 100%;
    box-sizing: border-box;
    height: 128px;       /* altura FIJA e idéntica para todas: subido, validado o sin subir,
                            ocupe el nombre 1, 2 o 3 líneas (más estrecho con 4 documentos) */
    min-height: 128px;
    overflow: hidden;
}
/* Nombres de archivo muy largos: máximo 3 líneas con puntos suspensivos (para no romper
   la altura fija de la caja). */
.comunes-grid .file-upload-zone span {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.form-group input[type="text"] {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 1rem;
    transition: var(--transition);
    background: white;
    box-sizing: border-box;
}

.form-group input[type="text"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(158, 17, 115, 0.1);
}

/* Radio buttons inline */
.radio-group-inline {
    display: flex;
    gap: 20px;
}

.radio-option-inline {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 10px 15px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    transition: var(--transition);
    background: white;
}

.radio-option-inline:hover {
    border-color: var(--color-primary);
    background: rgba(158, 17, 115, 0.05);
}

.radio-option-inline input[type="radio"] {
    margin-right: 8px;
    accent-color: var(--color-primary);
}

.radio-option-inline span {
    font-weight: 500;
    color: var(--color-dark);
}

/* File upload para documentos */
.file-upload-inline {
    position: relative;
}

.file-upload-inline input[type="file"] {
    display: none;
}

.file-upload-inline .file-upload-zone {
    min-height: 96px; /* todas las cajas con la misma altura (aunque el nombre ocupe 1 o 2 líneas) */
    padding: 15px;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    background: #f8f9fa;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    flex-direction: column; /* icono arriba, texto debajo */
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    word-break: break-word;
}

.file-upload-inline .file-upload-zone:hover {
    border-color: var(--color-primary);
    background: rgba(158, 17, 115, 0.05);
}

.file-upload-inline .file-upload-zone.file-selected {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    border-color: var(--color-success);
    color: #155724;
}

.file-upload-inline .file-upload-zone.file-uploaded {
    background: linear-gradient(135deg, var(--color-success), #20c997);
    border-color: var(--color-success);
    color: white;
}

.file-upload-inline .file-upload-zone.uploading {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border-color: var(--color-warning);
    color: #856404;
}

.file-upload-inline .file-upload-zone i {
    font-size: 1.2rem;
}

.file-upload-inline .file-upload-zone.uploading i {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Grupo DNI facturación */
.dni-facturacion-group {
    background: #e7f3ff;
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid var(--color-info);
}

/* Form actions */
.form-actions {
    text-align: center;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

/* Badges completados */
.completed-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: linear-gradient(135deg, var(--color-success), #1e7e34);
    color: white;
    border-radius: 8px;
    font-weight: 600;
    animation: pulse 2s infinite;
    margin-bottom: 10px;
}

@keyframes pulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.4);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 0 0 6px rgba(40, 167, 69, 0);
        transform: scale(1.02);
    }
}

/* Sección completada */
.completed-section {
    margin-top: 40px;
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    animation: slideInUp 0.5s ease-out;
}

.completed-header {
    padding: 20px 25px;
    background: linear-gradient(135deg, var(--color-success), #1e7e34);
    color: white;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.completed-header:hover {
    background: linear-gradient(135deg, #1e7e34, var(--color-success));
    transform: translateY(-1px);
}

.completed-header h3 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.completed-header .toggle-icon {
    transition: transform 0.3s ease;
    font-size: 1rem;
}

.completed-header.active .toggle-icon {
    transform: rotate(180deg);
}

.completed-count {
    font-size: 0.9rem;
    opacity: 0.9;
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 600;
}

.completed-orders {
    padding: 0;
    border-top: 1px solid #eee;
    background: #f8f9fa;
}

.completed-orders .orders-grid {
    padding: 20px;
    margin: 0;
}

.order-card.completed {
    opacity: 0.95;
    border: 2px solid var(--color-success);
    background: linear-gradient(135deg, #f8fff9, #ffffff);
}

.order-card.completed:hover {
    border-color: var(--color-success);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(40, 167, 69, 0.2);
}

.order-card.completed .order-header {
    background: #f3faf5;
    border-bottom: 1px solid rgba(40, 167, 69, 0.2);
}

/* Confirmación de eliminación */
.confirm-dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

.confirm-content {
    background: white;
    padding: 30px;
    border-radius: var(--border-radius);
    max-width: 500px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideInDown 0.3s ease-out;
}

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

.confirm-icon {
    font-size: 3rem;
    color: var(--color-warning);
    margin-bottom: 20px;
}

.confirm-content h4 {
    margin: 0 0 15px 0;
    color: var(--color-dark);
    font-size: 1.3rem;
}

.confirm-content p {
    margin: 10px 0;
    color: #6c757d;
}

.user-name-to-delete {
    font-weight: 600;
    color: var(--color-dark);
    font-size: 1.1rem;
}

.confirm-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 25px;
}

.cancel-delete, .confirm-delete {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    min-width: 100px;
}

.cancel-delete {
    background: #6c757d;
    color: white;
}

.cancel-delete:hover {
    background: #545b62;
}

.confirm-delete {
    background: var(--color-danger);
    color: white;
}

.confirm-delete:hover {
    background: #c82333;
}

/* Modal grupos Moodle */
.moodle-group-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
}

.moodle-group-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
}

.moodle-group-modal__content {
    position: relative;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.2);
    width: min(520px, 92vw);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    animation: slideInDown 0.25s ease-out;
}

.moodle-group-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.moodle-group-modal__header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--color-dark);
}

.moodle-group-modal__close {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: #6c757d;
}

.moodle-group-modal__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.moodle-group-modal__hint {
    margin: 0;
    color: #6b7280;
    font-size: 0.95rem;
}

.moodle-group-modal__label {
    font-weight: 600;
    color: var(--color-dark);
    font-size: 0.9rem;
}

.moodle-group-modal__select {
    display: flex;
    align-items: center;
    gap: 12px;
}

#moodle-group-select {
    flex: 1;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
}

.moodle-group-modal__loading {
    font-size: 0.85rem;
    color: #6b7280;
}

.moodle-group-modal__create {
    border-top: 1px solid #e5e7eb;
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.moodle-group-modal__create-row {
    display: flex;
    gap: 10px;
}

#moodle-group-name {
    flex: 1;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fff;
}

.moodle-group-modal__help {
    margin: 0;
    font-size: 0.85rem;
    color: #6b7280;
}

.moodle-group-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.action-formativa-modal {
    position: fixed;
    inset: 0;
    z-index: 1000001;
    display: flex;
    /* En vez de centrarse en la ventana, el popup arranca justo debajo del header fijo del
       sitio: --gc-header-h la calcula el JS midiendo el header real. Así no depende de ganarle
       el z-index al tema, que puede encerrarnos en su propio contexto de apilamiento. */
    align-items: flex-start;
    justify-content: center;
    padding: calc(var(--gc-header-h, 0px) + 16px) 12px 24px;
    box-sizing: border-box;
    overflow-y: auto;
}

.action-formativa-modal__overlay {
    /* Fija, no absoluta: el contenedor ahora puede desplazarse y el velo debe cubrir la ventana entera. */
    position: fixed;
    inset: 0;
    background: rgba(30, 30, 47, 0.5);
}

.action-formativa-modal__content {
    position: relative;
    background: #ffffff;
    width: min(900px, 92vw);
    max-height: calc(100vh - var(--gc-header-h, 0px) - 48px);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1;
}

.action-formativa-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid #ececf5;
    background: #f7f7fb;
    /* Sin esto, con un cuerpo alto flex comprimía la cabecera hasta hacerla desaparecer. */
    flex: 0 0 auto;
}

.action-formativa-modal__header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #1e1e2f;
    display: flex;
    align-items: center;
    gap: 10px;
}

.action-formativa-modal__close {
    border: none;
    background: transparent;
    font-size: 1.4rem;
    cursor: pointer;
    color: #5c5f6a;
}

.action-formativa-modal__body {
    padding: 20px 22px 16px;
    overflow-y: auto;
    /* Es el único que debe encoger y desplazarse; min-height:0 es imprescindible para que
       un hijo con scroll dentro de un contenedor flex no desborde. */
    flex: 1 1 auto;
    min-height: 0;
}

.action-formativa-modal__hint {
    margin: 0 0 12px;
    color: #5c5f6a;
}

.action-formativa-modal__label {
    font-weight: 600;
    color: #1e1e2f;
}

.action-formativa-modal__select {
    margin-top: 8px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}

#action-formativa-course-select {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #e2e2ec;
    background: #fff;
}

.action-formativa-modal__loading,
.action-formativa-modal__loading-groups {
    font-size: 0.9rem;
    color: #6d7280;
}

.action-formativa-modal__groups {
    margin-top: 18px;
}

.action-formativa-modal__groups-head {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 16px;
    font-weight: 700;
    color: #3f4151;
    padding: 8px 0;
    border-bottom: 1px solid #e6e6f0;
}

.action-formativa-modal__groups-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.action-formativa-modal__group-row {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 16px;
    align-items: center;
    padding: 12px 14px;
    background: #f9f9fd;
    border-radius: 12px;
    border: 1px solid #ececf5;
}

.action-formativa-modal__group-name {
    font-weight: 600;
    color: #1e1e2f;
}

.action-formativa-modal__group-input {
    width: 100%;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid #d9d9e6;
    background: #fff;
}

.action-formativa-modal__empty {
    margin: 0;
    color: #8a8f9b;
    font-size: 0.95rem;
}

.action-formativa-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px 20px;
    border-top: 1px solid #ececf5;
    background: #fafafb;
    flex: 0 0 auto;
}

.btn-success {
    background: var(--color-success);
    color: #ffffff;
    border: none;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

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

.btn-ghost {
    background: #f3f4f6;
    border: none;
    padding: 10px 18px;
    border-radius: 10px;
    color: #111827;
    font-weight: 600;
    cursor: pointer;
}

.btn-secondary {
    background: #2563eb;
    color: #ffffff;
    border: none;
    padding: 10px 14px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
}

/* Loading overlay */
.loading-overlay {
    display: none;
    position: fixed;
    z-index: 15000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
}

.loading-overlay .spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    text-align: center;
}

.loading-overlay .spinner > div {
    width: 18px;
    height: 18px;
    background-color: var(--color-primary);
    border-radius: 100%;
    display: inline-block;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.loading-overlay .spinner .bounce1 {
    animation-delay: -0.32s;
}

.loading-overlay .spinner .bounce2 {
    animation-delay: -0.16s;
}

@keyframes sk-bouncedelay {
    0%, 80%, 100% {
        transform: scale(0);
    } 40% {
        transform: scale(1.0);
    }
}

.loading-overlay p {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 600;
    color: var(--color-primary);
    font-size: 1.1rem;
}

/* Sistema de notificaciones */
#notification-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* centrado en la pantalla */
    z-index: 100200; /* por encima del menú del sitio y de la barra de administración de WordPress */
    width: min(520px, calc(100vw - 32px));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    pointer-events: none; /* deja pasar clics salvo en la propia tarjeta */
}

.notification {
    background: #ffffff;
    border: 1px solid #ececf3;
    border-left-width: 5px;
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.25);
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    transform: scale(0.94);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
    position: relative;
    pointer-events: auto;
    font-size: 15px;
    line-height: 1.45;
}

.notification i:first-child { font-size: 22px; flex: none; }

.notification.show {
    transform: scale(1);
    opacity: 1;
}

.notification-success {
    border-left: 4px solid var(--color-success);
}

.notification-success i {
    color: var(--color-success);
}

.notification-error {
    border-left: 4px solid var(--color-danger);
}

.notification-error i {
    color: var(--color-danger);
}

.notification-info {
    border-left: 4px solid var(--color-info);
}

.notification-info i {
    color: var(--color-info);
}

.notification span {
    flex: 1;
    color: var(--color-dark);
    font-weight: 500;
}

.notification-close {
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: var(--transition);
}

.notification-close:hover {
    background: #f8f9fa;
    color: var(--color-dark);
}

/* DataTables para usuarios asignados */
.usuarios-table-container {
    background: white;
    padding: 20px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-top: 20px;
}

#usuarios-table {
    width: 100% !important;
}

#usuarios-table.dataTable {
    border-collapse: collapse !important;
}

#usuarios-table.dataTable thead th {
    border-bottom: 2px solid var(--color-primary) !important;
    font-size: 0.9rem;
    padding: 12px 8px !important;
    vertical-align: middle;
    background: var(--color-primary);
    color: white;
}

#usuarios-table.dataTable tbody td {
    padding: 10px 8px !important;
    border-bottom: 1px solid #eee !important;
    vertical-align: middle;
    font-size: 0.9rem;
}

#usuarios-table tbody tr:nth-child(odd) {
    background-color: #f8f9fa;
}

#usuarios-table tbody tr:nth-child(even) {
    background-color: white;
}

#usuarios-table tbody tr:hover {
    background-color: rgba(158, 17, 115, 0.1) !important;
    transition: background-color 0.3s ease;
}

/* DataTables controles */
.dataTables_wrapper .dataTables_length {
    float: left;
    margin-bottom: 10px;
}

.dataTables_wrapper .dataTables_filter {
    float: right;
    text-align: right;
    margin-bottom: 10px;
}

.dataTables_wrapper .dataTables_filter input {
    margin-left: 0.5em;
    padding: 6px 12px;
    border: 2px solid #e9ecef;
    border-radius: 6px;
    font-size: 0.9rem;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--color-primary);
    outline: none;
}

.dataTables_wrapper .dataTables_length select {
    padding: 4px 8px;
    border: 2px solid #e9ecef;
    border-radius: 6px;
    margin: 0 5px;
}

/* Paginación personalizada */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    box-sizing: border-box;
    display: inline-block;
    min-width: 1.5em;
    padding: 0.5em 1em;
    margin-left: 2px;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    color: var(--color-dark) !important;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background: white;
    font-size: 0.875rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: white !important;
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    color: white !important;
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    cursor: default;
    color: #6c757d !important;
    border: 1px solid #dee2e6;
    background: #f8f9fa;
}

/* Información de la tabla */
.dataTables_wrapper .dataTables_info {
    clear: both;
    float: left;
    padding-top: 0.755em;
    font-size: 0.875rem;
    color: #6c757d;
}

/* Estados específicos de celdas */
.loading-cell, .error-cell, .no-data-cell {
    text-align: center;
    padding: 40px 20px;
    color: #6c757d;
    font-style: italic;
}

.error-cell {
    color: var(--color-danger);
}

.loading-cell i {
    margin-right: 8px;
}

/* Alert styles */
.alert {
    padding: 12px 16px;
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 15px;
    border: 1px solid transparent;
}

.alert-info {
    background-color: #e7f3ff;
    border-color: #b3d9ff;
    color: #004085;
}

.alert-info i {
    color: var(--color-info);
    margin-top: 2px;
    flex-shrink: 0;
}

/* Responsive design */
@media (max-width: 768px) {
    #gestion-compras-panel, #usuarios-asignados-panel {
        padding: 15px;
    }
    
    .orders-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .panel-header {
        padding: 30px 15px;
    }
    
    .panel-header h1 {
        font-size: 2rem;
    }
    
    .order-header,
    .order-info,
    .order-actions {
        padding: 15px;
    }
    
    .section-content {
        padding: 20px 15px;
    }
    
    .radio-group-inline {
        flex-direction: column;
        gap: 10px;
    }
    
    .confirm-actions {
        flex-direction: column;
        gap: 10px;
    }
    
    .cancel-delete, .confirm-delete {
        width: 100%;
    }
    
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        float: none;
        text-align: center;
        margin-bottom: 15px;
    }
    
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none;
        text-align: center;
        margin-top: 15px;
    }
    
    .users-table-inline {
        font-size: 0.85rem;
    }
    
    .users-table-inline th,
    .users-table-inline td {
        padding: 8px 6px;
    }
    
    .notification {
        transform: scale(0.94);
        padding: 15px 16px;
    }

    .notification.show {
        transform: scale(1);
    }
}

@media (max-width: 480px) {
    .panel-header h1 {
        font-size: 1.5rem;
    }
    
    .order-header {
        padding: 15px;
    }
    
    .order-info,
    .order-actions {
        padding: 15px;
    }
    
    .section-header {
        padding: 15px;
    }
    
    .section-content {
        padding: 15px;
    }
    
    .file-upload-zone {
        padding: 20px 15px;
        min-height: 100px;
    }
    
    .btn-primary, .btn-secondary, .btn-warning, .btn-danger {
        padding: 10px 16px;
        font-size: 0.9rem;
    }
    
    .users-table-inline {
        font-size: 0.8rem;
    }
    
    .confirm-content {
        padding: 20px;
        width: 95%;
    }
}

/* Utility classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }

/* Animaciones adicionales */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fade-in {
    animation: fadeIn 0.3s ease-out;
}

.slide-in {
    animation: slideIn 0.3s ease-out;
}
/* --- Panel de administración rediseñado --- */
#gestion-compras-admin-panel.admin-redesign {
    max-width: none;
    width: 100%;
    margin: 0 auto;
    padding: 30px 20px 60px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.admin-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.admin-header__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

/* Popup de creación manual de pedidos */
.crear-pedido-modal .action-formativa-modal__content {
    max-width: 720px;
    width: 94%;
}

/* Cada curso del pedido es una tarjeta con su propia bonificación, como en la tienda. */
.crear-pedido-linea {
    border: 1px solid #e6e8f0;
    border-radius: 10px;
    padding: 12px 14px 14px;
    margin-bottom: 10px;
    background: #fcfcfe;
}

.crear-pedido-linea__cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.crear-pedido-linea__num {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-primary);
}

.crear-pedido-linea__quitar {
    border: none;
    background: transparent;
    color: #9aa0ae;
    cursor: pointer;
    font-size: .95rem;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 6px;
}

.crear-pedido-linea__quitar:hover:not(:disabled) {
    color: var(--color-danger, #d9534f);
    background: #fdeeee;
}

.crear-pedido-linea__quitar:disabled {
    opacity: .3;
    cursor: default;
}

/* El curso ocupa la fila entera: los títulos son largos y no caben en media columna. */
.crear-pedido-linea__curso {
    grid-column: 1 / -1;
}

/* Aviso del tope de alumnos/as bajo el campo de cantidad. */
.cp-tope {
    font-size: .72rem;
    font-weight: 500;
    color: #6b7280;
    min-height: 1em;
}

.crear-pedido-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-size: .82rem;
}

/* Módulos del curso modular: el precio de la línea es la suma de los marcados. */
.cp-modulos {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px dashed #d7dbe8;
    border-radius: 8px;
    background: #fff;
}

.cp-modulos__tit {
    margin: 0 0 8px;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--color-primary);
}

.cp-modulos__lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 4px 12px;
}

.cp-modulo {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .82rem;
    font-weight: 500;
    padding: 3px 0;
    cursor: pointer;
}

.cp-modulo.is-disabled {
    opacity: .5;
    cursor: not-allowed;
}

.cp-modulo input {
    margin-top: 3px;
    flex: 0 0 auto;
}

.cp-modulo__txt em {
    display: block;
    font-style: normal;
    font-size: .72rem;
    color: #6b7280;
}

.cp-modulos__total {
    margin: 8px 0 0;
    font-size: .78rem;
    font-weight: 600;
    color: #9aa0ae;
}

.cp-modulos__total.is-ok {
    color: var(--color-primary);
}

/* Precio de la línea (tramo por nº de alumnos/as) en el popup de crear pedido */
.cp-precio {
    margin: 10px 0 0;
    padding: 8px 12px;
    border-left: 3px solid var(--color-primary);
    background: rgba(158, 17, 115, .05);
    font-size: .82rem;
    line-height: 1.5;
    color: #374151;
}

.cp-precio i { color: var(--color-primary); margin-right: 4px; }
.cp-precio__tramo { color: #047857; font-weight: 600; margin-right: 10px; }
.cp-precio__aviso,
.cp-precio__gestion { color: #6b7280; }

.crear-pedido-seccion {
    margin: 16px 0 8px;
    font-weight: 700;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-primary);
    border-bottom: 1px solid #eef0f7;
    padding-bottom: 6px;
}

.crear-pedido-seccion:first-child {
    margin-top: 0;
}

.crear-pedido-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px 14px;
}

.crear-pedido-grid label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: .84rem;
    font-weight: 600;
    color: var(--color-dark);
}

.crear-pedido-grid input,
.crear-pedido-grid select {
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid #d3d7e3;
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 400;
    box-sizing: border-box;
}

.crear-pedido-nota {
    margin: 6px 0 0;
    font-size: .8rem;
    color: #6b7089;
}

/* Pestañas del bloque de documentación del pedido */
.doc-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    border-bottom: 1px solid #e6e8ef;
}

.doc-tab {
    border: none;
    background: none;
    padding: 8px 14px;
    font-size: .88rem;
    font-weight: 600;
    color: #6b7089;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.doc-tab:hover {
    color: var(--color-primary);
}

.doc-tab.is-active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.doc-tab-panel {
    display: none;
}

.doc-tab-panel.is-active {
    display: block;
}

/* === Listado de pedidos ===
   La cabecera fija NO se hace con position:sticky sobre la ventana: el header del sitio
   es fijo y se solapaban. Se usa el scroll interno de DataTables (scrollY), así el
   listado se desplaza dentro de su caja, la cabecera queda siempre visible y los filtros
   se quedan arriba sin taparse con nada. */
.admin-table-card .dataTables_scrollBody {
    border-bottom: 1px solid #e6e8ef;
}

.admin-table-card .dataTables_scrollHead {
    background: #fff;
}

/* Cabecera flotante (DataTables FixedHeader): fondo sólido para que no se transparenten las
   filas al hacer scroll. El desplazamiento bajo el header fijo del sitio lo pone el JS (headerOffset). */
table.dataTable.fixedHeader-floating { background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
table.dataTable.fixedHeader-floating thead th { background: #fff; }

.admin-table-card .admin-filters {
    background: #fff;
    padding: 12px 0;
}

.admin-filter-field--fechas .admin-filter-rango {
    display: flex;
    align-items: center;
    gap: 6px;
}

.admin-filter-field--fechas input[type="date"] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 36px;
    padding: 6px 8px;
    border: 1px solid #d3d7e3;
    border-radius: 8px;
    font-size: .85rem;
    box-sizing: border-box;
}

/* Celda del ID FUNDAE editable */
.idfundae-cell {
    display: flex;
    align-items: center;
    gap: 4px;
}

.idfundae-cell .idfundae-input {
    width: 100%;
    min-width: 90px;
    min-height: 30px;
    padding: 4px 8px;
    border: 1px solid #d3d7e3;
    border-radius: 6px;
    font-size: .82rem;
    box-sizing: border-box;
}

.idfundae-cell .idfundae-input.idfundae-ok {
    border-color: #2ecc71;
    background: rgba(46, 204, 113, .10);
}

.idfundae-na {
    color: #9aa0a6;
}

/* Cambio de convocatoria desde el detalle del pedido */
.gc-convocatoria-editar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.gc-convocatoria-editar .gc-convocatoria-select {
    flex: 1 1 240px;
    min-width: 200px;
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid #d3d7e3;
    border-radius: 8px;
    background: #fff;
    color: var(--color-dark);
    font-size: 0.9rem;
    box-sizing: border-box;
}

.gc-convocatoria-editar .gc-convocatoria-save {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 7px 18px;
    font-size: 0.88rem;
    white-space: nowrap;
}

.gc-convocatoria-bloqueada {
    color: #6b7280;
    font-style: italic;
}

/* Los tres botones de cabecera, del mismo ancho y más compactos: con flex cada uno
   medía según su texto y quedaban desiguales. */
.admin-header__actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: stretch;
    gap: 8px;
}

.admin-header__actions .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 36px;
    padding: 8px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    box-sizing: border-box;
}

.admin-header__actions .btn-secondary i {
    font-size: 0.9em;
}

@media (max-width: 900px) {
    .admin-header__actions {
        grid-auto-flow: row;
        grid-auto-columns: auto;
    }
    .admin-header__actions .btn-secondary {
        white-space: normal;
    }
}

.admin-title-group h1 {
    margin: 8px 0 6px;
    color: #1e1e2f;
}

.admin-title-group p {
    color: #5c5f6a;
    margin: 0;
}

.admin-pill {
    display: inline-block;
    padding: 6px 12px;
    background: #e8e8f5;
    color: #4b4f66;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.4px;
}

.admin-highlight {
    display: flex;
    gap: 12px;
    align-items: center;
    background: #fff7f0;
    border: 1px solid #ffe1c7;
    padding: 14px 16px;
    border-radius: 12px;
    color: #8a4f2e;
    box-shadow: var(--box-shadow);
    margin-top: 14px;
}

.admin-table-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 18px 18px 26px;
    margin-top: 24px;
    box-shadow: var(--box-shadow);
    overflow-x: auto;
}

.table-headline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.table-headline h3 {
    margin: 0;
    color: #1e1e2f;
}

.table-headline p {
    margin: 4px 0 0;
    color: #6d7280;
}

.admin-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin: 18px 0 16px;
    padding: 16px;
    border: 1px solid #edf0f7;
    border-radius: 14px;
    background: #fafbff;
}

.admin-filter-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-filter-field label {
    font-size: 0.9rem;
    font-weight: 700;
    color: #343a40;
}

.admin-filter-field select {
    width: 100%;
    min-height: 42px;
    border: 1px solid #d6dbea;
    border-radius: 10px;
    padding: 0 12px;
    background: #fff;
    color: #1e1e2f;
    font-size: 0.95rem;
}

.admin-filter-field select:focus {
    outline: none;
    border-color: var(--color-primary-light);
    box-shadow: 0 0 0 3px rgba(158, 17, 115, 0.12);
}

#orders-table {
    width: 100% !important;
}

.table-legend .status-pill {
    margin-left: 8px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: none;
    color: #1e1e2f;
    background: #eef0f7;
}

.status-pill.success {
    background: rgba(46, 204, 113, 0.15);
    color: #1d8348;
}

.status-pill.warning {
    background: rgba(255, 193, 7, 0.18);
    color: #8a5b00;
}

.status-pill.neutral {
    background: #eef0f7;
    color: #4b4f66;
}

.status-pill.info {
    background: rgba(23, 162, 184, 0.18);
    color: #0c6674;
}

/* Refresco silencioso del panel tras una acción: la tabla se atenúa un instante */
.dataTables_wrapper.gc-refrescando { opacity: .85; transition: opacity .15s ease; cursor: progress; }

/* Botón "Marcar como pagado" en la columna Pago del panel de administración */
.gc-marcar-pagado {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 5px 10px;
    border: 1px solid #1d8348;
    border-radius: 999px;
    background: #fff;
    color: #1d8348;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}

.gc-marcar-pagado:hover:not(:disabled) {
    background: #1d8348;
    color: #fff;
}

/* Ventana de confirmación del panel (gcConfirmar): mismo aspecto que el modal de grupos de Moodle */
.gc-confirm-modal { z-index: 1000002; }
.gc-confirm-modal .moodle-group-modal__overlay { z-index: 0; }
.gc-confirm-modal .moodle-group-modal__content { z-index: 1; }
/* Todos los botones del popup iguales (Cancelar y el de acción): cada clase de botón del
   plugin trae su propio relleno, tamaño y margen inferior, y quedaban de alturas distintas. */
.gc-confirm-modal .moodle-group-modal__footer { align-items: center; }
.gc-confirm-modal .moodle-group-modal__footer > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: auto;
    min-width: 110px;
    height: 44px;
    margin: 0;
    padding: 0 20px;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    transform: none;
}

.gc-confirm-modal__body p { margin: 0; line-height: 1.5; color: #374151; }

.gc-confirm-modal__pregunta { font-size: 1rem; }

.gc-confirm-modal__datos {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 16px;
    margin: 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: #f6f7fb;
    font-size: .92rem;
}

.gc-confirm-modal__datos dt { color: #6b7280; font-weight: 600; }
.gc-confirm-modal__datos dd { margin: 0; color: #1e1e2f; }

.gc-confirm-modal__faltas {
    margin: 0;
    padding: 10px 14px 10px 32px;
    border-radius: 10px;
    background: rgba(255, 193, 7, 0.14);
    color: #8a5b00;
    font-weight: 600;
}

.gc-confirm-modal__faltas li + li { margin-top: 4px; }

.gc-confirm-modal__nota { font-size: .88rem; color: #6b7280 !important; }

/* Matricular con requisitos pendientes (pago y/o documentación): se puede, tras aviso */
.btn-icon.matricular-pedido--aviso {
    position: relative;
}

.btn-icon.matricular-pedido--aviso::after {
    content: "";
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f0ad4e;
    box-shadow: 0 0 0 2px #fff;
}

.gc-marcar-pagado:disabled {
    opacity: .6;
    cursor: wait;
}

.admin-table .order-toggle {
    border: none;
    background: transparent;
    display: flex;
    gap: 8px;
    align-items: center;
    color: #1e1e2f;
    cursor: pointer;
    font-weight: 700;
}

.admin-table .order-toggle:hover {
    color: var(--color-primary);
}

.admin-table .btn-icon.view-order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(158, 17, 115, 0.12);
    color: var(--color-primary);
    text-decoration: none;
}

.admin-table .btn-icon.view-order.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.table-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6d7280;
    margin-top: 12px;
}

.admin-order-details {
    background: #fafbff;
    border: 1px solid #edf0f7;
    border-radius: 12px;
    padding: 16px;
    margin: 8px 0 16px;
}

.detail-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.detail-card {
    background: white;
    border-radius: 12px;
    padding: 14px;
    border: 1px solid #e6e8ef;
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
}

.detail-card-header {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}

.detail-card-header i {
    color: var(--color-primary);
    font-size: 1.1rem;
}

.eyebrow {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 0;
    color: #7a7f92;
}

.doc-list .doc-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eef0f7;
}

.doc-list .doc-item:last-child {
    border-bottom: none;
}

.doc-item-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.doc-item-group .doc-item {
    border: 1px dashed #eef0f7;
    padding: 10px 12px;
    border-radius: 10px;
}

/* Subida/reemplazo de documentos desde el panel de administración */
.doc-list .doc-item { flex-wrap: wrap; gap: 8px 10px; }
.doc-list .doc-item > div:first-child { flex: 1 1 auto; min-width: 0; }
.gc-admin-upload { display: inline-flex; align-items: center; cursor: pointer; margin: 0; }
.gc-admin-upload input[type="file"] {
    position: absolute; width: 1px; height: 1px;
    opacity: 0; overflow: hidden; clip: rect(0 0 0 0);
}
.gc-admin-upload > span {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.82rem; font-weight: 600; color: var(--color-primary);
    background: rgba(158, 17, 115, 0.08);
    border: 1px solid rgba(158, 17, 115, 0.25);
    border-radius: 8px; padding: 6px 12px; white-space: nowrap;
    transition: background .15s, border-color .15s;
}
.gc-admin-upload:hover > span { background: rgba(158, 17, 115, 0.16); border-color: var(--color-primary); }
.gc-admin-upload.uploading > span { opacity: 0.6; pointer-events: none; }
.gc-admin-upload.uploading > span::after { content: ' …'; }

/* === Flujo guiado gestión externa (stepper del cliente) === */
.gc-flujo { margin-top: 8px; }
.gc-step { position: relative; padding: 0 0 20px 46px; }
.gc-step:not(:last-child)::before {
    content: ''; position: absolute; left: 15px; top: 34px; bottom: 0; width: 2px; background: #e5e7eb;
}
.gc-step-head { display: flex; align-items: center; gap: 12px; }
.gc-step-badge {
    position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; color: #fff; background: #cbd5e1; z-index: 1;
}
.gc-step-badge.active { background: var(--color-primary); box-shadow: 0 0 0 4px rgba(158, 17, 115, .15); }
.gc-step-badge.done { background: #1a7f45; }
.gc-step-badge.locked { background: #cbd5e1; }
.gc-step-head h5 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--color-dark); }
.gc-step-body { margin-top: 8px; font-size: 14px; color: #374151; line-height: 1.55; }
.gc-step-body p { margin: 0 0 10px; }
.gc-step.is-locked { opacity: .65; }
.gc-step.is-locked .gc-step-head h5 { color: #6b7280; }
.gc-step-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .5px; color: #b3670a; margin: 0 0 6px; }
.gc-step-eyebrow.ok { color: #1a7f45; }
.gc-step-msg { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 6px; font-size: 13px; margin: 10px 0 0; }
.gc-step-msg.locked { background: #f3f4f6; color: #6b7280; }
.gc-step-msg.review { background: #fef7e0; color: #92610a; }
.gc-step-msg.ok { background: #e5f6ec; color: #1a7f45; }
.gc-step-next { margin-top: 10px; font-weight: 600; color: var(--color-primary-dark); }
.gc-check-list { margin: 0 0 12px; padding-left: 20px; }
.gc-check-list li { margin: 4px 0; }
.gc-btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--color-primary); color: #fff; border: 0;
    padding: 10px 18px; border-radius: 8px; font-weight: 600; font-size: 14px;
    cursor: pointer; text-decoration: none; transition: background .15s;
}
.gc-btn-primary:hover { background: var(--color-primary-dark); color: #fff; }
.gc-flujo-paso3-form .form-group { margin-bottom: 14px; }
.gc-step-final .gc-step-body { background: #e5f6ec; border-radius: 8px; padding: 14px 16px; }

.doc-title {
    margin: 0;
    color: #1f2430;
    font-weight: 700;
}

.doc-status {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.85rem;
    font-weight: 600;
}

.doc-status.success {
    color: #1d8348;
}

.doc-status.muted {
    color: #8b90a5;
}

.doc-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.btn-ghost {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 10px;
    background: #f3ecf7;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 700;
}

.btn-ghost:hover {
    background: #e9d9ef;
    color: var(--color-primary-dark);
}

.doc-hint {
    color: #7a7f92;
    font-style: italic;
    margin: 6px 0 0;
}

.doc-group {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #eef0f7;
}

.doc-group-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

.admin-users-list.loading {
    position: relative;
    min-height: 80px;
    overflow: hidden;
}

.skeleton-row {
    height: 14px;
    background: linear-gradient(90deg, #f1f3f8 25%, #e2e6f0 50%, #f1f3f8 75%);
    background-size: 200% 100%;
    border-radius: 8px;
    margin-bottom: 10px;
    animation: skeleton-shimmer 1.5s linear infinite;
}

.admin-users-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-users-table th,
.admin-users-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #eef0f7;
    text-align: left;
}

.admin-users-table th {
    color: #4b4f66;
    font-weight: 700;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
}

.table-responsive--users {
    max-height: 305px;
    overflow-y: auto;
}

.table-responsive--users .admin-users-table thead th {
    position: sticky;
    top: 0;
    background: #ffffff;
    z-index: 1;
}

.empty-state {
    margin: 8px 0;
    color: #7a7f92;
}

#orders-table tbody tr.shown {
    background: #faf5fc;
}

.admin-table .status-pill {
    font-weight: 700;
}

@media (max-width: 768px) {
    .table-headline {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* --- ESTILOS PARA CORREGIR EL LOGIN DE WOOCOMMERCE --- */

/* Forzar que los campos ocupen el 100% del ancho y no se pongan uno al lado del otro */
.gestion-compras-login-container .woocommerce-form-login .form-row {
    width: 100% !important;
    float: none !important;
    display: block !important;
    margin-bottom: 20px;
    padding: 0;
}

/* Estilo de las etiquetas (labels) */
.gestion-compras-login-container .woocommerce-form-login label {
    display: block;
    width: 100%;
    font-weight: 600;
    margin-bottom: 8px;
    color: #4a5568;
    font-size: 14px;
}

/* Estilo de las cajas de texto */
.gestion-compras-login-container .woocommerce-form-login input.input-text {
    width: 100% !important;
    padding: 12px 15px;
    border: 1px solid #cbd5e0;
    border-radius: 6px;
    background-color: #f8fafc;
    box-sizing: border-box;
    font-size: 15px;
    transition: all 0.2s ease;
}

.gestion-compras-login-container .woocommerce-form-login input.input-text:focus {
    border-color: #9B2271; /* Color de tu marca */
    background-color: #ffffff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(155, 34, 113, 0.1);
}

/* Corregir el layout de "Recuérdame" y el botón */
.gestion-compras-login-container .woocommerce-form-login .form-row:last-of-type {
    display: flex !important;
    flex-direction: column;
}

.gestion-compras-login-container .woocommerce-form-login label.woocommerce-form-login__rememberme {
    display: flex;
    align-items: center;
    font-weight: normal;
    margin-bottom: 20px;
    cursor: pointer;
}

.gestion-compras-login-container .woocommerce-form-login label.woocommerce-form-login__rememberme input {
    margin-right: 10px;
    margin-top: 0;
    width: auto !important;
}

/* Botón de Acceder estilo sólido (Color de tu marca) */
.gestion-compras-login-container .woocommerce-form-login button.woocommerce-button {
    width: 100%;
    background-color: #9B2271 !important; /* Morado/Magenta Concilia2 */
    color: #ffffff !important;
    border: none !important;
    padding: 14px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.gestion-compras-login-container .woocommerce-form-login button.woocommerce-button:hover {
    background-color: #7A1A59 !important; /* Color más oscuro al pasar el ratón */
    /* Anular el "hover raro" que Divi/WooCommerce aplica a .button:hover:
       ni salto de padding, ni borde, ni transform. */
    padding: 14px !important;
    border: none !important;
    transform: none !important;
    background-image: none !important;
}

/* Divi añade una flecha (::after con glifo "5" de la fuente ETmodules) que
   aparece deslizándose al pasar el ratón; es lo que se veía "raro". La quitamos
   en el botón de acceder, en todos los estados. */
.gestion-compras-login-container .woocommerce-form-login button.woocommerce-button::after,
.gestion-compras-login-container .woocommerce-form-login button.woocommerce-button::before,
.gestion-compras-login-container .woocommerce-form-login button.woocommerce-button:hover::after,
.gestion-compras-login-container .woocommerce-form-login button.woocommerce-button:hover::before {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    margin: 0 !important;
}

/* Enlace de contraseña olvidada */
.gestion-compras-login-container .woocommerce-form-login .lost_password {
    text-align: center;
    margin-top: 20px;
    display: block;
}

.gestion-compras-login-container .woocommerce-form-login .lost_password a {
    color: #9B2271;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.gestion-compras-login-container .woocommerce-form-login .lost_password a:hover {
    text-decoration: underline;
}
/* === Asignación de docente (panel administración) === */
.gc-docente-assign {
    background: white;
    border: 1px solid #e6e8ef;
    border-left: 4px solid var(--color-primary);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
}

.gc-docente-header {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}

.gc-docente-header i {
    color: var(--color-primary);
    font-size: 1.1rem;
}

.gc-docente-header strong {
    color: var(--color-dark);
    font-size: 0.98rem;
}

.gc-docente-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.gc-docente-label {
    font-weight: 600;
    color: var(--color-dark);
    white-space: nowrap;
}

.gc-docente-select {
    flex: 1 1 240px;
    min-width: 200px;
    padding: 8px 10px;
    border: 1px solid #d3d7e3;
    border-radius: 8px;
    background: #fff;
    color: var(--color-dark);
    font-size: 0.92rem;
}

.gc-docente-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(158, 17, 115, 0.12);
}

.gc-docente-row .gc-docente-save {
    white-space: nowrap;
}

/* === Datos FUNDAE (panel administración) === */
.gc-fundae-assign {
    background: white;
    border: 1px solid #e6e8ef;
    border-left: 4px solid var(--color-primary);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
}

.gc-fundae-header {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}

.gc-fundae-header i {
    color: var(--color-primary);
    font-size: 1.1rem;
}

.gc-fundae-header strong {
    color: var(--color-dark);
    font-size: 0.98rem;
}

.gc-fundae-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.gc-fundae-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 220px;
    min-width: 180px;
}

.gc-fundae-field label {
    font-weight: 600;
    color: var(--color-dark);
    font-size: 0.88rem;
}

.gc-fundae-field input {
    padding: 12px 14px;
    min-height: 46px;
    box-sizing: border-box;
    border: 1px solid #d3d7e3;
    border-radius: 8px;
    background: #fff;
    color: var(--color-dark);
    font-size: 0.95rem;
    line-height: 1.4;
}

.gc-fundae-field input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(158, 17, 115, 0.12);
}

.gc-fundae-row .gc-fundae-save {
    white-space: nowrap;
    min-height: 46px;
    padding: 0 22px;
}

/* === Detalle admin: agrupar y compactar === */
.gc-admin-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}
.gc-admin-actions .gc-docente-assign,
.gc-admin-actions .gc-fundae-assign { margin-bottom: 0; height: 100%; }
.gc-docente-assign, .gc-fundae-assign { padding: 12px 14px; }
.gc-docente-header, .gc-fundae-header { margin-bottom: 10px; }
.gc-docente-header strong, .gc-fundae-header strong { font-size: 0.92rem; }
/* "Guardar" a ancho automático (no barras a ancho completo) */
.gc-docente-row .gc-docente-save,
.gc-fundae-row .gc-fundae-save {
    width: auto !important;
    flex: 0 0 auto;
    min-height: 40px;
    padding: 9px 22px;
    font-size: 0.9rem;
}
/* La fila FUNDAE apila label+input (align-items:flex-end) → el botón va abajo.
   La fila docente es una sola línea: select y botón comparten alto (40px) y se
   estiran juntos, así quedan exactamente a la misma altura. */
.gc-fundae-row .gc-fundae-save { align-self: flex-end; }
.gc-docente-row { align-items: stretch; }
.gc-docente-row .gc-docente-label { align-self: center; }
.gc-docente-row .gc-docente-select,
.gc-docente-row .gc-docente-save {
    align-self: stretch;
    min-height: 40px;
    box-sizing: border-box;
}
.gc-docente-row .gc-docente-select { padding: 9px 12px; }
.gc-fundae-field input { min-height: 40px; padding: 9px 12px; }
/* Validación de documentación como pie de la tarjeta de DOCUMENTACIÓN */
.gc-validar-docs {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    margin-top: 12px; padding-top: 12px; border-top: 1px dashed #e6e8ef;
}
.gc-validar-docs .gc-validar-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gc-validar-docs .btn-primary,
.gc-validar-docs .btn-ghost {
    width: auto !important; flex: 0 0 auto; padding: 8px 18px; font-size: 0.9rem;
}

/* Variantes de estado que faltaban (columna "Estado FUNDAE" del admin) */
.status-pill.muted { background: #eef0f7; color: #6b7280; }
.status-pill.primary { background: rgba(158, 17, 115, 0.12); color: var(--color-primary-dark); }

/* Badge de estado del flujo en la tarjeta del cliente */
.estado-pill {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .82rem; font-weight: 600; padding: 4px 11px; border-radius: 20px; white-space: nowrap;
}
.estado-pill.estado-muted   { background: #eef0f3; color: #6b7280; }
.estado-pill.estado-warning { background: #fdf0e3; color: #b3670a; }
.estado-pill.estado-info    { background: #e6f3f6; color: #0c6674; }
.estado-pill.estado-primary { background: rgba(158, 17, 115, 0.12); color: var(--color-primary-dark); }
.estado-pill.estado-success { background: #e5f6ec; color: #1a7f45; }

/* ==========================================================================
   Panel del cliente: resumen por estado y secciones (Procesando / Pendiente de
   inicio / En curso / Finalizados).
   - Resumen: la misma franja de cifras que el panel de administración
     (separadores finos, número oscuro y punto de color en la etiqueta).
   - Títulos de sección: como los subtítulos de la web (Heebo, color corporativo,
     sin caja) y el contador con la misma píldora que las fichas de formación.
   ========================================================================== */
.gc-estado--procesando       { --gc-c: #a56a08; }
.gc-estado--pendiente_inicio { --gc-c: #0c6674; }
.gc-estado--en_curso         { --gc-c: #0f7b4f; }
.gc-estado--finalizado       { --gc-c: #8b91a3; }

/* Resumen */
.gc-resumen {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 0 40px;
    background: #fcfcfe;
    border: 1px solid #e4e7f0;
    border-radius: 10px;
    overflow: hidden;
}
.gc-resumen__estado {
    position: relative;
    display: block;
    padding: 12px 16px;
    border-left: 1px solid #eef0f6;
    text-decoration: none !important;
    color: inherit;
    transition: background .15s ease;
}
.gc-resumen__estado:first-child { border-left: 0; }
.gc-resumen__estado::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: transparent; transition: background .15s ease;
}
a.gc-resumen__estado:hover,
a.gc-resumen__estado:focus-visible { background: #f4f5fa; outline: none; }
a.gc-resumen__estado:hover::before,
a.gc-resumen__estado:focus-visible::before { background: var(--color-primary); }
.gc-resumen__n {
    display: block;
    font-size: 21px; font-weight: 700; line-height: 1.1;
    color: #1c1e2b; font-variant-numeric: tabular-nums;
}
.gc-resumen__label {
    display: block; margin-top: 2px;
    font-size: 12px; font-weight: 500; line-height: 1.3;
    color: var(--gc-c);
}
.gc-resumen__label::before {
    content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 5px;
    border-radius: 50%; background: currentColor; vertical-align: middle; opacity: .55;
}
.gc-resumen__estado.is-empty .gc-resumen__n { color: #c3c7d1; }
.gc-resumen__estado.is-empty .gc-resumen__label { color: #b6bcc6; }

/* Secciones */
.gc-seccion { margin: 0 0 40px; scroll-margin-top: 140px; }
.gc-seccion__cabecera { margin: 0 0 18px; }
.gc-seccion__titulo {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    margin: 0 !important; padding: 0 !important;
    font-family: 'Heebo', Helvetica, Arial, sans-serif;
    font-size: 22px !important; font-weight: 700; line-height: 1.3 !important;
    color: #9d1873 !important;
}
/* Punto con el color del estado delante del título (enlaza con el resumen) */
.gc-seccion__titulo::before {
    content: ''; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
    background: var(--gc-c);
}
/* Contador: la misma píldora que «# 6 módulos» en las fichas de formación */
.gc-seccion__n {
    display: inline-block;
    padding: 3px 8px;
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 14px; font-weight: 400; line-height: 1.3;
    color: #9d1873; background: #f7f7fb;
    border: 1px solid rgba(0, 0, 0, .08); border-radius: 8px;
}
.gc-seccion__desc { margin: 4px 0 0 18px !important; padding: 0 !important; font-size: 14px; line-height: 1.5; color: #666; }

/* Finalizados: plegable */
.gc-seccion--plegable .gc-seccion__cabecera { cursor: pointer; user-select: none; margin-bottom: 0; }
.gc-seccion--plegable .gc-seccion__cabecera:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; border-radius: 4px; }
/* La flecha la cambia el JS (chevron-down ↔ chevron-up): aquí no se gira, o se giraría dos veces. */
.gc-seccion--plegable .toggle-icon { font-size: 15px; color: #9d1873; }
.gc-seccion--plegable .completed-orders { padding: 18px 0 0; background: transparent; border-top: 0; }
.gc-seccion--plegable .completed-orders .orders-grid { padding: 0; }

@media (max-width: 760px) {
    .gc-resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gc-resumen__estado { border-left: 0; border-top: 1px solid #eef0f6; }
    .gc-resumen__estado:nth-child(-n+2) { border-top: 0; }
    .gc-resumen__estado:nth-child(even) { border-left: 1px solid #eef0f6; }
    .gc-seccion__titulo { font-size: 19px !important; }
}

/* Panel del cliente: texto junto al estado del curso ("Empieza el…", "Falta: pago"…) */
.order-header-tags .estado-curso-detalle { font-size: .78rem; color: #6b7280; white-space: nowrap; }

/* Panel del cliente: las etiquetas de la cabecera de cada curso (tipo y estado) son fijas,
   sin animación de "latido". */
.order-card .category-badge,
.order-card .estado-pill { animation: none !important; transform: none !important; }

/* orders-table sin responsive: scroll horizontal si las columnas no caben,
   para que el detalle personalizado del pedido funcione (Responsive lo rompía). */
#orders-table_wrapper { overflow-x: auto; }

/* Etiqueta de tipo de bonificación bajo el nombre del curso (listado admin) */
.tipo-tag {
    display: inline-block; font-size: .72rem; font-weight: 700;
    padding: 2px 8px; border-radius: 10px; margin-top: 4px; white-space: nowrap;
}
.tipo-tag.tipo-externo { background: #e6f3f6; color: #0c6674; }
.tipo-tag.tipo-interno { background: rgba(158, 17, 115, 0.12); color: var(--color-primary-dark); }
.tipo-tag.tipo-privado { background: #eef0f3; color: #6b7280; }
/* Modalidad del curso (campo _gc_modalidad / categoría), junto a la etiqueta de bonificación */
.tipo-tag + .tipo-tag { margin-left: 6px; }
.tipo-tag.modalidad-teleformacion { background: #e8f1fd; color: #1b4f9c; }
.tipo-tag.modalidad-virtual { background: #e7f6ee; color: #0f7b4f; }
.tipo-tag.modalidad-presencial { background: #fdefe3; color: #9a5216; }

/* Tabla admin sin nowrap: las columnas se adaptan al ancho (menos scroll horizontal) */
.admin-table th, .admin-table td { white-space: normal; vertical-align: middle; }
.admin-table td { padding: 8px 10px; }
.admin-table .product-name { display: inline-block; max-width: 240px; line-height: 1.3; }
/* El detalle del pedido no se estira de más y queda siempre legible */
.admin-order-details { max-width: 100%; }
/* Ficha FUNDAE del admin bloqueada (aún sin tutor) */
.gc-ficha-admin.is-locked { opacity: .9; }
.gc-ficha-admin.is-locked .doc-status { display: inline-flex; align-items: center; gap: 6px; }

/* === Tarjetas-resumen (KPI) del panel admin — clic = filtrar === */
.admin-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin: 4px 0 18px;
}
.admin-kpi {
    display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
    background: #fff; border: 1px solid #e6e8ef; border-left: 4px solid #cbd5e1;
    border-radius: 12px; padding: 12px 16px; cursor: pointer; text-align: left;
    box-shadow: 0 4px 10px rgba(0,0,0,0.04); transition: transform .12s, box-shadow .12s;
}
.admin-kpi:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
.admin-kpi.is-active { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.admin-kpi .kpi-num { font-size: 1.6rem; font-weight: 800; line-height: 1; color: #1f2430; }
.admin-kpi .kpi-label { font-size: 0.8rem; color: #6b7280; font-weight: 600; }
.admin-kpi.kpi-warning { border-left-color: #f0b429; }
.admin-kpi.kpi-warning .kpi-num { color: #b3670a; }
.admin-kpi.kpi-primary, .admin-kpi.kpi-interno { border-left-color: var(--color-primary); }
.admin-kpi.kpi-primary .kpi-num, .admin-kpi.kpi-interno .kpi-num { color: var(--color-primary-dark); }
.admin-kpi.kpi-success { border-left-color: #1a7f45; }
.admin-kpi.kpi-success .kpi-num { color: #1a7f45; }

/* Celdas combinadas del listado admin */
.estado-cell { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.estado-cell .status-pill { font-size: 0.76rem; padding: 3px 10px; }
/* Bajo "Pagado": quién lo marcó y cuándo */
.estado-cell .gc-pago-detalle { font-size: 0.7rem; line-height: 1.3; color: #6b7280; padding-left: 4px; white-space: nowrap; }
.estado-cell .gc-pago-detalle i { width: 13px; text-align: center; }
.estado-cell .gc-pago-detalle strong { font-weight: 700; }
/* Colores del método para distinguirlos de un vistazo */
.estado-cell .gc-pago-tarjeta strong, .estado-cell .gc-pago-tarjeta i { color: #2563eb; }
.estado-cell .gc-pago-transferencia strong, .estado-cell .gc-pago-transferencia i { color: #9e1173; }
.fecha-cell { display: flex; flex-direction: column; gap: 2px; font-size: 0.85rem; }
.fecha-cell .fecha-label { display: inline-block; min-width: 42px; color: #9096a6; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; }
.accion-cell { display: inline-flex; gap: 8px; align-items: center; }

/* === Campo Código FUNDAE (cliente) === */
.codigo-fundae-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d3d7e3;
    border-radius: 8px;
    font-size: 0.95rem;
    box-sizing: border-box;
}

.codigo-fundae-input:disabled {
    background: #eef0f5;
    color: #8a8f9e;
    cursor: not-allowed;
}

/* === Convocatoria seleccionada (informativo, panel administración) === */
.gc-convocatoria-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #f4f6fb;
    border: 1px solid #e6e8ef;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 16px;
    color: var(--color-dark);
    font-size: 0.92rem;
}

.gc-convocatoria-info .gc-info-line {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gc-convocatoria-info i {
    color: var(--color-primary);
    width: 16px;
    text-align: center;
}

/* El RLT del popup se oculta con el atributo [hidden]. La regla de la rejilla pone
   display:flex en todas las etiquetas y le ganaba, así que hay que decirlo explícitamente. */
.crear-pedido-grid label[hidden] {
    display: none !important;
}

/* ============================================================================
   REDISEÑO DEL PANEL DE ADMINISTRACIÓN
   ----------------------------------------------------------------------------
   Todo lo que sigue está acotado a .admin-redesign, así que gana a las reglas
   sueltas de más arriba sin tener que tocarlas ni arriesgar el resto del plugin.

   Criterios:
   · Una sola escala de espacios y de tamaños de texto, en vez de valores sueltos.
   · Grises fríos y un único acento (el magenta de la marca) para lo accionable.
   · Bordes de 1px y sombras muy suaves: la jerarquía la da el espacio, no la caja.
   · Densidad alta: esto es una herramienta de trabajo, no una web de escaparate.
   ============================================================================ */

.admin-redesign {
    /* Escala de espacios */
    --gc-1: 4px;
    --gc-2: 8px;
    --gc-3: 12px;
    --gc-4: 16px;
    --gc-5: 24px;
    --gc-6: 32px;

    /* Superficies y líneas */
    --gc-bg: #f6f7fb;
    --gc-surface: #ffffff;
    --gc-line: #e4e7f0;
    --gc-line-soft: #eef0f6;

    /* Texto */
    --gc-ink: #1c1e2b;
    --gc-ink-2: #5a5f70;
    --gc-ink-3: #8b91a3;

    --gc-radius: 10px;
    --gc-radius-sm: 7px;

    max-width: 1560px;
    margin: 0 auto;
    padding: var(--gc-4) var(--gc-4) var(--gc-6);
    color: var(--gc-ink);
    font-size: 14px;
    line-height: 1.45;
}

.admin-redesign *,
.admin-redesign *::before,
.admin-redesign *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------
   1. Barra superior
   --------------------------------------------------------------- */

.admin-redesign .admin-header {
    display: block;
    margin-bottom: var(--gc-4);
    padding-bottom: var(--gc-3);
    border-bottom: 1px solid var(--gc-line);
}

.admin-redesign .admin-header__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gc-4);
    flex-wrap: wrap;
}

.admin-redesign .admin-title-group { min-width: 0; }

/* La píldora "Solo administradores" pasa a ser una marca discreta sobre el título. */
.admin-redesign .admin-pill {
    display: inline-block;
    margin-bottom: var(--gc-1);
    padding: 2px var(--gc-2);
    background: rgba(158, 17, 115, .08);
    color: var(--color-primary);
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-redesign .admin-title-group h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--gc-ink);
}

.admin-redesign .admin-title-group h1 i {
    margin-right: var(--gc-2);
    color: var(--color-primary);
    font-size: 18px;
}

.admin-redesign .admin-title-group > p {
    margin: 2px 0 0;
    color: var(--gc-ink-3);
    font-size: 12.5px;
}

/* Botonera: uno primario y el resto neutros, todos a la misma altura. */
.admin-redesign .admin-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gc-2);
    align-items: center;
}

.admin-redesign .admin-header__actions .btn-primary,
.admin-redesign .admin-header__actions .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    min-height: 34px;
    padding: 0 var(--gc-3);
    border: 1px solid transparent;
    border-radius: var(--gc-radius-sm);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

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

.admin-redesign .admin-header__actions .btn-primary:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.admin-redesign .admin-header__actions .btn-secondary {
    background: var(--gc-surface);
    border-color: var(--gc-line);
    color: var(--gc-ink-2);
}

.admin-redesign .admin-header__actions .btn-secondary:hover {
    border-color: #c9cede;
    background: #fbfbfe;
    color: var(--gc-ink);
}

.admin-redesign .admin-header__actions i { font-size: 11px; opacity: .85; }

/* El aviso naranja pasa a ser una línea de ayuda, no un cartel. */
.admin-redesign .admin-highlight {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: var(--gc-3) 0 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    color: var(--gc-ink-3);
    font-size: 12px;
}

.admin-redesign .admin-highlight strong { color: var(--gc-ink-2); font-weight: 600; }
.admin-redesign .admin-highlight i { color: var(--gc-ink-3); }

/* ---------------------------------------------------------------
   2. Tarjeta del listado
   --------------------------------------------------------------- */

.admin-redesign .admin-table-card {
    padding: 0;
    margin: 0;
    background: var(--gc-surface);
    border: 1px solid var(--gc-line);
    border-radius: var(--gc-radius);
    box-shadow: 0 1px 2px rgba(20, 24, 45, .04);
    overflow: visible;
}

.admin-redesign .table-headline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gc-3);
    flex-wrap: wrap;
    margin: 0;
    padding: var(--gc-3) var(--gc-4);
    border-bottom: 1px solid var(--gc-line-soft);
}

.admin-redesign .table-headline h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--gc-ink);
}

.admin-redesign .table-headline > div > p {
    margin: 1px 0 0;
    font-size: 12px;
    color: var(--gc-ink-3);
}

.admin-redesign .table-legend { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------------------------------------------------------------
   3. Resumen numérico
   --------------------------------------------------------------- */

.admin-redesign .admin-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    background: #fcfcfe;
    border-bottom: 1px solid var(--gc-line-soft);
}

/* Separadores finos entre cifras, en vez de seis cajas con borde propio. Cada una es un
   botón que filtra el listado, así que se comporta como tal al pasar por encima. */
.admin-redesign .admin-kpi {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: var(--gc-3) var(--gc-4);
    background: none;
    border: 0;
    border-left: 1px solid var(--gc-line-soft);
    border-radius: 0;
    box-shadow: none;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease;
}

.admin-redesign .admin-kpi:first-child { border-left: 0; }
.admin-redesign .admin-kpi:hover { background: #f4f5fa; }

/* Franja de color arriba: indica de qué estado habla la cifra sin llenarlo todo. */
.admin-redesign .admin-kpi::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: transparent;
    transition: background .15s ease;
}

.admin-redesign .admin-kpi.is-active { background: #f2f3f9; }
.admin-redesign .admin-kpi.is-active::before { background: var(--color-primary); }

.admin-redesign .kpi-num {
    display: block;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--gc-ink);
    font-variant-numeric: tabular-nums;
}

.admin-redesign .kpi-label {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--gc-ink-3);
}

/* Un punto de color delante de la etiqueta, según el estado que representa. */
.admin-redesign .kpi-label::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 5px;
    border-radius: 50%;
    background: currentColor;
    vertical-align: middle;
    opacity: .55;
}

.admin-redesign .kpi-warning .kpi-label { color: #a56a08; }
.admin-redesign .kpi-success .kpi-label { color: #0f7b4f; }
.admin-redesign .kpi-primary .kpi-label,
.admin-redesign .kpi-interno .kpi-label { color: var(--color-primary); }
.admin-redesign .kpi-muted .kpi-label { color: var(--gc-ink-3); }

/* ---------------------------------------------------------------
   4. Filtros
   --------------------------------------------------------------- */

.admin-redesign .admin-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    align-items: end;
    gap: var(--gc-2) var(--gc-3);
    margin: 0;
    /* El borde inferior lo pone ahora la barra de acciones, que va justo debajo. */
    padding: var(--gc-3) var(--gc-4) var(--gc-2);
    background: none;
    border: 0;
    border-radius: 0;
    /* minmax() usa el mayor entre 150px y el contenido mínimo del campo. Sin esto, un
       <select> con una opción larga impone su ancho y saca la rejilla de la tarjeta. */
    min-width: 0;
}

.admin-redesign .admin-filter-field { gap: 3px; min-width: 0; }

.admin-redesign .admin-filter-field > label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gc-ink-3);
}

.admin-redesign .admin-filters select,
.admin-redesign .admin-filters input[type="date"] {
    width: 100%;
    min-width: 0;
    height: 32px;
    padding: 0 var(--gc-2);
    background: var(--gc-surface);
    border: 1px solid var(--gc-line);
    border-radius: var(--gc-radius-sm);
    font-size: 12.5px;
    color: var(--gc-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.admin-redesign .admin-filters select:focus,
.admin-redesign .admin-filters input[type="date"]:focus {
    outline: none;
    border-color: var(--color-primary-light);
    box-shadow: 0 0 0 3px rgba(158, 17, 115, .1);
}

/* Los dos campos de un rango comparten ancho y se separan con la "a". */
.admin-redesign .admin-filter-field--fechas { grid-column: span 2; min-width: 0; }

.admin-redesign .admin-filter-rango {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* Los campos de fecha traen un ancho mínimo propio del navegador; hay que anularlo
   o los dos juntos no caben en su columna. */
.admin-redesign .admin-filter-rango input[type="date"] {
    min-width: 0;
    padding: 0 4px;
    font-size: 11.5px;
}

.admin-redesign .admin-filter-rango span {
    font-size: 11px;
    color: var(--gc-ink-3);
}

/* Barra de acciones de los filtros, en su propia fila y alineada a la derecha.
   Estaba dentro de la rejilla y su ancho mínimo (dos botones con texto) estiraba la
   columna, que arrastraba a las demás y sacaba el bloque entero fuera de la tarjeta. */
.admin-redesign .admin-filters-bar {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--gc-2);
    padding: 0 var(--gc-4) var(--gc-3);
    border-bottom: 1px solid var(--gc-line-soft);
}

.admin-redesign .admin-filters-bar .btn-primary,
.admin-redesign .admin-filters-bar .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: auto;
    height: 32px;
    padding: 0 var(--gc-3);
    border: 1px solid transparent;
    border-radius: var(--gc-radius-sm);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.admin-redesign .admin-filters-bar .btn-secondary {
    background: var(--gc-surface);
    border-color: var(--gc-line);
    color: var(--gc-ink-2);
}

.admin-redesign .admin-filters-bar .btn-secondary:hover {
    border-color: #c9cede;
    color: var(--gc-ink);
}

.admin-redesign .admin-filters-bar .btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.admin-redesign .admin-filters-bar .btn-primary:hover { background: var(--color-primary-dark); }

/* ---------------------------------------------------------------
   5. Buscador y paginación de DataTables
   --------------------------------------------------------------- */

.admin-redesign .dataTables_wrapper { padding: 0; }

.admin-redesign .dataTables_filter {
    float: none;
    margin: 0;
    padding: var(--gc-3) var(--gc-4);
    text-align: left;
    border-bottom: 1px solid var(--gc-line-soft);
}

.admin-redesign .dataTables_filter label {
    display: flex;
    align-items: center;
    gap: var(--gc-2);
    max-width: 420px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gc-ink-3);
}

.admin-redesign .dataTables_filter input {
    flex: 1 1 auto;
    height: 34px;
    margin: 0;
    padding: 0 var(--gc-3);
    background: var(--gc-bg);
    border: 1px solid var(--gc-line);
    border-radius: var(--gc-radius-sm);
    font-size: 13px;
    color: var(--gc-ink);
}

.admin-redesign .dataTables_filter input:focus {
    outline: none;
    background: var(--gc-surface);
    border-color: var(--color-primary-light);
    box-shadow: 0 0 0 3px rgba(158, 17, 115, .1);
}

.admin-redesign .dataTables_info,
.admin-redesign .dataTables_paginate {
    padding: var(--gc-3) var(--gc-4);
    font-size: 12px;
    color: var(--gc-ink-3);
}

.admin-redesign .dataTables_paginate .paginate_button {
    padding: 4px 10px !important;
    margin: 0 2px;
    border: 1px solid transparent !important;
    border-radius: var(--gc-radius-sm) !important;
    font-size: 12px;
    color: var(--gc-ink-2) !important;
    background: none !important;
}

.admin-redesign .dataTables_paginate .paginate_button:hover {
    background: var(--gc-bg) !important;
    border-color: var(--gc-line) !important;
    color: var(--gc-ink) !important;
}

.admin-redesign .dataTables_paginate .paginate_button.current {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}
/* Refuerzo: la página seleccionada debe leerse siempre (texto blanco sobre el morado).
   Se sube la especificidad con `a.paginate_button.current` porque un estilo del tema Divi
   dejaba el número en oscuro pese al !important. Cubre panel admin y listados. */
.admin-redesign .dataTables_paginate a.paginate_button.current,
.admin-redesign .dataTables_paginate a.paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate a.paginate_button.current,
.dataTables_wrapper .dataTables_paginate a.paginate_button.current:hover {
    color: #fff !important;
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* ---------------------------------------------------------------
   6. Tabla
   --------------------------------------------------------------- */

.admin-redesign .admin-table { border-collapse: collapse; }

.admin-redesign .dataTables_scrollHead { background: #fbfbfe; }

.admin-redesign .admin-table thead th {
    padding: var(--gc-2) var(--gc-3);
    background: #fbfbfe;
    border: 0;
    border-bottom: 1px solid var(--gc-line);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gc-ink-3);
    white-space: nowrap;
}

.admin-redesign .admin-table tbody td {
    padding: var(--gc-2) var(--gc-3);
    border: 0;
    border-bottom: 1px solid var(--gc-line-soft);
    font-size: 12.5px;
    vertical-align: middle;
    color: var(--gc-ink-2);
}

.admin-redesign .admin-table tbody tr:hover td { background: #fbfbfe; }

/* La fila del detalle no reacciona al hover ni lleva relleno de celda. */
.admin-redesign .admin-table tbody tr.gc-fila-detalle:hover td { background: none; }
.admin-redesign .admin-table tbody td.gc-celda-detalle { padding: 0; background: var(--gc-bg); }

/* El número de pedido dispara el detalle, así que se lee como un botón. */
.admin-redesign .admin-table .order-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--gc-radius-sm);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--gc-ink);
    cursor: pointer;
}

.admin-redesign .admin-table .order-toggle:hover {
    background: rgba(158, 17, 115, .07);
    border-color: rgba(158, 17, 115, .18);
    color: var(--color-primary);
}

.admin-redesign .admin-table .order-toggle i {
    font-size: 9px;
    color: var(--gc-ink-3);
    transition: transform .15s ease;
}

.admin-redesign .admin-table tr.shown .order-toggle i { transform: rotate(180deg); }

.admin-redesign .admin-table tr.shown .order-toggle {
    background: rgba(158, 17, 115, .07);
    color: var(--color-primary);
}

/* Cliente: nombre arriba, correo debajo y más apagado. */
.admin-redesign .user-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.admin-redesign .user-info .user-name {
    font-weight: 600;
    color: var(--gc-ink);
    font-size: 12.5px;
}

.admin-redesign .user-info .user-email { font-size: 11px; color: var(--gc-ink-3); }
.admin-redesign .user-info i { display: none; }

.admin-redesign .admin-table .product-name {
    display: block;
    max-width: 260px;
    font-weight: 600;
    color: var(--gc-ink);
    font-size: 12.5px;
}

/* Etiquetas de tipo y modalidad: pequeñas y sin gritar. */
.admin-redesign .tipo-tag {
    display: inline-block;
    margin: 3px 4px 0 0;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
}

.admin-redesign .tipo-tag + .tipo-tag { margin-left: 0; }

.admin-redesign .status-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}

/* ID FUNDAE editable dentro de la celda. */
.admin-redesign .idfundae-cell { display: flex; align-items: center; gap: var(--gc-1); }

.admin-redesign .idfundae-input {
    width: 100%;
    min-width: 88px;
    height: 28px;
    padding: 0 6px;
    background: var(--gc-surface);
    border: 1px solid var(--gc-line);
    border-radius: 6px;
    font-size: 12px;
    color: var(--gc-ink);
}

.admin-redesign .idfundae-input:focus {
    outline: none;
    border-color: var(--color-primary-light);
    box-shadow: 0 0 0 3px rgba(158, 17, 115, .1);
}

.admin-redesign .idfundae-na { color: var(--gc-ink-3); }

/* Iconos de acción: cuadrados iguales, con color solo al pasar por encima. */
.admin-redesign .accion-cell { display: flex; align-items: center; gap: var(--gc-1); }

.admin-redesign .accion-cell .btn-icon,
.admin-redesign .admin-table .btn-icon.view-order,
.admin-redesign .admin-table .btn-icon--danger,
.admin-redesign .admin-table .btn-icon.idfundae-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 12px;
    color: var(--gc-ink-3);
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.admin-redesign .accion-cell .btn-icon:hover,
.admin-redesign .admin-table .btn-icon.view-order:hover,
.admin-redesign .admin-table .btn-icon.idfundae-save:hover {
    background: rgba(158, 17, 115, .08);
    border-color: rgba(158, 17, 115, .18);
    color: var(--color-primary);
}

.admin-redesign .admin-table .btn-icon--danger:hover:not(:disabled) {
    background: rgba(217, 83, 79, .1);
    border-color: rgba(217, 83, 79, .25);
    color: #c9302c;
}

.admin-redesign .table-hint {
    margin: 0;
    padding: var(--gc-3) var(--gc-4);
    border-top: 1px solid var(--gc-line-soft);
    font-size: 11.5px;
    color: var(--gc-ink-3);
}

/* ---------------------------------------------------------------
   7. Detalle del pedido
   --------------------------------------------------------------- */

.admin-redesign .admin-order-details {
    margin: 0;
    padding: var(--gc-4);
    background: var(--gc-bg);
    border: 0;
    border-top: 2px solid var(--color-primary);
    border-radius: 0;
}

/* Tira de gestión: convocatoria, docente, FUNDAE y ficha, todo a la misma altura. */
.admin-redesign .gc-detalle-top {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(252px, 1fr));
    align-items: stretch;
    gap: var(--gc-3);
    margin-bottom: var(--gc-4);
}

.admin-redesign .gc-detalle-top > * {
    display: flex;
    flex-direction: column;
    gap: var(--gc-2);
    height: 100%;
    margin: 0;
    padding: var(--gc-3);
    background: var(--gc-surface);
    border: 1px solid var(--gc-line);
    border-radius: var(--gc-radius-sm);
    box-shadow: none;
    font-size: 12.5px;
}

/* Un único estilo de rótulo para todas las cajas del detalle. */
.admin-redesign .gc-detalle-top .eyebrow,
.admin-redesign .detail-card-header .eyebrow {
    margin: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--gc-ink-3);
}

.admin-redesign .gc-detalle-top .gc-docente-header,
.admin-redesign .gc-detalle-top .gc-fundae-header {
    display: block;
    margin: 0;
    padding: 0;
}

/* El icono y el segundo título repetían lo que ya dice el rótulo. */
.admin-redesign .gc-detalle-top .gc-docente-header i,
.admin-redesign .gc-detalle-top .gc-fundae-header i,
.admin-redesign .gc-detalle-top .gc-docente-header strong,
.admin-redesign .gc-detalle-top .gc-fundae-header strong { display: none; }

.admin-redesign .gc-detalle-top .gc-docente-row,
.admin-redesign .gc-detalle-top .gc-fundae-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--gc-2);
    margin: 0;
}

.admin-redesign .gc-detalle-top .gc-docente-label { display: none; }
.admin-redesign .gc-detalle-top .gc-docente-select { flex: 1 1 130px; min-width: 0; }
.admin-redesign .gc-detalle-top .gc-fundae-field { flex: 1 1 120px; min-width: 0; }

.admin-redesign .gc-detalle-top .gc-fundae-field label {
    display: block;
    margin-bottom: 2px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--gc-ink-3);
}

.admin-redesign .gc-detalle-top select,
.admin-redesign .gc-detalle-top input[type="text"] {
    width: 100%;
    height: 30px;
    padding: 0 var(--gc-2);
    background: var(--gc-surface);
    border: 1px solid var(--gc-line);
    border-radius: 6px;
    font-size: 12px;
    color: var(--gc-ink);
}

.admin-redesign .gc-detalle-top select:focus,
.admin-redesign .gc-detalle-top input[type="text"]:focus {
    outline: none;
    border-color: var(--color-primary-light);
    box-shadow: 0 0 0 3px rgba(158, 17, 115, .1);
}

.admin-redesign .gc-detalle-top .btn-primary,
.admin-redesign .gc-detalle-top .gc-ficha-admin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: auto !important;
    flex: 0 0 auto;
    height: 30px;
    min-height: 0;
    padding: 0 var(--gc-3);
    background: var(--color-primary);
    border: 0;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

.admin-redesign .gc-detalle-top .btn-primary:hover,
.admin-redesign .gc-detalle-top .gc-ficha-admin-btn:hover { background: var(--color-primary-dark); }

/* Convocatoria y código: lista de datos, no párrafos sueltos. */
.admin-redesign .gc-detalle-top .gc-convocatoria-info {
    gap: var(--gc-1);
    background: var(--gc-surface);
}

.admin-redesign .gc-info-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--gc-ink-2);
}

.admin-redesign .gc-info-line strong { color: var(--gc-ink); font-weight: 600; }
.admin-redesign .gc-info-line i { width: 13px; font-size: 11px; color: var(--gc-ink-3); text-align: center; }
.admin-redesign .gc-convocatoria-editar .gc-convocatoria-select { flex: 1 1 100%; }

.admin-redesign .gc-fundae-usuario code {
    padding: 1px 5px;
    background: var(--gc-bg);
    border-radius: 4px;
    font-size: 11.5px;
    color: var(--gc-ink);
}

.admin-redesign .gc-ficha-admin.is-locked { opacity: 1; }

.admin-redesign .gc-ficha-admin .doc-status {
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--gc-ink-3);
}

/* Tarjetas grandes: documentación y alumnado. */
.admin-redesign .detail-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--gc-3);
}

.admin-redesign .detail-card {
    padding: 0;
    background: var(--gc-surface);
    border: 1px solid var(--gc-line);
    border-radius: var(--gc-radius-sm);
    box-shadow: none;
    overflow: hidden;
}

.admin-redesign .detail-card-header {
    display: flex;
    align-items: center;
    gap: var(--gc-2);
    padding: var(--gc-3) var(--gc-3) var(--gc-2);
}

.admin-redesign .detail-card-header i { font-size: 12px; color: var(--gc-ink-3); }
.admin-redesign .detail-card-header strong { font-size: 13px; font-weight: 700; color: var(--gc-ink); }

/* Pestañas de documentación: subrayado, no botones. */
.admin-redesign .doc-tabs {
    display: flex;
    gap: var(--gc-4);
    margin: 0;
    padding: 0 var(--gc-3);
    border-bottom: 1px solid var(--gc-line);
}

.admin-redesign .doc-tab {
    position: relative;
    padding: 0 0 var(--gc-2);
    background: none;
    border: 0;
    border-radius: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--gc-ink-3);
    cursor: pointer;
}

.admin-redesign .doc-tab:hover { background: none; color: var(--gc-ink); }
.admin-redesign .doc-tab.is-active { background: none; color: var(--color-primary); }

.admin-redesign .doc-tab.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--color-primary);
    border-radius: 2px 2px 0 0;
}

.admin-redesign .doc-tab-panel { padding: var(--gc-3); }

/* Cada documento: nombre y estado a la izquierda, acciones a la derecha. */
.admin-redesign .doc-list { display: flex; flex-direction: column; }

.admin-redesign .doc-list .doc-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--gc-2);
    padding: var(--gc-2) 0;
    border-bottom: 1px solid var(--gc-line-soft);
}

.admin-redesign .doc-list .doc-item:last-child { border-bottom: 0; }

.admin-redesign .doc-title {
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--gc-ink);
}

.admin-redesign .doc-status {
    display: inline-block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 600;
}

.admin-redesign .doc-status.success { color: #0f7b4f; }
.admin-redesign .doc-status.muted { color: var(--gc-ink-3); font-weight: 500; }
.admin-redesign .doc-hint { margin: 0; font-size: 11.5px; color: var(--gc-ink-3); }

.admin-redesign .doc-item-group {
    padding: var(--gc-2) 0;
    border-bottom: 1px solid var(--gc-line-soft);
}

.admin-redesign .doc-item-group .doc-item { border-bottom: 0; padding: var(--gc-1) 0; }

/* Validación y avisos: barra al pie de la pestaña. */
.admin-redesign .gc-validar-docs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--gc-2);
    margin-top: var(--gc-3);
    padding: var(--gc-2) var(--gc-3);
    background: var(--gc-bg);
    border: 1px solid var(--gc-line-soft);
    border-radius: 6px;
}

.admin-redesign .gc-validar-info { display: flex; flex-direction: column; gap: 1px; }

.admin-redesign .btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: auto;
    height: 28px;
    padding: 0 var(--gc-2);
    background: var(--gc-surface);
    border: 1px solid var(--gc-line);
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--gc-ink-2);
    cursor: pointer;
}

.admin-redesign .btn-ghost:hover { border-color: #c9cede; color: var(--gc-ink); }

/* Lista de alumnado dentro del detalle. */
.admin-redesign .admin-users-list { padding: 0 var(--gc-3) var(--gc-3); }
.admin-redesign .admin-users-table { width: 100%; border-collapse: collapse; }

/* Los controles de DataTables dentro de esta tarjeta son más pequeños que los del
   listado principal: aquí el buscador acompaña a una lista corta, no la protagoniza. */
.admin-redesign .admin-users-list .dataTables_filter {
    padding: 0 0 var(--gc-2);
    border: 0;
}

.admin-redesign .admin-users-list .dataTables_filter label { max-width: none; gap: 0; }

.admin-redesign .admin-users-list .dataTables_filter input {
    width: 100%;
    height: 30px;
    padding: 0 var(--gc-2);
    background: var(--gc-bg);
    border: 1px solid var(--gc-line);
    border-radius: 6px;
    font-size: 12px;
}

.admin-redesign .admin-users-list .dataTables_info,
.admin-redesign .admin-users-list .dataTables_paginate {
    padding: var(--gc-2) 0 0;
    font-size: 11px;
}

.admin-redesign .admin-users-list .dataTables_empty {
    padding: var(--gc-3) 0;
    color: var(--gc-ink-3);
    font-size: 11.5px;
    text-align: center;
}

.admin-redesign .admin-users-table th {
    padding: var(--gc-1) 6px;
    border-bottom: 1px solid var(--gc-line);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--gc-ink-3);
    text-align: left;
}

.admin-redesign .admin-users-table td {
    padding: 5px 6px;
    border-bottom: 1px solid var(--gc-line-soft);
    font-size: 11.5px;
    color: var(--gc-ink-2);
}

/* Columna del lápiz: estrecha y discreta hasta que pasas por encima de la fila. */
.admin-redesign .admin-users-table .gc-alumno-acciones {
    width: 30px;
    padding-right: 0;
    text-align: right;
}

.admin-redesign .gc-alumno-editar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: 1px solid transparent;
    border-radius: 5px;
    font-size: 10.5px;
    color: var(--gc-ink-3);
    cursor: pointer;
    opacity: .45;
    transition: opacity .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}

.admin-redesign .admin-users-table tr:hover .gc-alumno-editar { opacity: 1; }

.admin-redesign .gc-alumno-editar:hover {
    opacity: 1;
    background: rgba(158, 17, 115, .08);
    border-color: rgba(158, 17, 115, .18);
    color: var(--color-primary);
}

/* En pantallas táctiles no hay hover: ahí se ve siempre. */
@media (hover: none) {
    .admin-redesign .gc-alumno-editar { opacity: 1; }
}

.admin-redesign .skeleton-row {
    height: 26px;
    margin-bottom: 6px;
    background: linear-gradient(90deg, var(--gc-line-soft) 25%, #f7f8fc 50%, var(--gc-line-soft) 75%);
    background-size: 200% 100%;
    border-radius: 5px;
    animation: gcSkeleton 1.2s ease-in-out infinite;
}

@keyframes gcSkeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---------------------------------------------------------------
   8. Pantallas estrechas
   --------------------------------------------------------------- */

@media (max-width: 1100px) {
    .admin-redesign .detail-columns { grid-template-columns: 1fr; }
}

@media (max-width: 782px) {
    .admin-redesign { padding: var(--gc-3) var(--gc-2) var(--gc-5); }
    .admin-redesign .admin-header__top { align-items: flex-start; }
    .admin-redesign .admin-header__actions { width: 100%; }
    .admin-redesign .admin-header__actions .btn-primary,
    .admin-redesign .admin-header__actions .btn-secondary { flex: 1 1 auto; }
    .admin-redesign .admin-filter-field--fechas { grid-column: span 1; }
    .admin-redesign .admin-summary { grid-template-columns: repeat(2, 1fr); }
    .admin-redesign .admin-summary > * { border-left: 0; border-top: 1px solid var(--gc-line-soft); }
}

/* ---------------------------------------------------------------
   9. Reglas que siguen siendo funcionales, no decorativas
   --------------------------------------------------------------- */

/* El hueco superior lo ponen la sección y la fila de Divi; el JS hace lo mismo
   un instante después, esto solo evita que se vea parpadear. */
.et_pb_section:has(#gestion-compras-admin-panel),
.et_pb_row:has(#gestion-compras-admin-panel),
.et_pb_column:has(#gestion-compras-admin-panel),
.et_pb_module:has(#gestion-compras-admin-panel),
.et_pb_text:has(#gestion-compras-admin-panel),
#main-content .container:has(#gestion-compras-admin-panel),
.entry-content:has(#gestion-compras-admin-panel) {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Fechas sueltas del pedido, dentro de la tarjeta de información del detalle. */
.admin-redesign .gc-fechas-editar { flex-wrap: wrap; }

.admin-redesign .gc-fechas-editar input[type="date"] {
    flex: 1 1 100%;   /* inicio y fin, cada una en su propia línea (una debajo de otra) */
    min-width: 0;
    height: 28px;
    padding: 0 6px;
    background: var(--gc-surface);
    border: 1px solid var(--gc-line);
    border-radius: 6px;
    font-size: 11.5px;
    color: var(--gc-ink);
}

.admin-redesign .gc-fechas-editar input[type="date"]:focus {
    outline: none;
    border-color: var(--color-primary-light);
    box-shadow: 0 0 0 3px rgba(158, 17, 115, .1);
}

.admin-redesign .gc-fechas-editar .gc-fechas-save {
    flex: 0 0 auto;
    height: 28px;
    padding: 0 10px;
    background: var(--color-primary);
    border: 0;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
}

.admin-redesign .gc-fechas-editar .gc-fechas-save:hover { background: var(--color-primary-dark); }

/* Nº pedido ERP: campo en el detalle (encima de la convocatoria) y columna del listado. */
.admin-redesign .gc-pedido-erp-editar { flex-wrap: wrap; }
.admin-redesign .gc-pedido-erp-editar label { margin: 0; cursor: pointer; }
.admin-redesign .gc-pedido-erp-editar .gc-pedido-erp-input {
    flex: 1 1 100%;
    min-width: 0;
    height: 28px;
    padding: 0 8px;
    background: var(--gc-surface);
    border: 1px solid var(--gc-line);
    border-radius: 6px;
    font-size: 12px;
    color: var(--gc-ink);
}
.admin-redesign .gc-pedido-erp-editar .gc-pedido-erp-input:focus {
    outline: none;
    border-color: var(--color-primary-light);
    box-shadow: 0 0 0 3px rgba(158, 17, 115, .1);
}
.admin-redesign .gc-pedido-erp-editar .gc-pedido-erp-save {
    flex: 0 0 auto;
    height: 28px;
    padding: 0 10px;
    background: var(--color-primary);
    border: 0;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
}
.admin-redesign .gc-pedido-erp-editar .gc-pedido-erp-save:hover { background: var(--color-primary-dark); }
.gc-pedido-erp-valor { font-weight: 600; color: var(--gc-ink, #333); white-space: nowrap; }
.gc-pedido-erp-vacio { color: var(--gc-ink-3, #999); }

/* ===== Estado por documento del cliente (acta puntos 9 y N) ===== */
.gc-doc { position: relative; }
.gc-doc-estado {
    display: flex; align-items: center; gap: 6px;
    margin: 6px 0 0; font-size: 12px; font-weight: 700;
}
.gc-doc-estado.is-validado  { color: #1a7f37; }   /* verde */
.gc-doc-estado.is-pendiente { color: #9a6700; }   /* ámbar */
.gc-doc-estado.is-error     { color: #b91c1c; }   /* rojo */
/* Validado (bloqueado, sin cambios) → VERDE sólido con texto BLANCO legible + check.
   Antes era verde muy claro con texto blanco encima = ilegible. */
.file-upload-inline.gc-doc--validado .file-upload-zone,
.file-upload-inline.gc-doc--validado .file-upload-zone.file-uploaded,
.gc-doc .file-upload-zone.is-locked {
    background: linear-gradient(135deg, #1a7f37, #22a35a) !important;
    border-color: #14532d !important;
    color: #ffffff !important;
    cursor: not-allowed;
    opacity: 1;
}
/* El color de FONDO de la caja del documento refleja su estado. La especificidad
   (.file-upload-inline.gc-doc--X) supera a la de .file-upload-zone.file-uploaded (verde),
   así que el amarillo/rojo mandan cuando corresponde. */
/* Subido y PENDIENTE de revisar → AMARILLO con texto oscuro legible + icono reloj. */
.file-upload-inline.gc-doc--pendiente .file-upload-zone,
.file-upload-inline.gc-doc--pendiente .file-upload-zone.file-uploaded {
    background: linear-gradient(135deg, #ffd43b, #e6ab00);
    border-color: #d39e00;
    color: #3d2f00;
}
/* Con ERROR (p. ej. DATOS ALUMNADO inválido) → ROJO con texto blanco + icono X.
   El documento se guarda igualmente, pero queda marcado en rojo. */
.file-upload-inline.gc-doc--error .file-upload-zone,
.file-upload-inline.gc-doc--error .file-upload-zone.file-uploaded {
    background: linear-gradient(135deg, #e4606d, #c0212f);
    border-color: #b01a27;
    color: #ffffff;
}
.gc-doc--quitado   .file-upload-zone { opacity: .5; }
.gc-doc-quitar {
    margin-top: 6px;
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: 1px solid #e5b4b4; color: #b91c1c;
    border-radius: 6px; padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.gc-doc-quitar:hover { background: #fdf2f2; }

/* Botón «Enviar documentación» (cliente): los documentos se autoguardan; este botón hace la
   comprobación final de obligatorios y marca la documentación como enviada. */
.gc-enviar-doc-wrap {
    margin-top: 18px;
    text-align: center;
}
.gc-enviar-doc-wrap .enviar-documentacion-btn {
    width: auto;
    min-width: 240px;
    margin-bottom: 0;
}
.gc-enviar-doc-hint {
    margin: 10px 0 0;
    font-size: 12.5px;
    color: #6b7280;
    line-height: 1.5;
}

/* ==========================================================================
   Tarjeta de pedido del cliente: mismo lenguaje que Mi cuenta y el panel de
   administración (líneas suaves, etiquetas pequeñas en gris, valor debajo,
   píldoras de estado suaves y el magenta de la marca en las acciones).
   ========================================================================== */
#gestion-compras-panel .order-card {
    --gc-line: #e4e7f0;
    --gc-line-soft: #eef0f6;
    --gc-ink: #333;
    --gc-ink-3: #888;
    --gc-brand: #9d1873;
    border: 1px solid var(--gc-line);
    border-radius: 10px;
    box-shadow: none;
    animation: none;
}
#gestion-compras-panel .order-card:hover { transform: none; box-shadow: none; border-color: #cfd3e0; }
#gestion-compras-panel .order-card.is-open { border-color: rgba(157, 24, 115, .35); }

/* Modalidad: tinta plana y suave, como las píldoras de estado (sin degradado). */
#gestion-compras-panel .order-card .category-badge {
    padding: 4px 11px;
    font-size: .75rem;
    letter-spacing: .04em;
    background: #e6f3f6;
    color: #0c6674;
}
#gestion-compras-panel .order-card .category-badge.curso-virtual    { background: #e5f6ec; color: #1a7f45; }
#gestion-compras-panel .order-card .category-badge.curso-presencial { background: #fdf0e3; color: #b3670a; }

/* Datos del pedido: etiqueta arriba, valor debajo, en una rejilla con líneas finas. */
#gestion-compras-panel .order-card .gc-datos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 18px 22px 20px;
    padding: 0;
    border: 1px solid var(--gc-line);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
#gestion-compras-panel .order-card .gc-datos .gc-dato {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6px;
    min-width: 0;
    margin: -1px 0 0 -1px;          /* las líneas de la primera fila/columna quedan bajo el borde */
    padding: 14px 18px;
    border: 0;
    border-top: 1px solid var(--gc-line-soft);
    border-left: 1px solid var(--gc-line-soft);
}
#gestion-compras-panel .order-card .gc-datos .label {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gc-ink-3);
    line-height: 1.3;
}
#gestion-compras-panel .order-card .gc-datos .value {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--gc-ink);
    line-height: 1.35;
    overflow-wrap: break-word;
}
#gestion-compras-panel .order-card .gc-datos .value .estado-pill { font-size: .8rem; white-space: normal; }

/* Acciones: botones a su tamaño; la de documentación (la que toca) primero y rellena. */
#gestion-compras-panel .order-card .order-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 22px;
    background: #fafbfd;
    border-top: 1px solid var(--gc-line-soft);
}
#gestion-compras-panel .order-card .order-actions > :is(.btn-warning, .btn-secondary) {
    width: auto;
    margin: 0;
    padding: 10px 18px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    box-shadow: none;
    transform: none;
    transition: background-color .2s, color .2s, border-color .2s;
}
#gestion-compras-panel .order-card .order-actions > .btn-warning {
    order: -1;
    background: var(--gc-brand);
    border: 1px solid var(--gc-brand);
    color: #fff;
}
#gestion-compras-panel .order-card .order-actions > .btn-warning:hover { background: #7d1260; border-color: #7d1260; }
#gestion-compras-panel .order-card .order-actions > .btn-secondary {
    background: #fff;
    border: 1px solid rgba(157, 24, 115, .45);
    color: var(--gc-brand);
}
#gestion-compras-panel .order-card .order-actions > .btn-secondary:hover { background: rgba(157, 24, 115, .06); border-color: var(--gc-brand); }
#gestion-compras-panel .order-card .order-actions > :is(.btn-warning, .btn-secondary):focus-visible { outline: 2px solid var(--gc-brand); outline-offset: 2px; }

@media (max-width: 900px) {
    #gestion-compras-panel .order-card .gc-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 14px 16px 16px; }
    #gestion-compras-panel .order-card .order-actions { padding: 14px 16px; }
}
@media (max-width: 420px) {
    #gestion-compras-panel .order-card .order-actions > :is(.btn-warning, .btn-secondary) { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   Secciones desplegables de la tarjeta (documentación y alumnado asignado):
   el mismo lenguaje que la tarjeta y Mi cuenta. Cabecera blanca con el título
   en magenta, cajas con borde fino y estados con tintas suaves.
   -------------------------------------------------------------------------- */
#gestion-compras-panel .order-card .expandable-section {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--gc-line-soft);
    border-radius: 0 0 10px 10px;
    background: #fff;
}
#gestion-compras-panel .order-card .section-header {
    padding: 16px 22px;
    background: #fff;
    color: var(--gc-ink);
    border-bottom: 1px solid var(--gc-line-soft);
}
#gestion-compras-panel .order-card .section-header h4 {
    gap: 10px;
    font-family: Heebo, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--gc-brand);
}
#gestion-compras-panel .order-card .close-section-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--gc-line);
    border-radius: 50%;
    background: #fff;
    color: var(--gc-ink-3);
    transition: color .2s, border-color .2s, background-color .2s;
}
#gestion-compras-panel .order-card .close-section-btn:hover { transform: none; color: var(--gc-brand); border-color: rgba(157, 24, 115, .45); background: rgba(157, 24, 115, .06); }
#gestion-compras-panel .order-card .close-section-btn:focus-visible { outline: 2px solid var(--gc-brand); outline-offset: 2px; }
#gestion-compras-panel .order-card .section-content { padding: 20px 22px 24px; }

/* Pasos del flujo */
#gestion-compras-panel .order-card .gc-step-head h5 { font-family: Heebo, sans-serif; font-size: 16px; color: var(--gc-ink); }
#gestion-compras-panel .order-card .gc-step.is-locked .gc-step-head h5 { color: var(--gc-ink-3); }
#gestion-compras-panel .order-card .gc-step-body { font-size: 14px; color: #555; }
#gestion-compras-panel .order-card .gc-step-msg { border-radius: 8px; font-size: 13px; }
#gestion-compras-panel .order-card .gc-step-msg.review { background: #fdf0e3; color: #8a4f07; }
#gestion-compras-panel .order-card .gc-step-msg.locked { background: #f7f7fb; color: var(--gc-ink-3); }
#gestion-compras-panel .order-card .form-group label { font-size: 15px; font-weight: 700; color: var(--gc-ink); }
#gestion-compras-panel .order-card .form-hint { font-size: 14px; color: #777; }

/* Cajas de documentos */
#gestion-compras-panel .order-card .file-upload-inline .file-upload-zone {
    border: 1px solid var(--gc-line);
    border-radius: 8px;
    background: #fafbfd;
    color: var(--gc-ink);
    transition: border-color .2s, background-color .2s;
}
#gestion-compras-panel .order-card .file-upload-inline .file-upload-zone span { font-size: 13px; font-weight: 600; letter-spacing: .02em; }
#gestion-compras-panel .order-card .file-upload-inline .file-upload-zone i { color: var(--gc-brand); }
#gestion-compras-panel .order-card .file-upload-inline .file-upload-zone:hover { border-color: rgba(157, 24, 115, .45); background: rgba(157, 24, 115, .04); }
#gestion-compras-panel .order-card .file-upload-inline .file-upload-zone:is(.file-selected, .uploading) {
    background: #e6f3f6; border-color: #b9dde4; color: #0c6674;
}
#gestion-compras-panel .order-card .file-upload-inline .file-upload-zone.file-uploaded {
    background: #e5f6ec; border-color: #b4dfc4; color: #1a7f45;
}
#gestion-compras-panel .order-card .file-upload-inline.gc-doc--validado .file-upload-zone,
#gestion-compras-panel .order-card .file-upload-inline.gc-doc--validado .file-upload-zone.file-uploaded,
#gestion-compras-panel .order-card .gc-doc .file-upload-zone.is-locked {
    background: #e5f6ec !important; border-color: #b4dfc4 !important; color: #1a7f45 !important;
}
#gestion-compras-panel .order-card .file-upload-inline.gc-doc--pendiente .file-upload-zone,
#gestion-compras-panel .order-card .file-upload-inline.gc-doc--pendiente .file-upload-zone.file-uploaded {
    background: #fdf0e3 !important; border-color: #f1d1a6 !important; color: #8a4f07 !important;
}
#gestion-compras-panel .order-card .file-upload-inline.gc-doc--error .file-upload-zone,
#gestion-compras-panel .order-card .file-upload-inline.gc-doc--error .file-upload-zone.file-uploaded {
    background: #fdecec !important; border-color: #f2b8b5 !important; color: #b42318 !important;
}
#gestion-compras-panel .order-card .file-upload-inline:is(.gc-doc--validado, .gc-doc--pendiente, .gc-doc--error) .file-upload-zone i,
#gestion-compras-panel .order-card .file-upload-inline .file-upload-zone:is(.file-uploaded, .file-selected, .uploading, .is-locked) i { color: inherit; }

/* Enviar documentación: el magenta plano de los botones de la tarjeta */
#gestion-compras-panel .order-card .gc-enviar-doc-wrap .enviar-documentacion-btn,
#gestion-compras-panel .order-card .section-content :is(.btn-primary, .gc-btn-primary) {
    width: auto;
    padding: 11px 22px;
    border: 1px solid var(--gc-brand);
    border-radius: 6px;
    background: var(--gc-brand);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    box-shadow: none;
    transform: none;
    transition: background-color .2s, border-color .2s;
}
#gestion-compras-panel .order-card .gc-enviar-doc-wrap .enviar-documentacion-btn:hover,
#gestion-compras-panel .order-card .section-content :is(.btn-primary, .gc-btn-primary):hover { background: #7d1260; border-color: #7d1260; color: #fff; }

/* Tabla de alumnado: cabecera clara, como las tablas de Mi cuenta */
#gestion-compras-panel .order-card .users-table-container { border: 1px solid var(--gc-line); border-radius: 8px; }
#gestion-compras-panel .order-card .users-table-inline th {
    background: #f7f7fb;
    color: var(--gc-ink-3);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 11px 14px;
    border-bottom: 1px solid var(--gc-line);
}
#gestion-compras-panel .order-card .users-table-inline td { padding: 11px 14px; font-size: 14px; color: #444; border-bottom: 1px solid var(--gc-line-soft); }
#gestion-compras-panel .order-card .users-table-inline tbody tr:nth-child(even) { background: transparent; }
#gestion-compras-panel .order-card .users-table-inline tbody tr:hover { background: #fbfbfe; }
#gestion-compras-panel .order-card .users-table-inline tbody tr:last-child td { border-bottom: 0; }

/* Avisos dentro de las secciones */
#gestion-compras-panel .order-card .gc-edit-hint {
    margin: 14px 0 0;
    padding: 12px 14px;
    border: 1px solid var(--gc-line);
    border-radius: 8px;
    background: #f7f7fb;
    color: #555;
    font-size: 14px;
    line-height: 1.55;
}
#gestion-compras-panel .order-card .gc-edit-hint i { color: var(--gc-brand); margin-right: 4px; }

@media (max-width: 900px) {
    #gestion-compras-panel .order-card .section-header { padding: 14px 16px; }
    #gestion-compras-panel .order-card .section-content { padding: 16px 16px 20px; }
}

/* Cabecera del panel: como las páginas de Mi cuenta (título oscuro en Heebo, entradilla gris,
   enlace de vuelta), sin caja ni icono. */
#gestion-compras-panel .panel-header {
    margin: 0 0 32px;
    padding: 8px 0 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    text-align: center;
}
#gestion-compras-panel .panel-header h1 {
    margin: 0 0 8px;
    font-family: Heebo, sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.25;
    color: #333;
}
#gestion-compras-panel .panel-header p {
    margin: 0 auto;
    max-width: 560px;
    font-size: 15px;
    line-height: 1.6;
    color: #777;
}
#gestion-compras-panel .gc-panel-volver {
    display: flex;
    align-items: center;
    gap: 6px;
    width: max-content;
    margin: 0 0 20px;
    color: #9d1873;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}
#gestion-compras-panel .gc-panel-volver:hover { text-decoration: underline; }
#gestion-compras-panel .gc-panel-volver:focus-visible { outline: 2px solid #9d1873; outline-offset: 3px; border-radius: 2px; }

/* Avisos de los pasos: texto corrido con el icono delante. Con flex, cada trozo de texto y
   cada <strong> eran elementos separados y el hueco entre ellos dejaba espacios raros. */
#gestion-compras-panel .gc-step-msg { display: block; padding: 10px 14px; line-height: 1.5; }
#gestion-compras-panel .gc-step-msg > i:first-child { margin-right: 8px; }

/* «Enviar documentación» con aire respecto al aviso que tiene debajo */
#gestion-compras-panel .gc-enviar-doc-wrap { margin: 22px 0 20px; }
#gestion-compras-panel .gc-enviar-doc-wrap + .gc-step-msg { margin-top: 0; }

@media (max-width: 600px) {
    #gestion-compras-panel .panel-header h1 { font-size: 24px; }
}

/* Esquinas: la tarjeta no recorta su contenido (overflow visible), así que la cabecera y el
   bloque desplegable se redondean a juego con el borde (10px - 1px de borde) para no asomar. */
#gestion-compras-panel .order-card .order-header { border-radius: 9px 9px 0 0; }
#gestion-compras-panel .order-card:not(.is-open) .order-header { border-radius: 9px; border-bottom-color: transparent; }
#gestion-compras-panel .order-card .order-collapse-inner { border-radius: 0 0 9px 9px; }

/* --------------------------------------------------------------------------
   PRUEBA · Pasos de la documentación en pestañas (solo con data-pestanas="1").
   -------------------------------------------------------------------------- */
#gestion-compras-panel .gc-flujo.gc-tabs-on > .gc-step { padding: 0; }
#gestion-compras-panel .gc-flujo.gc-tabs-on > .gc-step[hidden] { display: none !important; }
#gestion-compras-panel .gc-flujo.gc-tabs-on > .gc-step::before { display: none; }       /* sin línea vertical */
#gestion-compras-panel .gc-flujo.gc-tabs-on > .gc-step > .gc-step-head { display: none; } /* el título va en la pestaña */
#gestion-compras-panel .gc-flujo.gc-tabs-on > .gc-step > .gc-step-body { margin-top: 0; }
#gestion-compras-panel .gc-flujo.gc-tabs-on > .gc-step.is-locked { opacity: 1; }

#gestion-compras-panel .gc-tabs {
    display: flex;
    margin: 0 0 22px;
    box-shadow: inset 0 -1px 0 #e4e7f0;   /* línea base sin desbordar (no hay scroll vertical) */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}
#gestion-compras-panel .gc-tab {
    flex: 1 1 0;
    min-width: 168px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 12px 14px;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: #555;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s, background-color .2s;
}
#gestion-compras-panel .gc-tab:hover:not(:disabled) { background: #fafbfd; }
#gestion-compras-panel .gc-tab[aria-selected="true"] { border-bottom-color: #9d1873; color: #333; }
#gestion-compras-panel .gc-tab:focus-visible { outline: 2px solid #9d1873; outline-offset: -2px; }
#gestion-compras-panel .gc-tab:disabled { cursor: not-allowed; color: #aaa; }
#gestion-compras-panel .gc-tab__num {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    background: #eef0f6;
    color: #8b91a3;
}
#gestion-compras-panel .gc-tab.is-active .gc-tab__num { background: #9d1873; color: #fff; }
#gestion-compras-panel .gc-tab.is-done .gc-tab__num { background: #e5f6ec; color: #1a7f45; }
#gestion-compras-panel .gc-tab__txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
#gestion-compras-panel .gc-tab__paso { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #888; }
#gestion-compras-panel .gc-tab__titulo { font-size: 14px; font-weight: 600; }

#gestion-compras-panel .gc-tabs-nav {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 22px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid #eef0f6;
}
#gestion-compras-panel .gc-tabs-nav__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid #e4e7f0;
    border-radius: 6px;
    color: #9d1873;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .2s, background-color .2s;
}
#gestion-compras-panel .gc-tabs-nav__btn:hover { border-color: rgba(157, 24, 115, .45); background: rgba(157, 24, 115, .04); }
#gestion-compras-panel .gc-tabs-nav__btn:focus-visible { outline: 2px solid #9d1873; outline-offset: 2px; }
#gestion-compras-panel .gc-tabs-nav__btn--next { margin-left: auto; }

/* Móvil: pestañas compactas; el título completo solo en la seleccionada. */
@media (max-width: 600px) {
    #gestion-compras-panel .gc-tabs { overflow-x: visible; }
    #gestion-compras-panel .gc-tab { flex: 0 0 auto; min-width: 0; padding: 10px 8px; }
    #gestion-compras-panel .gc-tab[aria-selected="true"] { flex: 1 1 0; }
    #gestion-compras-panel .gc-tab:not([aria-selected="true"]) .gc-tab__txt { display: none; }
}

/* Pestañas a prueba del tema: el tema de la web da estilo a TODOS los botones (esquinas
   redondeadas, alto de línea, sombras...) y curvaba el subrayado de la pestaña. Se resetea
   y el subrayado pasa a ser una barra propia (::after), no el borde del botón. */
#gestion-compras-panel .gc-tabs .gc-tab {
    position: relative;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    line-height: 1.3 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}
#gestion-compras-panel .gc-tabs .gc-tab::before { content: none !important; }
#gestion-compras-panel .gc-tabs .gc-tab::after {
    content: "" !important;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    opacity: 1;
    transform: none;
}
#gestion-compras-panel .gc-tabs .gc-tab[aria-selected="true"]::after { background: #9d1873; }
#gestion-compras-panel .gc-tabs .gc-tab:hover:not(:disabled) { background: #fafbfd !important; }
#gestion-compras-panel .gc-tabs .gc-tab:disabled { opacity: 1 !important; }
#gestion-compras-panel .gc-tabs-nav .gc-tabs-nav__btn {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    line-height: 1.3 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}
#gestion-compras-panel .gc-tabs-nav .gc-tabs-nav__btn--next { margin-left: auto !important; }
#gestion-compras-panel .gc-tabs-nav .gc-tabs-nav__btn::after,
#gestion-compras-panel .gc-tabs-nav .gc-tabs-nav__btn::before { content: none !important; }