/**********************************************************
 * MIS AVISOS — Tarjeta (Datos izq | Botones der)
 * - Desktop: 2 tarjetas por fila
 * - Móvil:   1 tarjeta por fila
 **********************************************************/

.v5-contenedor-misavisos{
  --pink:#FA1188; --pink-dark:#d20c70;
  --blue:#2196F3; --blue-dark:#1976D2;
  --text:#111827; --muted:#6b7280; --border:#e5e7eb;

  --actions-w:150px;     /* carril de botones (der) */
  --label-w:120px;       /* columna fija para etiquetas (avisos) */
  --gap-x:14px;          /* espacio entre columnas internas */
  --gap-y:10px;          /* espacio entre filas internas */
  --btn-h:34px; --btn-radius:10px; --btn-font:13px;

  max-width:1200px; width:100%;
  margin:0 auto; padding:16px 10px 28px; color:var(--text);
  box-sizing:border-box;
}

.v5-contenedor-misavisos .titulo-seccion{
  text-align:center; font-size:24px; margin:12px 0 18px; color:var(--blue) !important;
}

/* ===== Lista de tarjetas: 2 por fila en desktop ===== */
.v5-contenedor-misavisos .v5-avisos-list{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;
}

/* ========= Tarjeta de aviso ========= */
.v5-contenedor-misavisos .v5-card-aviso{
  display:grid; grid-template-columns:1fr var(--actions-w);
  grid-auto-rows:minmax(var(--btn-h),auto);
  column-gap:var(--gap-x); row-gap:var(--gap-y);
  background:transparent; border:1px solid var(--border);
  border-radius:14px; padding:14px 12px; box-sizing:border-box;
}
.v5-contenedor-misavisos .v5-card-aviso .fila{ display:contents; }
.v5-contenedor-misavisos .v5-card-aviso .fila .dato{ grid-column:1; }
.v5-contenedor-misavisos .v5-card-aviso .fila .acciones{ grid-column:2; }

/* Alineación: etiqueta fija pegada a la izquierda → valor */
.v5-contenedor-misavisos .v5-card-aviso .fila .dato{
  display:grid; grid-template-columns:var(--label-w) 1fr;
  align-items:center; column-gap:8px; min-width:0;
}
.v5-contenedor-misavisos .v5-card-aviso .dato .label{
  color:var(--muted); font-weight:600; text-align:left; white-space:nowrap;
}
.v5-contenedor-misavisos .v5-card-aviso .dato .valor{
  font-weight:700; min-width:0; text-align:left;
}
.v5-contenedor-misavisos .estado-text.estado-activa{ color:var(--blue); font-weight:700; }
.v5-contenedor-misavisos .estado-text.estado-expirada{ color:var(--pink); font-weight:700; }

/* Botones */
.v5-contenedor-misavisos .btn, .v5-contenedor-misavisos .btn:visited{
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--btn-h); width:100%; padding:0 12px; border:0;
  border-radius:var(--btn-radius); font-size:var(--btn-font);
  line-height:1; color:#fff; text-decoration:none !important;
  cursor:pointer; box-sizing:border-box; transition:background-color .15s, transform .05s;
  -webkit-tap-highlight-color:transparent;
}
.v5-contenedor-misavisos .btn:active{ transform:translateY(1px); }

/* AZULES */
.v5-contenedor-misavisos .btn-ver,
.v5-contenedor-misavisos .btn-editar,
.v5-contenedor-misavisos .btn-postulantes { background: var(--blue) !important; }
.v5-contenedor-misavisos .btn-ver:hover,
.v5-contenedor-misavisos .btn-editar:hover,
.v5-contenedor-misavisos .btn-postulantes:hover { background: var(--blue-dark) !important; }

/* FUCSIAS (sin reactivar) */
.v5-contenedor-misavisos .btn-ver-aviso,
.v5-contenedor-misavisos .btn-expirar,
.v5-contenedor-misavisos .btn-eliminar { background: var(--pink) !important; }
.v5-contenedor-misavisos .btn-ver-aviso:hover,
.v5-contenedor-misavisos .btn-expirar:hover,
.v5-contenedor-misavisos .btn-eliminar:hover { background: var(--pink-dark) !important; }



