<template>
  <div class="cursos-container">
    <!-- Header -->
    <div class="cursos-header">
      <div class="header-title">
        <h2>Procesos de Admisión</h2>
        <p class="subtitle">Crea procesos y luego gestiona sus detalles</p>
      </div>
      <a-button type="primary" @click="showCreateModal" class="new-curso-btn">
        <template #icon><PlusOutlined /></template>
        Nuevo Proceso
      </a-button>
    </div>

    <!-- Filtros -->
    <div class="filters-section">
      <a-input-search
        v-model:value="searchText"
        placeholder="Buscar por título o slug..."
        @search="handleSearch"
        @press-enter="handleSearch"
        style="width: 320px"
        size="large"
      >
        <template #enterButton><SearchOutlined /></template>
      </a-input-search>

      <a-select
        v-model:value="estadoFilter"
        placeholder="Estado"
        style="width: 220px"
        size="large"
        @change="handleFiltersChange"
      >
        <a-select-option :value="null">Todos</a-select-option>
        <a-select-option value="nuevo">Nuevo</a-select-option>
        <a-select-option value="publicado">Publicado</a-select-option>
        <a-select-option value="en_proceso">En proceso</a-select-option>
        <a-select-option value="finalizado">Finalizado</a-select-option>
        <a-select-option value="cancelado">Cancelado</a-select-option>
      </a-select>

      <a-select
        v-model:value="publicadoFilter"
        placeholder="Publicado"
        style="width: 180px"
        size="large"
        @change="handleFiltersChange"
      >
        <a-select-option :value="null">Todos</a-select-option>
        <a-select-option :value="true">Sí</a-select-option>
        <a-select-option :value="false">No</a-select-option>
      </a-select>

      <a-button @click="handleClearFilters" size="large">
        <template #icon><ReloadOutlined /></template>
        Limpiar
      </a-button>
    </div>

    <!-- Loading -->
    <div v-if="store.loading && store.procesos.length === 0" class="loading-state">
      <a-spin size="large" />
      <p>Cargando procesos...</p>
    </div>

    <!-- Empty -->
    <div v-else-if="store.procesos.length === 0" class="empty-state">
      <a-empty description="No hay procesos registrados" />
    </div>

    <!-- Tabla -->
    <div v-else class="cursos-table-container">
      <a-table
        :data-source="store.procesos"
        :columns="columns"
        :loading="store.loading"
        :pagination="pagination"
        row-key="id"
        @change="handleTableChange"
        class="cursos-table"
      >
        <template #bodyCell="{ column, record }">
          <!-- Publicado -->
          <template v-if="column.key === 'publicado'">
            <a-switch
              :checked="!!record.publicado"
              :loading="togglingId === record.id"
              checked-children="Sí"
              un-checked-children="No"
              @change="togglePublicado(record)"
            />
          </template>

          <!-- Fechas -->
          <template v-else-if="column.key === 'fechas'">
            <div class="mini-dates">
              <div>
                <strong>Preinscripción:</strong>
                {{ shortDate(record.fecha_inicio_preinscripcion) }} - {{ shortDate(record.fecha_fin_preinscripcion) }}
              </div>
              <div>
                <strong>Inscripción:</strong>
                {{ shortDate(record.fecha_inicio_inscripcion) }} - {{ shortDate(record.fecha_fin_inscripcion) }}
              </div>
              <div>
                <strong>Ex1:</strong> {{ shortDate(record.fecha_examen1) }}
                <span v-if="record.fecha_examen2"> | <strong>Ex2:</strong> {{ shortDate(record.fecha_examen2) }}</span>
              </div>
            </div>
          </template>

          <!-- Archivos -->
          <template v-else-if="column.key === 'imagenes'">
            <a-space>
              <a v-if="record.imagen_url" :href="record.imagen_url" target="_blank">Imagen</a>
              <a v-if="record.banner_url" :href="record.banner_url" target="_blank">Banner</a>
              <a v-if="record.brochure_url" :href="record.brochure_url" target="_blank">Brochure</a>
              <span v-if="!record.imagen_url && !record.banner_url && !record.brochure_url">-</span>
            </a-space>
          </template>

          <!-- Created -->
          <template v-else-if="column.key === 'created_at'">
            {{ formatDate(record.created_at) }}
          </template>

          <!-- Acciones -->
          <template v-else-if="column.key === 'acciones'">
            <a-space>
              <a-button type="link" size="small" @click="goDetalles(record)">
                <SettingOutlined /> Detalles
              </a-button>
              <a-button type="link" size="small" @click="showEditModal(record)">
                <EditOutlined /> Editar
              </a-button>
              <a-button type="link" size="small" danger @click="confirmDelete(record)">
                <DeleteOutlined /> Eliminar
              </a-button>
            </a-space>
          </template>
        </template>
      </a-table>
    </div>

    <!-- Modal Crear/Editar -->
    <a-modal
      v-model:open="modalVisible"
      :title="isEditing ? 'Editar Proceso' : 'Nuevo Proceso'"
      :confirm-loading="store.loading"
      @ok="handleModalOk"
      @cancel="handleModalCancel"
      width="980px"
      class="curso-modal"
    >
      <a-form ref="formRef" :model="formState" :rules="formRules" layout="vertical" @finish="onFormSubmit">
        <div class="grid2">
          <a-form-item label="Título" name="titulo">
            <a-input v-model:value="formState.titulo" size="large" />
          </a-form-item>

          <a-form-item label="Slug" name="slug">
            <a-input v-model:value="formState.slug" placeholder="admision-2026-i" size="large" />
          </a-form-item>
        </div>

        <div class="grid2">
          <a-form-item label="Subtítulo" name="subtitulo">
            <a-input v-model:value="formState.subtitulo" size="large" />
          </a-form-item>

          <a-form-item label="Tipo proceso" name="tipo_proceso">
            <a-input v-model:value="formState.tipo_proceso" placeholder="Ej: admisión general" size="large" />
          </a-form-item>
        </div>

        <div class="grid2">
          <a-form-item label="Modalidad (texto)" name="modalidad">
            <a-input v-model:value="formState.modalidad" placeholder="Ej: ordinario" size="large" />
          </a-form-item>

          <a-form-item label="Estado" name="estado">
            <a-select v-model:value="formState.estado" size="large">
              <a-select-option value="nuevo">Nuevo</a-select-option>
              <a-select-option value="publicado">Publicado</a-select-option>
              <a-select-option value="en_proceso">En proceso</a-select-option>
              <a-select-option value="finalizado">Finalizado</a-select-option>
              <a-select-option value="cancelado">Cancelado</a-select-option>
            </a-select>
          </a-form-item>
        </div>

        <a-form-item label="Descripción" name="descripcion">
          <a-textarea v-model:value="formState.descripcion" :rows="3" />
        </a-form-item>

        <div class="grid2">
          <a-form-item label="Publicado" name="publicado">
            <a-switch v-model:checked="formState.publicado" checked-children="Sí" un-checked-children="No" />
          </a-form-item>

          <a-form-item label="Fecha publicación" name="fecha_publicacion">
            <a-date-picker
              v-model:value="formState.fecha_publicacion"
              show-time
              style="width: 100%"
              size="large"
              format="YYYY-MM-DD HH:mm:ss"
              valueFormat="YYYY-MM-DD HH:mm:ss"
              placeholder="Opcional"
            />
          </a-form-item>
        </div>

        <a-divider>Fechas</a-divider>

        <!-- PREINSCRIPCIÓN -->
        <div class="grid2">
          <a-form-item label="Inicio preinscripción" name="fecha_inicio_preinscripcion">
            <a-date-picker
              v-model:value="formState.fecha_inicio_preinscripcion"
              show-time
              style="width: 100%"
              size="large"
              format="YYYY-MM-DD HH:mm:ss"
              valueFormat="YYYY-MM-DD HH:mm:ss"
              placeholder="Opcional"
            />
          </a-form-item>

          <a-form-item label="Fin preinscripción" name="fecha_fin_preinscripcion">
            <a-date-picker
              v-model:value="formState.fecha_fin_preinscripcion"
              show-time
              style="width: 100%"
              size="large"
              format="YYYY-MM-DD HH:mm:ss"
              valueFormat="YYYY-MM-DD HH:mm:ss"
              placeholder="Opcional"
            />
          </a-form-item>
        </div>

        <!-- INSCRIPCIÓN -->
        <div class="grid2">
          <a-form-item label="Inicio inscripción" name="fecha_inicio_inscripcion">
            <a-date-picker
              v-model:value="formState.fecha_inicio_inscripcion"
              show-time
              style="width: 100%"
              size="large"
              format="YYYY-MM-DD HH:mm:ss"
              valueFormat="YYYY-MM-DD HH:mm:ss"
            />
          </a-form-item>
          <a-form-item label="Fin inscripción" name="fecha_fin_inscripcion">
            <a-date-picker
              v-model:value="formState.fecha_fin_inscripcion"
              show-time
              style="width: 100%"
              size="large"
              format="YYYY-MM-DD HH:mm:ss"
              valueFormat="YYYY-MM-DD HH:mm:ss"
            />
          </a-form-item>
        </div>

        <!-- EXÁMENES -->
        <div class="grid2">
          <a-form-item label="Examen 1" name="fecha_examen1">
            <a-date-picker
              v-model:value="formState.fecha_examen1"
              show-time
              style="width: 100%"
              size="large"
              format="YYYY-MM-DD HH:mm:ss"
              valueFormat="YYYY-MM-DD HH:mm:ss"
            />
          </a-form-item>

          <a-form-item label="Examen 2" name="fecha_examen2">
            <a-date-picker
              v-model:value="formState.fecha_examen2"
              show-time
              style="width: 100%"
              size="large"
              format="YYYY-MM-DD HH:mm:ss"
              valueFormat="YYYY-MM-DD HH:mm:ss"
              placeholder="Opcional"
            />
          </a-form-item>
        </div>

        <!-- RESULTADOS / BIOMÉTRICO -->
        <div class="grid2">
          <a-form-item label="Resultados" name="fecha_resultados">
            <a-date-picker
              v-model:value="formState.fecha_resultados"
              show-time
              style="width: 100%"
              size="large"
              format="YYYY-MM-DD HH:mm:ss"
              valueFormat="YYYY-MM-DD HH:mm:ss"
              placeholder="Opcional"
            />
          </a-form-item>

          <a-form-item label="Inicio biométrico" name="fecha_inicio_biometrico">
            <a-date-picker
              v-model:value="formState.fecha_inicio_biometrico"
              show-time
              style="width: 100%"
              size="large"
              format="YYYY-MM-DD HH:mm:ss"
              valueFormat="YYYY-MM-DD HH:mm:ss"
              placeholder="Opcional"
            />
          </a-form-item>
        </div>

        <div class="grid2">
          <a-form-item label="Fin biométrico" name="fecha_fin_biometrico">
            <a-date-picker
              v-model:value="formState.fecha_fin_biometrico"
              show-time
              style="width: 100%"
              size="large"
              format="YYYY-MM-DD HH:mm:ss"
              valueFormat="YYYY-MM-DD HH:mm:ss"
              placeholder="Opcional"
            />
          </a-form-item>

          <div />
        </div>

        <a-divider>Archivos (SUBIR)</a-divider>

        <div class="grid3">
          <a-form-item label="Imagen (jpg/png/webp)">
            <a-upload v-model:file-list="fileImagen" :before-upload="() => false" :max-count="1" accept="image/*">
              <a-button>Seleccionar</a-button>
            </a-upload>
            <small class="hint" v-if="isEditing && formState.imagen_url">
              Actual: <a :href="formState.imagen_url" target="_blank">ver</a>
            </small>
          </a-form-item>

          <a-form-item label="Banner (jpg/png/webp)">
            <a-upload v-model:file-list="fileBanner" :before-upload="() => false" :max-count="1" accept="image/*">
              <a-button>Seleccionar</a-button>
            </a-upload>
            <small class="hint" v-if="isEditing && formState.banner_url">
              Actual: <a :href="formState.banner_url" target="_blank">ver</a>
            </small>
          </a-form-item>

          <a-form-item label="Brochure (PDF)">
            <a-upload v-model:file-list="fileBrochure" :before-upload="() => false" :max-count="1" accept="application/pdf">
              <a-button>Seleccionar</a-button>
            </a-upload>
            <small class="hint" v-if="isEditing && formState.brochure_url">
              Actual: <a :href="formState.brochure_url" target="_blank">ver</a>
            </small>
          </a-form-item>
        </div>

        <a-divider>Links</a-divider>

        <div class="grid2">
          <a-form-item label="Link preinscripción" name="link_preinscripcion">
            <a-input v-model:value="formState.link_preinscripcion" placeholder="https://..." size="large" />
          </a-form-item>
          <a-form-item label="Link inscripción" name="link_inscripcion">
            <a-input v-model:value="formState.link_inscripcion" placeholder="https://..." size="large" />
          </a-form-item>
        </div>

        <div class="grid2">
          <a-form-item label="Link resultados" name="link_resultados">
            <a-input v-model:value="formState.link_resultados" placeholder="https://..." size="large" />
          </a-form-item>
          <a-form-item label="Link reglamento" name="link_reglamento">
            <a-input v-model:value="formState.link_reglamento" placeholder="https://..." size="large" />
          </a-form-item>
        </div>

        <div class="form-footer" v-if="store.error">
          <a-alert type="error" :message="store.error" show-icon class="error-alert" />
        </div>
      </a-form>
    </a-modal>

    <!-- Modal delete -->
    <a-modal
      v-model:open="deleteModalVisible"
      title="Confirmar Eliminación"
      @ok="handleDelete"
      @cancel="deleteModalVisible = false"
      ok-text="Eliminar"
      cancel-text="Cancelar"
      ok-type="danger"
      width="420px"
    >
      <div class="delete-confirm-content">
        <a-alert
          message="¿Eliminar este proceso?"
          description="Se eliminarán también todos los detalles asociados."
          type="warning"
          show-icon
        />
        <div class="curso-info" v-if="toDelete">
          <p><strong>Título:</strong> {{ toDelete.titulo }}</p>
          <p><strong>Slug:</strong> {{ toDelete.slug }}</p>
          <p><strong>Estado:</strong> {{ toDelete.estado }}</p>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import {
  PlusOutlined, EditOutlined, DeleteOutlined,
  SearchOutlined, ReloadOutlined, SettingOutlined
} from '@ant-design/icons-vue'
import { useProcesoAdmisionStore } from '../../../store/procesosAdmisionStore'

