/* Ventajas & Desventajas – estilos elegantes 1.1.0 */
/* Base tokens */
:root {
  --vd-radius: 16px;
  --vd-gap: 12px;
  --vd-pad: 16px;
  --vd-shadow: 0 8px 24px rgba(0,0,0,.08);
  --vd-fg: #111827; /* negro legible */
}

/* Caja base */
.vd-box {
  border-radius: var(--vd-radius);
  padding: var(--vd-pad);
  background: var(--vd-bgbox, #ffffff);
  color: var(--vd-text, var(--vd-fg));
  border: 2px solid var(--vd-border, #d1d5db);
  box-shadow: var(--vd-shadow);
  margin: 16px 0; /* Separación con elementos superior/inferior */
  transition: transform .18s ease, box-shadow .18s ease;
}
.vd-box:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0,0,0,.10); }

/* Encabezado */
.vd-head {
  display: flex;
  align-items: center;
  gap: var(--vd-gap);
  margin: 0 0 10px;
}
.vd-title { font-size: clamp(1rem, 2.2vw, 1.1rem); font-weight: 700; margin: 0; }
.vd-ico { width: 1.15em; height: 1.15em; flex: 0 0 auto; fill: var(--vd-border, currentColor); }

/* Contenido */
.vd-content > *:first-child { margin-top: 0; }
.vd-content > *:last-child  { margin-bottom: 0; }
.vd-content p { line-height: 1.6; color: var(--vd-text, var(--vd-fg)); }
.vd-content ul { padding-left: 1.2rem; }
.vd-content li { margin: .35rem 0; }

/* Estilos solicitados por tipo */
.vd-box.ventajas {
  --vd-border: #2563EB;  /* azul */
  --vd-bgbox:  #EFF6FF;  /* azul muy claro */
  --vd-text:   #000000;  /* texto negro */
}
.vd-box.desventajas {
  --vd-border: #DC2626;  /* rojo */
  --vd-bgbox:  #FEF2F2;  /* rojo muy claro */
  --vd-text:   #000000;  /* texto negro */
}

/* <details> colapsable */
.vd-collapsible { padding: 0; overflow: hidden; }
.vd-collapsible > .vd-head { padding: calc(var(--vd-pad) - 4px) var(--vd-pad); cursor: pointer; }
.vd-collapsible > .vd-content { padding: 0 var(--vd-pad) var(--vd-pad); }
.vd-collapsible summary { list-style: none; }
.vd-collapsible summary::-webkit-details-marker { display: none; }

/* Vista móvil: más separación entre cajas y con contenido inferior */
@media (max-width: 640px) {
  :root { --vd-pad: 18px; }
  .vd-box { margin: 22px 0; }
  .vd-head { margin-bottom: 14px; gap: 14px; }
  .vd-content p, .vd-content li { line-height: 1.7; }
}

/* Opcional: desactivar modo oscuro para mantener fondo claro pedido */
@media (prefers-color-scheme: dark) {
  .vd-box.ventajas, .vd-box.desventajas {
    --vd-text: #000000; /* seguimos con texto negro */
  }
}