/*
 Theme Name:   Divi Child
 Theme URI:    https://empleoveterinariosmurcia.es/
 Description:  Tema hijo de Divi
 Author:       Nexius
 Template:     Divi
 Version:      1.0.0
*/

/* CSS personalizado */
/* ============================================================
   🎨 ESTILO WP JOB MANAGER – Adaptado a Divi (Montserrat)
   ============================================================ */

/* Contenedor principal */
.job_listings {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  padding: 20px 30px;
  font-family: "Montserrat", sans-serif;
}

/* Filtros (buscador) */
.job_filters {
  background: #f8f8f8;
  border-radius: 10px;
  padding: 15px 20px;
  margin-bottom: 20px;
}
.job_filters .search_jobs input,
.job_filters .search_jobs select {
  border: 1px solid #ccc !important;
  border-radius: 6px !important;
  padding: 8px 10px;
  font-family: "Montserrat", sans-serif;
}
.job_filters .search_submit {
  display: none !important;
}
.job_types input[type=checkbox] {
  accent-color: #00707a; /* color principal del sitio */
}
.job_types label {
  font-weight: 500;
  font-family: "Montserrat", sans-serif;
}

/* Tarjetas de ofertas */
.job_listings .job_listing {
  border: 0;
  border-bottom: 1px solid #eee;
  padding: 20px 0;
  transition: all 0.2s ease-in-out;
}
.job_listings .job_listing:hover {
  background: #f9f9f9;
  transform: translateY(-2px);
}

/* Tipografía y colores de texto */
.job_listings .position h3 {
  color: #004c5a;
  font-weight: 600;
  font-size: 18px;
  margin: 0 0 6px;
  font-family: "Montserrat", sans-serif;
}
.job_listings .company strong {
  color: #008a8a;
  font-family: "Montserrat", sans-serif;
}
.job_listings .location,
.job_listings .date {
  color: #666;
  font-size: 14px;
  font-family: "Montserrat", sans-serif;
}

/* Enlaces dentro de las ofertas */
.job_listings a {
  text-decoration: none;
  color: inherit;
}

/* ============================================================
   📏 ALINEADO EN COLUMNAS – Grid layout para ubicación y fecha
   ============================================================ */

