/* =========================================================
   EmpleoFunerario — panel.css
   Solo para páginas con backend (login/registro, paneles de
   candidato/funeraria/admin, ficha de oferta, listado con
   paginación). Reutiliza las variables y componentes de
   estilos.css (--color-*, .btn, .badge, .form__*, .avatar…) —
   nunca redefine esos nombres, solo añade lo que falta.
   ========================================================= */

/* ---------- Página de formulario centrado (login/registro) ---------- */
.pagina-form {
  padding-block: clamp(3rem, 2.4rem + 3vw, 5.5rem);
  min-height: 60vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.pagina-form__panel {
  width: 100%;
  max-width: 520px;
  background: var(--color-fondo-alt);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-l);
  box-shadow: var(--sombra-s);
  padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
}

.pagina-form__titulo { margin-bottom: 0.5rem; }
.pagina-form__subtitulo { color: var(--color-texto-secundario); margin-bottom: 1.75rem; }

.pagina-form form { display: flex; flex-direction: column; gap: 1.15rem; }

.pagina-form__enlace-alt {
  margin-top: 1.5rem;
  font-size: 0.92rem;
  color: var(--color-texto-secundario);
  text-align: center;
}
.pagina-form__enlace-alt a { color: var(--color-violeta); font-weight: 600; }

/* ---------- Layout de panel (candidato/funeraria/admin) ---------- */
.panel {
  padding-block: clamp(2rem, 1.6rem + 2vw, 3.5rem);
  min-height: 60vh;
}

.panel__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}

.panel__titulo { margin-bottom: 0.15rem; }
.panel__subtitulo { color: var(--color-texto-secundario); font-size: 0.95rem; }

.panel__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--color-borde);
  padding-bottom: 0.75rem;
}
.panel__tab {
  padding: 0.5rem 1rem;
  border-radius: var(--radio-s);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-texto-secundario);
}
.panel__tab:hover { background: var(--wash-violeta); color: var(--color-violeta); }
.panel__tab--activo { background: var(--color-violeta); color: #fff; }

.card {
  background: var(--color-fondo-alt);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-m);
  padding: 1.5rem;
  box-shadow: var(--sombra-s);
}
.card + .card { margin-top: 1.5rem; }
.card__titulo { margin-bottom: 1rem; }

/* ---------- Contadores del dashboard ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.stat-box {
  background: var(--color-fondo-alt);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-m);
  padding: 1.25rem;
  text-align: center;
}
.stat-box__numero {
  display: block;
  font-family: var(--font-titulares);
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-navy);
}
.stat-box__etiqueta { font-size: 0.85rem; color: var(--color-texto-secundario); }

/* ---------- Tablas ---------- */
.tabla-wrap { overflow-x: auto; border: 1px solid var(--color-borde); border-radius: var(--radio-m); }
.tabla { width: 100%; border-collapse: collapse; font-size: 0.92rem; min-width: 640px; }
.tabla th, .tabla td { padding: 0.85rem 1rem; text-align: left; border-bottom: 1px solid var(--color-borde); vertical-align: middle; }
.tabla th { background: var(--color-fondo); color: var(--color-texto-secundario); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }
.tabla tr:last-child td { border-bottom: none; }
.tabla__acciones { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.tabla__vacio { padding: 2rem; text-align: center; color: var(--color-texto-secundario); }

/* ---------- Badges de estado de oferta ---------- */
.badge--borrador { background: var(--color-borde); color: var(--color-texto-secundario); }
.badge--pendiente { background: var(--wash-dorado); color: var(--color-dorado); }
.badge--publicada { background: #E4F2E8; color: #3E6B4A; }
.badge--rechazada { background: #F6E3E1; color: #B3453D; }
.badge--archivada { background: var(--color-borde); color: var(--color-texto-secundario); }

/* ---------- Badges de estado de candidatura ---------- */
.badge--enviada { background: var(--wash-violeta); color: var(--color-violeta); }
.badge--vista { background: #E4F2E8; color: #3E6B4A; }
.badge--descartada { background: var(--color-borde); color: var(--color-texto-secundario); }

/* ---------- Formulario de alta/edición de oferta (página completa) ---------- */
.form-pagina { max-width: 720px; display: flex; flex-direction: column; gap: 1.15rem; }
.form-pagina .form__fila { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .form-pagina .form__fila { grid-template-columns: 1fr; } }

.nota-moderacion {
  background: #F6E3E1;
  border: 1px solid #E3B7B1;
  border-radius: var(--radio-s);
  padding: 1rem 1.15rem;
  color: #8A342D;
  font-size: 0.92rem;
  margin-bottom: 1rem;
}

/* ---------- Ficha de oferta (oferta.php) ---------- */
.oferta-ficha { padding-block: clamp(2.5rem, 2rem + 2.5vw, 4.5rem); }
.oferta-ficha__volver { display: inline-block; margin-bottom: 1.5rem; color: var(--color-violeta); font-weight: 600; font-size: 0.9rem; }
.oferta-ficha__card {
  background: var(--color-fondo-alt);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-l);
  padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  box-shadow: var(--sombra-s);
  max-width: 760px;
}
.oferta-ficha__header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.oferta-ficha__meta { display: flex; flex-wrap: wrap; gap: 1.25rem; color: var(--color-texto-secundario); font-size: 0.92rem; margin-bottom: 1.5rem; }
.oferta-ficha__meta span { display: inline-flex; align-items: center; gap: 0.4rem; }
.oferta-ficha__meta svg { width: 16px; height: 16px; color: var(--color-violeta); }
.oferta-ficha__descripcion { color: var(--color-texto); white-space: pre-line; margin-bottom: 2rem; }

/* ---------- Chips como enlaces (categorías -> ofertas.php) ---------- */
.chips a.chip { display: inline-flex; }

/* ---------- Paginación ---------- */
.paginacion { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 2.5rem; }
.paginacion__texto { color: var(--color-texto-secundario); font-size: 0.9rem; }
.btn--deshabilitado { opacity: 0.4; pointer-events: none; }

/* ---------- Candidatura recibida (panel funeraria) ---------- */
.candidatura-item { border: 1px solid var(--color-borde); border-radius: var(--radio-m); padding: 1.15rem 1.25rem; margin-bottom: 1rem; }
.candidatura-item__cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; align-items: center; margin-bottom: 0.5rem; }
.candidatura-item__nombre { font-weight: 600; color: var(--color-navy); }
.candidatura-item__meta { color: var(--color-texto-secundario); font-size: 0.85rem; }
.candidatura-item__mensaje { font-size: 0.92rem; margin-block: 0.5rem; }

/* ---------- Validación de campos (usado por app/plantillas y forms server-side) ---------- */
.form--invalido { border-color: #B3453D !important; }

/* ---------- Flash global inyectado por header.php ---------- */
.flash-global { margin-top: 1.5rem; }

/* ---------- Páginas legales (stub) ---------- */
.legal-stub { min-height: 60vh; display: flex; align-items: center; }
.legal-stub__box { max-width: 560px; }
.legal-stub__box p { color: var(--color-texto-secundario); margin-top: 1rem; }
.legal-stub__volver { display: inline-block; margin-top: 2rem; }

/* ---------- Honeypot anti-spam (formulario_parece_humano en seguridad.php) ----------
   Oculto visualmente pero presente en el DOM: los bots que rellenan todos los
   campos de un formulario caen en la trampa; un lector de pantalla no lo anuncia
   porque además lleva aria-hidden="true" en el HTML. */
.campo-oculto {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}