const store = useProcesoAdmisionStore()
const router = useRouter()

const modalVisible = ref(false)
const deleteModalVisible = ref(false)
const isEditing = ref(false)
const toDelete = ref(null)
const togglingId = ref(null)

const formRef = ref()
const searchText = ref('')
const estadoFilter = ref(null)
const publicadoFilter = ref(null)

// Upload file lists
const fileImagen = ref([])
const fileBanner = ref([])
const fileBrochure = ref([])

const formState = reactive({
  id: null,
  titulo: '',
  subtitulo: '',
  descripcion: '',
  slug: '',
  tipo_proceso: '',
  modalidad: '',
  publicado: false,
  fecha_publicacion: null,

  fecha_inicio_preinscripcion: null,
  fecha_fin_preinscripcion: null,
  fecha_inicio_inscripcion: null,
  fecha_fin_inscripcion: null,
  fecha_examen1: null,
  fecha_examen2: null,
  fecha_resultados: null,
  fecha_inicio_biometrico: null,
  fecha_fin_biometrico: null,

  link_preinscripcion: '',
  link_inscripcion: '',
  link_resultados: '',
  link_reglamento: '',
  estado: 'nuevo',

  // para mostrar actuales
  imagen_url: null,
  banner_url: null,
  brochure_url: null
})

