/* Abogados Colombia — estilos del directorio, fichas y formularios.
   Criterio: bloques de color suaves, sin botones macizos que se monten sobre el texto. */

.ab-h2 { font-size: 1.5rem; line-height: 1.25; margin: 1.6em 0 .8em; color: #10233f; }
.ab-intro { font-size: 1.05rem; color: #33405a; }

/* ---------------------------------------------------------------- rejillas */
.ab-rejilla { display: grid; gap: 14px; margin: 0 0 26px; }
.ab-rejilla-ramas { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.ab-rejilla-ciudades { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.ab-rejilla-despa { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.ab-rama, .ab-ciudad {
  display: block; padding: 16px 18px; border-radius: 14px; text-decoration: none;
  background: #f6f7f9; border: 1px solid #e7eaf0; transition: transform .12s ease, box-shadow .12s ease;
}
.ab-rama:hover, .ab-ciudad:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(11,43,75,.10); }
.ab-rama-nombre, .ab-ciudad-nombre { display: block; font-weight: 700; color: #10233f; font-size: 1.05rem; }
.ab-rama-meta, .ab-ciudad-meta { display: block; margin-top: 4px; font-size: .86rem; color: #6b7280; }

/* ---------------------------------------------------------------- fichas */
.ab-despa {
  background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 18px;
  box-shadow: 0 1px 2px rgba(11,43,75,.04);
}
.ab-despa-libre { background: #fbfaf6; border-style: dashed; border-color: #e6dcc0; }
.ab-publicidad {
  display: inline-block; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
  color: #7a6a2f; background: #f6f0da; border-radius: 999px; padding: 3px 10px; margin-bottom: 10px;
}
.ab-despa-nombre { margin: 0 0 6px; font-size: 1.15rem; color: #10233f; }
.ab-despa-tp { margin: 0 0 8px; font-size: .84rem; color: #1c7c54; font-weight: 600; }
.ab-despa-txt { color: #3d4a63; font-size: .95rem; }
.ab-despa-contacto { margin: 12px 0 0; }
.ab-despa-foto img { border-radius: 12px; max-width: 100%; height: auto; margin-bottom: 10px; }

.ab-btn, .ab-btn-suave {
  display: inline-block; padding: 10px 18px; border-radius: 999px; text-decoration: none;
  font-weight: 600; font-size: .95rem; line-height: 1.2;
}
.ab-btn { background: #124596; color: #fff !important; }
.ab-btn:hover { background: #0d3573; }
.ab-btn-suave { background: #f1f4f8; color: #10233f !important; border: 1px solid #e7eaf0; }
.ab-btn-suave:hover { background: #e8eef7; }

.ab-dir-vacio { background: #f6f7f9; border-left: 4px solid #124596; padding: 12px 16px; border-radius: 8px; color: #33405a; }
.ab-dir-nota { font-size: .88rem; color: #6b7280; background: #f6f7f9; border-radius: 10px; padding: 12px 16px; }

/* ---------------------------------------------------------------- fuente */
.ab-fuente {
  margin: 22px 0; padding: 14px 16px; border-radius: 12px; background: #f4f8f4;
  border: 1px solid #d9e8d9; font-size: .9rem; color: #2c4a34;
}
.ab-fuente-etiq {
  display: inline-block; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  background: #e2f0e2; color: #256b3f; border-radius: 999px; padding: 3px 10px; margin-right: 8px;
}
.ab-fuente-txt { display: inline; }
.ab-fuente-nota { display: block; margin-top: 6px; color: #4e6b56; font-size: .84rem; }

/* ------------------------------------------------------------- formularios */
.ab-form {
  background: #f6f7f9; border: 1px solid #e7eaf0; border-radius: 16px; padding: 22px; margin: 26px 0;
}
.ab-form-caso { background: #f5f8fe; border-color: #d8e4f8; }
.ab-campo { display: block; margin: 0 0 14px; }
.ab-campo > span { display: block; font-size: .9rem; font-weight: 600; color: #33405a; margin-bottom: 5px; }
.ab-campo input, .ab-campo select, .ab-campo textarea {
  width: 100%; padding: 11px 13px; border: 1px solid #cfd9ea; border-radius: 10px;
  font-size: 1rem; background: #fff; color: #172033;
}
.ab-campo input:focus, .ab-campo select:focus, .ab-campo textarea:focus {
  outline: 2px solid #bcd3f7; border-color: #7fa8e8;
}
.ab-grid { display: grid; gap: 0 14px; grid-template-columns: 1fr 1fr; }
.ab-check { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: #46536e; margin: 6px 0 16px; }
.ab-check input { margin-top: 3px; }
.ab-aviso { font-size: .86rem; color: #6b7280; margin: 12px 0 0; }
.ab-out { margin-top: 14px; padding: 12px 16px; border-radius: 10px; font-size: .94rem; }
.ab-out-ok { background: #e8f5ec; border: 1px solid #c3e3cd; color: #1c6b40; }
.ab-out-err { background: #fdeceb; border: 1px solid #f6cdc9; color: #98342b; }

/* ---------------------------------------------------------------- proyecto */
.ab-proyecto {
  background: linear-gradient(180deg, #10233f 0%, #124596 100%); color: #eaf1fa;
  border-radius: 18px; padding: 22px 24px; margin: 26px 0;
}
.ab-proyecto h3 { color: #fff; margin: 0 0 8px; font-size: 1.25rem; }
.ab-proyecto p { color: #cfdcee; margin: 0 0 10px; }
.ab-proyecto a { color: #ffd98a; }

/* ---------------------------------------------------------------- línea de diseño del portal
   Base compartida con empleos.colombia.com.co (y con los directorios que vienen: veterinarios,
   contadores, odontólogos, ingenieros): Inter para el texto, Anton para los títulos,
   azul #124596 sobre tinta #10233f, tarjetas claras y nada de botones que se monten sobre el texto. */
:root {
  --ab-ink:#10233f; --ab-azul:#124596; --ab-azul-osc:#0d3573; --ab-texto:#33405a;
  --ab-gris:#6b7280; --ab-linea:#e7eaf0; --ab-papel:#f6f7f9; --ab-radio:18px;
}

html body { font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif !important;
       color:var(--ab-texto); font-size:15px; line-height:1.6; }
/* el tema fija el tamaño del H1 con .entry-title: se iguala a la escala de la línea de diseño */
body .entry-title { font-size: 42px !important; line-height: 1.1; }
@media (max-width: 900px) { body .entry-title { font-size: 34px !important; } }
@media (max-width: 600px) { body .entry-title { font-size: 27px !important; } }

html body h1, html body h2, html body h3, html body h4,
html body .ab-h2, html body .ab-despa-nombre, html body .ab-rama-nombre, html body .ab-ciudad-nombre,
html body .elementor-heading-title {
  font-family:'Anton',Impact,sans-serif !important; font-weight:400; letter-spacing:-.02em; line-height:1.08; color:var(--ab-ink);
}

/* cabecera fija y translúcida, igual que en el portal de empleos */
.site-header.dynamic-header {
  position:sticky; top:0; z-index:30; padding:10px 0 9px;
  background:rgba(255,255,255,.72); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid rgba(16,35,63,.06);
}
.admin-bar .site-header.dynamic-header { top:32px; }
@media (max-width:782px) { .admin-bar .site-header.dynamic-header { top:46px; } }

.site-header .header-inner { display:flex; align-items:center; gap:18px; }
body .site-header .site-branding { display:flex; flex-direction:row; align-items:center; gap:11px; flex:0 0 auto; }
body .site-header .site-branding .site-title { margin:0; }
.site-header .custom-logo, header .custom-logo { max-width:38px; width:38px; height:38px; border-radius:50%; }
.site-header .site-title { font-family:'Anton',Impact,sans-serif; font-size:19px; line-height:1; letter-spacing:-.01em; }
.site-header .site-title a, .site-header .site-title { color:var(--ab-ink) !important; text-decoration:none; font-size:19px !important; }
.site-header .site-description { display:none; }
.site-header .site-navigation { flex:1 1 auto; }
.site-footer .custom-logo, footer .custom-logo { max-width:180px; height:auto; border-radius:0; }

/* botón de la cabecera (equivalente al "Ver vacantes" de empleos) */
.ab-nav-cta {
  display:inline-block; background:var(--ab-azul); color:#fff !important; font-size:14px; font-weight:600;
  padding:10px 18px; border-radius:10px; text-decoration:none !important; white-space:nowrap;
  font-family:'Inter',-apple-system,sans-serif;
}
.ab-nav-cta:hover { background:var(--ab-azul-osc); color:#fff !important; }
/* el botón de la cabecera no es un ítem del menú: lo inserta ab-cabecera.js */
body .site-header .ab-nav-cta { margin-left: 16px; }
/* en escritorio la barra del menú es una fila flexible que nunca parte el botón a otra línea */
@media (min-width: 1201px) {
  body .site-header .site-navigation { min-width: 0; }
  body .site-header .ab-nav-cta { margin-left: 14px; }
}
@media (max-width: 1200px) { body .site-header .ab-nav-cta { margin-left: 0; } }

/* Los paneles del mega menú (1.040 px) colgaban del ítem y se salían por los lados:
   en escritorio se anclan al ancho de la cabecera y se centran en el espacio disponible. */
@media (min-width: 1201px) {
  body .site-header .header-inner { position: relative; }
  body .site-header .mega-menu-wrap { position: static !important; }
  body #mega-menu-menu-1 > li.mega-menu-item > .mega-sub-menu {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(1040px, calc(100vw - 48px)) !important;
    max-width: calc(100vw - 48px) !important;
  }
}
.mega-menu-wrap .mega-menu-item.ab-cta-item > .mega-menu-link { padding:0 !important; background:transparent !important; }
@media (max-width:767px) { .ab-nav-cta { padding:9px 14px; } }

/* ---------------------------------------------------------------- botones de formulario
   El reset del tema pinta [type=submit]/button con fondo transparente y texto rosado, y su
   selector (atributo + etiqueta) gana a la clase .ab-btn: hay que igualarlo para que el botón
   se vea azul con texto blanco. */
body button.ab-btn, body input.ab-btn, body [type="submit"].ab-btn {
  background: #124596 !important; color: #FFFFFF !important; border: 0 !important;
}
body button.ab-btn:hover, body input.ab-btn:hover, body [type="submit"].ab-btn:hover { background: #0d3573 !important; color: #FFFFFF !important; }
body button.ab-btn-suave, body [type="submit"].ab-btn-suave {
  background: #EEF3FB !important; color: #10233f !important; border: 1px solid #DBE5F5 !important;
}

/* en móvil la barra es una sola fila: marca, botón y hamburguesa */
@media (max-width: 600px) {
  body .site-header .header-inner { flex-wrap: nowrap; gap: 10px; }
  body .site-header .site-title { display: none; }
  body .site-header .custom-logo { width: 34px; height: 34px; max-width: 34px; }
  body .site-header .ab-nav-cta { padding: 8px 12px; font-size: 13px; }
  body .site-header .mega-menu-wrap { flex-wrap: nowrap; }
}

/* ---------------------------------------------------------------- mega menú */
.mega-menu-wrap { width: 100%; }
/* el plugin fija la altura de la barra con un selector con id: hay que ganarle para que la
   cabecera quede de 64 px como la del portal de empleos */
/* la barra del menú se estiraba por el interlineado del contenedor: se anula con font-size 0
   (el tamaño real se devuelve a los enlaces) sin tocar la maquetación que calcula el plugin */
body #mega-menu-wrap-menu-1 ul.mega-menu { font-size: 0; min-height: 0; }
body #mega-menu-wrap-menu-1 ul.mega-menu > li.mega-menu-item > .mega-menu-link { font-size: 14px; line-height: 1.3; }
/* barra móvil más baja */
body .site-header .mega-menu-toggle { min-height: 0; padding: 8px 12px; border-radius: 10px; }
.mega-menu-wrap .mega-menu-link { line-height: 1.25; }
body .mega-menu-wrap #mega-menu-menu-1 > li > .mega-menu-link { padding-top: 9px; padding-bottom: 9px; }
.site-header .site-navigation-toggle-holder { display: flex; align-items: center; gap: 10px; }
@media (max-width: 1200px) {
  /* barra móvil: marca · botón · hamburguesa, en una fila */
  .site-header .mega-menu-wrap { display: flex; align-items: center; gap: 10px; }
  .site-header .header-inner { flex-wrap: nowrap; }
}
.mega-menu-wrap .mega-menu-toggle { border-radius: 10px; }


/* El tema oculta su navegación por debajo de 992 px con !important (clase menu-dropdown-tablet):
   aquí se iguala la especificidad para que mande el menú del plugin. */
@media (max-width: 992px) {
  body .site-header.menu-dropdown-tablet:not(.menu-layout-dropdown) .site-navigation,
  body .site-header.menu-dropdown-tablet:not(.menu-layout-dropdown) .site-navigation.show { display: block !important; }
  body .site-header.menu-dropdown-tablet:not(.menu-layout-dropdown) .site-navigation-toggle-holder { display: none !important; }
  .site-header .site-navigation-toggle { display: none !important; }
  .site-header .site-navigation-dropdown { display: none !important; }
}

/* ---------------------------------------------------------------- tablas de directorios */
.ab-tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 24px; }
table.ab-jz { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.ab-jz th {
  text-align: left; background: #f6f7f9; color: #10233f; font-weight: 700;
  padding: 10px 12px; border-bottom: 2px solid #dde5f0; white-space: nowrap;
}
table.ab-jz td { padding: 10px 12px; border-bottom: 1px solid #eceff5; vertical-align: top; }
table.ab-jz tr:hover td { background: #f8fafd; }
.ab-jz-nombre { font-weight: 600; color: #124596; }
.ab-jz-cod { display: block; font-weight: 400; font-size: .78rem; color: #6b7280; letter-spacing: .02em; }

/* ---------------------------------------------------------------- modelos y plantillas */
pre.ab-modelo {
  background: #f6f7f9; border: 1px solid #dfe6f0; border-left: 4px solid #124596;
  border-radius: 10px; padding: 16px 18px; margin: 0 0 26px;
  white-space: pre-wrap; word-break: break-word; font-size: .88rem; line-height: 1.6;
  color: #22304a; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (max-width: 600px) {
  .site-header .custom-logo, header .custom-logo { max-width: 175px; }
  .ab-grid { grid-template-columns: 1fr; }
  .ab-rejilla-ramas, .ab-rejilla-ciudades, .ab-rejilla-despa { grid-template-columns: 1fr; }
  .ab-form { padding: 18px 16px; }
  table.ab-jz { font-size: .84rem; }
  table.ab-jz th, table.ab-jz td { padding: 8px 9px; }
  pre.ab-modelo { font-size: .84rem; padding: 14px; }
}