/*********************************************************
 * Postulantes (EE) — Estilos limpios + móvil ordenado
 * Orden en MÓVIL (≤ 768px):
 *   1) H1
 *   2) Botones (Importar Excel | Volver a “Mis avisos”)
 *   3) Chips meta (ID, Estado, Visitas, Total)
 *   4) Panel de columnas (2 columnas)
 *   5) Tabla
 **********************************************************/

/* ---------- Variables y base ---------- */
.v5-postulantes-page{
  --pink:#FA1188; --pink-dark:#d20c70;
  --blue:#2196F3; --blue-dark:#1976D2;
  --text:#111827; --muted:#6b7280; --border:#e5e7eb; --bg:#ffffff;
  max-width:1200px; margin:0 auto; padding:22px 14px 40px; color:var(--text);
}

/* ---------- Header (desktop: título izq, acciones der) ---------- */
.v5-postulantes-header{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin:0 0 10px 0;
}
.v5-postulantes-header .v5-title{
  margin:0; font-weight:800; letter-spacing:.2px;
  font-size:clamp(22px,4vw,34px); color:var(--blue);
}
.v5-postulantes-header .header-actions{
  display:flex; align-items:center; gap:10px;
}
.v5-postulantes-header .btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:10px; line-height:1;
  font-weight:700; text-decoration:none !important;
  border:1px solid transparent; cursor:pointer;
}
.v5-postulantes-header .btn-export{
  background:var(--blue); border-color:var(--blue); color:#fff;
}
.v5-postulantes-header .btn-export:hover{ background:var(--blue-dark); border-color:var(--blue-dark); }
.v5-postulantes-header .btn-volver{
  background:var(--pink); border-color:var(--pink); color:#fff;
}
.v5-postulantes-header .btn-volver:hover{ background:var(--pink-dark); border-color:var(--pink-dark); }

/* ---------- Chips meta ---------- */
.v5-postulantes-meta{
  display:flex; flex-wrap:wrap; gap:10px 14px; margin:12px 0 16px;
}
.v5-postulantes-meta span{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--border); background:#fafafa;
  padding:6px 10px; border-radius:10px; font-size:14px; color:var(--muted);
}
.v5-postulantes-meta strong{ color:var(--text); }

