/*
 * SmartPlacement Tools — tokens y componentes base reutilizables.
 * Tokens disponibles:
 *   Colores principales: --spt-primary, --spt-primary-hover, --spt-text,
 *   --spt-muted, --spt-ink-2, --spt-border, --spt-border-strong,
 *   --spt-bg, --spt-surface, --spt-soft-bg.
 *   Estados: --spt-success-*, --spt-error-*, --spt-info-*, --spt-warning-*.
 *   Complementos: --spt-chip-*, --spt-callout-*, --spt-shadow-card,
 *   --spt-radius (xs/md/lg) y tamaños tipográficos (--spt-title-size,
 *   --spt-subtitle-size).
 * Componentes base incluidos:
 *   - Tarjetas: .ui-card, .spt-card, .spt-event-card y derivados.
 *   - Botones: .spt-btn (modificadores --primary/--secondary/--ghost/--sm).
 *   - Formularios: .spt-input, .spt-input-text, .spt-textarea y .spt-input-label.
 *   - Mensajería: .spt-messages y .spt-notice (--info/--success/--error/--warning).
 *   - Meta inline: .spt-chip, .spt-pill, .spt-badge.
 * Utilidades:
 *   - Tipografías .spt-title/.spt-subtitle, layout .spt-card__* y vacíos .spt-empty.
 */

:root {
  /* Palette (aliases kept for compat) */
  --spt-primary: #1d4ed8;                /* primary-600 */
  --spt-primary-hover: #1e40af;          /* primary-700 */
  --spt-text: #0f172a;                   /* slate-900 */
  --spt-muted: #6b7280;                  /* gray-500 */
  --spt-ink-2: #334155;                  /* secondary text */
  --spt-border: #e5e7eb;                 /* gray-200 */
  --spt-border-strong: #cbd5e1;          /* stronger divider */
  --spt-bg: #ffffff;
  --spt-surface: #f9fafb;                /* gray-50 */
  --spt-soft-bg: #f3f4f6;                /* subtle panels */
  --spt-chip-bg: #eef2ff;                /* indigo-50 */
  --spt-chip-border: #c7d2fe;            /* indigo-200 */
  --spt-chip-text: #1e3a8a;              /* indigo-900 */
  --spt-callout-bg: #e6f0ff;             /* info callout bg */
  --spt-callout-border: #cfe0ff;         /* info callout border */
  --spt-success-bg: #ecfdf5;
  --spt-success-text: #065f46;
  --spt-success-border: #a7f3d0;
  --spt-error-bg: #fef2f2;
  --spt-error-text: #991b1b;
  --spt-error-border: #fecaca;
  --spt-info-bg: #eff6ff;
  --spt-info-text: #1e3a8a;
  --spt-info-border: #bfdbfe;
  --spt-warning-bg: #fef3c7;
  --spt-warning-text: #92400e;
  --spt-warning-border: #fcd34d;
  --spt-shadow-card: 0 6px 18px rgba(15, 23, 42, 0.04);
  --spt-radius: 10px;
  --spt-radius-md: 12px;
  --spt-radius-lg: 16px;
  --spt-title-size: 2rem;
  --spt-subtitle-size: 1.25rem;
  --spt-tool-max-width: 960px;
  /* Legacy aliases */
  --spt-primary-blue: #2A48C0;
  --spt-light-blue: #EBF2FF;
  --spt-dark-blue: #1226AA;
  --spt-text-color: var(--spt-text);
  --spt-border-color: var(--spt-border);
  --spt-background-light: #F7F7F7;
  --spt-gray-message: #666666;
  --spt-success-green: #219B48;
}

/* Typography base */
body {
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
  color: var(--spt-text);
}

/* Base components */
.ui-card,
.spt-card,
.spt-event-card {
  background: var(--spt-bg);
  border: 1px solid var(--spt-border);
  border-radius: var(--spt-radius-md, 12px);
  box-shadow: var(--spt-shadow-card);
  transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.ui-card {
  padding: 1.25rem;
}

.spt-card,
.spt-event-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.spt-card__body {
  padding: 1.25rem;
}

.spt-card__footer {
  margin-top: auto;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--spt-border);
  background: var(--spt-surface);
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}

.spt-card__title {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
  color: var(--spt-text);
}

.spt-card__meta {
  font-size: 0.92rem;
  color: var(--spt-ink-2);
  margin: 0 0 0.75rem;
}

.spt-card__excerpt {
  margin: 0 0 1rem;
  color: var(--spt-ink-2);
  line-height: 1.55;
}