const formRules = {
  titulo: [{ required: true, message: 'Ingresa el título', trigger: 'blur' }],
  slug: [{ required: true, message: 'Ingresa el slug', trigger: 'blur' }],
  estado: [{ required: true, message: 'Selecciona estado', trigger: 'change' }]
}

const columns = [
  { title: 'ID', dataIndex: 'id', key: 'id', width: 70 },
  { title: 'Título', dataIndex: 'titulo', key: 'titulo' },
  { title: 'Slug', dataIndex: 'slug', key: 'slug', width: 220 },
  { title: 'Estado', dataIndex: 'estado', key: 'estado', width: 120 },
  { title: 'Publicado', key: 'publicado', width: 120 },
  { title: 'Fechas', key: 'fechas', width: 280 },
  { title: 'Archivos', key: 'imagenes', width: 220 },
  { title: 'Creado', dataIndex: 'created_at', key: 'created_at', width: 140 },
  { title: 'Acciones', key: 'acciones', width: 240, align: 'center' }
]

const pagination = computed(() => ({
  current: store.pagination.current_page,
  pageSize: store.pagination.per_page,
  total: store.pagination.total,
  showSizeChanger: true,
  pageSizeOptions: ['10', '15', '20', '50'],
  showTotal: (total, range) => `${range[0]}-${range[1]} de ${total} procesos`
}))