/* ===== Separador ===== */
.v5-contenedor-misavisos .separador-historial{ margin:22px 0 10px; border:0; border-top:1px solid var(--border); }

/* =======================================================
 * HISTORIAL (FINALIZADOS)
 * - Desktop: 3 columnas × 2 filas
 * - Móvil:   2 columnas × 3 filas
 * - Orden fijo: ID, Puesto, Estado, Finalizado en, Visitas, Postulantes
 * ======================================================= */

.v5-contenedor-misavisos .historial-cards{
  display:grid; grid-template-columns:1fr; gap:12px; margin-top:10px;
}

/* Card: GRID INTERNO */
.v5-contenedor-misavisos .hist-card{
  background:transparent; border:1px solid var(--border); border-radius:12px;
  padding:14px 12px; box-sizing:border-box;

  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));   /* DESKTOP: 3 cols */
  grid-template-rows:auto auto;                      /* 2 filas */
  gap:12px 20px;
}

/* Línea (etiqueta | valor) */
.v5-contenedor-misavisos .hist-card .h-line{
  display:grid; grid-template-columns:minmax(90px,auto) 1fr;
  column-gap:8px; align-items:baseline; min-width:0;
}
.v5-contenedor-misavisos .hist-card .h-label{
  color:var(--muted); font-weight:600; text-align:left; white-space:nowrap;
}
.v5-contenedor-misavisos .hist-card .h-val{
  font-weight:700; min-width:0; overflow-wrap:break-word; word-break:normal;
}

/* Posicionamiento 3×2 (desktop) */
.v5-contenedor-misavisos .hist-card .h-line:nth-child(1){ grid-column:1; grid-row:1; } /* ID */
.v5-contenedor-misavisos .hist-card .h-line:nth-child(2){ grid-column:2; grid-row:1; } /* Puesto */
.v5-contenedor-misavisos .hist-card .h-line:nth-child(3){ grid-column:3; grid-row:1; } /* Estado */
.v5-contenedor-misavisos .hist-card .h-line:nth-child(4){ grid-column:1; grid-row:2; } /* Finalizado en */
.v5-contenedor-misavisos .hist-card .h-line:nth-child(5){ grid-column:2; grid-row:2; } /* Visitas */
.v5-contenedor-misavisos .hist-card .h-line:nth-child(6){ grid-column:3; grid-row:2; } /* Postulantes */

.v5-contenedor-misavisos .hist-card .h-val.is-exp{ color:var(--pink); }
.v5-contenedor-misavisos .hist-card .h-val.is-act{ color:var(--blue); }

/* Oculta la tabla del historial (fuente para el JS) */
.v5-contenedor-misavisos #tabla-historial-avisos{ display:none !important; }

/* ========== RESPONSIVO ========== */
/* Avisos: 1 por fila en < 980px */
@media (max-width:980px){
  .v5-contenedor-misavisos .v5-avisos-list{ grid-template-columns:1fr; }
}

/* Móvil / tablet */
@media (max-width:768px){
  .v5-contenedor-misavisos{ --actions-w:clamp(124px,38vw,150px); --label-w:108px; }
  .v5-contenedor-misavisos .v5-card-aviso{ padding:12px; }

  /* Historial: 2 columnas × 3 filas, re-mapeadas (SIN columna implícita 3) */
  .v5-contenedor-misavisos .hist-card{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    grid-template-rows:auto auto auto;
    gap:10px 14px;
  }
  .v5-contenedor-misavisos .hist-card .h-line:nth-child(1){ grid-column:1; grid-row:1; } /* ID */
  .v5-contenedor-misavisos .hist-card .h-line:nth-child(2){ grid-column:2; grid-row:1; } /* Puesto */
  .v5-contenedor-misavisos .hist-card .h-line:nth-child(3){ grid-column:1; grid-row:2; } /* Estado */
  .v5-contenedor-misavisos .hist-card .h-line:nth-child(4){ grid-column:2; grid-row:2; } /* Finalizado en */
  .v5-contenedor-misavisos .hist-card .h-line:nth-child(5){ grid-column:1; grid-row:3; } /* Visitas */
  .v5-contenedor-misavisos .hist-card .h-line:nth-child(6){ grid-column:2; grid-row:3; } /* Postulantes */
}