.job_listings { padding: 6px; }
.job_listings .job_listing + .job_listing { border-top: 1px solid #eee; }

.job_listings .job_listing > a {
  display: grid;
  grid-template-columns: minmax(0,1fr) 160px 190px; /* Col1: Título/empresa | Col2: Ubicación | Col3: Fecha */
  align-items: center;
  gap: 12px 24px;
}

/* Logo */
.job_listings .job_listing .company_logo,
.job_listings .job_listing .company_logo img {
  width: 42px; height: 42px;
  border-radius: 8px;
  object-fit: cover;
}

/* Colocar los meta dentro del grid */
.job_listings .job_listing .meta { display: contents; }

/* Ubicación */
.job_listings .job_listing .location {
  grid-column: 2;
  justify-self: start;
  color: #777;
}

/* Fecha */
.job_listings .job_listing .date {
  grid-column: 3;
  justify-self: end;
  text-align: right;
  color: #777;
  white-space: normal; /* “Publicado hace X minutos” puede partir en 2 líneas */
}

/* Responsive: apilar columnas en pantallas pequeñas */
@media (max-width: 980px) {
  .job_listings .job_listing > a {
    grid-template-columns: 1fr;
    gap: 6px 0;
  }
  .job_listings .job_listing .location,
  .job_listings .job_listing .date {
    grid-column: 1;
    justify-self: start;
    text-align: left;
  }
}

/* Ocultar "Solo puestos en remoto" en WP Job Manager */
.job_filters .search_remote_position {
  display: none !important;
}
/* Oculta el enlace RSS del listado */
.job_listings .rss_link { display: none !important; }

/* ============================================================
   🔘 BOTÓN "BUSCAR" en el buscador de empleos (color #008298)
   ============================================================ */

/* Muestra y posiciona el botón */
.job_filters .search_submit {
  display: flex !important;
  justify-content: flex-end;
  margin-top: 14px;
}

/* Estilo del botón */
.job_filters .search_submit input[type="submit"] {
  appearance: none;
  background: #008298;                /* color principal Divi */
  color: #ffffff;
  border: none;
  border-radius: 9999px;              /* forma de píldora */
  padding: 10px 28px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 4px 10px rgba(0,130,152,0.25);
}

/* Hover (más oscuro + leve movimiento) */
.job_filters .search_submit input[type="submit"]:hover {
  background: #006d7e;
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(0,130,152,0.35);
}

/* ============================================================
   FORMULARIO "PUBLICAR OFERTA" (WP Job Manager - [submit_job_form])
   Estilo Divi: Montserrat, campos redondeados, 2 columnas, botones #008298
   ============================================================ */

.job-manager-form, .job-manager-form * { font-family: "Montserrat", sans-serif; }

/* Contenedor general */
.job-manager-form {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  padding: 28px;
}

/* Títulos de secciones (p.ej. "Detalles de la empresa") */
.job-manager-form h2, .job-manager-form legend {
  font-size: 28px;
  font-weight: 700;
  margin: 28px 0 12px;
  color: #0b2a32; /* ajusta si quieres más oscuro/claro */
}
.job-manager-form fieldset { border: 0; }

/* Cada fila del formulario en 2 columnas: etiqueta + campo */
.job-manager-form .fieldset {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 10px 18px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid #f0f2f4;
}
.job-manager-form .fieldset:last-child { border-bottom: 0; }

/* Etiquetas */
.job-manager-form label {
  font-weight: 600;
  color: #2f3a3d;
  margin: 0;
}

/* Inputs / selects / textareas */
.job-manager-form input[type="text"],
.job-manager-form input[type="email"],
.job-manager-form input[type="url"],
.job-manager-form input[type="number"],
.job-manager-form input[type="password"],
.job-manager-form select,
.job-manager-form textarea,
.job-manager-form .input-text {
  width: 100%;
  border: 1px solid #dfe5ea;
  background: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  color: #1e2b2f;
  transition: box-shadow .15s ease, border-color .15s ease;
  box-shadow: 0 0 0 0 rgba(0,130,152,0);
}
.job-manager-form textarea { min-height: 140px; resize: vertical; }

/* Focus */
.job-manager-form input:focus,
.job-manager-form select:focus,
.job-manager-form textarea:focus {
  outline: none;
  border-color: #008298;
  box-shadow: 0 0 0 3px rgba(0,130,152,.18);
}

/* Ayuda bajo los campos (descripciones opcionales) */
.job-manager-form small.description,
.job-manager-form .field .description {
  color: #6c7a80;
  font-size: 13px;
}

/* Checkbox (puesto remoto, T&C, etc.) */
.job-manager-form input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: #008298;
  cursor: pointer;
}
.job-manager-form input[type="checkbox"] + label {
  font-weight: 500;
}

/* Editor de texto (TinyMCE) */
.job-manager-form .wp-editor-wrap {
  border: 1px solid #dfe5ea; border-radius: 10px; overflow: hidden;
}
.job-manager-form .wp-editor-container textarea.wp-editor-area {
  border: 0 !important; border-radius: 0 !important;
}

/* Subida de logotipo / archivo */
.job-manager-form input[type="file"] {
  border: 1px solid #dfe5ea;
  background: #fbfcfd;
  border-radius: 10px;
  padding: 10px;
}

/* Botones inferiores (Previsualizar, Guardar, Enviar) */
.job-manager-form .button,
.job-manager-form input[type="submit"],
.job-manager-form .job-manager-button {
  appearance: none;
  background: #008298;
  color: #fff !important;
  border: 0;
  border-radius: 9999px;
  padding: 11px 26px;
  font-weight: 700;
  letter-spacing: .2px;
  cursor: pointer;
  display: inline-block;
  box-shadow: 0 6px 14px rgba(0,130,152,.25);
  transition: transform .06s ease, background .2s ease, box-shadow .2s ease;
}
.job-manager-form .button:hover,
.job-manager-form input[type="submit"]:hover,
.job-manager-form .job-manager-button:hover {
  background: #006d7e;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,130,152,.35);
}

