@font-face {
    font-family: "Grian";
    src: url("../fonts/Karina.ttf") format("trueType");
    font-display: swap;
}


/* ===== CONTENEDOR PRINCIPAL ===== */
.modern-main-content {
    display: flex;
    justify-content: center;      /* ← centro horizontal */
    align-items: flex-start;      /* mantén arriba (o usa center para centrar vertical) */
    padding: 60px 20px;           /* ← mueve todo más arriba/abajo/lados */
    width: 100%;
    box-sizing: border-box;
}

/* ===== CONTENEDOR DE LA TABLA ===== */
.modern-results-container {
    width: 100%;
    max-width: 2000px;            /* ← CAMBIO DE ANCHO GENERAL DEL BLOQUE */
    margin: 0 auto;
}

/* TÍTULO */
.modern-title {
    
    font-family: 'Poppins', sans-serif;
    font-size: 2.2rem;
    font-weight: 800;
    color: #9c203d; /* vino que combina con tu tema */
    text-align: center;
    letter-spacing: 0.5px;
    margin-bottom: 30px;

    
}

/* ===== TABLA PANEL 3D ===== */
.modern-panel {
    background: rgba(237, 214, 181, 0.45); /* tu beige PERO transparente */
    border-radius: 18px;
    padding-bottom: 6px;
    box-shadow:
        0 18px 35px rgba(15, 23, 42, 0.20),
        0 2px 6px rgba(0, 0, 0, 0.05);
    border: none;
    max-width: 1260px;
    margin: 0 auto;
    

    
}

/* HEADER */
.modern-panel-header {
    background: #9c203d;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    color: white;
    padding: 18px 28px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    
}

/* ===== FILAS ===== */
.modern-row {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 16px 24px;
    border-top: 1px solid rgba(0,0,0,0.08);

    transition: 0.2s ease;


    
}

.modern-row:hover {
    background: rgba(232, 225, 204, 0.65);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}

/* IZQUIERDA */
.modern-row-info span {
    font-size: 0.95rem;
    font-weight: 500;
}

/* DERECHA */
.modern-row-actions {
    display: flex;
    gap: 10px;
}

/* ===== BOTONES 3D ===== */
.file-chip {
    padding: 7px 18px;

    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    color: white;
    text-decoration: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 0.15s ease;

    box-shadow: 0 5px 0 rgba(0,0,0,0.25); /* sombra base */
}

.file-chip:hover {
    transform: translateY(3px);   /* ← PROFUNDIDAD DEL EFECTO 3D */
    box-shadow: none;
}

/* ICONO */
.file-chip i {
    margin-right: 5px;
}

/* COLORES INDIVIDUALES */
.chip-doc {
    background: linear-gradient(135deg, #e2dcd1, #e2c3c3);
    box-shadow: 0 5px 0 #4d0e20;
    color: #6a142e;
}

.chip-pdf {
    background: linear-gradient(135deg, #8b1738, #6a142e);
    box-shadow: 0 5px 0 #4d0e20;
    color: white;
}

.chip-xlsx {
    background: linear-gradient(135deg, #e2dcd1, #e2c3c3);
    box-shadow: 0 5px 0 #4d0e20;
    color: #6a142e;
}

/* ===== BOTÓN REGRESAR ===== */
@keyframes backPulse {
    0% {
        transform: scale(0.85);
        opacity: 0;
    }
    60% {
        transform: scale(1.05);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}


.panel-wrapper {
    max-width: 1260px;
    margin: 0 auto;
}

.back-btn {
    background: #bd955c;
    color: white;
    border: none;
    padding: 8px 18px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 15px;

    /* 👇 transiciones + animación inicial */
    transition: background 0.2s ease, transform 0.18s ease, box-shadow 0.18s ease;
    animation: backPulse 0.45s ease-out 0.25s both;
}

.back-btn:hover {
    background: #a88144;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

.back-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.back-btn i {
    font-size: 16px;
}

/* ===== BOTÓN PARAESTATALES ===== */
.paraestatales-wrapper {
  margin-bottom: 1.5rem;
  position: relative;
  display: inline-block;
}

/* Botón principal */
.para-btn {
  display: flex;
  align-items: center;
  gap: 10px;

  background: #e8c9c9;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.06);
  cursor: pointer;

  width: 100%;
  max-width: none;

  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

/* “Píldora” roja a la izquierda */
.para-chip {
  background: #9c203d;          /* tu vino */
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
}

/* Texto del organismo seleccionado */
.para-current {
  font-size: 13px;
  color: #444;
  overflow: hidden;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* Icono flecha */
.para-icon {
  margin-left: auto;      /* empuja la flecha al borde pero sin pegarse */
  margin-right: 12px;     /* ← separación del borde DERECHO */
  
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;

  background: #9c203d;
  border-radius: 60%;
  color: white;
  font-size: 14px;
   
}

/* Hover botón */
.para-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
  border-color: rgba(156,32,61,0.25);
}

/* ===== MENÚ DESPLEGABLE ===== */
.para-menu {
  position: absolute;
  top: 110%;
  left: 0;
  z-index: 15;

  background: #f9efdf; 
  border-radius: 14px;
  padding: 8px 0;
  margin-top: 6px;
  min-width: 460px;
  max-width: 620px;
  /* max-height: 260px;
  overflow-y: auto; */

  box-shadow: 0 14px 30px rgba(0,0,0,0.18);
  border: 1px solid rgba(0,0,0,0.06);

  display: none;
}

/* cuando está abierto */
.para-menu.open {
  display: block;
}

/* opciones del menú */
.para-option {
  width: 100%;
  text-align: left;
  padding: 8px 14px;
  border: none;
  background: transparent;
  font-size: 13px;
  color: #333;
  cursor: pointer;

  white-space: normal;
  line-height: 1.35;
  transition: background 0.15s ease, color 0.15s ease;
}

/* hover en opción */
.para-option:hover {
  background: rgba(189,149,92,0.13); /* dorado clarito */
  color: #9c203d;
}

/* scroll bonito en el dropdown */
.para-menu::-webkit-scrollbar {
  width: 6px;
}
.para-menu::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.22);
  border-radius: 999px;
}