/* IdeasCenter — Componentes
 * Source: "Design System IdeasCenter.dc.html" §04 UI.
 * Every size, color, weight, padding and radius below is taken verbatim from
 * the brand manual. The manual expressed hover/focus via the Claude Design
 * runtime's `style-hover=` / `style-focus=` attributes; those are converted
 * here into real :hover / :focus-visible rules.
 */

/* ======================================================================
 * Panel — la superficie blanca redondeada que envuelve casi todo el manual
 * ==================================================================== */
.ic-panel {
  background: var(--ic-color-superficie);
  border-radius: var(--ic-radio-xl);
  padding: var(--ic-espacio-3xl);
  box-shadow: var(--ic-sombra-panel);
  display: flex;
  flex-direction: column;
  gap: var(--ic-espacio-lg);
}

/* Variante amplia: usada por el specimen tipográfico (36px 40px) */
.ic-panel--amplio {
  padding: 36px var(--ic-espacio-4xl);
  gap: 18px;
}

/* ======================================================================
 * Button
 * ==================================================================== */
.ic-btn {
  font-family: var(--ic-fuente);
  font-size: var(--ic-texto-control);
  border-radius: var(--ic-radio-md);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.ic-btn:focus-visible {
  outline: 3px solid var(--ic-amarillo);
  outline-offset: 2px;
}

.ic-btn[disabled],
.ic-btn--disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* Primario — amarillo sobre azul, la CTA de la marca */
.ic-btn--primario {
  font-weight: var(--ic-peso-bold);
  color: var(--ic-azul);
  background: var(--ic-amarillo);
  padding: var(--ic-espacio-md) var(--ic-espacio-2xl);
}

.ic-btn--primario:hover:not([disabled]) {
  background: var(--ic-amarillo-hover);
  color: var(--ic-azul);
}

/* Secundario — azul marino sólido */
.ic-btn--secundario {
  font-weight: var(--ic-peso-bold);
  color: var(--ic-blanco);
  background: var(--ic-azul);
  padding: var(--ic-espacio-md) var(--ic-espacio-2xl);
}

.ic-btn--secundario:hover:not([disabled]) {
  background: var(--ic-azul-hover);
  color: var(--ic-blanco);
}

/* Outline — borde azul de 2px, se rellena al hover */
.ic-btn--outline {
  font-weight: var(--ic-peso-semibold);
  color: var(--ic-azul);
  background: transparent;
  border: 2px solid var(--ic-azul);
  padding: 12px 26px;
}

.ic-btn--outline:hover:not([disabled]) {
  background: var(--ic-azul);
  color: var(--ic-blanco);
}

/* Texto — enlace de acción, sin fondo ni borde */
.ic-btn--texto {
  font-weight: var(--ic-peso-semibold);
  color: var(--ic-color-texto-suave);
  background: transparent;
  padding: var(--ic-espacio-md) var(--ic-espacio-lg);
}

.ic-btn--texto:hover:not([disabled]) {
  color: var(--ic-azul);
}

/* ======================================================================
 * Card
 * ==================================================================== */
.ic-tarjeta {
  border-radius: var(--ic-radio-lg);
  border: 1px solid var(--ic-color-borde-suave);
  overflow: hidden;
  background: var(--ic-color-superficie);
}

.ic-tarjeta__media {
  height: 120px;
  background: var(--ic-degradado-azul);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* El cuadrado amarillo del logo, usado como marca dentro de la cabecera */
.ic-tarjeta__marca {
  width: 46px;
  height: 46px;
  border-radius: var(--ic-radio-md);
  background: var(--ic-amarillo);
}

.ic-tarjeta__cuerpo {
  padding: 22px var(--ic-espacio-xl);
  display: flex;
  flex-direction: column;
  gap: var(--ic-espacio-xs);
}

.ic-tarjeta__titulo {
  margin: 0;
  font-weight: var(--ic-peso-bold);
  font-size: var(--ic-texto-tarjeta);
  color: var(--ic-color-texto);
}

.ic-tarjeta__texto {
  margin: 0;
  font-weight: var(--ic-peso-light);
  font-size: var(--ic-texto-pequeno);
  line-height: var(--ic-interlineado-medio);
  color: var(--ic-color-texto-suave);
}

.ic-tarjeta__enlace {
  margin-top: var(--ic-espacio-2xs);
  font-weight: var(--ic-peso-semibold);
  font-size: var(--ic-texto-pequeno);
  color: var(--ic-color-primario);
  text-decoration: none;
}

.ic-tarjeta__enlace:hover {
  color: var(--ic-color-acento);
}

/* ======================================================================
 * Badge / Etiqueta
 * ==================================================================== */
.ic-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--ic-fuente);
  font-size: var(--ic-texto-micro);
  padding: 7px var(--ic-espacio-md);
  border-radius: var(--ic-radio-pill);
  white-space: nowrap;
}

.ic-badge--destacado {
  font-weight: var(--ic-peso-bold);
  color: var(--ic-azul);
  background: var(--ic-amarillo-suave);
}

.ic-badge--nuevo {
  font-weight: var(--ic-peso-semibold);
  color: var(--ic-blanco);
  background: var(--ic-azul);
}

.ic-badge--neutro {
  font-weight: var(--ic-peso-semibold);
  color: var(--ic-color-texto-suave);
  background: var(--ic-color-borde-suave);
}

/* ======================================================================
 * Field — etiqueta + campo de texto
 * ==================================================================== */
.ic-campo {
  display: flex;
  flex-direction: column;
  gap: var(--ic-espacio-xs);
}

.ic-campo__label {
  font-weight: var(--ic-peso-semibold);
  font-size: var(--ic-texto-etiqueta);
  color: var(--ic-color-texto-cuerpo);
}

.ic-campo__input {
  font-family: var(--ic-fuente);
  font-weight: var(--ic-peso-regular);
  font-size: var(--ic-texto-control);
  color: var(--ic-color-texto);
  background: var(--ic-color-superficie);
  padding: 13px var(--ic-espacio-ml);
  border: 1.5px solid var(--ic-color-borde);
  border-radius: var(--ic-radio-md);
  outline: none;
  width: 100%;
  transition: border-color .18s ease;
}

.ic-campo__input::placeholder {
  color: var(--ic-color-texto-tenue);
}

.ic-campo__input:focus {
  border-color: var(--ic-amarillo);
}

.ic-campo__input[disabled] {
  background: var(--ic-color-fondo);
  color: var(--ic-color-texto-tenue);
  cursor: not-allowed;
}

/* Mensaje de ayuda opcional bajo el campo */
.ic-campo__ayuda {
  font-weight: var(--ic-peso-regular);
  font-size: var(--ic-texto-micro);
  color: var(--ic-color-texto-tenue);
}

/* ======================================================================
 * Logo — marco de presentación + imagen
 * ==================================================================== */
.ic-logo-marco {
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ic-espacio-3xl);
  border-radius: var(--ic-radio-xl);
  overflow: hidden;
}

/* Fondos autorizados: cada versión del logo tiene el suyo */
.ic-logo-marco--claro { background: var(--ic-blanco); }
.ic-logo-marco--gris { background: var(--ic-color-fondo); }
.ic-logo-marco--azul { background: var(--ic-azul); }
.ic-logo-marco--amarillo { background: var(--ic-amarillo); }

.ic-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}