function resetUploads() {
  fileImagen.value = []
  fileBanner.value = []
  fileBrochure.value = []
}

function resetForm() {
  formState.id = null
  formState.titulo = ''
  formState.subtitulo = ''
  formState.descripcion = ''
  formState.slug = ''
  formState.tipo_proceso = ''
  formState.modalidad = ''
  formState.publicado = false
  formState.fecha_publicacion = null

  formState.fecha_inicio_preinscripcion = null
  formState.fecha_fin_preinscripcion = null
  formState.fecha_inicio_inscripcion = null
  formState.fecha_fin_inscripcion = null
  formState.fecha_examen1 = null
  formState.fecha_examen2 = null
  formState.fecha_resultados = null
  formState.fecha_inicio_biometrico = null
  formState.fecha_fin_biometrico = null

  formState.link_preinscripcion = ''
  formState.link_inscripcion = ''
  formState.link_resultados = ''
  formState.link_reglamento = ''
  formState.estado = 'nuevo'

  formState.imagen_url = null
  formState.banner_url = null
  formState.brochure_url = null

  resetUploads()
  formRef.value?.resetFields?.()
}

function showCreateModal() {
  isEditing.value = false
  resetForm()
  modalVisible.value = true
}

function showEditModal(row) {
  isEditing.value = true
  resetForm()

  Object.assign(formState, {
    id: row.id,
    titulo: row.titulo,
    subtitulo: row.subtitulo,
    descripcion: row.descripcion,
    slug: row.slug,
    tipo_proceso: row.tipo_proceso,
    modalidad: row.modalidad,
    publicado: !!row.publicado,
    fecha_publicacion: row.fecha_publicacion,

    fecha_inicio_preinscripcion: row.fecha_inicio_preinscripcion,
    fecha_fin_preinscripcion: row.fecha_fin_preinscripcion,
    fecha_inicio_inscripcion: row.fecha_inicio_inscripcion,
    fecha_fin_inscripcion: row.fecha_fin_inscripcion,
    fecha_examen1: row.fecha_examen1,
    fecha_examen2: row.fecha_examen2,
    fecha_resultados: row.fecha_resultados,
    fecha_inicio_biometrico: row.fecha_inicio_biometrico,
    fecha_fin_biometrico: row.fecha_fin_biometrico,

    link_preinscripcion: row.link_preinscripcion,
    link_inscripcion: row.link_inscripcion,
    link_resultados: row.link_resultados,
    link_reglamento: row.link_reglamento,
    estado: row.estado,

    imagen_url: row.imagen_url,
    banner_url: row.banner_url,
    brochure_url: row.brochure_url
  })

  modalVisible.value = true
}