.spt-card__excerpt:last-child {
  margin-bottom: 0;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.spt-title {
  font-size: var(--spt-title-size);
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.015em;
}

.spt-intro {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--spt-text-muted, var(--spt-ink-2));
  max-width: 980px;
}

.spt-tool {
  width: 100%;
  margin: 0 auto;
}

.spt-tool__inner {
  width: 100%;
  max-width: var(--spt-tool-max-width, 960px);
  margin: 0 auto;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.spt-tool__header {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 2vw, 1rem);
}

.spt-tool__shell {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: var(--spt-radius-lg, 16px);
}

.spt-tool__notice {
  margin-top: 30px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(0.85rem, 2vw, 1.25rem);
  align-items: center;
  text-align: center;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  border-radius: var(--spt-radius-lg, 16px);
}

.spt-tool__counter {
  margin: 0;
}

.spt-tool__counter.spt-smarty-counter {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: .85rem;
  color: var(--spt-primary);
  background: var(--spt-light-blue);
  border: 1px solid var(--spt-chip-border);
  border-radius: 999px;
  padding: .35rem .85rem;
}

.spt-subtitle {
  font-size: var(--spt-subtitle-size);
  font-weight: 700;
  margin: 0 0 0.5rem;
}

.spt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.15rem;
  border-radius: var(--spt-radius-md, 12px);
  border: 1px solid var(--spt-primary);
  background: var(--spt-primary);
  color: #fff;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.spt-btn:hover,
.spt-btn:focus {
  background: var(--spt-primary-hover);
  border-color: var(--spt-primary-hover);
}

.spt-btn--primary,
.spt-btn-primary {
  background: var(--spt-primary);
  border-color: var(--spt-primary);
  color: #fff;
}

.spt-btn--secondary {
  background: var(--spt-bg);
  border-color: var(--spt-border-strong);
  color: var(--spt-ink-2);
}

.spt-btn--secondary:hover,
.spt-btn--secondary:focus {
  color: var(--spt-primary);
  border-color: var(--spt-primary);
}

.spt-btn--ghost,
.spt-btn-outline {
  background: var(--spt-bg);
  border-color: var(--spt-primary);
  color: var(--spt-primary);
}

.spt-btn--ghost:hover,
.spt-btn--ghost:focus,
.spt-btn-outline:hover,
.spt-btn-outline:focus {
  background: var(--spt-callout-bg);
}

.spt-btn--sm {
  padding: 0.45rem 0.9rem;
  font-size: 0.92rem;
}

.spt-btn.is-loading {
  opacity: 0.85;
  pointer-events: none;
  position: relative;
}

.spt-btn.is-loading:after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 0.5rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: sptspin 0.8s linear infinite;
}

@keyframes sptspin {
  to {
    transform: rotate(360deg);
  }
}

.spt-messages { 
  display: none;
  margin-top: 0.5rem;
  padding: 0.6rem 0.8rem;
  border-radius: var(--spt-radius-md, 12px);
}
.spt-messages[data-type="success"]{background:var(--spt-success-bg);color:var(--spt-success-text);border:1px solid var(--spt-success-border)}
.spt-messages[data-type="error"]{background:var(--spt-error-bg);color:var(--spt-error-text);border:1px solid var(--spt-error-border)}
.spt-messages[data-type="info"]{background:var(--spt-info-bg);color:var(--spt-info-text);border:1px solid var(--spt-info-border)}

.spt-notice {
  border-radius: var(--spt-radius-md, 12px);
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--spt-border);
  background: var(--spt-soft-bg);
  color: var(--spt-ink-2);
  display: block;
  margin: 1.25rem 0;
}

.spt-notice--info { background: var(--spt-info-bg); border-color: var(--spt-info-border); color: var(--spt-info-text); }
.spt-notice--success { background: var(--spt-success-bg); border-color: var(--spt-success-border); color: var(--spt-success-text); }
.spt-notice--error { background: var(--spt-error-bg); border-color: var(--spt-error-border); color: var(--spt-error-text); }
.spt-notice--warning { background: var(--spt-warning-bg); border-color: var(--spt-warning-border); color: var(--spt-warning-text); }

