/* ============================================================
   Carta de Colores – Frontend Styles
   ============================================================ */

:root {
  --cc-font:         'Segoe UI', system-ui, sans-serif;
  --cc-radius:       4px;
  --cc-swatch-h:     80px;
  --cc-label-bg:     #fff;
  --cc-label-color:  #333;
  --cc-section-bg:   #f5f5f5;
  --cc-header-bg:    #8B3A42;
  --cc-header-color: #fff;
  --cc-border:       #e0e0e0;
  --cc-shadow:       0 2px 8px rgba(0,0,0,.10);
  --cc-gap:          10px;
  --cc-cols:         5;
}

/* ---- Wrapper ---- */
.cc-carta-wrapper {
  font-family: var(--cc-font);
  color: var(--cc-label-color);
  margin: 24px 0;
}
.cc-empty { color: #888; font-style: italic; }

/* ---- Collection ---- */
.cc-coleccion {
  margin-bottom: 12px;
  border: 1px solid var(--cc-border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

/* ---- Accordion button ---- */
.cc-acordeon-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--cc-header-bg);
  color: var(--cc-header-color);
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--cc-font);
  transition: background .18s;
}
.cc-acordeon-btn:hover {
  background: #6E2D34;
}
.cc-acordeon-titulo {
  flex: 1;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.cc-acordeon-count {
  font-size: .72rem;
  font-weight: 400;
  opacity: .6;
  text-transform: none;
  letter-spacing: 0;
}
.cc-acordeon-desc {
  font-size: .8rem;
  opacity: .7;
  font-weight: 400;
  margin-right: 8px;
}
.cc-acordeon-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  transition: transform .28s ease;
}
.cc-abierta .cc-acordeon-icon {
  transform: rotate(180deg);
}

/* ---- Accordion panel (animate height) ---- */
.cc-acordeon-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.cc-acordeon-panel:not([hidden]) {
  grid-template-rows: 1fr;
}
/* hidden attribute resets display; override to keep animation */
.cc-acordeon-panel[hidden] {
  display: grid !important;
  visibility: hidden;
}
.cc-acordeon-inner {
  overflow: hidden;
}

/* ---- Swatches inside panel ---- */
.cc-acordeon-inner .cc-swatches {
  border: none;
  border-top: 1px solid var(--cc-border);
  border-radius: 0;
}
.cc-coleccion-desc {
  margin: 4px 0 0;
  color: #666;
  font-size: .9rem;
}

/* ---- Section ---- */
.cc-seccion {
  margin-bottom: 32px;
}
.cc-section-header {
  background: var(--cc-header-bg);
  color: var(--cc-header-color);
  padding: 10px 18px;
  border-radius: var(--cc-radius) var(--cc-radius) 0 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.cc-section-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: inherit;
}
.cc-section-desc {
  font-size: .8rem;
  opacity: .75;
}

/* ---- Swatches grid ---- */
.cc-swatches {
  display: grid;
  grid-template-columns: repeat(var(--cc-cols), 1fr);
  gap: var(--cc-gap);
  padding: 16px;
  background: #fafafa;
  border: 1px solid var(--cc-border);
  border-top: none;
  border-radius: 0 0 var(--cc-radius) var(--cc-radius);
}

/* ---- Individual swatch ---- */
.cc-swatch {
  display: flex;
  flex-direction: column;
  border-radius: var(--cc-radius);
  overflow: hidden;
  box-shadow: var(--cc-shadow);
  background: var(--cc-label-bg);
  transition: transform .18s ease, box-shadow .18s ease;
  cursor: default;
}
.cc-swatch:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  z-index: 2;
}

/* color block */
.cc-swatch-color {
  height: var(--cc-swatch-h);
  position: relative;
  overflow: hidden;
}
.cc-swatch-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 4px;
  opacity: 0;
  transition: opacity .18s;
  background: rgba(0,0,0,.18);
}
.cc-swatch:hover .cc-swatch-overlay { opacity: 1; }
.cc-hex {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 2px 5px;
  border-radius: 2px;
  background: rgba(255,255,255,.85);
  color: #111;
}

/* label */
.cc-swatch-label {
  padding: 6px 6px 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-height: 40px;
}
.cc-code {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: #555;
  line-height: 1.2;
}
.cc-name {
  font-size: .72rem;
  color: #333;
  text-align: center;
  line-height: 1.2;
  word-break: break-word;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .cc-swatches { --cc-cols: 4; }
}
@media (max-width: 768px) {
  .cc-swatches { --cc-cols: 3; gap: 8px; padding: 12px; }
  .cc-swatch-color { height: 70px; }
}
@media (max-width: 480px) {
  .cc-swatches { --cc-cols: 2; gap: 6px; padding: 8px; }
  .cc-swatch-color { height: 60px; }
}

/* ---- List layout ---- */
.cc-layout-list .cc-swatches {
  grid-template-columns: 1fr;
}
.cc-layout-list .cc-swatch {
  flex-direction: row;
  align-items: center;
}
.cc-layout-list .cc-swatch-color {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: var(--cc-radius) 0 0 var(--cc-radius);
}
.cc-layout-list .cc-swatch-label {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
}
.cc-layout-list .cc-name { font-size: .9rem; }
.cc-layout-list .cc-code { font-size: .8rem; }

/* ---- Forced column overrides (inline var handles it, these are fallbacks) ---- */
.cc-cols-2  { --cc-cols: 2 !important; }
.cc-cols-3  { --cc-cols: 3 !important; }
.cc-cols-4  { --cc-cols: 4 !important; }
.cc-cols-5  { --cc-cols: 5 !important; }
.cc-cols-6  { --cc-cols: 6 !important; }
.cc-cols-7  { --cc-cols: 7 !important; }
.cc-cols-8  { --cc-cols: 8 !important; }