async function handleModalOk() {
  try {
    await formRef.value.validateFields()
    await onFormSubmit()
  } catch (_) {}
}

function handleModalCancel() {
  modalVisible.value = false
  resetForm()
}

function buildFormData() {
  const fd = new FormData()

  const fields = {
    titulo: formState.titulo,
    subtitulo: formState.subtitulo || null,
    descripcion: formState.descripcion || null,
    slug: formState.slug,
    tipo_proceso: formState.tipo_proceso || null,
    modalidad: formState.modalidad || null,

    publicado: formState.publicado ? 1 : 0,
    fecha_publicacion: formState.fecha_publicacion || null,

    fecha_inicio_preinscripcion: formState.fecha_inicio_preinscripcion || null,
    fecha_fin_preinscripcion: formState.fecha_fin_preinscripcion || null,
    fecha_inicio_inscripcion: formState.fecha_inicio_inscripcion || null,
    fecha_fin_inscripcion: formState.fecha_fin_inscripcion || null,
    fecha_examen1: formState.fecha_examen1 || null,
    fecha_examen2: formState.fecha_examen2 || null,
    fecha_resultados: formState.fecha_resultados || null,
    fecha_inicio_biometrico: formState.fecha_inicio_biometrico || null,
    fecha_fin_biometrico: formState.fecha_fin_biometrico || null,

    link_preinscripcion: formState.link_preinscripcion || null,
    link_inscripcion: formState.link_inscripcion || null,
    link_resultados: formState.link_resultados || null,
    link_reglamento: formState.link_reglamento || null,

    estado: formState.estado
  }

  Object.entries(fields).forEach(([k, v]) => {
    if (v === null || v === undefined || v === '') return
    fd.append(k, v)
  })

  const img = fileImagen.value?.[0]?.originFileObj
  const ban = fileBanner.value?.[0]?.originFileObj
  const bro = fileBrochure.value?.[0]?.originFileObj
  if (img) fd.append('imagen', img)
  if (ban) fd.append('banner', ban)
  if (bro) fd.append('brochure', bro)

  return fd
}