/* ---------- Panel de columnas ---------- */
.v5-col-ctrl{ margin: 8px 0 12px; }
.v5-col-panel{
  display:grid;
  grid-template-columns: repeat(7, minmax(150px,1fr)); /* desktop → 2 filas como máximo si hay ≤14 */
  gap:8px 12px;
  border:1px dashed var(--border); border-radius:10px;
  padding:10px; background:#fff; max-width:100%;
}
.v5-col-panel .v5-col-item{
  display:flex; align-items:center; gap:8px; font-size:13px; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---------- Tabla ---------- */
.tabla-postulantes{
  background:var(--bg); border:1px solid var(--border); border-radius:12px;
  overflow:auto; box-shadow:0 2px 10px rgba(17,24,39,.04); padding-top:8px;
}
.v5-table{ width:100%; border-collapse:separate; border-spacing:0; min-width:980px; }
.v5-table thead th{
  position:sticky; top:0; z-index:1; background:#f5f9ff; color:#0f3a67;
  padding:12px 10px; text-align:left; font-weight:700; border-bottom:1px solid var(--border);
}
.v5-table th, .v5-table td{ vertical-align:top; }
.v5-table tbody td{
  padding:10px; border-bottom:1px solid #f3f4f6; line-height:1.35;
}
.v5-table tbody tr:hover{ background:#f9fcff; }

/* Acciones dentro de la tabla */
.v5-table a.btn.btn-ver{
  display:inline-block; padding:6px 10px; border-radius:8px; line-height:1; font-size:13px;
  background:var(--blue); border:1px solid var(--blue); color:#fff !important; text-decoration:none;
}
.v5-table a.btn.btn-ver:hover{ background:var(--blue-dark); border-color:var(--blue-dark); }
/* Solo el CV interno (EE) va fucsia */
.v5-table a.btn.btn-ver.btn-ee{
  background:var(--pink); border-color:var(--pink); color:#fff !important;
}
.v5-table a.btn.btn-ver.btn-ee:hover{ background:var(--pink-dark); border-color:var(--pink-dark); }

.link-oculto{ color:#c0c4c7; }

/* Notas */
.v5-table .nota-interna{
  width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:8px; font-size:14px; background:#fff;
}
.v5-table .nota-interna:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(33,150,243,.15);
}


/* Estado de guardado de la nota */
.v5-table .nota-interna.saving {
  opacity: .7;
  cursor: progress;
}

.v5-table .nota-interna.nota-ok {
  border-color: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.2);
}


/* Filas anonimizadas y mensajes */
.is-anon td{ background:#fcfcff; color:#6b7280; }
.dato-oculto{ color:#9aa0a6; font-style:italic; }
.dato-no-requerido{ color:var(--muted); font-style:italic; }

/* ---------- Responsive ---------- */

/* Tablet */
@media (max-width: 960px){
  .v5-table{ min-width:860px; }
}

/* Móvil (≤ 768px): orden explícito + botones bajo el H1 + panel columnas en 2 columnas */
@media (max-width: 768px){
  /* Header en 2 filas: Título arriba, acciones abajo */
  .v5-postulantes-header{
    display:grid;
    grid-template-areas:
      "title"
      "actions";
    row-gap:12px;
  }
  .v5-postulantes-header .v5-title{ grid-area:title; font-size:28px; }
  .v5-postulantes-header .header-actions{
    grid-area:actions;
    display:grid;
    grid-template-columns: 1fr 1fr;  /* dos botones a lo ancho */
    gap:10px;
  }
  .v5-postulantes-header .btn{ width:100%; }

  /* Chips un poco más compactos */
  .v5-postulantes-meta{ gap:8px 10px; margin-top:10px; }
  .v5-postulantes-meta span{ font-size:13px; padding:5px 9px; }

  /* Panel columnas: siempre AL MENOS 2 columnas */
  .v5-col-panel{
    grid-template-columns: repeat(2, minmax(140px, 1fr));
  }

  /* Tabla con min-width algo menor en móviles */
  .v5-table{ min-width:640px; }
}

/* Móvil pequeño (≤ 480px): tipografías y espacios aún más compactos */
@media (max-width: 480px){
  .v5-postulantes-header .v5-title{ font-size:24px; }
  .v5-table th, .v5-table td{ padding:8px; }
}


/* Texto responsive del botón "Volver a Mis avisos" */
.v5-postulantes-header .btn-volver .label-short{ display:none; }
.v5-postulantes-header .btn-volver .label-full{ display:inline; }

@media (max-width: 440px){
  .v5-postulantes-header .btn-volver .label-full{ display:none; }
  .v5-postulantes-header .btn-volver .label-short{ display:inline; }
}






/***** Tabla compacta + anchos fijos + clamp a 2 líneas *****/

/* Tipografías y espacios más compactos */
.v5-table{ table-layout: fixed; font-size:13px; }
.v5-table thead th{ font-size:13px; padding:10px 8px; }
.v5-table tbody td{ font-size:13px; padding:8px; }

/* Contenedor interno que trunca a 2 líneas con “...” y muestra tooltip (title) */
.v5-table .td-inner{
  display:-webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;      /* 2 líneas */
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  max-height: calc(1.3em * 2); /* asegura 2 líneas */
  white-space: normal;         /* permite salto de línea */
}

/* Anchos fijos por columna (thead y tbody) — AJUSTABLES */
.v5-table th:nth-child(1),  .v5-table td:nth-child(1)  { width:160px; } /* Nombre */
.v5-table th:nth-child(2),  .v5-table td:nth-child(2)  { width:160px; } /* Email */
.v5-table th:nth-child(3),  .v5-table td:nth-child(3)  { width:120px; } /* Tel. */
.v5-table th:nth-child(4),  .v5-table td:nth-child(4)  { width:120px; } /* Renta */
.v5-table th:nth-child(5),  .v5-table td:nth-child(5)  { width:120px; } /* Disp. */
.v5-table th:nth-child(6),  .v5-table td:nth-child(6)  { width: 90px; } /* Ciudad */
.v5-table th:nth-child(7),  .v5-table td:nth-child(7)  { width: 90px; } /* Nac. */
.v5-table th:nth-child(8),  .v5-table td:nth-child(8)  { width:120px; } /* Carr. */
.v5-table th:nth-child(9),  .v5-table td:nth-child(9)  { width: 90px; } /* Edad */
.v5-table th:nth-child(10), .v5-table td:nth-child(10) { width: 90px; } /* Gén. */
.v5-table th:nth-child(11), .v5-table td:nth-child(11) { width: 90px; } /* Fecha */
.v5-table th:nth-child(12), .v5-table td:nth-child(12) { width: 90px; } /* CV EE */
.v5-table th:nth-child(13), .v5-table td:nth-child(13) { width: 90px; } /* CV PDF */
.v5-table th:nth-child(14), .v5-table td:nth-child(14) { width:200px; } /* Nota */

/* Botones dentro de celdas: que no rompan el layout fijo */
.v5-table a.btn{ white-space:nowrap; }

/* En móvil, mantenemos fijo pero con mínimo algo menor para permitir scroll horizontal */
@media (max-width: 768px){
  .v5-table{ min-width: 640px; }
}


/* ---- Ajustes finos de legibilidad ---- */

/* 1) Asegurar cortes en textos sin espacios (emails, URLs) */
.v5-table .td-inner{
  overflow-wrap: anywhere;  /* permite cortar palabras largas */
  word-break: break-word;   /* fallback para navegadores viejos */
}

/* 3) Ligeramente más compacto en desktop grande */
@media (min-width: 1024px){
  .v5-table thead th{ padding:9px 8px; }
  .v5-table tbody td{ padding:7px 8px; }
}

/* 4) Evitar que el input de Nota se “coma” la altura con sombras */
.v5-table .nota-interna{ line-height: 1.2; }