/* Móvil estrecho */
@media (max-width:520px){
  .v5-contenedor-misavisos{ --label-w:96px; }
}

/* Ultra estrecho: última defensa */
@media (max-width:360px){
  .v5-contenedor-misavisos .v5-card-aviso{ grid-template-columns:1fr; }
  .v5-contenedor-misavisos .v5-card-aviso .fila .dato,
  .v5-contenedor-misavisos .v5-card-aviso .fila .acciones{ grid-column:1; }
}


/***** A) Móvil ≤450px: achicar botonera y dar más aire a la columna de datos *****/
@media (max-width: 450px){
  .v5-contenedor-misavisos{
    --actions-w: 118px;   /* columna de botones más angosta */
    --label-w: 92px;      /* etiquetas más cortas → + espacio para valores */
    --btn-h: 30px;
    --btn-font: 12px;
  }
  .v5-contenedor-misavisos .v5-card-aviso{
    column-gap: 10px;
    padding: 12px 10px;
  }
  .v5-contenedor-misavisos .btn{
    padding: 0 8px;
    white-space: nowrap;  /* evita salto de línea en “Postulantes”, etc. */
  }
}

/***** B) Historial – ya tienes 3×2 (desktop) y 2×3 (tablet/móvil). 
          Aquí solo forzamos el corte a 1 columna cuando <650px *****/
@media (max-width: 650px){
  .v5-contenedor-misavisos .hist-card{
    grid-template-columns: 1fr;       /* una sola columna */
    grid-template-rows: auto; 
    gap: 8px 10px;
    font-size: 13px;                  /* letra más chica en el card */
  }
  /* Reasignar TODAS las líneas a la única columna (anula posiciones previas) */
  .v5-contenedor-misavisos .hist-card .h-line{
    grid-column: 1 !important;
    grid-row: auto !important;
    /* etiqueta más angosta → valor gana espacio */
    grid-template-columns: minmax(96px, 40%) 1fr;
  }
  .v5-contenedor-misavisos .hist-card .h-label,
  .v5-contenedor-misavisos .hist-card .h-val{
    font-size: 13px;
  }
}

/***** C) Micro-ajuste en móviles muy estrechos (≤375px) *****/
@media (max-width: 375px){
  .v5-contenedor-misavisos{
    --actions-w: 110px;
    --label-w: 86px;
    --btn-h: 28px;
  }
  .v5-contenedor-misavisos .btn{
    font-size: 11.5px;
    padding: 0 6px;
  }
}


/* --- REACTIVAR: blanco + fucsia (override definitivo) --- */
.v5-contenedor-misavisos .btn.btn-reactivar,
.v5-contenedor-misavisos .btn.btn-reactivar:visited{
  background:#fff !important;
  color:var(--pink) !important;
  border:1px solid var(--pink) !important;
  text-decoration:none !important;
}

.v5-contenedor-misavisos .btn.btn-reactivar:hover,
.v5-contenedor-misavisos .btn.btn-reactivar:focus{
  background:#fff !important;
  color:var(--pink-dark) !important;
  border-color:var(--pink-dark) !important;
  box-shadow:0 0 0 3px rgba(250,17,136,.12);
  outline:none;
}


/* MIS AVISOS: título + badge dentro de la misma celda (valor) */
.v5-card-aviso .fila.f2 .valor.valor-cargo{
  display:inline-flex;         /* NO tocamos el grid exterior */
  align-items:center;
  gap:8px;
  min-width:0;
}
.v5-card-aviso .fila.f2 .valor.valor-cargo .titulo-aviso{
  display:inline-block;
  font-weight:700;
}


.v5-card-aviso .badge-promo{
  white-space:nowrap;  /* evita partidos "hasta 06/09" */
  line-height:1;
  padding:2px 8px;
  border-radius:12px;
  font-size:12px;
}
.v5-card-aviso .badge-promo.badge-premium{ background:#fff3cd; color:#8a6d3b; }
.v5-card-aviso .badge-promo:not(.badge-premium){ background:#e3f2fd; color:#1565c0; }