/* ZelvIA 2.0 — sello de prueba.
 * Resguardo navy con isotipo, borde troquelado, fecha y condiciones.
 * Uso: <zelvia-sello data-fecha="12 sep 2026" data-cond="Plan gratuito,España">
 * Tres niveles (DESIGN.md §6): data-nivel="probado" (default, navy) | "usada" (#2A3B52) | "revisada" (#56606C)
 * Espaciados de la escala cerrada (DESIGN.md §4 bis): 4·8·12·16·24·32…
 */

zelvia-sello {
  display: block;
}

.zv-sello {
  display: flex;
  align-items: stretch;
  border-radius: var(--zv-radius-btn, 14px);
  border: 1px solid var(--zv-reading-line, #E3DCCD);
  background: var(--zv-reading-surface, #FFFDF8);
  background-image: var(--zv-grain);
  box-shadow: var(--zv-shadow-e1, inset 0 1px 0 #fff, 0 1px 0 rgba(60,48,26,.10), 0 6px 12px -10px rgba(60,48,26,.5));
  overflow: hidden;
  max-width: 560px;
}

/* Tira izquierda navy */
.zv-sello__navy {
  display: grid;
  place-items: center;
  flex: 0 0 74px;
  width: 74px;
  background: #0B1622;
  position: relative;
}

/* Borde troquelado — semicírculos radial-gradient simulando perforaciones */
.zv-sello__navy::after {
  content: "";
  position: absolute;
  right: -7px;
  top: 0;
  bottom: 0;
  width: 14px;
  background: radial-gradient(
    circle at 7px 7px,
    var(--zv-reading-surface, #FFFDF8) 5px,
    transparent 5.5px
  ) 0 0 / 14px 14px repeat-y;
}

/* Isotipo SVG en la tira navy */
.zv-sello__isotipo {
  display: block;
}

/* Usada: tira azul pizarra en lugar de navy (valor de la maestra) */
.zv-sello--usada .zv-sello__navy {
  background: #2A3B52;
}

/* Revisada: tira gris en lugar de navy (valor de la maestra) */
.zv-sello--revisada .zv-sello__navy {
  background: #56606C;
}

/* Contenido derecho — padding de escala: 12 top/bottom, 24 right, 16 left (paso 22→24, 14→12, 18→16) */
.zv-sello__body {
  padding: 12px 24px 12px 16px;
  min-width: 0;
}

.zv-sello__fecha {
  display: block;
  font-family: var(--zv-font-ui);
  font-size: 15px;
  font-weight: var(--zv-font-weight-semibold);
  color: var(--zv-reading-ink, #0B1320);
  line-height: 1.3;
}

.zv-sello__condiciones {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 8px;
}

.zv-sello__cond {
  font-family: var(--zv-font-ui);
  font-size: 13px;
  color: var(--zv-reading-muted, #56606C);
  background: var(--zv-color-bg-panel, #ECE5D6);
  border-radius: var(--zv-radius-label, 6px);
  padding: 4px 8px;
  white-space: nowrap;
}

/* Compacto: variante para fichas */
.zv-sello--sm .zv-sello__navy { flex: 0 0 52px; width: 52px; }
.zv-sello--sm .zv-sello__navy::after {
  right: -6px; width: 12px;
  background: radial-gradient(
    circle at 6px 6px,
    var(--zv-reading-surface, #FFFDF8) 4px,
    transparent 4.5px
  ) 0 0 / 12px 12px repeat-y;
}
/* SM body — padding de escala: 8 top/bottom, 16 right, 12 left */
.zv-sello--sm .zv-sello__body { padding: 8px 16px 8px 12px; }
.zv-sello--sm .zv-sello__fecha { font-size: 14px; }
.zv-sello--sm .zv-sello__cond { font-size: 12px; padding: 4px 8px; }