/* Separación del grupo de botones */
.job-manager-form .job-manager-submit-buttons,
.job-manager-form p.submit { 
  margin-top: 18px;
}

/* Mensajes de validación/errores */
.job-manager-error, .job-manager-message {
  border-radius: 10px;
  padding: 12px 16px;
  border: 1px solid #f1d3d3;
  background: #fff3f3;
  color: #8a1f1f;
}

/* Responsive: apilar etiquetas sobre campos */
@media (max-width: 980px) {
  .job-manager-form .fieldset {
    grid-template-columns: 1 fr;
    gap: 6px 0;
  }
  .job-manager-form label { margin-bottom: 2px; }
}
/* Oculta "Nombre de usuario en Twitter" y "Vídeo"  y trabajo en remoto*/
.job-manager-form .fieldset-job_remote_position { display: none !important; }
.job-manager-form .fieldset-company_twitter,
.job-manager-form .fieldset-company_video { display: none !important; }

/* ============================================================
   PANEL DEL EMPLEADOR – [job_dashboard]
   Montserrat, tabla tipo "card", botones #008298, responsive
   ============================================================ */

.job-manager, .job-manager * { font-family: "Montserrat", sans-serif; }

/* Contenedor del dashboard */
.job-manager .job-manager-jobs,
.job-manager table.job-manager-jobs {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  overflow: hidden;
}

/* Cabecera de la tabla */
.job-manager table.job-manager-jobs thead th {
  background: #f7f8fa;
  color: #2f3a3d;
  font-weight: 700;
  text-transform: none;
  font-size: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid #eef1f4;
}

/* Filas */
.job-manager table.job-manager-jobs tbody td {
  padding: 16px 18px;
  border-bottom: 1px solid #f0f2f4;
  vertical-align: middle;
  color: #1e2b2f;
  font-size: 15px;
}
.job-manager table.job-manager-jobs tbody tr:hover {
  background: #fafbfc;
}

/* Columna título de la oferta */
.job-manager table.job-manager-jobs td.job_title a {
  font-weight: 700;
  color: #004c5a;
  text-decoration: none;
}

/* Badges de estado */
.job-manager table.job-manager-jobs .job-dashboard-status,
.job-manager table.job-manager-jobs mark {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: #eef7f9;
  color: #006d7e;
}