async function onFormSubmit() {
  const fd = buildFormData()

  let ok = false
  if (isEditing.value) {
    // multipart + PATCH -> method spoof
    fd.append('_method', 'PATCH')
    ok = await store.updateProceso(formState.id, fd, { method: 'post' })
  } else {
    ok = await store.createProceso(fd)
  }

  if (ok) {
    message.success(isEditing.value ? 'Proceso actualizado' : 'Proceso creado')
    modalVisible.value = false
    resetForm()
    await fetchList({ page: 1 })
  } else {
    message.error('Error al guardar')
  }
}

function confirmDelete(row) {
  toDelete.value = row
  deleteModalVisible.value = true
}

async function handleDelete() {
  const ok = await store.deleteProceso(toDelete.value.id)
  if (ok) message.success('Eliminado')
  else message.error('Error al eliminar')
  deleteModalVisible.value = false
  toDelete.value = null
  await fetchList({ page: 1 })
}

async function togglePublicado(row) {
  togglingId.value = row.id
  try {
    const fd = new FormData()
    fd.append('publicado', row.publicado ? 0 : 1)
    fd.append('_method', 'PATCH')
    const ok = await store.updateProceso(row.id, fd, { method: 'post' })
    if (ok) message.success('Publicado actualizado')
  } finally {
    togglingId.value = null
  }
}

function goDetalles(row) {
  router.push({ name: 'ProcesoAdmisionDetalles', params: { id: row.id } })
}

function handleSearch() { fetchList({ page: 1 }) }
function handleFiltersChange() { fetchList({ page: 1 }) }

function handleClearFilters() {
  searchText.value = ''
  estadoFilter.value = null
  publicadoFilter.value = null
  fetchList({ page: 1 })
}

function handleTableChange(paginationConfig) {
  fetchList({ page: paginationConfig.current, per_page: paginationConfig.pageSize })
}

async function fetchList({ page = 1, per_page } = {}) {
  await store.fetchProcesos({
    q: searchText.value || undefined,
    estado: estadoFilter.value ?? undefined,
    publicado: publicadoFilter.value ?? undefined,
    page,
    per_page
  })
}

function formatDate(s) {
  if (!s) return ''
  const d = new Date(s)
  return d.toLocaleDateString('es-ES', { day: '2-digit', month: '2-digit', year: 'numeric' })
}

function shortDate(s) {
  if (!s) return '-'
  const d = new Date(s)
  return d.toLocaleDateString('es-ES', { day: '2-digit', month: '2-digit', year: '2-digit' })
}

onMounted(() => { fetchList() })
</script>

<style scoped>
.cursos-container { padding: 0; }
.cursos-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; padding:0 8px; gap: 12px; flex-wrap: wrap; }
.header-title h2 { margin:0; font-size:24px; font-weight:600; color:#1f1f1f; }
.subtitle { margin:4px 0 0; color:#666; font-size:14px; }
.new-curso-btn { height:40px; font-weight:500; }
.filters-section { display:flex; align-items:center; margin-bottom:24px; padding:0 8px; flex-wrap:wrap; gap:16px; }
.loading-state { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:300px; gap:16px; }
.empty-state { min-height:300px; display:flex; align-items:center; justify-content:center; }
.cursos-table-container { background:white; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.06); border:1px solid #f0f0f0; overflow:hidden; }
.cursos-table { border-radius:12px; }
.grid2 { display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid3 { display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.hint { display:block; margin-top: 6px; color:#666; }
.mini-dates { line-height: 1.35; font-size: 12px; color: #444; }
@media (max-width: 768px) { .grid2, .grid3 { grid-template-columns: 1fr; } }
</style>