.spt-notice__actions {
  margin-top: 1rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.spt-notice--flush { margin: 0; }

.spt-chip{display:inline-block;background:var(--spt-chip-bg);border:1px solid var(--spt-chip-border);color:var(--spt-chip-text);padding:.25rem .55rem;border-radius:9999px;margin:.15rem .25rem 0 0;font-size:.9rem}
.spt-pill{display:inline-block;border:1px solid var(--spt-border-strong);padding:.35rem .7rem;border-radius:9999px;color:var(--spt-ink-2);background:var(--spt-bg);text-decoration:none}
.spt-pill:hover{background:var(--spt-surface)}

.spt-input,
.spt-input-text,
.spt-textarea,
select.spt-input{width:100%;border:1px solid var(--spt-border);border-radius:var(--spt-radius,10px);padding:.6rem;background:var(--spt-bg)}

.spt-input-label{font-weight:600;color:var(--spt-text-color);margin-bottom:6px;display:block}

/* Comunidad - página principal */
.spt-community{width:100%;max-width:980px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(1.5rem,3vw,2.5rem)}
.spt-community__header{display:flex;flex-direction:column;gap:clamp(.75rem,2vw,1rem)}
.spt-comm-head{display:flex;flex-direction:column;gap:clamp(1rem,2.5vw,1.75rem)}
.spt-comm-search{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.75rem;align-items:end}
.spt-comm-search .spt-input{width:100%;padding:.8rem 1rem;min-height:44px;border-radius:14px}
.spt-comm-search .spt-btn{min-height:44px;padding:.8rem 1.5rem}

/* Comunidad - directorio */
.spt-community-directory{width:100%;max-width:1080px;margin:0 auto;padding:clamp(1rem,3vw,1.75rem) clamp(1rem,4vw,2rem);display:flex;flex-direction:column;gap:clamp(1.5rem,3vw,2.25rem)}
.spt-community-directory__header{display:flex;flex-direction:column;gap:clamp(.75rem,2vw,1rem)}
.spt-community-directory .spt-search-form{display:flex;flex-wrap:wrap;gap:.75rem;align-items:flex-end}
.spt-community-directory .spt-search-form .spt-input-text{flex:1 1 260px;margin:0}
.spt-community-directory .spt-search-form .spt-btn{flex:0 0 auto}
.spt-community-directory .spt-user-directory{display:grid;gap:clamp(1rem,2.5vw,1.5rem);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.spt-community-directory .spt-user-card{border-radius:var(--spt-radius-md,12px);border:1px solid var(--spt-border);padding:1.25rem;background:var(--spt-bg);display:flex;align-items:center;gap:1rem}
.spt-community-directory .spt-user-avatar{width:60px;height:60px;border-radius:999px;overflow:hidden;flex-shrink:0}
.spt-community-directory .spt-user-avatar img{width:100%;height:100%;object-fit:cover}
.spt-community-directory .spt-user-info{flex:1;display:flex;flex-direction:column;gap:.35rem}


#spt-job-offer-container{display:none;margin-top:20px}
#spt-result-container,.spt-result-area{display:none;padding:20px;margin-top:20px;border:1px solid var(--spt-border-color);border-radius:8px;background:var(--spt-background-light)}
.spt-loading-spinner,#spt-loading-spinner{display:none;text-align:center;padding:20px}
.spt-status-message{display:none;padding:12px 14px;border-radius:8px;margin:14px 0;font-weight:600;color:#fff;text-align:center}
.spt-status-message.spt-msg-success{background:var(--spt-success-green)}
.spt-status-message.spt-msg-error{background:var(--spt-error-bg); color:var(--spt-error-text); border:1px solid var(--spt-error-border)}

/* Perfil (extracto) */
.spt-user-card{border:1px solid var(--spt-border);border-radius:var(--spt-radius-md,12px);padding:1.25rem;margin-bottom:15px;background:var(--spt-bg);display:flex;align-items:center;gap:20px;box-shadow:var(--spt-shadow-card)}
.spt-user-avatar{width:60px;height:60px;border-radius:999px;overflow:hidden;background:var(--spt-surface);display:flex;align-items:center;justify-content:center}
.spt-user-avatar img{width:100%;height:100%;object-fit:cover}
.spt-profile-section{margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid var(--spt-border-color)}
.spt-profile-section:last-child{border-bottom:0}

/* Utilidades de layout */

.spt-empty { color: var(--spt-ink-2); font-size: 1.15rem; margin: 0.75rem 0 2rem; }

.spt-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--spt-border-strong);
  background: var(--spt-surface);
  color: var(--spt-ink-2);
  font-size: 0.85rem;
  font-weight: 600;
  gap: 0.35rem;
}

/* ===== Avisos de actualización de plan ===== */
.spt-upgrade-notice{border:1px solid var(--spt-primary);background:var(--spt-callout-bg);border-radius:var(--spt-radius-md);padding:1.1rem 1.25rem;margin:1.25rem 0;color:var(--spt-ink-2)}
.spt-upgrade-notice__title{margin:0 0 .35rem;color:var(--spt-primary);font-weight:700;font-size:1.05rem}
.spt-upgrade-notice__text{margin:0 0 .65rem;line-height:1.45}
.spt-upgrade-notice .spt-btn{margin-top:.25rem}
.spt-upgrade-notice--inline{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin:.75rem 0;padding:.85rem 1rem}
.spt-upgrade-notice--inline .spt-upgrade-notice__title{margin:0}
.spt-upgrade-notice--inline .spt-upgrade-notice__text{margin:0}
.spt-upgrade-inline{margin-top:.75rem}
.spt-upgrade-inline .spt-upgrade-notice{margin:0}

/* ===== Catálogo de planes ===== */
.spt-plan-catalog{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin:1.5rem 0}
.spt-plan-catalog--list{grid-template-columns:1fr}
.spt-plan-card{display:flex;flex-direction:column;gap:1.25rem}
.spt-plan-card__header{display:flex;flex-direction:column;gap:.25rem}
.spt-plan-card__title{margin:0;font-size:1.35rem;font-weight:700;color:var(--spt-text)}
.spt-plan-card__price{margin:0;font-size:1.6rem;font-weight:700;color:var(--spt-primary)}
.spt-plan-card__duration{margin:0;color:var(--spt-ink-2);font-weight:500}
.spt-plan-card__content{color:var(--spt-ink-2)}
.spt-plan-card__content>:last-child{margin-bottom:0}
.spt-plan-card__features{display:flex;flex-direction:column;gap:1rem}
.spt-plan-group{border-top:1px solid var(--spt-border);padding-top:1rem}
.spt-plan-group:first-of-type{border-top:0;padding-top:0}
.spt-plan-group__title{margin:0 0 .35rem;font-size:1.05rem;font-weight:600;color:var(--spt-text)}
.spt-plan-group__description{margin:0 0 .6rem;color:var(--spt-ink-2);font-size:.95rem}
.spt-plan-group__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.spt-plan-group__section{display:flex;flex-direction:column;gap:.6rem}
.spt-plan-group__section+.spt-plan-group__section{margin-top:.75rem}
.spt-plan-group__section-title{margin:.5rem 0 0;font-size:.85rem;font-weight:600;color:var(--spt-ink-2)}
.spt-plan-group__section--included .spt-plan-group__section-title{color:var(--spt-primary)}
.spt-plan-group__section--excluded .spt-plan-group__section-title{color:var(--spt-muted)}
.spt-plan-feature{list-style:none}
.spt-plan-group__list--included .spt-plan-feature,.spt-plan-group__list--excluded .spt-plan-feature{position:relative;padding-left:1.75rem}
.spt-plan-group__list--included .spt-plan-feature:before{content:"\2713";position:absolute;left:0;top:.1rem;color:var(--spt-primary);font-size:.95rem}
.spt-plan-group__list--excluded .spt-plan-feature:before{content:"\2715";position:absolute;left:0;top:.1rem;color:var(--spt-muted);font-size:.95rem}
.spt-plan-feature__label{display:block;font-weight:600;color:var(--spt-text)}
.spt-plan-feature__limit{display:block;font-size:.85rem;color:var(--spt-primary);margin-top:.1rem}
.spt-plan-feature__description{margin:.35rem 0 0;color:var(--spt-ink-2);font-size:.9rem}
.spt-plan-feature--excluded .spt-plan-feature__label{color:var(--spt-muted)}
.spt-plan-feature--excluded .spt-plan-feature__description{color:var(--spt-muted)}
.spt-plan-card__actions{margin-top:auto}
.spt-plan-card__actions .spt-btn{width:100%;text-align:center}
.spt-plan-card__current{display:flex;align-items:center;justify-content:center;width:100%;padding:.75rem .9rem;border-radius:12px;background:var(--spt-soft-bg);color:var(--spt-ink-2);font-weight:600;text-align:center}
.spt-plan-card.is-highlighted .spt-plan-card__current{background:var(--spt-chip-bg);color:var(--spt-chip-text)}
.spt-plan-card.is-highlighted{border:2px solid var(--spt-primary);box-shadow:0 12px 32px rgba(29,78,216,.14)}
@media (max-width:720px){.spt-plan-card__actions .spt-btn{width:100%}}