/* Nexempleo · Componentes base v2.1 (sección 10 del Manual de Identidad)
   Requiere: nexempleo-colores.css y nexempleo-tipografia.css cargados antes.
   Regla: aquí no hay ni un color, tamaño o radio suelto; todo sale de los tokens --nx-*. */

/* Contenedor y retícula */
.nx-contenedor{max-width:var(--nx-contenedor);margin-inline:auto;padding-inline:var(--nx-4)}
@media (min-width:768px){.nx-contenedor{padding-inline:var(--nx-5)}}

/* Botones · 48 px por defecto, 40 px en zonas densas, radio 10 px */
.nx-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--nx-2);height:48px;padding:0 22px;border-radius:var(--nx-radio-m);
  font-family:var(--nx-font-text);font-size:var(--nx-fs-button);font-weight:var(--nx-fw-button);letter-spacing:var(--nx-ls-button);line-height:1;
  border:1.5px solid var(--nx-accion);background:var(--nx-accion);color:#fff;cursor:pointer;text-decoration:none;transition:background-color .15s,border-color .15s,color .15s}
.nx-btn:hover{background:var(--nx-accion-hover);border-color:var(--nx-accion-hover)}
.nx-btn:focus-visible{outline:none;box-shadow:0 0 0 4px var(--nx-azul-100)}
.nx-btn--secundario{background:#fff;color:var(--nx-azul-700)}
.nx-btn--secundario:hover{background:var(--nx-azul-50);color:var(--nx-azul-700)}
.nx-btn--terciario{background:transparent;border-color:transparent;color:var(--nx-azul-700)}
.nx-btn--terciario:hover{background:var(--nx-azul-50);border-color:transparent}
.nx-btn--destructivo{background:var(--nx-error);border-color:var(--nx-error)}
.nx-btn--destructivo:hover{filter:brightness(.88);background:var(--nx-error)}
.nx-btn--m{height:40px;padding:0 16px;font-size:var(--nx-fs-body-s)}
.nx-btn[disabled],.nx-btn.is-disabled{opacity:.4;pointer-events:none}

/* Campos · 48 px, etiqueta siempre visible encima, ayuda debajo */
.nx-campo{display:flex;flex-direction:column;gap:7px}
.nx-campo__etiqueta{font-size:var(--nx-fs-label);font-weight:var(--nx-fw-label);color:var(--nx-texto)}
.nx-campo__control{height:48px;padding:0 14px;border:1.5px solid var(--nx-pizarra-300);border-radius:var(--nx-radio-m);background:#fff;
  font:inherit;font-size:var(--nx-fs-body);color:var(--nx-texto)}
.nx-campo__control:focus{outline:none;border-color:var(--nx-accion);box-shadow:0 0 0 4px var(--nx-azul-100)}
.nx-campo__ayuda{font-size:var(--nx-fs-caption);color:var(--nx-texto-secundario)}
.nx-campo.is-error .nx-campo__control{border-color:var(--nx-error);box-shadow:0 0 0 4px var(--nx-error-fondo)}
.nx-campo.is-error .nx-campo__ayuda{color:var(--nx-error)}

/* Tarjetas · radio 14 px, borde pizarra 200, sin sombra por defecto */
.nx-tarjeta{background:#fff;border:1px solid var(--nx-borde);border-radius:var(--nx-radio-l);overflow:hidden}
.nx-tarjeta__portada{aspect-ratio:3/2;background:var(--nx-azul-50);object-fit:cover;width:100%}
.nx-tarjeta__cuerpo{padding:var(--nx-4);display:flex;flex-direction:column;gap:var(--nx-2)}
.nx-tarjeta__titulo{font-size:var(--nx-fs-body);font-weight:600;line-height:1.35;color:var(--nx-texto)}
.nx-tarjeta__pie{display:flex;justify-content:space-between;align-items:baseline;padding-top:var(--nx-2);border-top:1px solid var(--nx-pizarra-100)}
.nx-precio{font-size:var(--nx-fs-price);font-weight:var(--nx-fw-price);letter-spacing:var(--nx-ls-price);font-variant-numeric:tabular-nums;color:var(--nx-texto)}

/* Etiquetas de modo · color + ícono + palabra (nunca solo color) */
.nx-modo{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:var(--nx-radio-s);font-size:var(--nx-fs-caption);font-weight:800}
.nx-modo svg{width:14px;height:14px}
.nx-modo--servicios{background:var(--nx-azul-50);color:var(--nx-azul-700)}
.nx-modo--proyectos,.nx-modo--vacantes{background:var(--nx-turquesa-50);color:var(--nx-turquesa-800)}

/* Insignia «Verificado» · el nexo azul como marca */
.nx-verificado{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:var(--nx-radio-pill);background:var(--nx-azul-50);
  color:var(--nx-azul-700);font-size:var(--nx-fs-caption);font-weight:800}
.nx-verificado::before{content:"";width:10px;height:12px;background:var(--nx-nexo);clip-path:polygon(0 100%,32% 100%,100% 0,68% 0)}
.nx-verificado--l{padding:7px 12px;font-size:var(--nx-fs-label)}
.nx-oscuro .nx-verificado{background:var(--nx-marino-700);color:#fff}
.nx-oscuro .nx-verificado::before{background:var(--nx-nexo-sobre-oscuro)}

/* Check verde · anuncio verificado. Distinto de .nx-verificado, que es la identidad
   de la persona. Solo ícono: la palabra va en aria-label/title; el texto interior
   queda oculto (lo leen los lectores de pantalla). */
.nx-check{position:relative;display:inline-block;flex:none;box-sizing:border-box;width:20px;height:20px;padding:0;border-radius:50%;
  background:var(--nx-exito);color:transparent;font-size:0;line-height:0;letter-spacing:0;text-indent:100%;white-space:nowrap;overflow:hidden;vertical-align:middle}
.nx-check::before{content:"";position:absolute;top:22%;left:37%;width:26%;height:46%;box-sizing:border-box;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.nx-check--l{width:32px;height:32px}
.nx-check--l::before{border-width:0 3px 3px 0}

/* Estados del pedido y del pago */
.nx-estado{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:var(--nx-radio-pill);font-size:var(--nx-fs-caption);font-weight:800}
.nx-estado::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.nx-estado--pendiente{background:var(--nx-pizarra-100);color:var(--nx-pizarra-600)}
.nx-estado--custodia{background:var(--nx-azul-50);color:var(--nx-azul-700)}
.nx-estado--proceso{background:var(--nx-aviso-fondo);color:var(--nx-aviso)}
.nx-estado--entregado{background:var(--nx-turquesa-50);color:var(--nx-turquesa-800)}
.nx-estado--liberado{background:var(--nx-exito-fondo);color:var(--nx-exito)}
.nx-estado--disputa{background:var(--nx-error-fondo);color:var(--nx-error)}

/* Íconos · línea, heredan el color del texto */
.nx-icono{width:24px;height:24px;flex-shrink:0;color:inherit}
.nx-icono--s{width:16px;height:16px}.nx-icono--m{width:20px;height:20px}.nx-icono--l{width:32px;height:32px}