/* [ucr_representantes] — tarjetas de "UCR en Gestión", diseño 2026 del sitio. */
.ucr-gd-rep {
  --ucr-red: #E41D2E;
  --ucr-ink: #2D2D2D;
  --ucr-muted: #666666;
  --ucr-line: #E2E2E2;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--ucr-ink);
}
.ucr-gd-rep *, .ucr-gd-rep *::before, .ucr-gd-rep *::after { box-sizing: border-box; }
.ucr-gd-rep p, .ucr-gd-rep h3 { margin: 0; }
.ucr-gd-rep [hidden] { display: none !important; }
.ucr-gd-rep .ucr-gd-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Pestañas */
.ucr-gd-rep-tabs { display: flex; gap: 32px; overflow-x: auto; border-bottom: 1px solid var(--ucr-line); scrollbar-width: none; }
.ucr-gd-rep-tabs::-webkit-scrollbar { display: none; }
.ucr-gd-rep-tab {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  margin: 0 0 -1px;
  padding: 0 0 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none !important;
  font-family: "Outfit", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ucr-ink) !important;
  text-decoration: none !important;
  cursor: pointer;
  white-space: nowrap;
}
.ucr-gd-rep-tab:hover, .ucr-gd-rep-tab:focus { color: var(--ucr-red) !important; background: none !important; }
.ucr-gd-rep-tab[aria-selected="true"] { border-bottom-color: var(--ucr-red); color: var(--ucr-red) !important; }
.ucr-gd-rep-cuenta { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; background: #F5F5F5; font-family: "Inter", sans-serif; font-size: 11px; font-weight: 700; color: var(--ucr-muted); }
.ucr-gd-rep-tab[aria-selected="true"] .ucr-gd-rep-cuenta { background: #FDF2F2; color: var(--ucr-red); }

/* Buscador */
.ucr-gd-rep-buscar {
  position: relative;
  display: flex;
  align-items: center;
  height: 52px;
  margin: 32px 0;
  padding: 0 16px 0 48px;
  border: 1px solid var(--ucr-line);
  border-radius: 8px;
  background: #fff;
}
.ucr-gd-rep-buscar:focus-within { border-color: var(--ucr-ink); }
.ucr-gd-rep-lupa { position: absolute; left: 16px; width: 20px; height: 20px; }
.ucr-gd-rep-lupa::before {
  position: absolute; inset: 0;
  background: var(--ucr-muted);
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M17.5 17.5l-3.62-3.62M15.83 9.17a6.67 6.67 0 1 1-13.33 0 6.67 6.67 0 0 1 13.33 0Z' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M17.5 17.5l-3.62-3.62M15.83 9.17a6.67 6.67 0 1 1-13.33 0 6.67 6.67 0 0 1 13.33 0Z' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ucr-gd-rep-buscar input[type="search"] {
  flex: 1;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0 !important;
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  font-family: inherit;
  font-size: 15px;
  color: var(--ucr-ink);
  -webkit-appearance: none;
  appearance: none;
}
.ucr-gd-rep-buscar input::placeholder { color: var(--ucr-muted); }

/* Tarjetas: foto (o iniciales) redonda a la izquierda + datos */
.ucr-gd-rep-grilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ucr-gd-rep-card { display: flex; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--ucr-line); border-radius: 8px; background: #fff; }
.ucr-gd-rep-media { display: grid; flex: none; place-items: center; width: 72px; height: 72px; overflow: hidden; border-radius: 50%; background: #FDF2F2; }
.ucr-gd-rep-media img { display: block; width: 100%; height: 100% !important; max-width: none; object-fit: cover; }
.ucr-gd-rep-iniciales { font-family: "Outfit", sans-serif; font-size: 24px; font-weight: 800; color: var(--ucr-red); letter-spacing: .5px; }
.ucr-gd-rep-body { min-width: 0; }
.ucr-gd-rep-nombre { font-family: "Outfit", sans-serif !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1.25 !important; color: var(--ucr-ink) !important; }
.ucr-gd-rep-cargo { margin-top: 4px !important; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ucr-red); }
.ucr-gd-rep-lugar { margin-top: 2px !important; font-size: 13px; line-height: 1.3; color: var(--ucr-muted); }
.ucr-gd-rep-vacio { padding: 48px 0; font-size: 15px; color: var(--ucr-muted); text-align: center; }

/* Pestañas en formato tabla (Concejales: Nombre (cargo) / Distrito; Convención: Nombre / Distrito / Sección / Cargo) + Contacto si hay datos.
   Sin iniciales: foto chica solo si hay. */
.ucr-gd-rep-tabla { width: 100%; margin: 0; border: 1px solid var(--ucr-line); border-collapse: separate; border-spacing: 0; border-radius: 8px; overflow: hidden; background: #fff; font-size: 14px; }
.ucr-gd-rep-tabla thead { display: table-header-group; }
.ucr-gd-rep-tabla tbody { display: table-row-group; }
.ucr-gd-rep-tabla tr { display: table-row; }
.ucr-gd-rep-tabla th, .ucr-gd-rep-tabla td { display: table-cell; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--ucr-line); text-align: left; vertical-align: middle; background: none; }
.ucr-gd-rep-tabla thead th { background: #FAFAFA; font-family: "Outfit", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .3px; color: var(--ucr-muted); text-transform: uppercase; }
.ucr-gd-rep-tabla tbody tr:last-child td { border-bottom: 0; }
.ucr-gd-rep-tabla tbody tr:hover td { background: #FDF2F2; }
.ucr-gd-rep-tabla-nombre { font-family: "Outfit", sans-serif; font-size: 15px; font-weight: 700; color: var(--ucr-ink); }
.ucr-gd-rep-tabla-persona { display: flex; align-items: center; gap: 12px; }
.ucr-gd-rep-tabla-foto { flex: none; width: 36px !important; height: 36px !important; max-width: none; border-radius: 50%; object-fit: cover; }
.ucr-gd-rep-tabla-lugar { color: var(--ucr-muted); }
.ucr-gd-rep-tabla-aclaracion { font-family: "Inter", sans-serif; font-size: 13px; font-weight: 400; color: var(--ucr-muted); }
.ucr-gd-rep-th-nombre { width: 45%; }
.ucr-gd-rep-tabla--5col .ucr-gd-rep-th-nombre, .ucr-gd-rep-tabla--4col .ucr-gd-rep-th-nombre { width: 36%; }
.ucr-gd-rep-th-seccion, .ucr-gd-rep-th-cargo { width: 13%; }
.ucr-gd-rep-tabla-seccion { color: var(--ucr-muted); }
.ucr-gd-rep-tabla-cargo { color: var(--ucr-ink); }
.ucr-gd-rep-tabla-contacto { white-space: nowrap; }
.ucr-gd-rep-tabla-contacto a { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 6px; border-radius: 50%; background: #F5F5F5; color: var(--ucr-ink) !important; font-size: 14px; text-decoration: none !important; transition: background .15s, color .15s; }
.ucr-gd-rep-tabla-contacto a:hover, .ucr-gd-rep-tabla-contacto a:focus { background: var(--ucr-red); color: #fff !important; }

@media (max-width: 900px) { .ucr-gd-rep-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .ucr-gd-rep-grilla { grid-template-columns: 1fr; }
  .ucr-gd-rep-tabs { gap: 24px; }
  /* Tabla en celular: cada persona en un bloque (nombre arriba, distrito y cargo abajo) */
  .ucr-gd-rep-tabla thead { display: none; }
  .ucr-gd-rep-tabla, .ucr-gd-rep-tabla tbody { display: block; }
  .ucr-gd-rep-tabla tr.ucr-gd-rep-fila { display: block; padding: 12px 16px; border-bottom: 1px solid var(--ucr-line); }
  .ucr-gd-rep-tabla tr.ucr-gd-rep-fila[hidden] { display: none !important; }
  .ucr-gd-rep-tabla tbody tr:last-child { border-bottom: 0; }
  .ucr-gd-rep-tabla td { display: inline; padding: 0; border: 0; font-size: 13px; }
  .ucr-gd-rep-tabla td.ucr-gd-rep-tabla-nombre { display: block; margin-bottom: 4px; font-size: 15px; }
  .ucr-gd-rep-tabla td.ucr-gd-rep-tabla-seccion:not(:empty)::before, .ucr-gd-rep-tabla td.ucr-gd-rep-tabla-cargo:not(:empty)::before { content: " · "; }
  .ucr-gd-rep-tabla td.ucr-gd-rep-tabla-contacto:not(:empty) { display: block; margin-top: 8px; }
}