/* Variantes comunes (si existen esas clases) */
.job-manager table.job-manager-jobs .job-status-pending { background:#fff7e6; color:#9c6a00; }
.job-manager table.job-manager-jobs .job-status-expired { background:#ffecec; color:#a12525; }
.job-manager table.job-manager-jobs .job-status-filled  { background:#eaf7ee; color:#1a7f4b; }

/* Acciones (editar, duplicar, rellenar, borrar…) */
.job-manager table.job-manager-jobs td.job_actions,
.job-manager table.job-manager-jobs td .job-dashboard-actions {
  text-align: right;
  white-space: nowrap;
}
.job-manager table.job-manager-jobs td .job-dashboard-actions a,
.job-manager table.job-manager-jobs td a.button {
  display: inline-block;
  margin-left: 8px;
  padding: 8px 14px;
  border-radius: 9999px;
  background: #008298;
  color: #fff !important;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 4px 10px rgba(0,130,152,.2);
  transition: transform .06s ease, background .2s ease, box-shadow .2s ease;
}
.job-manager table.job-manager-jobs td .job-dashboard-actions a:hover,
.job-manager table.job-manager-jobs td a.button:hover {
  background:#006d7e;
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(0,130,152,.3);
}

/* Enlaces secundarios (ver, vista previa) estilo texto */
.job-manager table.job-manager-jobs td .job-dashboard-actions a.view,
.job-manager table.job-manager-jobs td .job-dashboard-actions a.preview {
  background: transparent;
  color: #008298 !important;
  box-shadow: none;
  padding: 0;
  font-weight: 600;
}
.job-manager table.job-manager-jobs td .job-dashboard-actions a.view:hover,
.job-manager table.job-manager-jobs td .job-dashboard-actions a.preview:hover {
  color: #006d7e !important;
}

/* Paginación */
.job-manager .job-manager-pagination .page-numbers {
  display: inline-block;
  margin: 8px 4px 0 0;
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  background: #f3f6f7;
  color: #2f3a3d;
}
.job-manager .job-manager-pagination .page-numbers.current,
.job-manager .job-manager-pagination .page-numbers:hover {
  background: #008298;
  color: #fff;
}

/* Estado vacío (sin ofertas) */
.job-manager .no_jobs {
  background:#fff;
  border-radius: 12px;
  border:1px solid #eef1f4;
  padding: 24px;
  color:#445056;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  /* Scroll horizontal cómodo en móvil si hay muchas columnas */
  .job-manager table.job-manager-jobs-wrapper,
  .job-manager table.job-manager-jobs {
    display: block;
    width: 100%;
    overflow-x: auto;
  }
  .job-manager table.job-manager-jobs thead { display: none; }
  .job-manager table.job-manager-jobs tr { display: block; border-bottom: 1px solid #f0f2f4; }
  .job-manager table.job-manager-jobs td {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px;
  }
  .job-manager table.job-manager-jobs td.job_actions {
    justify-content: flex-start;
    gap: 8px; white-space: normal;
  }
} 

/* Botones "Editar oferta" / "Enviar oferta" en la previsualización */
/* ================================
   Botones de previsualización (Enviar oferta / Editar oferta)
   en la pantalla de "Previsualizar"
   ================================ */

.job_listing_preview_title input.button,
.job_listing_preview_title input.job-manager-button-submit-listing,
.job_listing_preview_title input.job-manager-button-edit-listing {
    background-color: #006b71;        /* tu color corporativo (turquesa/verde) */
    color: #ffffff !important;         /* texto blanco sí o sí */
    border: 0;
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    margin-right: 8px;                 /* espacio entre los dos botones */
    appearance: none;                  /* quita estilos nativos raros */
}

.job_listing_preview_title input.button:hover,
.job_listing_preview_title input.job-manager-button-submit-listing:hover,
.job_listing_preview_title input.job-manager-button-edit-listing:hover {
    filter: brightness(1.1);
    color: #ffffff !important;
    text-decoration: none;
}

/* Alinear mejor el bloque "Previsualizar" + botones */
.job_listing_preview_title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;                         /* separación homogénea entre elementos */
    margin-bottom: 24px;
}

.job_listing_preview_title h2 {
    order: -1;                         /* opcional: si quieres "Previsualizar" primero, quita esto */
    font-size: 32px;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
    color: #003f44;                    /* tono más oscuro si quieres contraste con el teal */
}

/* Botón "Salir" (logout) cuando el usuario ya está conectado */
.field.account-sign-in a.button {
    background-color: #006b71 !important;  /* color corporativo */
    color: #ffffff !important;              /* texto blanco */
    border: 0 !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    padding: 8px 14px !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08) !important;
}

.field.account-sign-in a.button:hover {
    filter: brightness(1.1);
    color: #ffffff !important;
}

/* Botón "Salir" (logout) cuando el usuario ya está conectado */
.field.account-sign-in a.button {
    background-color: #006b71 !important;  /* color corporativo */
    color: #ffffff !important;              /* texto blanco */
    border: 0 !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    padding: 8px 14px !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08) !important;
}

.field.account-sign-in a.button:hover {
    filter: brightness(1.1);
    color: #ffffff !important;
}
.job-manager-form input[name="save_draft"] {
    display: none !important;
}